- wip

resources/js/Shared/DeployInfo.vue

@@ -1,7 +1,6 @@
 <template>
   <div
-    :class="{ 'flex-col': isVertical(), 'flex-row': isHorizontal() }"
-    class="min-w-full p-4 text-xs text-gray-500 flex gap-x-1"
+    class="min-w-full p-4 text-xs text-gray-500 flex flex-row gap-x-1"
   >
     <p class="flex flex-col sm:flex-row gap-x-1">
       <span class="font-bold whitespace-nowrap">Wersja:</span>
@@ -14,22 +13,17 @@
     </p>
     <p
       v-if="deployInformation.release_created_at"
-      class="flex flex-col sm:flex-row gap-x-1"
-      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal() }"
+      class="flex flex-col sm:flex-row gap-x-1 border-l-2 border-gray-300 pl-1"
     >
       <span class="font-bold whitespace-nowrap">Ostatnio zbudowano:</span>
       <span>{{ getDate() }}</span>
     </p>
     <p
       v-if="deployInformation.github_url"
-      :class="{ 'border-l-2 border-gray-300 pl-1': isHorizontal(), 'flex flex-col sm:flex-row gap-x-1': isVertical() }"
+      class="flex flex-col sm:flex-row gap-x-1 border-l-2 border-gray-300 pl-1"
     >
-      <span
-        v-if="isVertical()"
-        class="font-bold whitespace-nowrap"
-      >
-        Repozytorium:
-      </span>
+      <span class="hidden sm:block font-bold whitespace-nowrap">Repozytorium:</span>
+      <span class="block sm:hidden font-bold whitespace-nowrap">Repo:</span>
       <a
         v-if="deployInformation.github_url"
         class="text-gray-800 whitespace-nowrap underline hover:no-underline hover:text-blumilk-600"
@@ -46,20 +40,8 @@ import { DateTime } from 'luxon'
 
 let props = defineProps({
   deployInformation: Object,
-  layout: {
-    type: String,
-    default: 'horizontal',
-  },
 })
 
-function isVertical() {
-  return props.layout === 'vertical'
-}
-
-function isHorizontal() {
-  return props.layout === 'horizontal'
-}
-
 function getDate() {
   return DateTime.fromISO(props.deployInformation.release_created_at)
     .toLocaleString({

resources/js/Shared/Layout/AppLayout.vue

@@ -9,7 +9,7 @@
       <div class="lg:px-4">
         <slot />
       </div>
-      <div class="h-8 md:h-4"></div>
+      <div class="h-8 sm:h-4"></div>
     </main>
     <DeployInfo
       :deploy-information="deployInformation"

resources/js/Shared/Layout/GuestLayout.vue

@@ -3,8 +3,7 @@
     <slot />
     <DeployInfo
       :deploy-information="deployInformation"
-      layout="vertical"
-      class="absolute right-0 bottom-0"
+      class="absolute left-0 bottom-0 justify-end"
     />
   </div>
 </template>