feat: update landing page footer (#584)

* feat: add initial footer component * feat: replace current links with i18n translations social links are not replaced yet * feat: add social links to footer * feat: replace old footer with new footer component * style: remove border from second footer section * style: fix styling for ie11 move full color svg to file for better dimensions, update css * feat: update app name in landing footer from FormSG to Form
opengovsg · Nov 10, 2020 · f4838eb · f4838eb
1 parent 47509a0
commit f4838eb
Show file tree

Hide file tree

Showing 10 changed files with 414 additions and 140 deletions.
diff --git a/.htmlhintrc b/.htmlhintrc
@@ -1,6 +1,6 @@
 {
-  "tagname-lowercase": true,
-  "attr-lowercase": ["viewBox"],
+  "tagname-lowercase": ["clipPath"],
+  "attr-lowercase": ["viewBox", "maskUnits"],
   "attr-value-double-quotes": true,
   "doctype-first": false,
   "tag-pair": true,

diff --git a/src/public/main.css b/src/public/main.css
@@ -17,6 +17,7 @@
 @import './modules/core/css/edit-contact-number-modal.css';
 @import './modules/core/css/admin-form-header.css';
 @import './modules/core/css/sg-govt-banner.css';
+@import './modules/core/css/footer.css';
 @import './modules/core/css/landing.css';
 @import './modules/core/css/banner.css';
 @import './modules/core/css/how-it-works.css';

diff --git a/src/public/main.js b/src/public/main.js
@@ -163,6 +163,7 @@ require('./modules/core/components/navbar.client.component.js')
 require('./modules/core/components/avatar-dropdown.client.component')
 require('./modules/core/components/banner.client.component.js')
 require('./modules/core/components/sg-govt-banner.client.component.js')
+require('./modules/core/components/footer.client.component.js')
 
 /**
  * Forms module
@@ -345,6 +346,10 @@ app.run([
       'modules/core/componentViews/sg-govt-banner.html',
       require('./modules/core/componentViews/sg-govt-banner.html'),
     )
+    $templateCache.put(
+      'modules/core/componentViews/footer.html',
+      require('./modules/core/componentViews/footer.html'),
+    )
 
     // Core views
     $templateCache.put(

diff --git a/src/public/modules/core/componentViews/footer.html b/src/public/modules/core/componentViews/footer.html
@@ -0,0 +1,117 @@
+<footer class="landing__footer">
+  <div class="footer__section footer__section--bottom-border">
+    <div class="footer__tagline">
+      <h1 class="tagline--name" translate="FOOTER.APP_NAME"></h1>
+      <span class="tagline--caption" translate="FOOTER.APP_TEXT"></span>
+    </div>
+    <div class="footer__links">
+      <a
+        class="footer__links--link"
+        translate-attr="{ href: 'FOOTER.USER_GUIDE.HREF' }"
+        translate="FOOTER.USER_GUIDE.TEXT"
+        target="_blank"
+      ></a>
+      <a
+        class="footer__links--link"
+        ui-sref="privacy"
+        target="_blank"
+        translate="FOOTER.PRIVACY.TEXT"
+      ></a>
+      <a
+        class="footer__links--link"
+        ui-sref="terms"
+        target="_blank"
+        translate="FOOTER.TOS.TEXT"
+      ></a>
+      <a
+        class="footer__links--link footer__links--link--last"
+        translate-attr="{ href: 'FOOTER.REPORT_VULNS.HREF' }"
+        translate="FOOTER.REPORT_VULNS.TEXT"
+        target="_blank"
+      ></a>
+    </div>
+  </div>
+  <div class="footer__section">
+    <div>
+      <a
+        class="footer__logo"
+        translate-attr="{ href: 'FOOTER.COPYRIGHT.HREF' }"
+        target="_blank"
+      >
+        <span class="footer__logo--builtby"> Built by </span>
+        <img
+          class="footer__logo--logo"
+          src="/public/modules/core/img/ogp-logo-full-color.svg"
+        />
+      </a>
+    </div>
+    <div class="footer__socials">
+      <div class="footer__socials--links">
+        <a
+          class="footer__socials--link footer__socials--link--first"
+          translate-attr="{ href: 'FOOTER.SOCIALS.LINKEDIN' }"
+          target="_blank"
+        >
+          <i class="bx bxl-linkedin"></i>
+        </a>
+        <a
+          class="footer__socials--link"
+          translate-attr="{ href: 'FOOTER.SOCIALS.FACEBOOK' }"
+          target="_blank"
+        >
+          <i class="bx bxl-facebook"></i>
+        </a>
+        <a
+          class="footer__socials--link footer__socials--link--last"
+          translate-attr="{ href: 'FOOTER.SOCIALS.OGP' }"
+          target="_blank"
+        >
+          <!-- Not using image as we want to change the color on active states -->
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="32"
+            height="32"
+            fill="currentColor"
+            viewBox="0 0 32 32"
+          >
+            <mask
+              id="uz33y1jqaa"
+              width="9"
+              height="24"
+              x="2"
+              y="4"
+              maskUnits="userSpaceOnUse"
+            >
+              <path fill="#EEE" d="M2.286 4h8.47v23.999h-8.47V4z" />
+            </mask>
+            <g mask="url(#uz33y1jqaa)">
+              <path
+                fill="currentColor"
+                fill-rule="evenodd"
+                d="M10.676 25.58c.077-.137.1-.298.065-.452-.035-.154-.126-.288-.255-.375-2.78-1.868-4.617-5.09-4.617-8.754 0-3.663 1.837-6.884 4.617-8.753.129-.087.22-.22.255-.375.035-.153.012-.315-.065-.452L9.489 4.311c-.041-.073-.097-.137-.163-.187-.066-.05-.142-.087-.222-.107-.08-.02-.164-.022-.245-.008-.081.014-.16.045-.228.091C4.815 6.614 2.286 11.003 2.286 16c0 4.997 2.53 9.385 6.345 11.899.069.046.147.077.228.091.081.014.165.012.245-.008.08-.02.156-.056.222-.106.066-.05.121-.115.163-.188l1.187-2.108z"
+                clip-rule="evenodd"
+              />
+            </g>
+            <path
+              fill="currentColor"
+              fill-rule="evenodd"
+              d="M22.646 4.311L21.459 6.42c-.077.136-.1.298-.065.451.035.154.126.288.255.375 2.78 1.868 4.616 5.09 4.616 8.754 0 3.663-1.837 6.885-4.617 8.753-.128.087-.219.221-.254.375s-.012.315.065.452l1.187 2.108c.041.073.097.137.163.188.066.05.142.086.222.106.08.02.164.022.245.008.081-.014.159-.045.228-.091 3.816-2.514 6.345-6.902 6.345-11.9 0-4.996-2.53-9.385-6.345-11.899-.07-.046-.147-.077-.228-.091-.081-.014-.165-.012-.245.008-.08.02-.156.056-.222.107-.066.05-.122.114-.163.187"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </a>
+      </div>
+      <a
+        class="footer__copyright"
+        translate-attr="{ href: 'FOOTER.COPYRIGHT.HREF' }"
+        target="_blank"
+      >
+        <span
+          translate="FOOTER.COPYRIGHT.TEXT.LINE_1"
+          translate-value-year="{{vm.currentYear}}"
+        ></span>
+        <span translate="FOOTER.COPYRIGHT.TEXT.LINE_2"></span>
+      </a>
+    </div>
+  </div>
+</footer>
diff --git a/src/public/modules/core/components/footer.client.component.js b/src/public/modules/core/components/footer.client.component.js
@@ -0,0 +1,5 @@
+'use strict'
+
+angular.module('core').component('footerComponent', {
+  templateUrl: 'modules/core/componentViews/footer.html',
+})