upgrade modern/structures and improve responsivity

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

@@ -10,11 +10,9 @@
 <div class="main">
     <f:comment><!-- Central column --></f:comment>
     <div class="content">
-        <iframe title="structures"
-                width="100%"
-                height="2600px"
-                src="https://frames.opentalent.fr/structures?parent={settings.organizationId}&theme={ot:template.getPreference(key: 'themeColor')}"
-                style="border: none !important; max-width: 100% !important; height: 2600px !important; width: 100% !important;"/>
+        <div class="ot-structures">
+            <iframe src="https://frames.opentalent.fr/structures?parent={settings.organizationId}&theme={ot:template.getPreference(key: 'themeColor')}"/>
+        </div>
     </div>
 </div>
 

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

@@ -12,99 +12,9 @@
 
 
         <section class="page-section-ptb">
-            <div class="container">
-                <div class="row">
-                    <div class="col-sm-12 mt-30">
-                        <f:comment><!-- All members --></f:comment>
-                        <h3><f:translate key="member-companies"/></h3>
-
-                        <div class="ot-structures">
-
-                            <ot:organizations.getChildren as="structuresCollection"
-                                                          organizationId="{settings.organizationId}">
-
-
-                                <div class="ot-structures">
-                                    <div class="structure-controls">
-                                        <div class="structure-search">
-                                            <form>
-                                                <input type="text"
-                                                       name="search-loc"
-                                                       placeholder="{f:translate(key: 'where')}?"
-                                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
-
-                                                <f:comment><!--
-                                                Important: if the cache is not disabled,
-                                                 then the results won't be updated even after submitting this form
-                                                 --></f:comment>
-                                                <input type="hidden"
-                                                       name="no_cache"
-                                                       value="1">
-
-                                                <button name="search-submit"><f:translate key="find"/></button>
-                                            </form>
-                                        </div>
-
-                                        <div 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">
-                                        <f:if condition="{structuresCollection.totalItems} == 0">
-                                            <span><f:translate key="no-result"/></span>
-                                        </f:if>
-
-                                        <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>
-
-                                                    <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 target="_blank" 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>
-                            </ot:organizations.getChildren>
-
-                        </div>
-                    </div>
-                </div>
+            <div class="ot-structures">
+                <iframe src="https://frames.opentalent.fr/structures?parent={settings.organizationId}&theme={ot:template.getPreference(key: 'themeColor')}"
+                        style="border: none !important; max-width: 100% !important; height: 2600px !important; width: 100% !important;"/>
             </div>
         </div>
 

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

@@ -1,140 +1,19 @@
 // Structures page
 
-$btn-background-color: $menu-background-color;
-$btn-text-color: $menu-font-color;
-$input-border-color: #bfbfbf;
-
 .ot-structures {
-  @include flex;
-  flex-direction: row;
-
-  .structure-controls {
-    order: 1;
-    flex: 1;
-  }
-
-  .structure-results {
-    order: 0;
-    flex: 1;
-  }
-
-  .structure-controls, .structure-results {
-    @include flex;
-    flex-direction: column;
-    margin: 0 1.5em;
-  }
-
-  .structure-search {
-    @include flex;
-    flex-direction: column;
-    margin-bottom: 2em;
-  }
-
-  h3 {
-    font-size: 1.2em;
-    font-weight: bold;
-  }
-
-  .structure-search form {
-    @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;
+  iframe {
+    border: none;
     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;
+    height: 3200px;
   }
 
-  .structure-see:hover {
-    text-decoration: none;
-    font-weight: bold;
+  @media screen and (min-width: 1100px) {
+    iframe {
+      margin-left: -10%;
+      width: 120%;
+      max-width: 120%;
+      height: 2600px;
+    }
   }
 }