improve map dimensionning and add move to images

doc/shared_frames.md

@@ -0,0 +1,8 @@
+
+# Frames partagées
+
+Certains cadres sont partagés entre différents templates ou utilisés en tant qu'iframes par des
+sites externes.
+
+Exemple: la recherche des structures adhérentes à une fédération.
+

ot_templating/Resources/Private/Language/locallang.xlf

@@ -152,7 +152,7 @@
 				<source>Revenir à la liste des actualités</source>
 			</trans-unit>
 			<trans-unit id="member-companies">
-				<source>Sociétés adhérentes</source>
+				<source>Nos structures adhérentes</source>
 			</trans-unit>
 			<trans-unit id="no-result">
 				<source>Aucun résultat</source>
@@ -163,6 +163,9 @@
 			<trans-unit id="see">
 				<source>Voir</source>
 			</trans-unit>
+			<trans-unit id="click-on-land-to-go-there">
+				<source>Cliquez sur une des régions ci-dessous pour centrer la carte sur elle</source>
+			</trans-unit>
 			<trans-unit id="look-for-an-event">
 				<source>Rechercher un évènement</source>
 			</trans-unit>

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

@@ -11,34 +11,13 @@
     <f:comment><!-- Central column --></f:comment>
     <div class="content">
         <f:comment><!-- All members --></f:comment>
-        <h2><f:translate key="member-companies"/></h2>
-
         <div class="ot-structures">
 
             <ot:organizations.getChildren as="structuresCollection"
                                           organizationId="{settings.organizationId}">
 
-                <div class="ot-structures">
-                    <div class="structure-controls">
-                        <div class="structure-search">
-                            <form>
-                                <input type="text"
-                                       name="search-loc"
-                                       placeholder="{f:translate(key: 'where')}?"
-                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
-
-                                <f:comment><!--
-                                Important: if the cache is not disabled,
-                                 then the results won't be updated even after submitting this form
-                                 --></f:comment>
-                                <input type="hidden"
-                                       name="no_cache"
-                                       value="1">
-
-                                <button name="search-submit"><f:translate key="find"/></button>
-                            </form>
-                        </div>
-
+                <div class="structure-col">
+                    <div id="structure-map-wrapper">
                         <div id="structure-map">
                             <f:for each="{structuresCollection.members}" as="structure" iteration="it">
                                 <f:if condition="{structure.longitude}">
@@ -52,6 +31,40 @@
                             </f:for>
                         </div>
                     </div>
+                    <div id="structure-map-bar">
+                        <div class="btn">{f:translate(key: 'click-on-land-to-go-there')}</div>
+                        <ul id="overseas-provinces-list">
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}"/></li>
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}"/></li>
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}"/></li>
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}"/></li>
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}"/></li>
+                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}"/></li>
+                        </ul>
+                    </div>
+                </div>
+
+                <div class="structure-col">
+                    <h2><f:translate key="member-companies"/></h2>
+
+                    <div class="structure-search">
+                        <form>
+                            <input type="text"
+                                   name="search-loc"
+                                   placeholder="{f:translate(key: 'where')}?"
+                                   value="{ot:request.getArgument(argument: 'search-loc')}"/>
+
+                            <f:comment><!--
+                            Important: if the cache is not disabled,
+                             then the results won't be updated even after submitting this form
+                             --></f:comment>
+                            <input type="hidden"
+                                   name="no_cache"
+                                   value="1">
+
+                            <button name="search-submit"><f:translate key="find"/></button>
+                        </form>
+                    </div>
 
                     <div class="structure-results">
                         <f:if condition="{structuresCollection.totalItems} == 0">
@@ -92,6 +105,8 @@
                         </f:for>
 
                         <f:render partial="Classic/Pagination" arguments="{collection: structuresCollection}"/>
+
+
                     </div>
                 </div>
             </ot:organizations.getChildren>

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

@@ -168,8 +168,9 @@ $(document).ready(function(){
     });
 
     // **** Leaflet: maps *****
+    var map;
 
-    function showMap(mapDiv) {
+    function showMap(mapDiv, zoomToItems=true) {
 
         let mapId = $(mapDiv).attr("id");
         if (!mapId) {
@@ -190,24 +191,15 @@ $(document).ready(function(){
         });
 
         // Instanciate the map object  @see https://leafletjs.com/reference-1.6.0.html#map-factory
-        var mapOptions = {scrollWheelZoom: false};
-        var initialZoom = 13;
-        var map = L.map(mapId, mapOptions);
-        if (items.length > 0) {
-            map.setView([items[0].lat, items[0].long], initialZoom);
+        const mapOptions = {scrollWheelZoom: false, zoomSnap: 0.25};
+        map = L.map(mapId, mapOptions);
+        if (zoomToItems && items.length > 0) {
+            map.setView([items[0].lat, items[0].long], 13);
         } else {
-            map.setView([46.3399276, 2.6067229], 5);
+            map.setView([46.71, 2.14], 6);
         }
 
         // Add the tile layer
-        // L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
-        //     maxZoom: 18,
-        //     id: 'mapbox/streets-v11',
-        //     tileSize: 512,
-        //     // zoomOffset: -1,
-        //     attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
-        //     accessToken: 'pk.eyJ1Ijoib2xpdmllci1tYXNzb3QiLCJhIjoiY2s5OGl1M2cxMWNpajNscnV4Zm5maWY3eSJ9.YDESFgB-JuAhplTzXI6hGQ',
-        // }).addTo(map);
         L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
             attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         }).addTo(map);
@@ -221,11 +213,19 @@ $(document).ready(function(){
         });
 
         // Set the view
-        if (items.length > 0) {
-            var markersGroup = new L.featureGroup(markers);
-            map.fitBounds(markersGroup.getBounds());
-            map.zoomSnap = 1;
-            map.zoomOut();
+        let bounds = null;
+        if (zoomToItems && items.length > 0) {
+            const markersGroup = new L.featureGroup(markers);
+            bounds = markersGroup.getBounds()
+        } else {
+            bounds = L.latLngBounds(
+                    L.latLng(51.03, -5.78),
+                    L.latLng(41.2, 9.70)
+                );
+        }
+        if (bounds !== null) {
+            map.fitBounds(bounds);
+            // map.zoomOut();
         }
     }
 
@@ -242,9 +242,18 @@ $(document).ready(function(){
 
     // Display map on network structures page
     if ($('.ot-structures #structure-map').length) {
-        showMap($('#structure-map').first());
+        showMap($('#structure-map').first(), false);
     }
 
+    // Goto commands
+    $('img[data-map-fit]').on('click', function(e) {
+        let goto = $(this).data('map-fit');
+        let corners = goto.split(";");
+        let p1 = corners[0].split(",");
+        let p2 = corners[1].split(",");
+        let bounds = L.latLngBounds(L.latLng(p1[0], p1[1]), L.latLng(p2[0], p2[1]));
+        map.fitBounds(bounds);
+    });
 });
 
 

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

@@ -1,137 +1,87 @@
 // Structures page
 
+$btn-background-color: $menu-background-color;
+$btn-text-color: $menu-font-color;
+
 .ot-structures {
   @include flex;
   flex-direction: row;
 
-  .structure-controls {
-    order: 1;
-    flex: 1;
-  }
-
-  .structure-results {
-    order: 0;
-    flex: 1;
-  }
-
-  .structure-controls, .structure-results {
-    @include flex;
-    flex-direction: column;
-    margin: 0 1.5em;
-  }
-
-  .structure-search {
-    @include flex;
-    flex-direction: column;
-    margin-bottom: 2em;
-  }
-
-  h3 {
-    font-size: 1.2em;
-    font-weight: bold;
-  }
-
-  .structure-search form {
+  .structure-col {
     @include flex;
     flex-direction: column;
+    flex: 1;
+    max-width: 50%;
+    padding: 12px 2%;
+    align-items: center;
   }
 
-  .structure-search form input, button {
-    margin-bottom: 1em;
-    line-height: 1.4em;
-    font-size: 1.1em;
-    border: 1px solid #ccc;
+  .btn {
+    background-color: $btn-background-color;
     border-radius: 4px;
-    padding: 6px 12px;
+    padding: 8px;
+    font-weight: 750;
+    color: $btn-text-color;
+    text-align: center;
   }
 
-  .structure-search form button {
-    border: solid 2px $content-a-color;
-    color: $content-a-color;
-  }
 
-  .structure-search form button:hover {
-    background-color: #d8edf3;
-    cursor: pointer;
+  // The wrapper role is to maintain the map's height equal to its width
+  // @see https://stackoverflow.com/a/14896313/4279120
+  #structure-map-wrapper {
+    position: relative;
+    width: 96%;
+    padding-bottom: 96%;
+    float: left;
+    height: 0;
   }
 
   #structure-map {
-    height: 400px;
     width: 100%;
-    align-self: flex-end;
+    height: 100%;
+    position: absolute;
+    left: 0;
   }
 
-  .structure {
-    @include flex;
-    flex-direction: column;
-    border-bottom: solid 2px $otbox-header-background-color;
-    border-radius: 4px;
-    height: 200px;
-    padding: 1em;
-    justify-content: space-around;
-  }
+  #structure-map-bar {
+    margin: 16px 2% 6px 2%;
 
-  .structure-preview {
-    @include flex;
-    flex-direction: row;
-    align-items: center;
   }
 
-  .structure-preview .structure-poster {
-    flex: 1;
-    @include flex;
-    flex-direction: column;
-    align-items: center;
+  #structure-map-bar .btn {
+    margin: 0 10%;
   }
 
-  .structure-preview .structure-poster img {
-    width: auto;
-    max-width: 100%;
-    min-width: 40%;
-    height: auto;
-    margin-right: 4em;
-  }
-
-  .structure-preview .structure-summary {
-    flex: 2;
+  #overseas-provinces-list {
     @include flex;
-    flex-direction: column;
-  }
-
-  .structure-preview .structure-summary > span {
-    margin-bottom: 0.5em;
+    flex-direction: row;
+    list-style: none;
+    align-items: center;
+    padding: 0;
   }
 
-  .structure-preview .structure-name {
-    font-size: 1.4em;
-    color: #333333;
-    font-weight: bold;
+  #overseas-provinces-list li {
+    border: solid 1px #000000;
+    height: 80px;
+    width: 80px;
+    margin: 0 6px;
   }
 
-  .structure-preview .structure-loc-date {
-    font-size: 1.1em;
-    color: #4d4d4d;
-    font-weight: bold;
+  #overseas-provinces-list li img {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    cursor: pointer;
   }
 
-  .structure-preview .structure-description {
-    color: #4d4d4d;
+  .structure-controls {
+    flex: 1;
   }
 
-  .structure-see {
-    align-self: stretch;
-    padding: 0.4em 0.8em;
-    font-size: 1.1em;
-    margin-top: 0.4em;
-    @include flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
+  .structure-results {
+    flex: 1;
+    margin: 16px;
   }
 
-  .structure-see:hover {
-    text-decoration: none;
-    font-weight: bold;
-  }
 
 }