apps responsive control
This commit is contained in:
Burak Civan
parent
1671083773
commit
f44251290c
@ -51134,6 +51134,14 @@ body{
|
|||||||
top: 0.5rem;
|
top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:bottom-2\.5{
|
||||||
|
bottom: 0.625rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lg\:bottom-2{
|
||||||
|
bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:col-span-5{
|
.lg\:col-span-5{
|
||||||
grid-column: span 5 / span 5;
|
grid-column: span 5 / span 5;
|
||||||
}
|
}
|
||||||
@ -51227,6 +51235,10 @@ body{
|
|||||||
height: 3rem;
|
height: 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lg\:h-28{
|
||||||
|
height: 7rem;
|
||||||
|
}
|
||||||
|
|
||||||
.lg\:w-9{
|
.lg\:w-9{
|
||||||
width: 2.25rem;
|
width: 2.25rem;
|
||||||
}
|
}
|
||||||
@ -51540,6 +51552,10 @@ body{
|
|||||||
right: 0px;
|
right: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[dir="ltr"] .ltr\:lg\:right-0{
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
[dir="ltr"] .lg\:ltr\:pr-12{
|
[dir="ltr"] .lg\:ltr\:pr-12{
|
||||||
padding-right: 3rem;
|
padding-right: 3rem;
|
||||||
}
|
}
|
||||||
@ -51560,6 +51576,10 @@ body{
|
|||||||
left: 0px;
|
left: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[dir="rtl"] .rtl\:lg\:left-0{
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
[dir="rtl"] .lg\:rtl\:pl-12{
|
[dir="rtl"] .lg\:rtl\:pl-12{
|
||||||
padding-left: 3rem;
|
padding-left: 3rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,66 +1,66 @@
|
|||||||
<div class="relative w-full flex border-b pt-8 mb-4">
|
<div class="relative w-full flex flex-col sm:flex-row border-b pt-8 mb-4">
|
||||||
<div class="flex flex-row items-center place-center border-r">
|
<div class="flex items-center">
|
||||||
<button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
|
<div class="flex flex-row items-center place-center border-r">
|
||||||
<i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
|
<button class="flex items-center" id="dropdownButton" data-dropdown-toggle="dropdown">
|
||||||
</button>
|
<i class="material-icons w-10 flex items-center aspect-square text-light-gray ltr:pl-2 rtl:pr-2 hover:text-gray-700"> apps_outlined </i>
|
||||||
|
</button>
|
||||||
|
|
||||||
<div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
|
<div id="dropdown" data-click-outside-none class="w-full px-0 hidden z-10">
|
||||||
<div class="flex flex-col md:flex-row">
|
<div class="flex flex-col md:flex-row">
|
||||||
<div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
|
<div class="w-full lg:w-6/12 flex flex-col shadow-md bg-white px-4 lg:pl-8 py-8 gap-2 rounded-l-xl">
|
||||||
<h4 class="capitalize font-thin">
|
<h4 class="capitalize font-thin">
|
||||||
{{ trans_choice('general.categories', 1) }}
|
{{ trans_choice('general.categories', 1) }}
|
||||||
</h4>
|
</h4>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-2">
|
<div class="grid grid-cols-2 gap-2">
|
||||||
@foreach ($categories as $slug => $category)
|
@foreach ($categories as $slug => $category)
|
||||||
<x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
|
<x-link href="{{ $categoryUrl($slug) }}" class="font-semibold text-sm ltr:pr-4 rtl:pl-4 lg:pr-0 truncate bg-transparent" override="class">
|
||||||
<x-link.hover>
|
<x-link.hover>
|
||||||
{{ $category }}
|
{{ $category }}
|
||||||
</x-link.hover>
|
</x-link.hover>
|
||||||
</x-link>
|
</x-link>
|
||||||
@endforeach
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
|
|
||||||
<h4 class="capitalize font-thin mb-2">
|
|
||||||
{{ trans('modules.popular_this_week') }}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
@if ($popular)
|
|
||||||
<div class="flex flex-col gap-4">
|
|
||||||
@foreach ($popular->data as $item)
|
|
||||||
<div class="hover:shadow-2xl rounded-lg">
|
|
||||||
<x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
|
|
||||||
@foreach ($item->files as $file)
|
|
||||||
@if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
|
|
||||||
<img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
|
|
||||||
@endif
|
|
||||||
@endforeach
|
|
||||||
|
|
||||||
<div class="flex flex-col py-1 gap-0">
|
|
||||||
<h6 class="text-sm font-bold capitalize">
|
|
||||||
{!! $item->name !!}
|
|
||||||
</h6>
|
|
||||||
|
|
||||||
<div class="line-clamp-2">
|
|
||||||
<p class="font-thin text-xs text-left">
|
|
||||||
{!! $item->description !!}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</x-link>
|
|
||||||
</div>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
@else
|
</div>
|
||||||
@endif
|
|
||||||
|
<div class="w-full lg:w-6/12 flex flex-col shadow-md bg-purple-lighter px-4 lg:px-12 py-8 gap-2 rounded-r-xl">
|
||||||
|
<h4 class="capitalize font-thin mb-2">
|
||||||
|
{{ trans('modules.popular_this_week') }}
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
@if ($popular)
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
@foreach ($popular->data as $item)
|
||||||
|
<div class="hover:shadow-2xl rounded-lg">
|
||||||
|
<x-link href="{{ route('apps.app.show', $item->slug) }}" class="flex items-center p-2" override="class">
|
||||||
|
@foreach ($item->files as $file)
|
||||||
|
@if (($file->media_type == 'image') && ($file->pivot->zone == 'thumbnail'))
|
||||||
|
<img src="{{ $file->path_string }}" alt="{{ $item->name }}" class="w-28 h-20 rounded-md object-cover ltr:mr-3 rtl:ml-3" />
|
||||||
|
@endif
|
||||||
|
@endforeach
|
||||||
|
|
||||||
|
<div class="flex flex-col py-1 gap-0">
|
||||||
|
<h6 class="text-sm font-bold capitalize">
|
||||||
|
{!! $item->name !!}
|
||||||
|
</h6>
|
||||||
|
|
||||||
|
<div class="line-clamp-2">
|
||||||
|
<p class="font-thin text-xs text-left">
|
||||||
|
{!! $item->description !!}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</x-link>
|
||||||
|
</div>
|
||||||
|
@endforeach
|
||||||
|
</div>
|
||||||
|
@else
|
||||||
|
@endif
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex flex-col lg:flex-row w-full justify-between">
|
|
||||||
<div class="w-8/12 h-full">
|
<div class="w-8/12 h-full">
|
||||||
<form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
|
<form method="GET" action="{{ url("/" . company_id()) }}/apps/search">
|
||||||
<div class="h-full flex items-center pl-2 gap-2">
|
<div class="h-full flex items-center pl-2 gap-2">
|
||||||
@ -107,31 +107,31 @@
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
|
<div class="lg:absolute lg:bottom-2.5 ltr:lg:right-0 rtl:lg:left-0 flex flex-row items-end lg:items-center mb-1 divide-x divide-black-400 mt-4 lg:mt-0">
|
||||||
<x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
<x-link href="{{ route('apps.home.index') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
||||||
<x-link.hover color="to-black-400">
|
<x-link.hover color="to-black-400">
|
||||||
{{ trans('modules.home') }}
|
{{ trans('modules.home') }}
|
||||||
</x-link.hover>
|
</x-link.hover>
|
||||||
</x-link>
|
</x-link>
|
||||||
|
|
||||||
<x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
<x-link href="{{ route('apps.new') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
||||||
<x-link.hover color="to-black-400">
|
<x-link.hover color="to-black-400">
|
||||||
{{ trans('modules.new') }}
|
{{ trans('modules.new') }}
|
||||||
</x-link.hover>
|
</x-link.hover>
|
||||||
</x-link>
|
</x-link>
|
||||||
|
|
||||||
<x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
<x-link href="{{ route('apps.paid') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
||||||
<x-link.hover color="to-black-400">
|
<x-link.hover color="to-black-400">
|
||||||
{{ trans('modules.top_paid') }}
|
{{ trans('modules.top_paid') }}
|
||||||
</x-link.hover>
|
</x-link.hover>
|
||||||
</x-link>
|
</x-link>
|
||||||
|
|
||||||
<x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
<x-link href="{{ route('apps.free') }}" class="text-sm font-semibold px-2 sm:mt-0 sm:mb-0 leading-4" override="class">
|
||||||
<x-link.hover color="to-black-400">
|
<x-link.hover color="to-black-400">
|
||||||
{{ trans('modules.top_free') }}
|
{{ trans('modules.top_free') }}
|
||||||
</x-link.hover>
|
</x-link.hover>
|
||||||
</x-link>
|
</x-link>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -6,7 +6,7 @@
|
|||||||
<div class="w-full lg:h-48 px-6 bg-dark-blue rounded-lg flex flex-col lg:flex-row justify-between items-center my-8">
|
<div class="w-full lg:h-48 px-6 bg-dark-blue rounded-lg flex flex-col lg:flex-row justify-between items-center my-8">
|
||||||
<div class="w-full lg:w-1/2 flex flex-col self-end py-6">
|
<div class="w-full lg:w-1/2 flex flex-col self-end py-6">
|
||||||
<div
|
<div
|
||||||
class="h-28"
|
class="lg:h-28"
|
||||||
x-data="{
|
x-data="{
|
||||||
text: '',
|
text: '',
|
||||||
textArray : ['{{ trans('modules.premium_banner') }}'],
|
textArray : ['{{ trans('modules.premium_banner') }}'],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user