fix: display multiple lines in footer branding on Studio

Duplicate Richie footer behaviour to allow a multi-line branding footer. fccn/nau-technical#173
fccn · Jun 26, 2024 · 8958839 · 8958839
1 parent 2da529c
commit 8958839
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 45 deletions.
diff --git a/edx-platform/nau-basic/cms/static/sass/partials/cms/theme/_footer.scss b/edx-platform/nau-basic/cms/static/sass/partials/cms/theme/_footer.scss
@@ -78,46 +78,50 @@ footer {
 
     section#entities-quick-links {
         background-color: white;
-        display: flex;
-        justify-content: space-between;
-        padding: 40px 50px;
-        flex-wrap: wrap;
+        padding: 25px 65px;
 
         @media screen and (max-width: $breakpoint-medium) {
             flex-direction: column;
+            padding-right: 0;
+            padding-left: 0;
         }
 
-        & > div {
-            text-align: center;
-            padding-bottom: 10px;
+        .entities-quick-links__line {
+            display:flex;
+            justify-content: center;
+            gap: 1.5rem;
+            border-block-end: 1px solid #dedede;
+            padding: 1rem 0 1.6rem 0;
 
-            img {
-                max-width: 280px;
+            &:last-child {
+                border: none;
+            }
 
-                @media screen and (max-width: $breakpoint-small) {
-                    max-width: 200px;
-                }
+            @media screen and (max-width: $breakpoint-medium) {
+                flex-direction: column;
+                align-items: center;
             }
+        }
+
+        .entities-links-logo { 
+            text-align: center;
+            padding-top: 10px;
+            padding-right: 5px;
+            padding-left: 5px;            
 
-            .wp-caption-text {
-                border: 0;
-                clip: rect(1px, 1px, 1px, 1px);
-                clip-path: inset(50%);
-                height: 1px;
-                margin: -1px;
-                overflow: hidden;
-                padding: 0;
-                position: absolute;
-                width: 1px;
-                word-wrap: normal !important;
+            img {
+                max-width: calc(100vw - 20px);
+                max-height: 4.6rem;
             }
 
             @media screen and (max-width: $breakpoint-medium) {
-                padding: 10px 10px 0 10px;
+                margin-left: auto;
+                margin-right: auto;
             }
 
             &:first-child {
                 text-align: left;
+                padding-left: 0px;
 
                 @media screen and (max-width: $breakpoint-medium) {
                     text-align: center;
@@ -126,6 +130,7 @@ footer {
 
             &:last-child {
                 text-align: right;
+                padding-right: 0px;
 
                 @media screen and (max-width: $breakpoint-medium) {
                     text-align: center;
@@ -159,3 +164,5 @@ footer {
         }
     }
 }
+
+//aaa
diff --git a/edx-platform/nau-basic/cms/templates/widgets/footer.html b/edx-platform/nau-basic/cms/templates/widgets/footer.html
@@ -62,30 +62,33 @@
         </div>
       </div>
     </div>
-<!--
-    <section id="entities-quick-links">        
-      <ul class="flex-row">
-        <li><a href="https://nau.edu.pt"><img id="logo-nau" src="${static.url('images/nau_sempre_aprender.svg')}" alt="Logo NAU" title="NAU - Sempre a Aprender"></a>
-            <span id="copyright" >&copy; 2020 - FCT|FCCN. Todos os direitos reservados.</span>
-        </li>
-        <li><a id="logo-compete" href="https://www.fccn.pt/financiamento-projeto-nau/"><img src="${static.url('images/3logos-feder_small.png')}" alt="Logos: Compete, Portugal 2020 e União Europeia - Fundo Europeu de Desenvolvimento Regional"  title="Compete 2020, Portugal 2020 e União Europeia - Fundo Europeu de Desenvolvimento Regional"></a></li>
-        <li><a id="logo-incode2030" href="https://www.incode2030.gov.pt/" target="_blank"><img src="${static.url('images/logo_incode2030_v3.png')}" alt="Portugal - INcode2030" title="Visitar o site INcode.2030"></a></li>  
-      </ul>
-    </section>
--->
+
     <%
-  entities_logos = static.get_value('NAU_ENTITIES_FOOTER', {}).get("itens", {})
-%>
-    <!-- corporate entities logos -->
+      footer_logos = static.get_value('NAU_FOOTER_LOGOS', {}).get("itens", {})
+    %>
+    % if len(footer_logos)>0:
     <section id="entities-quick-links">
-      % for entity in entities_logos:
-      <div class="entities-links-logo">
-        <a href="${entity['link']}" class="entity-link" target="_blank" rel="noreferer noopener">
-          <img src="${entity['image']}" alt="${entity['alt'] if 'alt' in entity.keys() else ''}">
-        </a>
-      </div>
+    <!-- institutional logos -->
+      % for row in footer_logos:
+      <section class="entities-quick-links__line">
+        % for item in row: 
+        <div class="entities-links-logo">
+          <a href="${item.get('link','')}" class="entity-link" target="${item.get('target', '_blank')}" rel="noopener">
+            <img
+              loading="lazy"
+              src="${item.get('image', '')}"
+              alt="${item.get('alt', '')}"
+              title="${item.get('title', '')}"
+              width="${item.get('width', '')}"
+              height="${item.get('height', '')}" />
+          </a>
+        </div>
+        % endfor
+      </section>
       % endfor
+    <!-- end of institutional logos -->
     </section>
+    % endif
     <section class="site-copyright">
       <div class="site-copyright--nau">
         <span>&copy; ${datetime.now().year} - FCT|FCCN<br>${_('All rights reserved')}</span>

diff --git a/edx-platform/nau-basic/cms/templates/widgets/header.html b/edx-platform/nau-basic/cms/templates/widgets/header.html
@@ -14,7 +14,7 @@
     <div class="wrapper wrapper-l">
       <h1 class="branding">
         <a class="brand-link" href="/">
-	  <img class="brand-image" src="${static.url('images/nau_sempre_aprender.svg')}" alt="${settings.STUDIO_NAME}" />
+	  <img class="brand-image" src="${static.url('images/logo_nau_by_fccn_fct.svg')}" alt="${settings.STUDIO_NAME}" />
         </a>
       </h1>