fix: display multiple lines in footer branding

Duplicate Richie footer behaviour to allow a multi-line branding footer. The last line of the branding footer should be reserved to Republica Portuguesa and FCCN. fccn/nau-technical#173
fccn · Jun 24, 2024 · b4cda5c · b4cda5c
1 parent 066bdb1
commit b4cda5c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 16 deletions.
diff --git a/edx-platform/nau-basic/lms/static/sass/partials/lms/theme/_footer.scss b/edx-platform/nau-basic/lms/static/sass/partials/lms/theme/_footer.scss
@@ -87,18 +87,32 @@ footer {
     }
 
     section#entities-quick-links {
-        display: flex;
-        justify-content: center;
         padding: 25px 65px;
-        flex-wrap: wrap;
 
         @media screen and (max-width: $breakpoint-medium) {
             flex-direction: column;
             padding-right: 0;
             padding-left: 0;
         }
 
-        & > div {
+        .entities-quick-links__line {
+            display:flex;
+            justify-content: center;
+            gap: 1.5rem;
+            border-block-end: 1px solid #dedede;
+            padding: 1rem 0 1.6rem 0;
+
+            &:last-child {
+                border: none;
+            }
+
+            @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;
@@ -110,7 +124,6 @@ footer {
             }
 
             @media screen and (max-width: $breakpoint-medium) {
-                padding: 10px 10px 0;
                 margin-left: auto;
                 margin-right: auto;
             }

diff --git a/edx-platform/nau-basic/lms/templates/footer.html b/edx-platform/nau-basic/lms/templates/footer.html
@@ -70,17 +70,21 @@
     <!-- corporate entities logos -->
     <section id="entities-quick-links">
       % for entity in static.get_value('NAU_ENTITIES_FOOTER', {}).get("itens", {}):
-      <div class="entities-links-logo">
-        <a href="${entity.get('link','')}" class="entity-link" target="${entity.get('target', '_blank')}" rel="noopener">
-          <img
-            loading="lazy"
-            src="${entity.get('image', '')}"
-            alt="${entity.get('alt', '')}"
-            title="${entity.get('title', '')}"
-            width="${entity.get('width', '')}"
-            height="${entity.get('height', '')}" />
-        </a>
-      </div>
+        <section class="entities-quick-links__line">
+        % for line in entity:
+        <div class="entities-links-logo">
+          <a href="${line.get('link','')}" class="entity-link" target="${line.get('target', '_blank')}" rel="noopener">
+            <img
+              loading="lazy"
+              src="${line.get('image', '')}"
+              alt="${line.get('alt', '')}"
+              title="${line.get('title', '')}"
+              width="${line.get('width', '')}"
+              height="${line.get('height', '')}" />
+          </a>
+        </div>
+        % endfor
+        </section>
       % endfor
     </section>
     <!-- ends corporate entities -->