Make datepicker in filterpanel usable on mobile

This commit is contained in:
Björn Fromme
2021-10-26 17:30:34 +02:00
parent c5f0fc179b
commit 32de49bfc2
@@ -41,14 +41,14 @@
</svg> </svg>
<div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded" <div class="hidden absolute z-20 top-100 mt-2 left-0 min-w-full bg-white p-4 shadow-md rounded"
data-collapse-target="container"> data-collapse-target="container">
<div class="flex justify-between divide-x divide-gray-200"> <div class="flex flex-col md:flex-row md:justify-between divide-y md:divide-x divide-gray-200">
<div class="pr-2"> <div class="pb-2 md:pb-0 md:pr-2">
<input type="hidden" <input type="hidden"
data-datepicker-target="field"> data-datepicker-target="field">
</div> </div>
<div class="flex-1 flex flex-col justify-between pl-2"> <div class="flex-1 flex flex-col justify-between pt-2 md:pt-0 md:pl-2">
<f:if condition="{settings.datePickerPresets}"> <f:if condition="{settings.datePickerPresets}">
<div class="flex flex-col space-y-4"> <div class="grid grid-cols-2 gap-2 pb-4 md:pb-0 md:flex md:flex-col md:space-y-4">
<f:for each="{settings.datePickerPresets}" as="preset"> <f:for each="{settings.datePickerPresets}" as="preset">
<button type="button" <button type="button"
class="button button--small button--light w-full" class="button button--small button--light w-full"
@@ -61,7 +61,7 @@
</f:for> </f:for>
</div> </div>
</f:if> </f:if>
<div class="flex flex-col space-y-4"> <div class="grid grid-cols-2 gap-2 md:flex md:flex-col md:space-y-4">
<button type="button" <button type="button"
class="button button--small button--light w-full" class="button button--small button--light w-full"
data-action="collapse#close"> data-action="collapse#close">