add basic style and populate

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

@@ -225,44 +225,43 @@
             <header>
                 <a class="btn go-back" href="#"><f:translate key="go-back"/></a>
                 <h2><f:translate key="member-companies"/></h2>
+            </header>
+            <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 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="categories-tags">
+            </div>
+            <div class="details">
+                <div class="description">
 
                 </div>
-                <div class="details">
-                    <div class="description">
+                <div class="contact">
 
-                    </div>
-                    <div class="contact">
-
-                    </div>
                 </div>
+            </div>
 
-                <div class="spot-on-bar">
-                    <a href="" class="btn"><f:translate key="spot-on-from"/></a>
-                </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 id="structure-details-map">
+            </div>
         </div>
     </div>
 </div>

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

@@ -599,12 +599,39 @@ $(document).ready(function() {
     });
 
     // Structure details
+    function populateDetailsView(structure) {
+        let logo = structureFrameDetails.find('.structure-header .logo').first();
+        logo.attr('src', structure.logoUri);
+
+        let title = structureFrameDetails.find('.structure-header .name').first();
+        title.text(structure.name)
+    }
+
     structureFrame.on('click', '.structure-see', function(e) {
         e.preventDefault();
         const organizationId = $(this).data('organization-id');
 
-        structureFrame.hide();
-        structureFrameDetails.show();
+        $.ajax({
+            type: 'GET',
+            url: '',
+            dataType: "json",
+            contentType: "application/json; charset=utf-8",
+            timeout : 5000
+        })
+            .done(function(res) {
+                structure = res["hydra:member"];
+
+                populateDetailsView(structure)
+                structureFrame.hide();
+                structureFrameDetails.show();
+            })
+            .fail(function(xhr, textStatus, errorThrown) {
+                pleaseWaitSpan.hide();
+                errorMsgSpan.show();
+                throw 'Error while fetching the API data: ' + textStatus  + ' - ' + errorThrown;
+            });
+
+
     })
 
     structureFrameDetails.on('click', '.go-back', function (e) {

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

@@ -470,4 +470,67 @@ $input-border-color: #bfbfbf;
 .ot-structures-frame-details {
   flex-direction: column;
 
+  header {
+    @include flex;
+    flex-direction: row;
+    background-color: #d9d9d9;
+
+    h2 {
+      font-size: 14px;
+      flex: 1
+    }
+  }
+
+  .structure-header {
+    @include flex;
+    flex-direction: row;
+
+    .logo {
+      width: 45px;
+    }
+
+    h3 {
+      flex: 1
+    }
+
+    .social a {
+      width: 16px;
+      padding: 4px 6px;
+    }
+  }
+
+  .illustration-container {
+    margin: 40px 20%;
+
+    img {
+    }
+  }
+
+  .categories-tags {
+    @include flex;
+    flex-direction: row;
+  }
+
+  .details {
+    @include flex;
+    flex-direction: row;
+
+    .description {
+      @include flex;
+      flex-direction: column;
+      padding-right: 25px;
+      border-right: solid 2px $btn-background-color;
+    }
+    .contact {
+      @include flex;
+      flex-direction: column;
+      padding-left: 25px;
+    }
+  }
+
+  .spot-on-bar {
+    @include flex;
+    flex-direction: row;
+  }
+
 }