Skip to content

Commit

Permalink
Fixed mobile design
Browse files Browse the repository at this point in the history
  • Loading branch information
mikrosmile committed Dec 11, 2022
1 parent 539c235 commit e6db3a4
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 118 deletions.
36 changes: 0 additions & 36 deletions resources/dist/timex.css
View file
Expand Up @@ -28,23 +28,6 @@
height: 65px;
}

.timex-day-month {
display: none;
}

.timex-event {
display: none;
}

.timex-event-widget {
display: none;
}

.timex-header-create-button {
display: none;
}


@media (min-width: 640px) {
.timex-day {
align-items: center;
Expand All @@ -61,9 +44,6 @@
height: 65px;
}

.timex-header-create-button {
display: initial;
}
}

@media (min-width: 1024px) {
Expand All @@ -72,20 +52,4 @@
text-align: left;
height: 130px;
}
.timex-event {
display: initial;
height: 88px;
}

.timex-day-month {
display: initial;
}

.timex-event-widget {
display: initial;
}

.timex-header-create-button {
display: initial;
}
}
57 changes: 36 additions & 21 deletions resources/views/calendar/day.blade.php
View file
Expand Up @@ -24,37 +24,52 @@
</span>
</span>
@unless(!$isFirstOfMonth)
<span class="timex-day-month absolute">
<span class="absolute">
<div
@class([
'ml-1 text-xs',
'hidden lg:block'
])>
{{\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"
id="{{$timestamp}}"
data-status-id="{{$timestamp}}">
@foreach($events as $event)
<div id="{{ $event->getEventID() }}"
wire:click="$emitUp('onEventClick','{{$event->getEventID()}}')">
<livewire:timex-event
:body="$event->getBody()"
:category="$event->getCategory()"
:color="$event->getColor()"
:event-i-d="$event->getEventID()"
:icon="$event->getIcon()"
:is-all-day="$event->getIsAllDay()"
:organizer="$event->getOrganizer()"
:start="$event->getStart()"
:start-time="$event->getStartTime()"
:subject="$event->getSubject()"
/>
<div class="hidden lg:block overflow-x-hidden overflow-y-auto scroll-smooth" style="height: 88px;">
<div class="grid grid-flow-row gap-0.5"
id="{{$timestamp}}"
data-status-id="{{$timestamp}}"
>
@foreach($events as $event)
<div
id="{{ $event->getEventID() }}"
wire:click="$emitUp('onEventClick','{{$event->getEventID()}}')">
<livewire:timex-event
:body="$event->getBody()"
:category="$event->getCategory()"
:color="$event->getColor()"
:event-i-d="$event->getEventID()"
:icon="$event->getIcon()"
:is-all-day="$event->getIsAllDay()"
:organizer="$event->getOrganizer()"
:start="$event->getStart()"
:start-time="$event->getStartTime()"
:subject="$event->getSubject()"
/>
</div>
@endforeach
</div>
@endforeach
</div>
<div class="flex pl-2 gap-0.5 truncate lg:hidden">
@foreach(collect($events)->take(4) as $event)
<span
style="width: 6px; height: 6px"
@class([
'rounded-full',
'bg-'.$event->getColor().'-500' => $event->getColor() != 'secondary',
'bg-gray-600' => $event->getColor() == 'secondary',
])>
</span>
@endforeach
</div>
</div>
122 changes: 63 additions & 59 deletions resources/views/header/header.blade.php
View file
@@ -1,63 +1,67 @@
<div class="justify-between sm:items-center grid sm:flex gap-2">
<div class="font-medium text-lg">
<div class="sm:justify-between sm:items-center grid sm:flex gap-2">
<div class="filament-header-heading text-2xl font-bold tracking-tight">
{{$this->monthName}}
</div>
<div class="flex items-center gap-1">
<x-filament-support::button
wire:click="$emit('onPreviousYearClick')"
@class([
'hidden sm:visible' => config('timex.pages.buttons.hideYearNavigation', false),
])
:size="'sm'"
:color="'secondary'"
:dark-mode="true"
:outlined="config('timex.pages.buttons.outlined')">
<x-dynamic-component :component="config('timex.pages.buttons.icons.previousYear', 'heroicon-o-chevron-double-left')" class="h-4 w-4"/>
</x-filament-support::button>
<x-filament-support::button
wire:click="$emit('onPrevClick')"
:size="'sm'"
:dark-mode="true"
:outlined="config('timex.pages.buttons.outlined')">
<x-dynamic-component :component="config('timex.pages.buttons.icons.previousMonth')" class="h-4 w-4"/>
</x-filament-support::button>
<x-filament-support::button
wire:click="$emit('onTodayClick')"
:size="'sm'"
:dark-mode="true"
:outlined="config('timex.pages.buttons.outlined')">
{{config('timex.pages.buttons.today.static') ? trans('timex::timex.labels.today') : self::getDynamicLabel('today')}}
</x-filament-support::button>
<x-filament-support::button
wire:click="$emit('onNextClick')"
:size="'sm'"
:dark-mode="true"
:outlined="config('timex.pages.buttons.outlined')">
<x-dynamic-component :component="config('timex.pages.buttons.icons.nextMonth')" class="h-4 w-4"/>
</x-filament-support::button>
<x-filament-support::button
wire:click="$emit('onNextYearClick')"
@class([
'hidden' => config('timex.pages.buttons.hideYearNavigation', false)
])
:size="'sm'"
:color="'secondary'"
:dark-mode="true"
:outlined="config('timex.pages.buttons.outlined')">
<x-dynamic-component :component="config('timex.pages.buttons.icons.nextYear','heroicon-o-chevron-double-right')" class="h-4 w-4"/>
</x-filament-support::button>
<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')"
: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 class="flex items-center gap-2 justify-between">
<div class="flex">
<x-filament-support::button
wire:click="$emit('onTodayClick')"
:size="'sm'"
:dark-mode="true"
:color="'secondary'"
:outlined="config('timex.pages.buttons.outlined')"
>
{{config('timex.pages.buttons.today.static') ? trans('timex::timex.labels.today') : self::getDynamicLabel('today')}}
</x-filament-support::button>
</div>
<div class="flex gap-2">
<x-filament-support::button
:dark-mode="true"
:size="'sm'"
:outlined="true"
>
<div class="flex gap-3 items-center">
@unless(config('timex.pages.buttons.hideYearNavigation', false))
<x-dynamic-component
wire:click="$emit('onPreviousYearClick')"
:component="config('timex.pages.buttons.icons.previousYear', 'heroicon-o-chevron-double-left')"
class="h-4 w-4 text-gray-500"/>
@endunless
<x-dynamic-component
wire:click="$emit('onPrevClick')"
:component="config('timex.pages.buttons.icons.previousMonth')"
class="h-4 w-4"/>
<span
class="border-primary-600 dark:border-gray-400 rounded h-3 ml-2 mr-2"
style="border-width: 0.5px;">
</span>
<x-dynamic-component
wire:click="$emit('onNextClick')"
:component="config('timex.pages.buttons.icons.nextMonth')"
class="h-4 w-4"/>
@unless(config('timex.pages.buttons.hideYearNavigation', false))
<x-dynamic-component
wire:click="$emit('onNextYearClick')"
:component="config('timex.pages.buttons.icons.nextYear','heroicon-o-chevron-double-right')"
class="h-4 w-4 text-gray-500"/>
@endunless
</div>
</x-filament-support::button>
<x-filament-support::button
wire:click="$emit('onCreateClick')"
: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="hidden lg:flex">
{{trans('filament::resources/pages/create-record.title', ['label' => Str::lower(__('timex::timex.model.label'))])}}
</div>
</div>
</x-filament-support::button>
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion resources/views/layout/heading.blade.php
View file
Expand Up @@ -8,7 +8,7 @@
@endunless
@unless(config('timex.mini.isNextMeetingViewHidden'))
<div @class([
'timex-event-widget',
'hidden lg:block',
'relative group max-w-md rounded-lg bg-gray-400/10 dark:bg-gray-700',
])
style="min-width: 14rem; max-width: 14rem;">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/widgets/mini/event-widget.blade.php
View file
@@ -1,4 +1,4 @@
<div class="grid grid-flow-row" style="overflow-y: auto; overflow-x: hidden; overflow-scrolling: touch; height: 40px;">
<div class="grid grid-flow-row overflow-x-hidden overflow-y-auto scroll-smooth" style="height: 40px;">
@foreach($events as $event)
<div id="{{ $event->getEventID() }}">
<livewire:timex-event
Expand Down

0 comments on commit e6db3a4

Please sign in to comment.