Opções de filtragem com preset na versao mobile

RedeMapas · Aug 15, 2024 · 94c7c3f · 94c7c3f
1 parent d8d91c1
commit 94c7c3f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/src/modules/Search/components/search-filter-event/template.php b/src/modules/Search/components/search-filter-event/template.php
@@ -22,6 +22,10 @@
         <div class="field">
             <label> <?php i::_e('Eventos acontecendo') ?></label>
             <div class="datepicker">
+                <div class="filter-btn">
+                    <button @click="prevInterval()" class="button button--rounded button--outline"> <mc-icon name="arrow-left"></mc-icon> </button>
+                    <button @click="nextInterval()" class="button button--rounded button--outline"> <mc-icon name="arrow-right"></mc-icon> </button>
+                </div>
                 <datepicker 
                     :locale="locale" 
                     :weekStart="0"
@@ -30,11 +34,8 @@
                     :format="dateFormat"
                     :presetRanges="presetRanges" 
                     :dayNames="['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab']"
-                    range multiCalendars multiCalendarsSolo autoApply utc></datepicker>
-                <div class="filter-btn">
-                    <button @click="prevInterval()" class="button button--rounded button--outline"> <mc-icon name="arrow-left"></mc-icon> </button>
-                    <button @click="nextInterval()" class="button button--rounded button--outline"> <mc-icon name="arrow-right"></mc-icon> </button>
-                </div>
+                    range multiCalendars multiCalendarsSolo autoApply utc>
+                </datepicker>
             </div>
         </div>
         <div class="field">

diff --git a/src/themes/BaseV2/assets-src/sass/2.components/_datepicker.scss b/src/themes/BaseV2/assets-src/sass/2.components/_datepicker.scss
@@ -152,9 +152,9 @@
         }
 
         // Lista lateral de ranges
-        &__preset_ranges {
-            display: none;
-        }
+        // &__preset_ranges {
+        //     display: none;
+        // }
 
         // Parte dos calendários
         &__flex_display {
@@ -209,4 +209,12 @@
             }
         }
     }
+    @media (max-width: 600px) {
+        &__menu_content_wrapper {
+            flex-direction: column;
+        }
+        &__preset_ranges {
+            border-bottom: 2px solid rgb(26, 25, 25);
+        }
+    }
 }