Updated : Issue 1978 - Changes to footer based on intranet implemen… (

#2113) * Updated : Issue 1978 - Changes to footer based on `intranet` implementation findings * Updated : Issue 1978 - Changes to footer based on `intranet` implementation findings
visual-framework · Sep 10, 2024 · e91d5f8 · e91d5f8
1 parent eadb6c1
commit e91d5f8
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 3 deletions.
diff --git a/components/vf-footer/CHANGELOG.md b/components/vf-footer/CHANGELOG.md
@@ -1,3 +1,7 @@
+### 1.2.1
+
+* Changes to footer based on `EMBL-EBI Intranet` implementation findings [Tracking issue](https://github.com/visual-framework/vf-core/issues/1978)
+
 ### 1.2.0
 
 * Requires at least `@visual-framework@vf-sass-config@2.6.1`.

diff --git a/components/vf-footer/vf-footer.njk b/components/vf-footer/vf-footer.njk
@@ -93,8 +93,8 @@
         </li>
       </ul>
       <p class="vf-footer__legal-text">Copyright © Your Organisation.</p>
-      <p class="vf-footer__legal-text">Maybe an address too, 5555, Somewhere, Earth.</p>
-      <p class="vf-footer__legal-text">Tel: +49 00 000 000.</p>
+      <a class="vf-footer__link" href="{{ footer__url }}">Maybe an address too, 5555, Somewhere, Earth.</a>
+      <a class="vf-footer__link" href="{{ footer__url }}">Tel: +49 00 000 000.</a>
       <a class="vf-footer__link" href="{{ footer__url }}">Another entry</a>
     </section>
   </div>

diff --git a/components/vf-footer/vf-footer.scss b/components/vf-footer/vf-footer.scss
@@ -88,7 +88,8 @@
 
   .vf-footer__legal-text,
   .vf-footer__link {
-    padding-top: 12px;
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
 
   @media (min-width: $vf-breakpoint--lg) {
@@ -118,6 +119,7 @@
   border-width: 1px 0;
   margin-bottom: 12px;
   padding-bottom: 24px;
+  grid-template-columns: repeat(5, 1fr);
 
   .vf-links__heading {
     @include set-type(text-body--6, $custom-margin-bottom: 8px, $color: ignore);
@@ -197,3 +199,31 @@
     }
   }
 }
+
+@media (max-width: 768px) {
+
+  .vf-footer__links-group {
+    grid-template-columns: repeat(3, 1fr);
+
+    .vf-list__item {
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+  }
+
+  .vf-footer__legal .vf-footer__legal-text,  .vf-footer__legal .vf-footer__link {
+    padding-top: 14px;
+    padding-bottom: 14px;
+  }
+
+  .vf-footer .vf-grid {
+    grid-row-gap: 0rem;
+  }
+}
+
+@media (max-width: 600px) {
+
+  .vf-footer__links-group {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}