feat: move notification banner back to top and add banner type capabi…

…lities (#359) * feat: add top aligned banner that does not block anything * style: update styling of app to allow for sticky banner/navbar * feat: remove scroll-to-id directive and use $anchorScroll * style: update MyInfo field tab styling * style: update form builder styling for mobile * feat: add function to process banner message encoding to display * style: add banner styling for the various types of banners * style: update styling for signin view to accommodate banner * style: correct link styling for banner * chore: add documentation and example to banner env vars * style: update avatar styling to center on iOS * fix: typo in banner component comment * style: add vendor prefixes to avatar-dropdown.css * style: remove section.content styling add add .page-container class * feat: add page-container class to all route htmls for correct styling * feat: add back overlay to trigger * feat: add id to banner component * feat: add dynamic padding to form header when banner is shown * feat: make retrieval of banner type more forgiving Co-authored-by: shuli-ogp <[email protected]> * style: fix wrong paddings on myinfo disabled overlay in add fields * style: update add myinfo field padding to be back to original style Co-authored-by: shuli-ogp <[email protected]>
opengovsg · Sep 29, 2020 · 4b9a81f · 4b9a81f
1 parent e7f2549
commit 4b9a81f
Show file tree

Hide file tree

Showing 28 changed files with 1,115 additions and 618 deletions.
diff --git a/docs/DEPLOYMENT_SETUP.md b/docs/DEPLOYMENT_SETUP.md
@@ -130,6 +130,45 @@ The following env variables are set in Travis:
 
 #### Banners
 
+These environment variables allow us to set notification banners in the
+application without a full redeployment of the application. Note the hierarchy
+of the banner content.
+
+In addition, you can change the color of the banner by adding a type encoding in
+the environment variable string. The default banner type will be `info` if no encoding is
+provided.
+
+The possible banner type prefixes are: `info:`, `warn:`, and `error:`. Other
+prefixes will not work and the invalid prefixes will be shown in the banner
+text.
+
+Examples:
+
+```
+SITE_BANNER_CONTENT=info:This is an info banner. You can also add links in the text like https://example.com. There is also a dismiss button to the right of the text.
+```
+
+![Info banner
+example](https://user-images.githubusercontent.com/22133008/93852946-8a867780-fce5-11ea-929f-a0ce1c6796b9.png)
+
+```
+SITE_BANNER_CONTENT=warn:This is a warning banner. You can also add links in the text like https://example.com
+```
+
+![Warning banner example](https://user-images.githubusercontent.com/22133008/93852559-cec54800-fce4-11ea-9376-9b2802e8ac62.png)
+
+```
+SITE_BANNER_CONTENT=error:This is an error banner. You can also add links in the text like https://example.com
+```
+
+![Error banner example](https://user-images.githubusercontent.com/22133008/93852689-1055f300-fce5-11ea-956d-d5966cbe86d8.png)
+
+```
+SITE_BANNER_CONTENT=hello:This is an invalid banner type, and the full text will be shown. The default banner type of `info` will used.
+```
+
+![Invalid banner default example](https://user-images.githubusercontent.com/22133008/93853306-392ab800-fce6-11ea-9891-f752bdad236e.png)
+
 | Variable                 | Description                                                                                                                                                                                                   |
 | :----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `SITE_BANNER_CONTENT`    | If set, displays a banner message on both private routes that `ADMIN_BANNER_CONTENT` covers **and** public form routes that `IS_GENERAL_MAINTENANCE` covers. Overrides all other banner environment variables |

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

diff --git a/src/public/main.js b/src/public/main.js
@@ -194,7 +194,6 @@ require('./modules/forms/admin/directives/configure-form.client.directive.js')
 require('./modules/forms/admin/directives/configure-mobile.client.directive.js')
 require('./modules/forms/admin/directives/verify-secret-key.client.directive.js')
 require('./modules/forms/admin/directives/daterangepicker.client.directive.js')
-require('./modules/forms/admin/directives/scroll-to-id.client.directive.js')
 require('./modules/forms/admin/directives/edit-captcha.client.directive.js')
 require('./modules/forms/admin/controllers/create-form-template-modal.client.controller.js')
 require('./modules/forms/admin/controllers/collaborator-modal.client.controller.js')

diff --git a/src/public/modules/core/componentViews/banner.html b/src/public/modules/core/componentViews/banner.html
@@ -1,8 +1,16 @@
-<div class="banner-container" ng-if="!vm.bannerHidden">
+<div
+  id="notification-banner"
+  class="banner-container banner-container-{{vm.bannerType}}"
+  ng-if="!vm.bannerHidden"
+>
   <div>
-    <span ng-bind-html="vm.message"></span>
+    <span ng-bind-html="vm.bannerMessage"></span>
   </div>
-  <div id="dismiss" ng-click="vm.dismissBanner()">
+  <div
+    ng-if="vm.bannerType === vm.BANNER_TYPES.info"
+    id="dismiss"
+    ng-click="vm.dismissBanner()"
+  >
     <i class="bx bx-x bx-md"></i>
   </div>
 </div>
diff --git a/src/public/modules/core/components/banner.client.component.js b/src/public/modules/core/components/banner.client.component.js
@@ -12,10 +12,17 @@ angular.module('core').component('bannerComponent', {
 function bannerController() {
   const vm = this
 
+  vm.BANNER_TYPES = {
+    info: 'info',
+    warn: 'warn',
+    error: 'error',
+  }
+
   vm.$onInit = () => {
     if (!vm.message) {
       vm.bannerHidden = true
     } else {
+      processBannerMessage()
       vm.bannerHidden = false
     }
   }
@@ -26,4 +33,21 @@ function bannerController() {
       vm.bannerHidden = true
     })
   }
+
+  const processBannerMessage = () => {
+    // Retrieve banner type from message, but it is possible that no types
+    // exist.
+    const vmMessage = vm.message || ''
+    const type = vmMessage.split(':').shift().trim().toLowerCase()
+    const retrievedType = vm.BANNER_TYPES[type]
+
+    vm.bannerType = retrievedType || vm.BANNER_TYPES.info
+
+    // If there is a type retrieved from message, remove the type encoding in
+    // the message.
+    // The + 1 is to also remove the semicolon from the encoding
+    vm.bannerMessage = retrievedType
+      ? vmMessage.substring(vmMessage.indexOf(':') + 1).trim()
+      : vmMessage
+  }
 }
diff --git a/src/public/modules/core/css/admin-form-header.css b/src/public/modules/core/css/admin-form-header.css
@@ -1,15 +1,31 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 /* Form header */
 
 #admin-form .vcenter {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
 }
 
 #admin-form #form-header {
   padding-top: 10px;
   padding-bottom: 10px;
   background-color: white;
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
 }
 
 #admin-form #form-header #header-myforms {
@@ -26,8 +42,14 @@
 
 #admin-form #form-header .right-spacer {
   margin-right: 15px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
+  -webkit-box-pack: end;
+  -ms-flex-pack: end;
   justify-content: flex-end;
 }
 
@@ -48,6 +70,7 @@
 
 #admin-form #form-header #header-myforms a:hover {
   color: #2f60ce;
+  -webkit-text-decoration-line: none;
   text-decoration-line: none;
 }
 
@@ -61,6 +84,7 @@
   margin-bottom: 0;
   white-space: nowrap;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 
@@ -205,6 +229,8 @@
     width: 700px;
     top: 125px;
     left: 50%;
+    -webkit-transform: translate(-50%);
+    -ms-transform: translate(-50%);
     transform: translate(-50%);
   }
 
@@ -379,6 +405,7 @@
   margin-bottom: 10px;
   white-space: nowrap;
   overflow: hidden;
+  -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
 }
 
@@ -396,9 +423,15 @@
   cursor: pointer;
   height: 20px;
   width: 20px;
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
   font-size: 30px;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
   justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
   align-items: center;
   color: #979797;
   margin-left: 20px;

diff --git a/src/public/modules/core/css/avatar-dropdown.css b/src/public/modules/core/css/avatar-dropdown.css
@@ -1,3 +1,10 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
 .navbar__avatar {
   position: relative;
   display: -webkit-inline-box;
@@ -14,7 +21,9 @@
 }
 
 .navbar__avatar__avatar {
-  display: block;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   color: #fff;
   text-transform: uppercase;
   border: 2px solid #484848;
@@ -26,6 +35,12 @@
   font-size: 16px;
   cursor: pointer;
   position: relative;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
 }
 
 @media not all and (min-width: 768px) {

diff --git a/src/public/modules/core/css/banner.css b/src/public/modules/core/css/banner.css
@@ -0,0 +1,92 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
+/* BANNER COMPONENT */
+
+banner-component {
+  -webkit-box-flex: 0;
+  -ms-flex: 0 1 auto;
+  flex: 0 1 auto;
+}
+
+.banner-container {
+  position: sticky;
+  top: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 12px 20px;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  line-height: 20px;
+  font-weight: normal;
+  overflow: hidden;
+  font-size: 16px;
+  z-index: 999;
+  width: 100%;
+}
+
+.banner-container-info {
+  /* Additional padding as opposed to the rest to accomodate dismiss button */
+  padding: 12px 50px 12px 20px;
+  background-color: #1e3e84;
+  color: #f0f4f6;
+}
+
+.banner-container-info a {
+  color: #f0f4f6;
+}
+
+.banner-container a {
+  text-decoration: underline;
+  cursor: pointer;
+  font-weight: normal;
+}
+
+.banner-container-warn {
+  background-color: #ffe47a;
+  color: #323232;
+}
+
+.banner-container-warn a {
+  color: #323232;
+}
+
+.banner-container-error {
+  background-color: #a94442;
+  color: #fff;
+}
+
+.banner-container-error a {
+  color: #fff;
+}
+
+.banner-container div {
+  display: inline-block;
+}
+
+.banner-container #dismiss {
+  position: absolute;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 50px;
+  cursor: pointer;
+}