Fixed mobile design

buildix · Dec 10, 2022 · 539c235 · 539c235
1 parent e28baa4
commit 539c235
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 44 deletions.
diff --git a/resources/dist/timex.css b/resources/dist/timex.css
@@ -27,19 +27,31 @@
     text-align: left;
     height: 65px;
 }
+
+.timex-day-month {
+    display: none;
+}
+
 .timex-event {
-    visibility: hidden;
+    display: none;
+}
+
+.timex-event-widget {
+    display: none;
+}
+
+.timex-header-create-button {
+    display: none;
 }
 
+
 @media (min-width: 640px) {
     .timex-day {
         align-items: center;
         text-align: left;
         height: 65px;
     }
-    .timex-event {
-        visibility: hidden;
-    }
+
 }
 
 @media (min-width: 768px) {
@@ -48,8 +60,9 @@
         text-align: left;
         height: 65px;
     }
-    .timex-event {
-        visibility: hidden;
+
+    .timex-header-create-button {
+        display: initial;
     }
 }
 
@@ -60,30 +73,19 @@
         height: 130px;
     }
     .timex-event {
-        visibility: visible;
+        display: initial;
         height: 88px;
     }
-}
 
-@media (min-width: 1280px) {
-    .timex-day {
-        align-items: center;
-        text-align: left;
-        height: 130px;
+    .timex-day-month {
+        display: initial;
     }
-    .timex-event {
-        visibility: visible;
-        height: 88px;
-    }
-}
 
-@media (min-width: 1536px) {
-    .timex-day {
-        align-items: center;
-        text-align: left;
-        height: 130px;
+    .timex-event-widget {
+        display: initial;
     }
-    .timex-event {
-        height: 88px;
+
+    .timex-header-create-button {
+        display: initial;
     }
 }
diff --git a/resources/views/calendar/day.blade.php b/resources/views/calendar/day.blade.php
@@ -3,7 +3,7 @@
         @class([
             'text-gray-400' => !$isCurrentMonthDay || $isWeekend,
             'border-t dark:border-gray-600',
-            'pl-2 pt-2'
+            'pl-2 pt-2',
         ])
         wire:click="$emitUp('onDayClick','{{$timestamp}}')">
         <span
@@ -23,15 +23,16 @@
                 {{$day}}
             </span>
         </span>
-        <span class="absolute">
+        @unless(!$isFirstOfMonth)
+        <span class="timex-day-month absolute">
             <div
                 @class([
-                'w-32 ml-1 text-xs',
-                'hidden' => !$isFirstOfMonth
+                'ml-1 text-xs',
                 ])>
                 {{\Carbon\Carbon::createFromTimestamp($timestamp)->shortMonthName}}
             </div>
         </span>
+        @endunless
     </div>
     <div class="timex-event" style="overflow-y: auto; overflow-x: hidden;  overflow-scrolling: touch;">
     <div class="grid grid-flow-row gap-0.5"

diff --git a/resources/views/calendar/header.blade.php → resources/views/header/header.blade.php b/resources/views/calendar/header.blade.php → resources/views/header/header.blade.php
@@ -6,7 +6,7 @@
         <x-filament-support::button
             wire:click="$emit('onPreviousYearClick')"
             @class([
-            'hidden' => config('timex.pages.buttons.hideYearNavigation', false)
+            'hidden sm:visible' => config('timex.pages.buttons.hideYearNavigation', false),
             ])
             :size="'sm'"
             :color="'secondary'"
@@ -49,11 +49,15 @@
         <span class="border border-gray-300 dark:border-gray-400 h-5 rounded ml-2 mr-2"></span>
         <x-filament-support::button
             wire:click="$emit('onCreateClick')"
-            :icon="config('timex.pages.buttons.icons.createEvent')"
             :outlined="true"
             :dark-mode="true"
             :size="'sm'">
+            <div class="flex items-center gap-2">
+            <x-dynamic-component :component="config('timex.pages.buttons.icons.createEvent')" class="h-4 w-4"/>
+            <div class="timex-header-create-button">
             {{trans('filament::resources/pages/create-record.title', ['label' => Str::lower(__('timex::timex.model.label'))])}}
+            </div>
+            </div>
         </x-filament-support::button>
     </div>
 </div>
diff --git a/resources/views/layout/heading.blade.php b/resources/views/layout/heading.blade.php
@@ -1,19 +1,18 @@
-@php
-    $isDayViewHidden = config('timex.mini.isDayViewHidden');
-    $isEventViewHidden = config('timex.mini.isNextMeetingViewHidden');
-@endphp
 <div class="h-10 pr-2 flex">
+    @unless(config('timex.mini.isDayViewHidden'))
     <div @class([
-        'hidden' => $isDayViewHidden,
-        'pr-2' => !$isEventViewHidden
+        'pr-2' => !config('timex.mini.isNextMeetingViewHidden')
     ])>
         <livewire:timex-day-widget wire:key="{{rand()}}" wire:poll/>
     </div>
+    @endunless
+    @unless(config('timex.mini.isNextMeetingViewHidden'))
     <div @class([
-        'hidden' => $isEventViewHidden,
+        'timex-event-widget',
         'relative group max-w-md rounded-lg bg-gray-400/10 dark:bg-gray-700',
     ])
-    style="min-width: 12rem; max-width: 12rem;">
+    style="min-width: 14rem; max-width: 14rem;">
         <livewire:timex-event-widget wire:key="{{rand()}}" wire:poll/>
     </div>
+    @endunless
 </div>
diff --git a/resources/views/widgets/mini/day-widget.blade.php b/resources/views/widgets/mini/day-widget.blade.php
@@ -5,7 +5,7 @@
         'hover:bg-gray-500/10 dark:bg-gray-700'
         ])
     style="width: 4rem;">
-    <div class="text-xs font-medium text-primary-600">
+    <div class="text-xs font-medium text-primary-600 dark:text-primary-500">
         {{$monthName.'.'}}
     </div>
     <div class="content-center items-center grid grid-cols-2 pl-2 pr-2 ml-1 mr-2">

diff --git a/resources/views/widgets/mini/event-widget-empty.blade.php b/resources/views/widgets/mini/event-widget-empty.blade.php
@@ -1,6 +1,6 @@
 <div class="flex items-center pl-2 h-10 text-gray-500 dark:text-gray-400">
     <x-heroicon-o-calendar class="w-5 h-5"/>
-    <div class="ml-2">
+    <div class="ml-2 px-2">
         {{trans('timex::timex.events.empty', ['label' => Str::lower(trans('timex::timex.model.pluralLabel'))])}}
     </div>
 </div>
diff --git a/src/Calendar/Header.php b/src/Calendar/Header.php
@@ -7,9 +7,9 @@
 class Header extends Component
 {
     public $monthName;
-    
+
     public function render()
     {
-        return view('timex::calendar.header');
+        return view('timex::header.header');
     }
 }
diff --git a/src/Pages/Timex.php b/src/Pages/Timex.php
@@ -230,6 +230,6 @@ public function onCreateClick()
 
     protected function getHeader(): ?View
     {
-        return \view('timex::calendar.header');
+        return \view('timex::header.header');
     }
 }