add the child-structures page template

ot_templating/Classes/Domain/Repository/BaseApiRepository.php

@@ -3,12 +3,13 @@
 namespace Opentalent\OtTemplating\Domain\Repository;
 
 use GuzzleHttp\Client;
+use GuzzleHttp\Exception\GuzzleException;
 use Psr\Http\Message\ResponseInterface;
 use TYPO3\CMS\Extbase\Persistence\Repository;
 
 class BaseApiRepository extends Repository
 {
-    const BASE_URI = 'http://api.opentalent.fr/api/';
+    const BASE_URI = 'https://api.opentalent.fr/api/';
     const HYDRA_TYPE = '';
     const HTTP_METHOD = 'GET';
     const ITEMS_PER_PAGE = 1001;
@@ -24,6 +25,7 @@ class BaseApiRepository extends Repository
      * @param $uri
      * @param $params
      * @return ResponseInterface
+     * @throws GuzzleException
      */
     protected function get($uri, $params = [])
     {
@@ -31,13 +33,16 @@ class BaseApiRepository extends Repository
         if (!empty($params)) {
             $uri = $uri . '&' . http_build_query($params);
         }
-        return $this->client->request(static::HTTP_METHOD, $uri);
+        return $this->client->request(
+            static::HTTP_METHOD,
+            $uri);
     }
 
     /**
      * @param string $uri
      * @param array $params
      * @return string
+     * @throws GuzzleException
      */
     protected function getBody($uri, $params = [])
     {
@@ -48,6 +53,7 @@ class BaseApiRepository extends Repository
      * @param string $uri
      * @param array $params
      * @return array
+     * @throws GuzzleException
      */
     protected function getJson($uri, $params = [])
     {
@@ -58,7 +64,7 @@ class BaseApiRepository extends Repository
      * @param string $uri
      * @param array $params
      * @return array
-     * @throws \Exception
+     * @throws GuzzleException
      */
     protected function getApiRecords($uri, $params = []) {
         $data = $this->getJson($uri, $params);
@@ -77,7 +83,7 @@ class BaseApiRepository extends Repository
      * @param string $uri
      * @param array $params
      * @return array
-     * @throws \Exception
+     * @throws GuzzleException
      */
     protected function getApiFirstRecord($uri, $params = []) {
         $records = $this->getApiRecords($uri, $params);

ot_templating/Classes/Domain/Repository/OrganizationRepository.php

@@ -50,9 +50,12 @@ class OrganizationRepository extends BaseApiRepository
      * @param int $id The id of the organization
      * @return Organization
      * @throws \Exception
+     * @throws \GuzzleHttp\Exception\GuzzleException
      */
     public function findById($id) {
-        $record = $this->getApiFirstRecord($this::URI . '/' . $id);
+        $params = [];
+        $params['organization_id'] = $id;
+        $record = $this->getApiFirstRecord($this::URI, $params);
         $organization = $this->organizationFromJson($record);
         if($organization == null) {
             throw new \Exception('Organization with id ' . $id . ' does not exist');
@@ -66,6 +69,7 @@ class OrganizationRepository extends BaseApiRepository
      * @param string name          The name of the organization
      * @return Organization
      * @throws \Exception
+     * @throws \GuzzleHttp\Exception\GuzzleException
      */
     public function findByName($name)
     {
@@ -79,4 +83,24 @@ class OrganizationRepository extends BaseApiRepository
         return $organization;
     }
 
+    /**
+     * Get the organization's child structures by id
+     *
+     * @param int $id The id of the organization
+     * @return array
+     * @throws \Exception
+     * @throws \GuzzleHttp\Exception\GuzzleException
+     */
+    public function findChildrenById($id, $searchParams = [])
+    {
+        $params = [];
+        $params['parentId'] = $id;
+        $params['children'] = 1;
+
+        $params = array_merge($params, $searchParams);
+
+        $record = $this->getApiRecords($this::URI, $params);
+        return $this->organizationsFromJson($record);
+    }
+
 }

ot_templating/Classes/ViewHelpers/Organizations/GetByIdViewHelper.php

@@ -0,0 +1,73 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers\Organizations;
+
+use FluidTYPO3\Vhs\Traits\TemplateVariableViewHelperTrait;
+use Opentalent\OtTemplating\Domain\Repository\OrganizationRepository;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+/**
+ *   This view helper return the Organization object matching the given id
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     <ot:organizations.getById as="organization"
+ *                               organizationId="1">
+ *          <f:debug>{organization}</f:debug>
+ *     </ot:organizations.getById>
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class GetByIdViewHelper extends AbstractViewHelper {
+
+    use TemplateVariableViewHelperTrait;
+    /**
+     * >> Required to prevent typo3 to escape the html output
+     * @var boolean
+     */
+    protected $escapeOutput = false;
+
+    /**
+     * @var \Opentalent\OtTemplating\Domain\Repository\OrganizationRepository
+     *
+     */
+    protected $organizationRepository;
+
+    public function initializeArguments()
+    {
+        $this->registerArgument(
+            'as',
+            'string',
+            'Name of the returned array',
+            true
+        );
+        $this->registerArgument(
+            'organizationId',
+            'integer',
+            'Id of the organization',
+            true
+        );
+    }
+
+    /**
+     * @return string
+     * @throws \Exception
+     */
+    public function render()
+    {
+        $as = $this->arguments['as'];
+        $organizationId = $this->arguments['organizationId'];
+
+        $organization = $this->organizationRepository->findById($organizationId);
+        $variables = [$as => $organization];
+        return $this->renderChildrenWithVariables($variables);
+    }
+
+    /**
+     * @param \Opentalent\OtTemplating\Domain\Repository\OrganizationRepository $organizationRepository
+     */
+    public function injectOrganizationRepository(OrganizationRepository $organizationRepository)
+    {
+        $this->organizationRepository = $organizationRepository;
+    }
+}

ot_templating/Classes/ViewHelpers/Organizations/GetChildrenViewHelper.php

@@ -0,0 +1,79 @@
+<?php
+
+namespace Opentalent\OtTemplating\ViewHelpers\Organizations;
+
+use FluidTYPO3\Vhs\Traits\TemplateVariableViewHelperTrait;
+use Opentalent\OtTemplating\Domain\Repository\OrganizationRepository;
+use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
+
+/**
+ *   This view helper return the Organization object matching the given id
+ *
+ *     {namespace ot=Opentalent\OtTemplating\ViewHelpers}
+ *
+ *     <ot:organizations.getChildren as="organization"
+ *                               organizationId="1">
+ *          <f:debug>{organization}</f:debug>
+ *     </ot:organizations.getChildren>
+ *
+ * @package Opentalent\OtTemplating\ViewHelpers
+ */
+class GetChildrenViewHelper extends AbstractViewHelper {
+
+    use TemplateVariableViewHelperTrait;
+    /**
+     * >> Required to prevent typo3 to escape the html output
+     * @var boolean
+     */
+    protected $escapeOutput = false;
+
+    /**
+     * @var \Opentalent\OtTemplating\Domain\Repository\OrganizationRepository
+     *
+     */
+    protected $organizationRepository;
+
+    public function initializeArguments()
+    {
+        $this->registerArgument(
+            'as',
+            'string',
+            'Name of the returned array',
+            true
+        );
+        $this->registerArgument(
+            'organizationId',
+            'integer',
+            'Id of the organization',
+            true
+        );
+    }
+
+    /**
+     * @return string
+     * @throws \Exception
+     */
+    public function render()
+    {
+        $as = $this->arguments['as'];
+        $organizationId = $this->arguments['organizationId'];
+
+        $searchParams = [];
+
+        if($_REQUEST['search-loc']) {
+            $searchParams['where'] = $_REQUEST['search-loc'];
+        }
+
+        $organization = $this->organizationRepository->findChildrenById($organizationId, $searchParams);
+        $variables = [$as => $organization];
+        return $this->renderChildrenWithVariables($variables);
+    }
+
+    /**
+     * @param \Opentalent\OtTemplating\Domain\Repository\OrganizationRepository $organizationRepository
+     */
+    public function injectOrganizationRepository(OrganizationRepository $organizationRepository)
+    {
+        $this->organizationRepository = $organizationRepository;
+    }
+}

ot_templating/Configuration/TypoScript/setup.txt

@@ -1,5 +1,6 @@
 # TODO: reprendre les formulaires custom
 # TODO: prévoir les fallbacks no-script (menu, donors)
+# TODO: viewhelpers - intégrer une gestion d'erreur, en particulier pour ce qui touche aux appels à l'api
 
 # -- MODERN template
 # TODO: corriger pbm quand pas de carrousel (les menus ne se voient plus)

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

@@ -0,0 +1,96 @@
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+{namespace ot=Opentalent\OtTemplating\ViewHelpers}
+
+<f:comment><!-- Special layout for the Members page --></f:comment>
+<f:layout name="Structures" />
+
+<f:comment><!-- Render the header defined in partial/header.html--></f:comment>
+<f:render partial="Classic/Header" arguments="{_all}" />
+
+<div class="main">
+    <f:comment><!-- Central column --></f:comment>
+    <div class="content">
+        <f:comment><!-- All members --></f:comment>
+        <h2>Sociétés adhérentes</h2>
+
+        <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>
+
+<f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
+<f:render partial="Classic/Footer" />

ot_templating/Resources/Private/Partials/Classic/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/Classic/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/Classic/MembersList.html

@@ -12,7 +12,7 @@
                         <p class="ot-member-image">
                             <f:if condition="{member.image}">
                                 <f:then>
-                                    <img src="{member.image}/160x0"/>
+                                    <img src="{member.image}/160x0" alt=""/>
                                 </f:then>
                                 <f:else if="{member.gender}=='MISTER'">
                                     <f:image src="EXT:ot_templating/Resources/Public/media/man-default.jpg"/>

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

@@ -0,0 +1,17 @@
+{namespace flux=FluidTYPO3\Flux\ViewHelpers}
+{namespace v=FluidTYPO3\Vhs\ViewHelpers}
+
+<f:comment><!-- uses the layout Members, defined in layouts/[templateName]/Structures.html --></f:comment>
+<f:layout name="{settings.template}/Structures" />
+
+<f:section name='Configuration'>
+    <flux:form id="structures" label="Gabarit Structures adhérentes" 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

@@ -127,60 +127,79 @@ $(document).ready(function(){
 
     // **** Leaflet: maps *****
 
-    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());
     }
 
 });

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

@@ -0,0 +1,137 @@
+// Structures page
+
+.ot-structures {
+  display: flex;
+  flex-direction: row;
+
+  .structure-controls {
+    order: 1;
+    flex: 1;
+  }
+
+  .structure-results {
+    order: 0;
+    flex: 1;
+  }
+
+  .structure-controls, .structure-results {
+    display: flex;
+    flex-direction: column;
+    margin: 0 1.5em;
+  }
+
+  .structure-search {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 2em;
+  }
+
+  h3 {
+    font-size: 1.2em;
+    font-weight: bold;
+  }
+
+  .structure-search form {
+    display: 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 {
+    display: 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 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .structure-preview .structure-poster {
+    flex: 1;
+    display: 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;
+    display: 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;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .structure-see:hover {
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+}

ot_templating/Resources/Public/assets/Classic/style/style.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #4facc6;
+  color: #4facc6;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

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

@@ -89,6 +89,7 @@ $warning-font-color: #ffffff !default;
 "module/_events-show",
 "module/_donors-box",
 "module/_members",
+"module/_structures",
 "module/_sitemap",
 "module/_forms",
 "module/_contact",

ot_templating/Resources/Public/assets/Classic/style/theme-blue.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #097f9a;
+  color: #097f9a;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-green.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #04a04c;
+  color: #04a04c;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-grey.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #8c8c8c;
+  color: #8c8c8c;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-light-blue.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #0aa5ec;
+  color: #0aa5ec;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-light-red.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #dd453f;
+  color: #dd453f;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-orange.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #e4611b;
+  color: #e4611b;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-purple.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #a5377e;
+  color: #a5377e;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;

ot_templating/Resources/Public/assets/Classic/style/theme-red.css

@@ -965,6 +965,120 @@ header .slick-track {
   text-align: center;
 }
 
+.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, .ot-structures .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, .ot-structures 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 #df0009;
+  color: #df0009;
+}
+.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 #323232;
+  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;
+}
+
 .frame-type-menu_sitemap {
   font-size: 16px;
   font-weight: bold;