move new structures frame into a dedicated layout

ot_templating/Resources/Private/Language/locallang.xlf

@@ -179,7 +179,7 @@
 				<source>Aller à la dernière page</source>
 			</trans-unit>
 			<trans-unit id="go-to-page">
-				<source>Aller à la page </source>
+				<source>Aller à la page</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>

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

@@ -11,80 +11,46 @@
     <f:comment><!-- Central column --></f:comment>
     <div class="content">
         <f:comment><!-- All members --></f:comment>
+        <h2><f:translate key="member-companies"/></h2>
 
-        <ot:organizations.getFederationStructures as="structuresCollection"
-                                                  parentId="{settings.organizationId}"
-                                                  itemsPerPage="all">
+        <div class="ot-structures">
 
-            <f:comment><!-- The data is stored as an attribute, then templated with JS for performance reasons --></f:comment>
-            <div class="ot-structures map-view" data-structures="{v:format.json.encode(value:structuresCollection.members)}">
+            <ot:organizations.getChildren as="structuresCollection"
+                                          organizationId="{settings.organizationId}">
 
-                <div class="structure-col structure-col-map">
-                    <div id="structure-map-wrapper">
-                        <div id="structure-map">
-                        </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 structure-col-results">
-                    <header>
-                        <h2><f:translate key="member-companies"/></h2>
-                        <a href="#" class="activate-map-view"><f:translate key="map"/></a>
-                        <a href="#" class="activate-list-view"><f:translate key="list"/></a>
-                    </header>
-                    <div class="structure-search">
-                        <form>
-                            <div class="search-loc-wrapper">
+                <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')}"/>
-                                <button type="submit" class="search-submit">
-                                    <i class="fas fa-search"></i>
-                                </button>
-                            </div>
 
-                            <div class="filters">
-                                <select class="search-type">
-                                    <option value="-1">Type</option>
-                                    <option value="0">Harmonie</option>
-                                    <option value="0">Orchestre</option>
-                                    <option value="0">Chorale</option>
-                                    <option value="0">Ecole de musique</option>
-                                </select>
-                                <select class="search-province">
-                                    <option value="-1">Région</option>
-                                    <option value="0">Alsace</option>
-                                </select>
-                                <select class="search-federation">
-                                    <option value="-1">Fédération</option>
-                                    <option value="0">CMF</option>
-                                </select>
-                                <select class="search-distance-max">
-                                    <option value="-1">Distance</option>
-                                    <option value="0">100</option>
-                                </select>
-
-                                <button class="reset-search">Réinitialiser</button>
-                            </div>
+                                <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>
 
-                            <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">
-                        </form>
+                        <div id="structure-map">
+                            <f:for each="{structuresCollection.members}" 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">
@@ -92,98 +58,45 @@
                             <span><f:translate key="no-result"/></span>
                         </f:if>
 
-                        <v:variable.set name="pagedStructures" value="{ot:utilities.paginateArray(array:structuresCollection.members)}" />
-
-                        <f:for each="{pagedStructures}" as="page_items" iteration="it">
-
-                            <div class="structures-page"
-                                 style="{f:if(condition: '{it.cycle}!=1', then: 'display:none;')}"
-                                 data-page="{it.cycle}"
-                            >
-                                <f:for each="{page_items}" as="structure">
-                                    <div class="structure-card" data-id="{structure.id}">
-
-                                        <div class="structure-poster">
-                                            <f:if condition="{structure.logoId}">
-                                                <f:then>
-                                                    <img src='{structure.logoId}' 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-details">
-                                            <f:comment>
-                                                <!--                                    <div class="structure-categories">-->
-        <!--                                        <f:for each="{structure.categories}" as="category">-->
-        <!--                                            <span class="structure-category">-->
-        <!--                                                <f:translate key="{category}"/>-->
-        <!--                                            </span>-->
-        <!--                                        </f:for>-->
-        <!--                                    </div>--></f:comment>
-
-                                            <div class="structure-name">
-                                                {structure.name}
-                                            </div>
-                                            <table class="structure-details-table">
-                                                <tr class="structure-details-entry structure-address">
-                                                    <td><i class="fas fa-map-marker-alt"></i></td>
-                                                    <td>
-                                                        <f:if condition="{structure.streetAddress}">
-                                                            {structure.streetAddress} -
-                                                        </f:if>
-                                                        {structure.postalCode} {structure.addressCity}
-                                                    </td>
-                                                </tr>
-                                                <tr class="structure-details-entry structure-federation">
-                                                    <td><i class="fas fa-project-diagram"></i></td>
-                                                    <td>{structure.parentName}</td>
-                                                </tr>
-                                            </table>
-                                        </div>
-
-                                        <div class="spacer"></div>
-
-                                        <a target="_blank" class="btn structure-see" href="https://{structure.subdomain}.opentalent.fr">
-                                            <span><f:translate key="see-more"/></span>
-                                            <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
-                                        </a>
+                        <f:for each="{structuresCollection.members}" 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>
-                                </f:for>
-                            </div>
-                        </f:for>
 
-                        <div class="pagination-bar">
-                            <v:variable.set name="lastPage" value="{ot:utilities.count(array:pagedStructures)}" />
-
-                            <a class="goto-page" data-page="1" href="#page-1" title="{f:translate(key:'go-to-first-page')}">
-                                <i class="fa fa-angle-double-left"></i>
-                            </a>
-
-                            <ul>
-                            <f:for each="{pagedStructures}" as="_" iteration="it">
-                                <li class="{f:if(condition:'{it.cycle}==1',then:'current',else:'')}"
-                                    style="{f:if(condition:'{it.cycle}>10',then:'display:none;',else:'')}"
-                                    data-page="{it.cycle}"
-                                >
-                                    <a class="goto-page" data-page="{it.cycle}" href="#page-{it.cycle}" title="{f:translate(key:'go-to-page')}{it.cycle}">
-                                        {it.cycle}
-                                    </a>
-                                </li>
-                            </f:for>
-                            </ul>
+                                    <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 class="goto-page" data-page="{lastPage}" href="#page-{lastPage}" title="{f:translate(key:'go-to-last-page')}">
-                                <i class="fa fa-angle-double-right"></i>
-                            </a>
-                        </div>
+                                <a href="https://{structure.subdomain}.opentalent.fr" class="structure-see">
+                                    <i class="fa fa-plus" style="margin-right: 5px;"></i>
+                                    <span><f:translate key="see"/></span>
+                                </a>
+                            </div>
+                        </f:for>
 
+                        {ot:pagination(collection: structuresCollection)}
                     </div>
                 </div>
-            </div>
-        </ot:organizations.getFederationStructures>
+            </ot:organizations.getChildren>
+
+        </div>
     </div>
 </div>
 

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

@@ -0,0 +1,161 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- Special layout for the Members page --></f:comment>
+<f:layout name="StructuresFrame" />
+
+<f:render partial="Classic/Assets" />
+
+<v:asset.script name="classic-structures"
+                path="EXT:ot_templating/Resources/Public/assets/Classic/script/structures.js"
+                dependencies="classic-jquery,classic-datepicker,classic-slick,classic-leaflet,classic-main"
+                standalone="1"
+                defer="1"/>
+
+<div class="main">
+    <f:comment><!-- Central column --></f:comment>
+    <div class="content">
+        <f:comment><!-- All members --></f:comment>
+
+        <ot:organizations.getFederationStructures as="structuresCollection"
+                                                  parentId="{settings.organizationId}"
+                                                  itemsPerPage="all">
+
+            <f:comment><!-- The data is stored as an attribute, then templated with JS for performance reasons --></f:comment>
+            <div class="ot-structures-frame map-view" data-structures="{v:format.json.encode(value:structuresCollection.members)}">
+
+                <div class="structure-col structure-col-map">
+                    <div id="structure-map-wrapper">
+                        <div id="structure-map">
+                        </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 structure-col-results">
+                    <header>
+                        <h2><f:translate key="member-companies"/></h2>
+                        <a href="#" class="activate-map-view"><f:translate key="map"/></a>
+                        <a href="#" class="activate-list-view"><f:translate key="list"/></a>
+                    </header>
+                    <div class="structure-search">
+                        <form>
+                            <div class="search-loc-wrapper">
+                                <input type="text"
+                                       name="search-loc"
+                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
+                                <button type="submit" class="search-submit">
+                                    <i class="fas fa-search"></i>
+                                </button>
+                            </div>
+
+                            <div class="filters">
+                                <select class="search-type">
+                                    <option value="-1">Type</option>
+                                    <option value="0">Harmonie</option>
+                                    <option value="0">Orchestre</option>
+                                    <option value="0">Chorale</option>
+                                    <option value="0">Ecole de musique</option>
+                                </select>
+                                <select class="search-province">
+                                    <option value="-1">Région</option>
+                                    <option value="0">Alsace</option>
+                                </select>
+                                <select class="search-federation">
+                                    <option value="-1">Fédération</option>
+                                    <option value="0">CMF</option>
+                                </select>
+                                <select class="search-distance-max">
+                                    <option value="-1">Distance</option>
+                                    <option value="0">100</option>
+                                </select>
+
+                                <button class="reset-search">Réinitialiser</button>
+                            </div>
+
+                            <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">
+                        </form>
+                    </div>
+
+                    <div class="structure-results">
+                        <f:if condition="{structuresCollection.totalItems} == 0">
+                            <span><f:translate key="no-result"/></span>
+                        </f:if>
+
+                        <div class="structures-results-pages">
+                            <div class="structure-card-model" data-id="{structure.id}" style="display: none">
+
+                                <div class="structure-poster">
+                                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
+                                </div>
+
+                                <div class="structure-details">
+                                     <div class="structure-categories">
+                                        <span class="structure-category-model" style="display: none">{category}</span>
+                                     </div>
+
+                                    <div class="structure-name">
+                                        {structure.name}
+                                    </div>
+                                    <table class="structure-details-table">
+                                        <tr class="structure-details-entry structure-address">
+                                            <td><i class="fas fa-map-marker-alt"></i></td>
+                                            <td>
+                                                {structure.streetAddress}
+                                                {structure.postalCode} {structure.addressCity}
+                                            </td>
+                                        </tr>
+                                        <tr class="structure-details-entry structure-federation">
+                                            <td><i class="fas fa-project-diagram"></i></td>
+                                            <td>{structure.parentName}</td>
+                                        </tr>
+                                    </table>
+                                </div>
+
+                                <div class="spacer"></div>
+
+                                <a target="_blank" class="btn structure-see" href="{structure.otherWebsite}">
+                                    <span><f:translate key="see-more"/></span>
+                                    <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="pagination-bar">
+                            <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-first-page')}">
+                                <i class="fa fa-angle-double-left"></i>
+                            </a>
+
+                            <ul>
+                                <li class="goto-page-model" style="display: none">
+                                    <a class="goto-page" data-page="" href="#" title="{f:translate(key:'go-to-page')}">
+                                    </a>
+                                </li>
+                            </ul>
+
+                            <a class="goto-page" data-page="" href="#" title="{f:translate(key:'go-to-last-page')}">
+                                <i class="fa fa-angle-double-right"></i>
+                            </a>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+        </ot:organizations.getFederationStructures>
+    </div>
+</div>

ot_templating/Resources/Private/Templates/Page/StructuresFrame.html

@@ -0,0 +1,18 @@
+{namespace flux=FluidTYPO3\Flux\ViewHelpers}
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- uses the layout StructuresFrame, defined in layouts/[templateName]/StructuresFrame.html --></f:comment>
+<f:layout name="{ot:template.current()}/StructuresFrame" />
+
+<f:section name='Configuration'>
+    <flux:form id="structures_frame" label="LLL:template_structures_frame" extensionName="Opentalent.OtTemplating">
+    </flux:form>
+
+    <!-- Backend layout grid -->
+    <flux:grid>
+        <flux:grid.row>
+        </flux:grid.row>
+    </flux:grid>
+</f:section>
+

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

@@ -78,8 +78,10 @@ $(document).ready(function(){
     });
 
     // * Sticky menu
-    var menuTop = $('#menu').offset().top;
-    var menuHeight = $('#menu').height();
+    if ($('#menu').length) {
+        var menuTop = $('#menu').offset().top;
+        var menuHeight = $('#menu').height();
+    }
 
     $(function(){
         $(window).scroll(function() {
@@ -244,113 +246,11 @@ $(document).ready(function(){
         showMap($('#event-map').first());
     }
 
-    // Display map on network structures page
+    // Display map on (non-framed) network structures page
     if ($('.ot-structures #structure-map').length) {
-
-        // Instanciate leaflet map
-        let mapDiv = $('#structure-map').first();
-        showMap(mapDiv, false);
-
-        // load data
-        let structures = $(mapDiv).closest('.ot-structures').data('structures');
-        console.log(structures);
-
-
-        // Load clustered markers on leaflet map
-        var clusters = L.markerClusterGroup();
-
-        structures.forEach(function (item) {
-            if (item.longitude && item.latitude) {
-                let marker = L.marker([item.latitude, item.longitude]);
-                let label = `<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/>`
-                if (item.otherWebsite) {
-                    label += `<a href="${item.otherWebsite}" target="_blank">En savoir plus</a>`
-                }
-                marker.bindPopup(label);
-                clusters.addLayer(marker);
-            }
-        });
-        map.addLayer(clusters);
-
-        // populate results list
-
+        showMap($('#structure-map').first());
     }
 
-    // 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);
-    });
-
-    // Goto page links
-    $('a.goto-page').on('click', function(e) {
-        e.preventDefault();
-        let goto = $(this).data('page');
-
-        let ul = $(this).closest('ul');
-        let current_li = ul.children('li.current').first()
-        let target_li = ul.find('li[data-page='.concat(goto, ']')).first();
-
-        let current_page = current_li.data('page')
-
-        let results = $(this).closest('.structure-results');
-        let current_div = results.find('.structures-page[data-page='.concat(current_page, ']'))
-        let target_div = results.find('.structures-page[data-page='.concat(goto, ']'))
-
-        current_div.hide();
-        target_div.show();
-
-        current_li.removeClass('current');
-        target_li.addClass('current');
-
-        ul.children('li').each(function (x) {
-            if ($(x).data('page') <= current_page + 5 && $(x).data('page') >= current_page - 5) {
-                $(x).show();
-            } else {
-                $(x).hide();
-            }
-        });
-
-
-    });
-
-    // Toggle structures list and map view
-    $('.activate-map-view').on('click', function(e) {
-
-        let div = $(this).closest('.ot-structures');
-        if (div.hasClass('map-view')) {
-            // already in map view
-            return;
-        }
-        e.preventDefault();
-        div.removeClass('list-view');
-        div.addClass('map-view');
-    })
-    $('.activate-list-view').on('click', function(e) {
-
-        let div = $(this).closest('.ot-structures');
-
-        if (div.hasClass('list-view')) {
-            // already in list view
-            return;
-        }
-        e.preventDefault();
-        div.removeClass('map-view');
-        div.addClass('list-view');
-    })
-
-    $('.reset-search').on('click', function(e) {
-        e.preventDefault();
-        let form = $(this).closest('form');
-        form.find('input[type="text"]').each(function () { $(this).val(''); });
-        form.find('select').each(function () { $(this).val(-1); });
-        form.submit();
-    });
-
 });
 
 

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

@@ -0,0 +1,138 @@
+
+// Specific JS used for the Structures layout
+// > Needs to be loaded after the main.js script
+$(document).ready(function() {
+
+    // Display map on network structures page
+    if ($('.ot-structures-frame #structure-map').length) {
+
+        // Instanciate leaflet map
+        let mapDiv = $('#structure-map').first();
+        let mapId = $(mapDiv).attr("id");
+        if (!mapId) {
+            console.error('missing id attribute for map');
+            return;
+        }
+        // Instanciate the map object  @see https://leafletjs.com/reference-1.6.0.html#map-factory
+        const mapOptions = {scrollWheelZoom: false, zoomSnap: 0.25};
+        map = L.map(mapId, mapOptions);
+        map.setView([46.71, 2.14], 6);
+
+        // Add the tile layer
+        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        // Set the view
+        bounds = L.latLngBounds(
+            L.latLng(51.03, -5.78),
+            L.latLng(41.2, 9.70)
+        );
+        map.fitBounds(bounds);
+
+        // load data
+        let structures = $(mapDiv).closest('.ot-structures-frame').data('structures');
+        console.log(structures);
+
+
+        // Load clustered markers on leaflet map
+        var clusters = L.markerClusterGroup();
+
+        structures.forEach(function (item) {
+            if (item.longitude && item.latitude) {
+                let marker = L.marker([item.latitude, item.longitude]);
+                let label = `<b>${item.name}</b><br/>${item.postalCode} ${item.addressCity}<br/>`
+                if (item.otherWebsite) {
+                    label += `<a href="${item.otherWebsite}" target="_blank">En savoir plus</a>`
+                }
+                marker.bindPopup(label);
+                clusters.addLayer(marker);
+            }
+        });
+        map.addLayer(clusters);
+
+        // populate results list
+
+    }
+
+    // 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);
+    });
+
+    // Goto page links
+    $('a.goto-page').on('click', function (e) {
+        e.preventDefault();
+        let goto = $(this).data('page');
+
+        let ul = $(this).closest('ul');
+        let current_li = ul.children('li.current').first()
+        let target_li = ul.find('li[data-page='.concat(goto, ']')).first();
+
+        let current_page = current_li.data('page')
+
+        let results = $(this).closest('.structure-results');
+        let current_div = results.find('.structures-page[data-page='.concat(current_page, ']'))
+        let target_div = results.find('.structures-page[data-page='.concat(goto, ']'))
+
+        current_div.hide();
+        target_div.show();
+
+        current_li.removeClass('current');
+        target_li.addClass('current');
+
+        ul.children('li').each(function (x) {
+            if ($(x).data('page') <= current_page + 5 && $(x).data('page') >= current_page - 5) {
+                $(x).show();
+            } else {
+                $(x).hide();
+            }
+        });
+
+        $(window).scrollTop(0);
+    });
+
+
+    // Toggle structures list and map view
+    $('.activate-map-view').on('click', function (e) {
+
+        let div = $(this).closest('.ot-structures-frame');
+        if (div.hasClass('map-view')) {
+            // already in map view
+            return;
+        }
+        e.preventDefault();
+        div.removeClass('list-view');
+        div.addClass('map-view');
+    })
+    $('.activate-list-view').on('click', function (e) {
+
+        let div = $(this).closest('.ot-structures-frame');
+
+        if (div.hasClass('list-view')) {
+            // already in list view
+            return;
+        }
+        e.preventDefault();
+        div.removeClass('map-view');
+        div.addClass('list-view');
+    })
+
+    $('.reset-search').on('click', function (e) {
+        e.preventDefault();
+        let form = $(this).closest('form');
+        form.find('input[type="text"]').each(function () {
+            $(this).val('');
+        });
+        form.find('select').each(function () {
+            $(this).val(-1);
+        });
+        form.submit();
+    });
+
+});

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

@@ -8,6 +8,143 @@ $input-border-color: #bfbfbf;
   @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 {
+    @include flex;
+    flex-direction: column;
+  }
+
+  .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;
+  }
+
+  .structure-search form button {
+    border: solid 2px $content-a-color;
+    color: $content-a-color;
+  }
+
+  .structure-search form button:hover {
+    background-color: #d8edf3;
+    cursor: pointer;
+  }
+
+  #structure-map {
+    height: 400px;
+    width: 100%;
+    align-self: flex-end;
+  }
+
+  .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-preview {
+    @include flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .structure-preview .structure-poster {
+    flex: 1;
+    @include flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .structure-preview .structure-poster img {
+    width: auto;
+    max-width: 100%;
+    min-width: 40%;
+    height: auto;
+    margin-right: 4em;
+  }
+
+  .structure-preview .structure-summary {
+    flex: 2;
+    @include flex;
+    flex-direction: column;
+  }
+
+  .structure-preview .structure-summary > span {
+    margin-bottom: 0.5em;
+  }
+
+  .structure-preview .structure-name {
+    font-size: 1.4em;
+    color: #333333;
+    font-weight: bold;
+  }
+
+  .structure-preview .structure-loc-date {
+    font-size: 1.1em;
+    color: #4d4d4d;
+    font-weight: bold;
+  }
+
+  .structure-preview .structure-description {
+    color: #4d4d4d;
+  }
+
+  .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-see:hover {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+}
+
+// New template for the framed template structures
+.ot-structures-frame {
+  @include flex;
+  flex-direction: row;
+
   header {
     display: flex;
     flex-direction: row;
@@ -271,7 +408,7 @@ $input-border-color: #bfbfbf;
   }
 }
 
-.ot-structures.list-view {
+.ot-structures-frame.list-view {
   // List view changes
 
   .structure-col-map {
@@ -310,9 +447,9 @@ $input-border-color: #bfbfbf;
   }
 }
 
-.ot-structures.map-view .activate-map-view {
+.ot-structures-frame.map-view .activate-map-view {
   font-weight: 750;
 }
-.ot-structures.list-view .activate-list-view {
+.ot-structures-frame.list-view .activate-list-view {
   font-weight: 750;
 }