add switch to details and html skeleton

ot_templating/Resources/Private/Language/locallang.xlf

@@ -65,7 +65,9 @@
 				<source>Gabarit Evènements des structures</source>
 			</trans-unit>
 
-
+			<trans-unit id="go-back">
+				<source>Retour</source>
+			</trans-unit>
 			<trans-unit id="noPageSelected">
 				<source>Veuillez sélectionner une des pages du site à personnaliser pour accéder à cette rubrique.</source>
 			</trans-unit>
@@ -205,6 +207,9 @@
 			<trans-unit id="please-wait">
 				<source>Veuillez patienter...</source>
 			</trans-unit>
+			<trans-unit id="spot-on-from">
+				<source>Coup de projecteur du</source>
+			</trans-unit>
 			<trans-unit id="more-informations">
 				<source>Plus d'infos</source>
 			</trans-unit>

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

@@ -1,7 +1,13 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 {namespace ot=Opentalent\OtTemplating\ViewHelpers}
 
-<f:comment><!-- Special layout for the Members page --></f:comment>
+<f:comment>
+    <!--
+    Special layout for the federation members page
+
+    This page is designed to be embedded in an iframe
+    -->
+</f:comment>
 <f:layout name="StructuresFrame" />
 
 <f:render partial="Classic/Assets" />
@@ -22,6 +28,12 @@
         <div class="ot-structures-frame map-view"
              data-organization-id="{settings.organizationId}">
 
+            <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-col structure-col-map">
                 <div id="structure-map-wrapper">
                     <div id="structure-map">
@@ -42,11 +54,6 @@
             </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 method="get" id="structure-search-form">
                         <div class="structure-search-row">
@@ -149,30 +156,27 @@
 
                             <div class="structure-details">
                                  <div class="structure-categories">
-                                    <span class="structure-category-model" style="display: none">{category}</span>
+                                    <span class="structure-category-model" style="display: none"></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 class="structure-details-address">
-                                            {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 class="structure-details-federation">{structure.parentName}</td>
+                                        <td class="structure-details-federation"></td>
                                     </tr>
                                 </table>
                             </div>
 
                             <div class="spacer"></div>
 
-                            <a target="_blank" class="btn structure-see" href="{structure.otherWebsite}">
+                            <a class="btn structure-see" data-organization-id="" href="#">
                                 <span><f:translate key="see-more"/></span>
                                 <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
                             </a>
@@ -215,8 +219,50 @@
                 <span id="8CI"><f:translate key="8CI"/></span>
                 <span id="OTAU"><f:translate key="OTAU"/></span>
             </span>
+        </div>
 
+        <div class="ot-structures-frame-details" style="display: none">
+            <header>
+                <a class="btn go-back" href="#"><f:translate key="go-back"/></a>
+                <h2><f:translate key="member-companies"/></h2>
+
+                <div class="structure-header">
+                    <img src="" alt="logo" class="logo" />
+                    <h3 class="name"></h3>
+                    <span class="social">
+                        <a href="" class="facebook" style="display: none">
+                            <i class="fab fa-facebook" style="color: #129af6"></i>
+                        </a>
+                        <a href="" class="instagram" style="display: none">
+                            <i class="fab fa-instagram-square" style="color: #f2f2f2"></i>
+                        </a>
+                        <a href="" class="twitter" style="display: none">
+                            <i class="fab fa-twitter" style="color: #1da1f2"></i>
+                        </a>
+                    </span>
+                </div>
+                <div class="illustration-container">
+
+                </div>
+                <div class="categories-tags">
 
+                </div>
+                <div class="details">
+                    <div class="description">
+
+                    </div>
+                    <div class="contact">
+
+                    </div>
+                </div>
+
+                <div class="spot-on-bar">
+                    <a href="" class="btn"><f:translate key="spot-on-from"/></a>
+                </div>
+
+                <div id="structure-details-map">
+                </div>
+            </header>
         </div>
     </div>
 </div>

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

@@ -40,6 +40,7 @@ $(document).ready(function() {
     // Init
     let document = $('html, body');
     let structureFrame = $('.ot-structures-frame').first();
+    let structureFrameDetails = $('.ot-structures-frame-details').first();
 
     // let organizationId = structureFrame.data('org-id');
 
@@ -52,6 +53,9 @@ $(document).ready(function() {
     let paginationList = structureFrame.find('.pagination-list').first();
     let gotoFirstPage = structureFrame.find('.goto-first-page').first();
     let gotoLastPage = structureFrame.find('.goto-last-page').first();
+    let resultsCountMessage = structureFrame.find('.results-count-message').first();
+    let resultsCountVar = resultsCountMessage.find('.count').first();
+    let detailsSection = structureFrame.find('.structure-see').first();
 
     let form = $("#structure-search-form");
     let whatInput = form.find("input[name='search-query']").first();
@@ -282,6 +286,8 @@ $(document).ready(function() {
                 );
                 cardDiv.find('.structure-details-federation').first().text(structure.n1Name);
 
+                cardDiv.find('.structure-see').first().data('organization-id', structure.id)
+
                 cardDiv.show();
                 cardDiv.removeClass('structure-card-model');
                 cardDiv.addClass('structure-card');
@@ -591,4 +597,20 @@ $(document).ready(function() {
             alert(tr['geoloc-unsupported']);
         }
     });
+
+    // Structure details
+    structureFrame.on('click', '.structure-see', function(e) {
+        e.preventDefault();
+        const organizationId = $(this).data('organization-id');
+
+        structureFrame.hide();
+        structureFrameDetails.show();
+    })
+
+    structureFrameDetails.on('click', '.go-back', function (e) {
+        e.preventDefault();
+
+        structureFrameDetails.hide();
+        structureFrame.show();
+    })
 });

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

@@ -139,451 +139,3 @@ $input-border-color: #bfbfbf;
   }
 
 }
-
-// New template for the framed template structures
-.ot-structures-frame {
-  @include flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  header {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-start;
-    width: 100%;
-    align-items: center;
-  }
-
-  h2 {
-    font-size: 21px;
-    font-weight: 750;
-    flex: 1;
-    text-align: left;
-    color: $btn-background-color;
-  }
-
-  header a {
-    padding: 3px;
-    margin: 2px;
-    font-weight: 500;
-  }
-
-  input, select {
-    height: 36px;
-    border: solid 1px $input-border-color;
-    border-radius: 0;
-  }
-
-  .structure-col {
-    @include flex;
-    flex-direction: column;
-    flex: 1;
-    max-width: 50%;
-    padding: 12px;
-    align-items: center;
-  }
-
-  .btn {
-    background-color: $btn-background-color;
-    border-radius: 4px;
-    padding: 8px;
-    font-weight: 750;
-    color: $btn-text-color;
-    text-align: center;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  // The wrapper role is to maintain the map's height equal to its width
-  // @see https://stackoverflow.com/a/14896313/4279120
-  #structure-map-wrapper {
-    position: relative;
-    width: 100%;
-    padding-bottom: 100%;
-    float: left;
-    height: 0;
-  }
-
-  #structure-map {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    left: 0;
-  }
-
-  #structure-map a {
-    text-decoration: none;
-  }
-
-  #structure-map-bar {
-    margin: 16px 2% 6px 2%;
-    max-width: 100%;
-  }
-
-  #structure-map-bar .btn {
-    margin: 0 10%;
-  }
-
-  #overseas-provinces-list {
-    @include flex;
-    flex-direction: row;
-    list-style: none;
-    align-items: center;
-    flex-wrap: wrap;
-    padding: 0;
-  }
-
-  #overseas-provinces-list li {
-    border: solid 1px #000000;
-    height: 80px;
-    width: 80px;
-    margin: 0 6px 6px 0;
-  }
-
-  #overseas-provinces-list li img {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-
-  .structure-search {
-    width: 100%;
-  }
-
-  .structure-search form {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .structure-search-row {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    margin-bottom: 8px;
-  }
-
-  .search-bar-wrapper {
-    display: flex;
-    flex-direction: row;
-    height: 30px;
-    padding: 6px 2%;
-    border: solid 1px $input-border-color;
-    margin: 6px 0;
-    max-width: 44%;
-  }
-
-  .search-bar-wrapper:not(:last-child) {
-    margin-right: auto;
-  }
-
-  .search-bar {
-    flex: 1;
-    background: none;
-    outline: none;
-    height: auto;
-    font-size: 18px;
-    border: none;
-    width: 95%;
-  }
-
-  .search-bar-btn {
-    border: none;
-    background: none;
-    width: 5%;
-    min-width: 24px;
-    padding: 5px;
-    font-size: 18px;
-    cursor: pointer;
-    min-height: 32px;
-  }
-
-  .search-bar-btn .fas {
-    color: darken($input-border-color, 20);
-  }
-
-  .city-search-dropdown {
-    min-width: 100%;
-    position: relative;
-    display: inline-block;
-    top: -24px;
-    left: -24px;
-  }
-
-  .city-search-results, .city-search-no-result, .city-search-loading {
-    position: absolute;
-    min-width: 100%;
-    background: #EEEEEE;
-    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
-    z-index: 99;
-  }
-
-  .city-search-loading img {
-    padding:10px;
-    width:30px;
-  }
-
-  .city-search-item {
-    display: block;
-    padding: 12px 24px;
-    white-space: nowrap;
-  }
-
-  .city-search-item:hover {
-    background-color: #d9d9d9;
-    cursor: pointer;
-  }
-
-  .structure-search select {
-    color: $btn-background-color;
-    padding: 4px 6px;
-    margin: 3px 6px;
-    font-weight: 750;
-    width: 127px;
-    font-size: 12px;
-  }
-
-  .structure-search .reset-search {
-    background: none;
-    color: $btn-background-color;
-    margin: 0 6px 6px 6px;
-    cursor: pointer;
-    height: 36px;
-    border: solid 2px $btn-background-color;
-    border-radius: 0;
-  }
-
-  .structure-search .submit-search {
-    background-color: $btn-background-color;
-    color: $btn-text-color;
-    font-weight: 750;
-    margin: 0 6px 6px 6px;
-    cursor: pointer;
-    height: 36px;
-    border: none;
-    border-radius: 0;
-  }
-
-  .structure-results .structures-page {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
-
-  .structure-card {
-    display: flex;
-    flex-direction: column;
-    width: 44%;
-    min-width: 240px;
-    border: solid 1px #cccccc;
-    border-radius: 4px;
-    padding: 12px 8px;
-    margin: 8px 1%;
-    background-color: #f2f2f2;
-  }
-
-  .structure-poster {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    margin: 8px;
-    min-width: 200px;
-  }
-
-  .structure-poster img {
-    width: auto;
-    height: auto;
-  }
-
-  .structure-details {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .structure-details > * {
-    margin: 4px;
-  }
-
-  .structure-categories {
-    display: flex;
-    flex-direction: row;
-    min-height: 18px;
-  }
-
-  .structure-category {
-    background-color: #d9d9d9;
-    color: #262626;
-    font-size: 11px;
-    margin-right: 4px;
-    padding: 1px 5px;
-    height: 16px;
-    border-radius: 6px;
-  }
-
-  .structure-name {
-    font-size: 21px;
-    font-weight: 750;
-    width: 100%;
-    text-align: left;
-    color: $btn-background-color;
-  }
-
-  .structure-details-table tr {
-    background-color: #eeeeee !important;
-  }
-
-  .structure-details-table td {
-    border:none;
-  }
-
-  .structure-details-entry {
-    color: #595959;
-  }
-
-  .structure-details-entry .fas {
-    color: $btn-background-color;
-  }
-
-  .structure-see {
-    width: 128px;
-    max-height: 28px;
-    padding: 4px;
-    font-weight: 500;
-    margin-top: 8px;
-  }
-
-  .structure-see:hover {
-    text-decoration: none;
-    color: white;
-  }
-
-  .pagination-bar {
-    li a {
-      color: #4d4d4d;
-      font-weight: 600;
-    }
-
-    li.current a {
-      color: $btn-background-color;
-    }
-  }
-}
-
-.ot-structures-frame.list-view {
-  // List view changes
-
-  .structure-col-map {
-    display: none;
-  }
-
-  .structure-search form .search-buttons {
-  }
-
-  .search-bar-wrapper {
-    flex: 1;
-    max-width: none;
-  }
-
-  .search-bar-wrapper:not(:last-child) {
-    margin-right: 2%;
-  }
-
-  .structure-search-row.filters {
-    margin: 0 auto 12px auto;
-  }
-
-  .search-bar {
-    flex: 1;
-    max-width: none;
-  }
-
-  .filters select, .filters button {
-    height: 52px;
-    width: auto;
-  }
-
-  .filters button {
-    margin: 3px 6px;
-  }
-
-  .structure-col-results {
-    width: 100%;
-    max-width: 100%;
-  }
-
-  .structure-card {
-    width: 95%;
-    flex-direction: row;
-  }
-
-  .structure-card .spacer {
-    flex: 0; // disable spacer in list view
-  }
-
-  .structure-details {
-    flex: 1;
-  }
-
-  .structure-see {
-    align-self: flex-end;
-  }
-}
-
-.ot-structures-frame.map-view .activate-map-view {
-  font-weight: 750;
-}
-.ot-structures-frame.list-view .activate-list-view {
-  font-weight: 750;
-}
-
-// Small screens
-@media screen and (max-width: 700px) {
-  .ot-structures-frame {
-    flex-direction: column;
-    flex-wrap: nowrap;
-
-    .structure-col {
-      max-width: none;
-
-      // prevents content to be higher than the container
-      min-width: 100px;
-      overflow: hidden;
-    }
-
-    #overseas-provinces-list li {
-      margin: 0 auto 6px auto;
-      height: 90px;
-      width: 90px;
-    }
-
-    .structure-search-row {
-      flex-direction: column;
-    }
-
-    .search-bar-wrapper {
-      width: 95%;
-      max-width: 95%;
-      margin: 3px auto;
-    }
-
-    .search-bar-wrapper input {
-      width: auto;
-    }
-
-    .structure-search select {
-      width: 95%;
-      margin: 3px auto;
-    }
-
-    .structure-card {
-      width: 100%;
-    }
-
-    .list-view .structure-card {
-      flex-direction: column;
-    }
-  }
-}

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

@@ -0,0 +1,473 @@
+// template structures frame
+
+$btn-background-color: $menu-background-color;
+$btn-text-color: $menu-font-color;
+$input-border-color: #bfbfbf;
+
+.ot-structures-frame, .ot-structures-frame-details {
+  @include flex;
+
+  header {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: 100%;
+    align-items: center;
+  }
+
+  h2 {
+    font-size: 21px;
+    font-weight: 750;
+    flex: 1;
+    text-align: left;
+    color: $btn-background-color;
+  }
+
+  header a {
+    padding: 3px;
+    margin: 2px;
+    font-weight: 500;
+  }
+
+  input, select {
+    height: 36px;
+    border: solid 1px $input-border-color;
+    border-radius: 0;
+  }
+
+  .structure-col {
+    @include flex;
+    flex-direction: column;
+    flex: 1;
+    max-width: 50%;
+    padding: 12px;
+    align-items: center;
+  }
+
+  .btn {
+    background-color: $btn-background-color;
+    border-radius: 4px;
+    padding: 8px;
+    font-weight: 750;
+    color: $btn-text-color;
+    text-align: center;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+}
+
+.ot-structures-frame {
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  // The wrapper role is to maintain the map's height equal to its width
+  // @see https://stackoverflow.com/a/14896313/4279120
+  #structure-map-wrapper {
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%;
+    float: left;
+    height: 0;
+  }
+
+  #structure-map {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+  }
+
+  #structure-map a {
+    text-decoration: none;
+  }
+
+  #structure-map-bar {
+    margin: 16px 2% 6px 2%;
+    max-width: 100%;
+  }
+
+  #structure-map-bar .advice {
+    color: #e4611b;
+    font-weight: 750;
+    text-align: center;
+  }
+
+  #overseas-provinces-list {
+    @include flex;
+    flex-direction: row;
+    list-style: none;
+    align-items: center;
+    flex-wrap: wrap;
+    padding: 0;
+  }
+
+  #overseas-provinces-list li {
+    border: solid 1px #000000;
+    height: 80px;
+    width: 80px;
+    margin: 0 6px 6px 0;
+  }
+
+  #overseas-provinces-list li img {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .structure-search {
+    width: 100%;
+  }
+
+  .structure-search form {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .structure-search-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    margin-bottom: 8px;
+  }
+
+  .search-bar-wrapper {
+    display: flex;
+    flex-direction: row;
+    height: 30px;
+    padding: 6px 2%;
+    border: solid 1px $input-border-color;
+    margin: 6px 0;
+    max-width: 44%;
+  }
+
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: auto;
+  }
+
+  .search-bar {
+    flex: 1;
+    background: none;
+    outline: none;
+    height: auto;
+    font-size: 18px;
+    border: none;
+    width: 95%;
+    min-width: 85%;
+  }
+
+  .search-bar-btn {
+    border: none;
+    background: none;
+    width: 5%;
+    min-width: 24px;
+    padding: 5px;
+    font-size: 18px;
+    cursor: pointer;
+    min-height: 32px;
+  }
+
+  .search-bar-btn .fas {
+    color: darken($input-border-color, 20);
+  }
+
+  .city-search-dropdown {
+    min-width: 100%;
+    position: relative;
+    display: inline-block;
+    top: 10px;
+    left: -100%;
+  }
+
+  .city-search-results, .city-search-no-result, .city-search-loading {
+    position: absolute;
+    min-width: 100%;
+    background: #EEEEEE;
+    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
+    z-index: 99;
+    top: 100%;
+  }
+
+  .city-search-loading img {
+    padding:10px;
+    width:30px;
+  }
+
+  .city-search-item {
+    display: block;
+    padding: 12px 24px;
+    white-space: nowrap;
+  }
+
+  .city-search-item:hover {
+    background-color: #d9d9d9;
+    cursor: pointer;
+  }
+
+  .structure-search select {
+    color: $btn-background-color;
+    padding: 4px 6px;
+    margin: 3px 6px;
+    font-weight: 750;
+    width: 127px;
+    font-size: 12px;
+  }
+
+  .structure-search .reset-search {
+    background: none;
+    color: $btn-background-color;
+    margin: 0 6px 6px 6px;
+    cursor: pointer;
+    height: 36px;
+    border: solid 2px $btn-background-color;
+    border-radius: 0;
+  }
+
+  .structure-search .submit-search {
+    background-color: $btn-background-color;
+    color: $btn-text-color;
+    font-weight: 750;
+    margin: 0 6px 6px 6px;
+    cursor: pointer;
+    height: 36px;
+    border: none;
+    border-radius: 0;
+  }
+
+  .structure-results .structures-page {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .structure-card {
+    display: flex;
+    flex-direction: column;
+    width: 44%;
+    min-width: 240px;
+    border: solid 1px #cccccc;
+    border-radius: 4px;
+    padding: 12px 8px;
+    margin: 8px 1%;
+    background-color: #f2f2f2;
+  }
+
+  .structure-poster {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 8px;
+    min-width: 200px;
+  }
+
+  .structure-poster img {
+    width: auto;
+    height: auto;
+  }
+
+  .structure-details {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .structure-details > * {
+    margin: 4px;
+  }
+
+  .structure-categories {
+    display: flex;
+    flex-direction: row;
+    min-height: 18px;
+  }
+
+  .structure-category {
+    background-color: #d9d9d9;
+    color: #262626;
+    font-size: 11px;
+    margin-right: 4px;
+    padding: 1px 5px;
+    height: 16px;
+    border-radius: 6px;
+  }
+
+  .structure-name {
+    font-size: 21px;
+    font-weight: 750;
+    width: 100%;
+    text-align: left;
+    color: $btn-background-color;
+  }
+
+  .structure-details-table tr {
+    background-color: #eeeeee !important;
+  }
+
+  .structure-details-table td {
+    border:none;
+  }
+
+  .structure-details-entry {
+    color: #595959;
+  }
+
+  .structure-details-entry .fas {
+    color: $btn-background-color;
+  }
+
+  .structure-see {
+    width: 128px;
+    max-height: 28px;
+    padding: 4px;
+    font-weight: 500;
+    margin-top: 8px;
+  }
+
+  .structure-see:hover {
+    text-decoration: none;
+    color: white;
+  }
+
+  .results-count-message {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    color: #666666;
+    font-size: 0.8em;
+  }
+
+  .pagination-bar {
+    li a {
+      color: #4d4d4d;
+      font-weight: 600;
+    }
+
+    li.current a {
+      color: $btn-background-color;
+    }
+  }
+}
+
+.ot-structures-frame.list-view {
+  // List view changes
+
+  .structure-col-map {
+    display: none;
+  }
+
+  .structure-search form .search-buttons {
+  }
+
+  .search-bar-wrapper {
+    flex: 1;
+    max-width: none;
+  }
+
+  .search-bar-wrapper:not(:last-child) {
+    margin-right: 2%;
+  }
+
+  .structure-search-row.filters {
+    margin: 0 auto 12px auto;
+  }
+
+  .search-bar {
+    flex: 1;
+    max-width: none;
+  }
+
+  .filters select, .filters button {
+    height: 52px;
+    width: auto;
+  }
+
+  .filters button {
+    margin: 3px 6px;
+  }
+
+  .structure-col-results {
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .structure-card {
+    width: 95%;
+    flex-direction: row;
+  }
+
+  .structure-card .spacer {
+    flex: 0; // disable spacer in list view
+  }
+
+  .structure-details {
+    flex: 1;
+  }
+
+  .structure-see {
+    align-self: flex-end;
+  }
+}
+
+.ot-structures-frame.map-view .activate-map-view {
+  font-weight: 750;
+}
+.ot-structures-frame.list-view .activate-list-view {
+  font-weight: 750;
+}
+
+// Small screens
+@media screen and (max-width: 700px) {
+  .ot-structures-frame {
+    flex-direction: column;
+    flex-wrap: nowrap;
+
+    .structure-col {
+      max-width: none;
+
+      // prevents content to be higher than the container
+      min-width: 100px;
+      overflow: hidden;
+    }
+
+    #overseas-provinces-list li {
+      margin: 0 auto 6px auto;
+      height: 90px;
+      width: 90px;
+    }
+
+    .structure-search-row {
+      flex-direction: column;
+    }
+
+    .search-bar-wrapper {
+      width: 95%;
+      max-width: 95%;
+      margin: 3px auto;
+    }
+
+    .search-bar-wrapper input {
+      width: auto;
+    }
+
+    .structure-search select {
+      width: 95%;
+      margin: 3px auto;
+    }
+
+    .structure-card {
+      width: 100%;
+    }
+
+    .list-view .structure-card {
+      flex-direction: column;
+    }
+  }
+}
+
+.ot-structures-frame-details {
+  flex-direction: column;
+
+}

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

@@ -93,6 +93,7 @@ $warning-font-color: #ffffff !default;
 "module/_donors-box",
 "module/_members",
 "module/_structures",
+"module/_structuresframe",
 "module/_sitemap",
 "module/_forms",
 "module/_news",