lfk/selfservice
3
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

Merge pull request 'use new flex grid for responsive displaying action buttons' (#7) from feature/6_profile_action_buttons into dev

Browse Source 
Reviewed-on: #7
close #6
This commit is contained in:
Philipp Dormann 2021-03-02 17:20:17 +00:00
commit 95e84b2efd
1 changed files with 39 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Profile.vue
View File

@ -1,28 +1,19 @@
<template> <template>
<div class="min-h-screen w-full p-4"> <div class="min-h-screen w-full p-4">
<!-- <div class="section-title w-full mb-6 pt-3"> <section class="text-white body-font">
<div class="flex flex-row items-center justify-between mb-4"> <div class="container mx-auto flex items-center md:flex-row flex-col">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-gray-500">Pages</div>
<div class="text-xl font-bold">User profile</div>
</div>
</div>
</div>
<div <div
class="w-full p-4 mb-4 rounded-lg bg-white border border-gray-100 dark:bg-gray-900 dark:border-gray-800" class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
>--> >
<div class="flex flex-row items-center justify-start p-4">
<div class="py-2 px-2">
<p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p> <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
<p class="text-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p> <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
</div> </div>
<div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex"> <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
<button <button
type="button" type="button"
class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg" class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
> >
<svg <svg
style="display:inline;"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
@ -33,6 +24,7 @@
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
class="feather feather-download" class="feather feather-download"
style="display: inline;height: 1rem;vertical-align: sub;"
> >
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
<polyline points="7 10 12 15 17 10" /> <polyline points="7 10 12 15 17 10" />
@ -41,10 +33,11 @@
</button> </button>
<button <button
type="button" type="button"
class="focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50" class="inline-flex focus:border-black focus:ring-2 focus:ring-black text-white text-sm py-2.5 px-5 rounded-md bg-green-600 hover:bg-green-800 hover:shadow-lg opacity-50"
>Änderungen speichern</button> >Änderungen speichern</button>
</div> </div>
</div> </div>
</section>
<div class="flex flex-wrap"> <div class="flex flex-wrap">
<div class="w-full p-4"> <div class="w-full p-4">
<div class="flex flex-wrap flex-col w-full tabs"> <div class="flex flex-wrap flex-col w-full tabs">
@ -53,13 +46,13 @@
<button <button
class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500" class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
type="button" type="button"
>Mein Profil</button> >Profil</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button class="tab tab-underline py-4 px-6 block" type="button">Meine Rundenzeiten</button> <button class="tab tab-underline py-4 px-6 block" type="button">Rundenzeiten</button>
</div> </div>
<div class="flex-none"> <div class="flex-none">
<button class="tab tab-underline py-4 px-6 block" type="button">Meine Spender</button> <button class="tab tab-underline py-4 px-6 block" type="button">Spender</button>
</div> </div>
</div> </div>
<div class="tab-content block"> <div class="tab-content block">
@ -240,7 +233,6 @@
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</template> </template>
<script setup> <script setup>