From 2b9c454395a4789236878b7e2a77dc1fa230eafe Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Tue, 2 Mar 2021 17:55:51 +0100
Subject: [PATCH] use new flex grid for responsive displaying action buttons

ref #6
---
 src/components/Profile.vue | 86 +++++++++++++++++---------------------
 1 file changed, 39 insertions(+), 47 deletions(-)

diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index d5d0718..27cc3f3 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -1,50 +1,43 @@
 <template>
   <div class="min-h-screen w-full p-4">
-    <!-- <div class="section-title w-full mb-6 pt-3">
-      <div class="flex flex-row items-center justify-between mb-4">
-        <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>
+    <section class="text-white body-font">
+      <div class="container mx-auto flex items-center md:flex-row flex-col">
+        <div
+          class="flex flex-col md:pr-10 md:mb-0 mb-6 pr-0 w-full md:w-auto md:text-left text-center"
+        >
+          <p class="text-3xl font-bold whitespace-nowrap">Max Mustermann</p>
+          <p class="text-md text-gray-200 whitespace-nowrap">Musterfirma > PR</p>
+        </div>
+        <div class="inline-flex md:ml-auto md:mr-0 mx-auto items-center space-x-4">
+          <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"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              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" />
+              <polyline points="7 10 12 15 17 10" />
+              <line x1="12" y1="15" x2="12" y2="3" />
+            </svg> Urkunde herunterladen
+          </button>
+          <button
+            type="button"
+            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>
         </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"
-    >-->
-    <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-md text-gray-500 whitespace-nowrap">Musterfirma > PR</p>
-      </div>
-      <div class="ml-auto flex-shrink-0 space-x-2 hidden lg:flex">
-        <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"
-        >
-          <svg
-            style="display:inline;"
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            class="feather feather-download"
-          >
-            <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" />
-            <line x1="12" y1="15" x2="12" y2="3" />
-          </svg> Urkunde herunterladen
-        </button>
-        <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"
-        >Änderungen speichern</button>
-      </div>
-    </div>
+    </section>
     <div class="flex flex-wrap">
       <div class="w-full p-4">
         <div class="flex flex-wrap flex-col w-full tabs">
@@ -53,13 +46,13 @@
               <button
                 class="tab tab-underline tab-active py-4 px-6 block border-b-2 font-medium border-blue-500"
                 type="button"
-              >Mein Profil</button>
+              >Profil</button>
             </div>
             <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 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 class="tab-content block">
@@ -240,7 +233,6 @@
       </div>
     </div>
   </div>
-  <!-- </div> -->
 </template>
 
 <script setup>