fix list view css

ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

@@ -204,15 +204,15 @@
                 <span id="geoloc-unavailable" style="display: none"><f:translate key="geoloc-unavailable"/></span>
                 <span id="geoloc-unsupported" style="display: none"><f:translate key="geoloc-unsupported"/></span>
 
-                <span id="1MC"><f:translate key="Musique"/></span>
-                <span id="2TH"><f:translate key="Théatre"/></span>
-                <span id="3DA"><f:translate key="Dance"/></span>
-                <span id="5FA"><f:translate key="Art du spectacle"/></span>
-                <span id="OTAR"><f:translate key="Arts de rue"/></span>
-                <span id="OTCI"><f:translate key="École de cirque"/></span>
-                <span id="6AR"><f:translate key="Musée"/></span>
-                <span id="8CI"><f:translate key="Cinéma"/></span>
-                <span id="OTAU"><f:translate key="Autres"/></span>
+                <span id="1MC"><f:translate key="1MC"/></span>
+                <span id="2TH"><f:translate key="2TH"/></span>
+                <span id="3DA"><f:translate key="3DA"/></span>
+                <span id="5FA"><f:translate key="5FA"/></span>
+                <span id="OTAR"><f:translate key="OTAR"/></span>
+                <span id="OTCI"><f:translate key="OTCI"/></span>
+                <span id="6AR"><f:translate key="6AR"/></span>
+                <span id="8CI"><f:translate key="8CI"/></span>
+                <span id="OTAU"><f:translate key="OTAU"/></span>
             </span>
 
 

ot_templating/Resources/Public/assets/Classic/script/structures.js

@@ -58,9 +58,10 @@ $(document).ready(function() {
     let provinceSelect = form.find("select[name='search-province']").first();
     let federationSelect = form.find("select[name='search-federation']").first();
     let radiusSelect = form.find("select[name='search-radius']").first();
+    let resetButton = form.find("button.reset-search").first();
+    let submitButton = form.find("button.submit-search").first();
 
     // Translations
-
     let tr = {};
     $('#labels').find('span').each(function (i, elt) {
        tr[$(elt).attr('id')] = $(elt).text();
@@ -77,6 +78,7 @@ $(document).ready(function() {
         '8CI': tr['8CI'],
         'OTAU':tr['OTAU'],
     }
+    console.log(structures_categories);
 
     // #### Instanciate and populate leaflet map
     let mapDiv = $('#structure-map').first();
@@ -368,7 +370,7 @@ $(document).ready(function() {
         }
     });
 
-    $('button[name="submit-search"]', form).on('click', function() {
+    submitButton.on('click', function() {
         form.submit();
     });
 
@@ -377,7 +379,7 @@ $(document).ready(function() {
     });
 
     // Reset search fields
-    $('.reset-search', form).on('click', function (e) {
+    resetButton.on('click', function (e) {
         e.preventDefault();
         let form = $(this).closest('form');
         form.find('input').each(function () {
@@ -401,31 +403,44 @@ $(document).ready(function() {
     });
 
     // Toggle structures list and map view
-    $('.activate-map-view').on('click', function (e) {
+    let filtersRow = form.find('.filters').first();
+    let buttonsRow = form.find('.search-buttons').first();
 
-        let div = $(this).closest('.ot-structures-frame');
-        if (div.hasClass('map-view')) {
+    $('.activate-map-view').on('click', function (e) {
+        e.preventDefault();
+        if (structureFrame.hasClass('map-view')) {
             // already in map view
             return;
         }
-        e.preventDefault();
-        div.removeClass('list-view');
-        div.addClass('map-view');
+        structureFrame.removeClass('list-view');
+        structureFrame.addClass('map-view');
+
+        // move reset and submit buttons
+        submitButton.appendTo(buttonsRow);
+        resetButton.prependTo(buttonsRow);
+        buttonsRow.show();
     })
     $('.activate-list-view').on('click', function (e) {
-
-        let div = $(this).closest('.ot-structures-frame');
-
-        if (div.hasClass('list-view')) {
+        e.preventDefault();
+        if (structureFrame.hasClass('list-view')) {
             // already in list view
             return;
         }
-        e.preventDefault();
-        div.removeClass('map-view');
-        div.addClass('list-view');
+        structureFrame.removeClass('map-view');
+        structureFrame.addClass('list-view');
+
+        // move reset and submit buttons
+        submitButton.appendTo(filtersRow);
+        resetButton.prependTo(filtersRow);
+        buttonsRow.hide();
+
+        resetButton.prependTo()
+
+
         resetMapBounds();
     })
 
+    // Filter results on map moves
     map.on('zoomend moveend', function(e) {
         if (listenMapMoves) {
             let bounds = map.getBounds();

ot_templating/Resources/Public/assets/Classic/style/module/_structures.scss

@@ -472,12 +472,19 @@ $input-border-color: #bfbfbf;
 
   .search-bar-wrapper {
     flex: 1;
-    margin-right: 2%;
     max-width: none;
     display: flex;
     flex-direction: row;
   }
 
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: 2%;
+  }
+
+  .structure-search-row.filters {
+    margin: 0 auto 12px auto;
+  }
+
   .search-bar {
     flex: 1;
     max-width: none;
@@ -488,6 +495,10 @@ $input-border-color: #bfbfbf;
     width: auto;
   }
 
+  .filters button {
+    margin: 3px 6px;
+  }
+
   .structure-col-results {
     width: 100%;
     max-width: 100%;