fix responsive css for modern template

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

@@ -0,0 +1,106 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- Special layout for the Members page --></f:comment>
+<f:layout name="Structures" />
+
+<section class="t-container st-effect-3">
+    <div class="wrapper">
+
+        <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
+        <f:render partial="Modern/Header" arguments="{_all}" />
+
+
+        <section class="page-section-ptb">
+            <div class="container">
+                <div class="row">
+                    <div class="col-sm-12 mt-30">
+                        <f:comment><!-- All members --></f:comment>
+                        <h3>Sociétés adhérentes</h3>
+
+                        <div class="ot-structures">
+
+                            <ot:organizations.getChildren as="structures"
+                                                          organizationId="{settings.organizationId}">
+
+
+                                <div class="ot-structures">
+                                    <div class="structure-controls">
+                                        <div class="structure-search">
+                                            <form>
+                                                <input type="text"
+                                                       name="search-loc"
+                                                       placeholder="Où?"
+                                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
+
+                                                <button name="search-submit">Trouver</button>
+                                            </form>
+                                        </div>
+
+                                        <div id="structure-map">
+                                            <f:for each="{structures}" as="structure" iteration="it">
+                                                <f:if condition="{structure.longitude}">
+                                                    <i class="item-geodata" style="display: none;"
+                                                       data-id="{structure.id}"
+                                                       data-long="{structure.longitude}"
+                                                       data-lat="{structure.latitude}"
+                                                       data-label="<b>{structure.name}</b><br/>{structure.streetAdress}<br/>{structure.postalCode} {structure.addressCity}">
+                                                    </i>
+                                                </f:if>
+                                            </f:for>
+                                        </div>
+                                    </div>
+
+                                    <div class="structure-results">
+                                        <f:if condition="{structures -> f:count()} == 0">
+                                            <span>Aucun résultat</span>
+                                        </f:if>
+
+                                        <f:for each="{structures}" as="structure">
+                                            <div class="structure" data-id="{structure.id}">
+                                                <div class="structure-preview">
+
+                                                    <div class="structure-poster">
+                                                        <f:if condition="{structure.logo}">
+                                                            <f:then>
+                                                                <img src='{structure.logo}' alt="poster" />
+                                                            </f:then>
+                                                            <f:else>
+                                                                <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
+                                                            </f:else>
+                                                        </f:if>
+                                                    </div>
+
+                                                    <div class="structure-summary">
+                                                        <span class="structure-name">
+                                                            {structure.name}
+                                                        </span>
+                                                        <span class="structure-adress">
+                                                            {structure.streetAdress}<br/>
+                                                            {structure.postalCode} {structure.addressCity}
+                                                        </span>
+                                                    </div>
+                                                </div>
+
+                                                <a href="https://{structure.subdomain}.opentalent.fr" class="structure-see">
+                                                    <i class="fa fa-plus" style="margin-right: 5px;"></i>
+                                                    <span>Voir</span>
+                                                </a>
+                                            </div>
+                                        </f:for>
+                                    </div>
+                                </div>
+
+                            </ot:organizations.getChildren>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
+        <f:render partial="Modern/Footer" />
+
+    </div>
+</section>

ot_templating/Resources/Private/Partials/Modern/EventsIndex.html

@@ -34,11 +34,11 @@
             <f:for each="{events}" as="event">
                 <f:if condition="{event.longitude}">
                     <f:then>
-                        <i class="event-geodata" style="display: none;"
+                        <i class="item-geodata" style="display: none;"
                            data-id="{event.id}"
                            data-long="{event.longitude}"
                            data-lat="{event.latitude}"
-                           data-label="<b>{event.name}</b><br/>{event.locAndDate}">
+                           data-label="<b>{event.name}</b><br/>{event.streetAdress}">
                         </i>
                     </f:then>
                 </f:if>

ot_templating/Resources/Private/Partials/Modern/EventsShow.html

@@ -41,7 +41,7 @@
     <f:if condition="{event.longitude}">
         <f:then>
             <div id="event-map">
-                <i class="event-geodata" style="display: none;"
+                <i class="item-geodata" style="display: none;"
                    data-id="{event.id}"
                    data-long="{event.longitude}"
                    data-lat="{event.latitude}"

ot_templating/Resources/Private/Partials/Modern/Preloader.html

@@ -1,4 +1,4 @@
 <div id="pre-loader">
-    <f:image src="EXT:ot_templating/Resources/Public/assets/Modern/images/pre-loader/loader-06.svg" alt="Preloader" id="preloader-cmf"/>
-    <f:image src="EXT:ot_templating/Resources/Public/assets/Modern/images/pre-loader/loader-20.gif" alt="Preloader" id="preloader"/>
+    <f:image src="EXT:ot_templating/Resources/Public/assets/Modern/images/pre-loader/loader-06.svg" alt="" id="preloader-cmf"/>
+    <f:image src="EXT:ot_templating/Resources/Public/assets/Modern/images/pre-loader/loader-20.gif" alt="" id="preloader"/>
 </div>

ot_templating/Resources/Public/assets/Modern/script/custom-ot.js

@@ -100,60 +100,80 @@ $('.carousel').slick({
     Leaflet maps
 ============================*/
 $(document).ready(function(){
-	function showEventMap(mapDiv) {
+
+	function showMap(mapDiv) {
+
+		let mapId = $(mapDiv).attr("id");
+		if (!mapId) {
+			console.error('missing id attribute for map');
+			return;
+		}
 
 		// Collect the data from th map children <i>
-		var events = [];
-		mapDiv.children('.event-geodata').each(function () {
-			let event_ = {
+		var items = [];
+		mapDiv.children('.item-geodata').each(function () {
+			let item = {
 				id: $(this).data('id'),
 				long: $(this).data('long'),
 				lat: $(this).data('lat'),
 				label: $(this).data('label')
 			};
-			events.push(event_);
+			items.push(item);
 		});
-		if (events.length === 0) {
+		if (items.length === 0) {
+			console.error(mapId + ': no data to show');
 			return;
 		}
 
 		// Instanciate the map object  @see https://leafletjs.com/reference-1.6.0.html#map-factory
 		var mapOptions = {scrollWheelZoom: false};
 		var initialZoom = 13;
-		var eventMap = L.map('event-map', mapOptions);
-		eventMap.setView([events[0].lat, events[0].long], initialZoom);
+		var map = L.map(mapId, mapOptions);
+		map.setView([items[0].lat, items[0].long], initialZoom);
 
 		// 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(eventMap);
+		// 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);
 
 		// Collect the event geodata to create the markers
-		var markers = []
-		events.forEach(function (event_) {
-			var marker = L.marker([event_.lat, event_.long]).addTo(eventMap);
-			marker.bindPopup(event_.label);
+		let markers = []
+		items.forEach(function (item) {
+			let marker = L.marker([item.lat, item.long]).addTo(map);
+			marker.bindPopup(item.label);
 			markers.push(marker);
 		});
+		console.log(markers);
 
 		// Set the view
 		var markersGroup = new L.featureGroup(markers);
-		eventMap.fitBounds(markersGroup.getBounds());
-		eventMap.zoomSnap = 1;
-		eventMap.zoomOut();
+		map.fitBounds(markersGroup.getBounds());
+		map.zoomSnap = 1;
+		map.zoomOut();
 	}
 
+
+	// Display map on events index page
 	if ($('.ot-all-events #event-map').length) {
-		showEventMap($('#event-map').first());
+		showMap($('#event-map').first());
 	}
 
+	// Display map on event's details page
 	if ($('.ot-show-event #event-map').length) {
-		showEventMap($('#event-map').first());
+		showMap($('#event-map').first());
+	}
+
+	// Display map on network structures page
+	if ($('.ot-structures #structure-map').length) {
+		showMap($('#structure-map').first());
 	}
 
 	// Automatically open popups if they have the display-modal class

ot_templating/Resources/Public/assets/Modern/style/custom.css

@@ -373,6 +373,10 @@ Slick carousels
        margin: 0 auto;
     }
 
+    .carousel-img {
+        height: auto;
+    }
+
     .slick-track {
         overflow: hidden;
     }
@@ -382,12 +386,12 @@ Slick carousels
     }
 
     /*Default CSS, in case slick is not loaded or activated*/
-    .carousel .carousel-img:not(.slick-slide) {
+    .carousel div:not(.slick-slide) > div > div > .carousel-img {
            width: 100%;
            display: none;
        }
 
-    .carousel .carousel-img:first-child:not(.slick-slide) {
+    .carousel div:not(.slick-slide):first-child > div > div > .carousel-img {
         display: inline;
     }
 
@@ -417,15 +421,6 @@ Slick carousels
 Members and Ca Members pages
 ============================*/
 
-.team-photo {
-    width: 240px;
-    height: 240px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
 
 
 /*============================
@@ -673,6 +668,146 @@ Event's details pages
 Events preview
 ============================*/
 
+
+/*============================
+Structures page
+============================*/
+
+.ot-structures {
+    display: flex;
+    flex-direction: row;
+}
+
+.ot-structures .structure-controls {
+    order: 1;
+    flex: 1;
+}
+
+.ot-structures .structure-results {
+    order: 0;
+    flex: 1;
+}
+
+.ot-structures .structure-controls, .structure-results {
+    display: flex;
+    flex-direction: column;
+    margin: 0 1.5em;
+}
+
+.ot-structures .structure-search {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2em;
+}
+
+.ot-structures h3 {
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.ot-structures .structure-search form {
+    display: flex;
+    flex-direction: column;
+}
+
+.ot-structures .structure-search form input, button {
+    margin-bottom: 1em;
+    line-height: 1.4em;
+    font-size: 1.1em;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 6px 12px;
+}
+
+.ot-structures .structure-search form button {
+    border: solid 2px #cccccc;
+    color: #333333;
+}
+
+.ot-structures .structure-search form button:hover {
+    background-color: #d8edf3;
+    cursor: pointer;
+}
+
+.ot-structures #structure-map {
+    height: 400px;
+    width: 100%;
+    align-self: flex-end;
+}
+
+.ot-structures .structure {
+    display: flex;
+    flex-direction: column;
+    border-bottom: solid 2px #cccccc;
+    border-radius: 4px;
+    height: 200px;
+    padding: 1em;
+    justify-content: space-around;
+}
+
+.ot-structures .structure-preview {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.ot-structures .structure-preview .structure-poster {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.ot-structures .structure-preview .structure-poster img {
+    width: auto;
+    max-width: 100%;
+    min-width: 40%;
+    height: auto;
+    margin-right: 4em;
+}
+
+.ot-structures .structure-preview .structure-summary {
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+}
+
+.ot-structures .structure-preview .structure-summary > span {
+    margin-bottom: 0.5em;
+}
+
+.ot-structures .structure-preview .structure-name {
+    font-size: 1.4em;
+    color: #333333;
+    font-weight: bold;
+}
+
+.ot-structures .structure-preview .structure-loc-date {
+    font-size: 1.1em;
+    color: #4d4d4d;
+    font-weight: bold;
+}
+
+.ot-structures .structure-preview .structure-description {
+    color: #4d4d4d;
+}
+
+.ot-structures .structure-see {
+    align-self: stretch;
+    padding: 0.4em 0.8em;
+    font-size: 1.1em;
+    margin-top: 0.4em;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+
+.ot-structures .structure-see:hover {
+    text-decoration: none;
+    font-weight: bold;
+}
+
 /*============================
 Sitemap page
 ============================*/
@@ -701,3 +836,62 @@ Sitemap page
     padding-bottom: 0.5em;
     color: #979797;
 }
+
+/*   prevents iframe to oversize the content width*/
+iframe {
+    width: 100%;
+    height: auto;
+    max-width: 560px;
+}
+
+/*============================
+Media queries
+============================*/
+
+@media screen and (max-width: 900px) {
+
+
+    /* Events page*/
+    .ot-all-events {
+        flex-direction: column;
+    }
+
+    .ot-all-events .event {
+        height: auto;
+    }
+
+    .ot-all-events .event-preview {
+        flex-direction: column;
+    }
+
+    .ot-all-events .event-preview .event-poster img {
+        margin-right: 0;
+        margin-bottom: 10px;
+    }
+
+    .ot-all-events .event-preview .event-name {
+        text-align: center;
+    }
+
+/* Structures page*/
+   .ot-structures {
+       flex-direction: column;
+   }
+
+    .ot-structures .structure-controls {
+        order: 0;
+    }
+
+    .ot-structures .structure-results {
+        order: 1;
+    }
+
+    .ot-structures .structure {
+        height: auto;
+    }
+
+/*    Members */
+
+
+
+}