From 8f9327d1008cd73e112bff110d7d3d19ce96e979 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 09:35:03 +0800 Subject: [PATCH 01/21] feat: add top aligned banner that does not block anything --- src/public/main.css | 1 + src/public/modules/core/css/banner.css | 58 +++++++++++++++++++++++++ src/public/modules/core/css/landing.css | 46 -------------------- 3 files changed, 59 insertions(+), 46 deletions(-) create mode 100644 src/public/modules/core/css/banner.css diff --git a/src/public/main.css b/src/public/main.css index d0ad4fefe1..bf28a358e8 100644 --- 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/modules/core/css/banner.css b/src/public/modules/core/css/banner.css new file mode 100644 index 0000000000..ede06375c3 --- /dev/null +++ b/src/public/modules/core/css/banner.css @@ -0,0 +1,58 @@ +/* BANNER COMPONENT */ + +banner-component { + -webkit-box-flex: 0; + -ms-flex: none; + flex: none; +} + +.banner-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + padding: 12px 50px 12px 20px; + background-color: #1e3e84; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + color: #f0f4f6; + line-height: 20px; + font-weight: 100; + overflow: hidden; + font-size: 16px; + z-index: 10; + width: 100%; + position: relative; +} + +.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; +} + +.banner-container a { + color: #f0f4f6; + text-decoration: underline; + cursor: pointer; + font-weight: normal; +} diff --git a/src/public/modules/core/css/landing.css b/src/public/modules/core/css/landing.css index e59110d2cd..a9f79cb519 100644 --- a/src/public/modules/core/css/landing.css +++ b/src/public/modules/core/css/landing.css @@ -802,49 +802,3 @@ #landing #landing-footer #footer-links span { float: right; } - -/* BANNER COMPONENT */ - -banner-component { - position: fixed; - font-size: 16px; - z-index: 10; - width: 100%; - bottom: 0; -} - -.banner-container { - display: flex; - padding: 12px 50px 12px 20px; - background-color: #1e3e84; - align-items: center; - justify-content: center; - color: #f0f4f6; - line-height: 20px; - font-weight: 100; - width: 100%; - overflow: hidden; -} - -.banner-container div { - display: inline-block; -} - -.banner-container #dismiss { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - right: 0; - top: 0; - height: 100%; - width: 50px; - cursor: pointer; -} - -.banner-container a { - color: #f0f4f6; - text-decoration: underline; - cursor: pointer; - font-weight: normal; -} From 12dcff2c3b51929e3bee53192e84c1407a669392 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 10:59:40 +0800 Subject: [PATCH 02/21] style: update styling of app to allow for sticky banner/navbar --- .../modules/core/css/admin-form-header.css | 35 ++++ src/public/modules/core/css/banner.css | 11 +- src/public/modules/core/css/core.css | 69 +++++++- .../modules/forms/admin/css/edit-form.css | 164 +++++++++++++++++- .../modules/forms/admin/css/list-forms.css | 9 +- .../admin/views/admin-form.client.view.html | 8 +- .../admin/views/list-forms.client.view.html | 5 - .../modules/forms/base/css/base-form.css | 49 +++++- src/public/modules/users/css/billing.css | 2 +- .../modules/users/css/examples-list.css | 2 +- 10 files changed, 318 insertions(+), 36 deletions(-) diff --git a/src/public/modules/core/css/admin-form-header.css b/src/public/modules/core/css/admin-form-header.css index 6695bbfb6d..9865a22d66 100644 --- a/src/public/modules/core/css/admin-form-header.css +++ b/src/public/modules/core/css/admin-form-header.css @@ -1,8 +1,21 @@ +/* +* 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; } @@ -10,6 +23,9 @@ 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; } @@ -195,6 +219,8 @@ width: 700px; top: 125px; left: 50%; + -webkit-transform: translate(-50%); + -ms-transform: translate(-50%); transform: translate(-50%); margin-bottom: 105px; } @@ -248,6 +274,8 @@ #admin-form #collaborator-modal-body { z-index: 500; + -webkit-box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), + 0 0 8px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 0 8px 0 rgba(0, 0, 0, 0.12); } @@ -364,6 +392,7 @@ margin-bottom: 10px; white-space: nowrap; overflow: hidden; + -o-text-overflow: ellipsis; text-overflow: ellipsis; } @@ -381,9 +410,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/banner.css b/src/public/modules/core/css/banner.css index ede06375c3..4597247d6e 100644 --- a/src/public/modules/core/css/banner.css +++ b/src/public/modules/core/css/banner.css @@ -1,9 +1,16 @@ +/* +* 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: none; - flex: none; + -ms-flex: 0 1 auto; + flex: 0 1 auto; } .banner-container { diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css index 38e7a2287e..54cee88c34 100755 --- a/src/public/modules/core/css/core.css +++ b/src/public/modules/core/css/core.css @@ -1,3 +1,10 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v7.0.29, +* Autoprefixer: v9.7.6 +* Browsers: last 4 version +*/ + /* Global Variables */ a { @@ -12,13 +19,29 @@ input:-webkit-autofill { -webkit-box-shadow: 0 0 0 30px white inset !important; } +html, +body { + height: 100%; + margin: 0; +} + body { - overflow-x: hidden; font-family: 'Muli', sans-serif; font-size: 16px; overscroll-behavior-y: none; } +section.content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + height: 100%; +} + .vcenter { display: inline-block; vertical-align: middle; @@ -132,6 +155,7 @@ textarea.input-custom { .input-custom:focus { border: solid 2px #2f60ce; + -webkit-box-shadow: none; box-shadow: none; outline: none; } @@ -141,20 +165,34 @@ textarea.input-custom { border: solid 1px #ccc; } -.input-custom::placeholder { +.input-custom::-webkit-input-placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #b8b8b8; + opacity: 1; /* Firefox */ +} + +.input-custom::-moz-placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #b8b8b8; opacity: 1; /* Firefox */ } .input-custom:-ms-input-placeholder { - /* Internet Explorer 10-11 */ + /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #b8b8b8; + opacity: 1; /* Firefox */ } .input-custom::-ms-input-placeholder { - /* Microsoft Edge */ + /* Chrome, Firefox, Opera, Safari 10.1+ */ + color: #b8b8b8; + opacity: 1; /* Firefox */ +} + +.input-custom::placeholder { + /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #b8b8b8; + opacity: 1; /* Firefox */ } /* ====================================================== */ @@ -302,6 +340,8 @@ button.btn-delete > .bx-trash { padding: 2px; border-radius: 23px; background-color: #dcdcdc; + -webkit-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; margin-bottom: 0; } @@ -316,9 +356,17 @@ button.btn-delete > .bx-trash { width: 30px; background-color: white; border-radius: 50%; + -webkit-transition: all 0.3s ease-in-out; + -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; border: solid 1px #b8b8b8; color: #b8b8b8; @@ -344,6 +392,8 @@ button.btn-delete > .bx-trash { } .toggle-selector-on .toggle-selector-switch { + -webkit-transform: translateX(101%); + -ms-transform: translateX(101%); transform: translateX(101%); border: solid 1px #07926e; color: #07926e; @@ -546,6 +596,7 @@ body #toast-container > div { } body #toast-container > div:hover { + -webkit-box-shadow: none; box-shadow: none; } @@ -574,7 +625,11 @@ body #toast-container .toast .toast-message .toast-custom-icon { left: 10px; font-size: 35px; height: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @@ -646,8 +701,14 @@ i.glyphicon-question-sign { width: 100%; background-color: rgba(255, 255, 255, 0.7); z-index: 1000; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; } diff --git a/src/public/modules/forms/admin/css/edit-form.css b/src/public/modules/forms/admin/css/edit-form.css index 1f1ef33a27..32add7826f 100644 --- a/src/public/modules/forms/admin/css/edit-form.css +++ b/src/public/modules/forms/admin/css/edit-form.css @@ -1,3 +1,10 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v7.0.29, +* Autoprefixer: v9.7.6 +* Browsers: last 4 version +*/ + .modal-body { overflow-x: hidden; } @@ -7,6 +14,44 @@ margin: auto; } +#admin-form .admin-form-content .tab-content .tab-pane .logic-container, +#admin-form .admin-form-content .tab-content .tab-pane .settings-container, +#admin-form .admin-form-content .tab-content .tab-pane .share-container, +#admin-form .admin-form-content .tab-content .tab-pane .results-container, +#admin-form .admin-form-content .tab-content .tab-pane .build-container { + overflow: auto; + height: 100%; +} + +#admin-form .admin-form-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + + /* Height of header and navbar */ + height: calc(100% - 135px); +} + +#admin-form .admin-form-content .nav-pills { + -webkit-box-flex: 0; + -ms-flex: 0 1 auto; + flex: 0 1 auto; +} + +#admin-form .admin-form-content .tab-content { + height: 100%; + + /* overflow: hidden; */ +} + +#admin-form .admin-form-content .tab-content .tab-pane { + height: 100%; +} + /* Left/bottom side of edit form: Add field icons */ @media not all and (min-width: 768px) { @@ -22,9 +67,11 @@ @media all and (min-width: 768px) { #admin-form #current-fields { - height: calc(100vh - 135px); - overflow-y: scroll; padding: 45px 10% 45px 10%; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + overflow: auto; } #admin-form #current-fields .current-field-item .current-field-title { @@ -37,7 +84,6 @@ #admin-form #add-field { float: left; width: 270px; - height: calc(100vh - 135px); overflow-y: scroll; background-color: #f0f4f6; } @@ -77,6 +123,8 @@ #admin-form #add-field .nav-tabs { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; } @@ -109,13 +157,10 @@ border-bottom: 3px solid white; } -#admin-form #add-field .tab-content { - padding: 20px 8px; -} - #admin-form #add-field .tab-content .tab-pane .row { margin-left: 0; margin-right: 0; + padding: 20px 8px; } #admin-form #add-field .add-field-panel { @@ -202,8 +247,14 @@ #admin-form #add-field-mobile #add-field-btn { position: fixed; z-index: 50; + 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; cursor: pointer; bottom: 10px; @@ -242,6 +293,8 @@ #add-field-modal .nav-tabs { width: 100%; + display: -webkit-box; + display: -ms-flexbox; display: flex; } @@ -278,8 +331,13 @@ } #add-field-modal .add-field-modal-panel { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; } @@ -323,8 +381,14 @@ bottom: 30px; left: calc(50% - 25px); z-index: 2000; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; color: #fff; font-size: 25px; @@ -371,7 +435,11 @@ #admin-form #current-fields .start-end-item { text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; font-size: 18px; line-height: 1.22; @@ -379,11 +447,19 @@ } #admin-form #current-fields .current-field-item { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; height: 60px; border: solid 1px #23489b; + -webkit-box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1); padding: 0 17px 0 17px; background-color: #fff; @@ -427,6 +503,8 @@ .current-field-item .current-field-icon *:first-child { + display: -webkit-box; + display: -ms-flexbox; display: flex; } @@ -435,6 +513,7 @@ line-height: 1.22; color: #4a4a4a; overflow: hidden; + -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } @@ -442,7 +521,11 @@ #admin-form #current-fields .current-field-item .current-field-options, #admin-form #current-fields .current-field-item .current-field-opt-icon-group { margin-left: auto; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @@ -454,8 +537,14 @@ background: none; border: none; outline: none; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; } @@ -467,8 +556,14 @@ font-size: 10px; color: #767676; background-color: #f0f0f0; + 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; } @@ -517,6 +612,7 @@ #admin-form #current-fields .current-field-hidden { border: 1px solid #dcdcdc; + -webkit-box-shadow: none; box-shadow: none; } @@ -529,6 +625,14 @@ #admin-form #edit-form { background-color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + height: 100%; } .edit-modal-window .modal-dialog { @@ -547,7 +651,11 @@ } .full-page-modal .modal-header > .modal-title { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @@ -572,6 +680,7 @@ border: none; border-radius: 0; overflow: auto; + -webkit-box-shadow: none; box-shadow: none; } @@ -606,7 +715,11 @@ > .modal-content > .modal-body .preview-field-panel { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; background-color: white; padding-top: 50px; @@ -696,6 +809,8 @@ } .edit-modal-window .modal-body > .row { + display: -webkit-box; + display: -ms-flexbox; display: flex; } @@ -840,6 +955,8 @@ position: absolute; bottom: 0; left: 0; + -webkit-transform: translate(-10px, 7px); + -ms-transform: translate(-10px, 7px); transform: translate(-10px, 7px); } @@ -945,7 +1062,11 @@ } .edit-modal-window .edit-panel .table-column-title { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; padding-bottom: 10px; } @@ -1002,7 +1123,10 @@ /* Color options on Edit Start Page modal */ .color-field { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -ms-flex-pack: distribute; justify-content: space-around; } @@ -1032,6 +1156,8 @@ } .color-field .selected-color-field { + -webkit-transform: scale(1.2); + -ms-transform: scale(1.2); transform: scale(1.2); } @@ -1169,7 +1295,11 @@ a.modal-cancel-btn:hover { /* Components */ .toggle-option { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @@ -1201,15 +1331,27 @@ a.modal-cancel-btn:hover { /* Image */ #upload-image { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; flex-direction: row; + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; border: solid 1px #b8b8b8; background-color: #fff; } #image-details { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; padding: 14px 0 14px 20px; } @@ -1225,7 +1367,11 @@ a.modal-cancel-btn:hover { } #upload-button-footer { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; justify-content: space-between; margin-top: 4px; margin-bottom: 8px; @@ -1244,7 +1390,11 @@ a.modal-cancel-btn:hover { } #remove-image { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; padding: 0 20px; } diff --git a/src/public/modules/forms/admin/css/list-forms.css b/src/public/modules/forms/admin/css/list-forms.css index 799684d78d..275075bcce 100644 --- a/src/public/modules/forms/admin/css/list-forms.css +++ b/src/public/modules/forms/admin/css/list-forms.css @@ -1,19 +1,12 @@ /* List forms */ #list-tab { - min-height: 100vh; width: 100%; + height: 100%; background-color: #f0f4f6; overflow-x: hidden; } -#list-form #list-form-exist #list-form-overlay { - position: absolute; - width: 90%; - height: 90%; - z-index: 0; -} - #list-form { z-index: 100; padding-bottom: 50px; diff --git a/src/public/modules/forms/admin/views/admin-form.client.view.html b/src/public/modules/forms/admin/views/admin-form.client.view.html index 802bb8ae36..7c39fb8dce 100644 --- a/src/public/modules/forms/admin/views/admin-form.client.view.html +++ b/src/public/modules/forms/admin/views/admin-form.client.view.html @@ -30,7 +30,6 @@ -
@@ -284,11 +283,14 @@
- +
-
+
diff --git a/src/public/modules/forms/admin/views/list-forms.client.view.html b/src/public/modules/forms/admin/views/list-forms.client.view.html index a8f2ebaa90..aed9664515 100644 --- a/src/public/modules/forms/admin/views/list-forms.client.view.html +++ b/src/public/modules/forms/admin/views/list-forms.client.view.html @@ -6,11 +6,6 @@
-
Welcome back, {{vm.userName}}
diff --git a/src/public/modules/forms/base/css/base-form.css b/src/public/modules/forms/base/css/base-form.css index 2bc565b60c..795299b091 100644 --- a/src/public/modules/forms/base/css/base-form.css +++ b/src/public/modules/forms/base/css/base-form.css @@ -1,3 +1,10 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v7.0.29, +* Autoprefixer: v9.7.6 +* Browsers: last 4 version +*/ + /* Standardised padding */ #admin-form #edit-logic, @@ -20,7 +27,11 @@ background-color: #2f60ce; white-space: nowrap; height: 53px; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; justify-content: flex-end; } @@ -73,6 +84,8 @@ } #preview-admin-tabs #preview-form-btn { + display: -webkit-box; + display: -ms-flexbox; display: flex; float: right; white-space: nowrap; @@ -80,6 +93,7 @@ background-color: #82a0e2; border: none; color: white; + -webkit-text-decoration-line: none; text-decoration-line: none; font-weight: bold; text-transform: uppercase; @@ -145,9 +159,20 @@ /* Datepicker styles */ div[uib-datepicker] { + -webkit-animation: datepicker-fade-in 0.4s ease; animation: datepicker-fade-in 0.4s ease; } +@-webkit-keyframes datepicker-fade-in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} + @keyframes datepicker-fade-in { 0% { opacity: 0; @@ -216,6 +241,7 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] { background-position: right 8px center; border: 1px solid #ccc; border-radius: 3px; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075); } @@ -234,14 +260,21 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] { border-width: 1px 0; } -#admin-form { - min-height: 100vh; -} - #admin-form.container { - margin: 0; + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; width: 100%; padding: 0; + overflow-y: hidden; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column; + flex-flow: column; + height: 100%; } #admin-form .form-controls .row { @@ -345,12 +378,18 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] { font-size: 0.9em; height: 42px; color: #a94442; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; } @media not all and (min-width: 1200px) { .save-changes-err { + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; margin-top: 10px; text-align: center; diff --git a/src/public/modules/users/css/billing.css b/src/public/modules/users/css/billing.css index 30c8e48dfc..e0d544bffa 100644 --- a/src/public/modules/users/css/billing.css +++ b/src/public/modules/users/css/billing.css @@ -1,6 +1,6 @@ #billing-tab { - min-height: 100vh; width: 100%; + height: 100%; background-color: #f0f4f6; overflow-x: hidden; } diff --git a/src/public/modules/users/css/examples-list.css b/src/public/modules/users/css/examples-list.css index 549751365f..2233fed995 100644 --- a/src/public/modules/users/css/examples-list.css +++ b/src/public/modules/users/css/examples-list.css @@ -1,6 +1,6 @@ #examples-tab { - min-height: 100vh; width: 100%; + height: 100%; background-color: #f0f4f6; overflow-x: hidden; } From 55a4d614faee85803510f1274c6770ddc6bfcc3c Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 11:43:30 +0800 Subject: [PATCH 03/21] feat: remove scroll-to-id directive and use $anchorScroll --- src/public/main.js | 1 - .../view-responses.client.controller.js | 18 ++++++++++++++++++ .../scroll-to-id.client.directive.js | 18 ------------------ .../views/view-responses.client.view.html | 4 ---- 4 files changed, 18 insertions(+), 23 deletions(-) delete mode 100644 src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js diff --git a/src/public/main.js b/src/public/main.js index a647a19cdc..3a22eceb84 100644 --- a/src/public/main.js +++ b/src/public/main.js @@ -192,7 +192,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') diff --git a/src/public/modules/forms/admin/controllers/view-responses.client.controller.js b/src/public/modules/forms/admin/controllers/view-responses.client.controller.js index ab0d81f37c..1f1555fdb5 100644 --- a/src/public/modules/forms/admin/controllers/view-responses.client.controller.js +++ b/src/public/modules/forms/admin/controllers/view-responses.client.controller.js @@ -16,6 +16,8 @@ angular 'Toastr', '$uibModal', '$timeout', + '$location', + '$anchorScroll', 'moment', 'FormSgSdk', ViewResponsesController, @@ -29,6 +31,8 @@ function ViewResponsesController( Toastr, $uibModal, $timeout, + $location, + $anchorScroll, moment, FormSgSdk, ) { @@ -105,6 +109,18 @@ function ViewResponsesController( }, } + // Function to use $anchorScroll to scroll to top of responses. + vm.scrollToTop = function () { + // set the location.hash + $location.hash('responses-tab') + + $anchorScroll() + + // Remove hash + $location.hash('') + $location.replace() + } + // Trigger for export CSV vm.exportCsv = function () { let params = { @@ -266,6 +282,7 @@ function ViewResponsesController( } vm.nextRespondent = function () { + vm.scrollToTop() if (vm.currentResponse.number <= 1) { // This is the last response } else if (vm.currentResponse.index >= vm.tableParams.data.length - 1) { @@ -286,6 +303,7 @@ function ViewResponsesController( } vm.previousRespondent = function () { + vm.scrollToTop() if (vm.currentResponse.number >= vm.responsesCount) { // This is the first response } else if (vm.currentResponse.index <= 0) { diff --git a/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js b/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js deleted file mode 100644 index 5d2ed5e22a..0000000000 --- a/src/public/modules/forms/admin/directives/scroll-to-id.client.directive.js +++ /dev/null @@ -1,18 +0,0 @@ -angular.module('forms').directive('scrollToId', scrollToId) - -function scrollToId() { - return { - restrict: 'A', - scope: { - scrollTo: '@', - }, - link: function (scope, $elm, _attr) { - $elm.on('click', function () { - $('html,body').animate( - { scrollTop: $(scope.scrollTo).offset().top }, - 'fast', - ) - }) - }, - } -} diff --git a/src/public/modules/forms/admin/views/view-responses.client.view.html b/src/public/modules/forms/admin/views/view-responses.client.view.html index f6f3081780..ec61c68495 100644 --- a/src/public/modules/forms/admin/views/view-responses.client.view.html +++ b/src/public/modules/forms/admin/views/view-responses.client.view.html @@ -171,8 +171,6 @@
- Have a question? +
+ +
Build government forms in minutes
+
Login
+
+ Singapore Public Service official email addresses only +
+ +
+ + +
+
+ + Have a question? +
@@ -60,54 +62,56 @@ class="input-overlay" src="/public/modules/core/img/sign-in-illustration.svg" /> -
- -
One-Time Password
- -
- - {{vm.signInMsg.msg}} -
-
- - Sending OTP... -
-
- - Resend OTP? +
+ +
One-Time Password
+ +
+ + {{vm.signInMsg.msg}} +
+
+ + Sending OTP... +
+
+ + Resend OTP? +
From e07c734b0ff672d37f6ac3b2539f108601d1035c Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 14:35:28 +0800 Subject: [PATCH 09/21] style: correct link styling for banner --- src/public/modules/core/css/banner.css | 27 ++++++++++++++++++-------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/src/public/modules/core/css/banner.css b/src/public/modules/core/css/banner.css index 1d89de4b09..df08799491 100644 --- a/src/public/modules/core/css/banner.css +++ b/src/public/modules/core/css/banner.css @@ -25,7 +25,7 @@ banner-component { -ms-flex-pack: center; justify-content: center; line-height: 20px; - font-weight: 100; + font-weight: normal; overflow: hidden; font-size: 16px; z-index: 10; @@ -40,16 +40,34 @@ banner-component { 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; } @@ -71,10 +89,3 @@ banner-component { width: 50px; cursor: pointer; } - -.banner-container a { - color: #f0f4f6; - text-decoration: underline; - cursor: pointer; - font-weight: normal; -} From d9434e109e76fe544a48b17ceaee131a3addd11b Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 15:16:21 +0800 Subject: [PATCH 10/21] chore: add documentation and example to banner env vars --- docs/DEPLOYMENT_SETUP.md | 91 ++++++++++++++++++++++++++++------------ 1 file changed, 65 insertions(+), 26 deletions(-) diff --git a/docs/DEPLOYMENT_SETUP.md b/docs/DEPLOYMENT_SETUP.md index 384faa974c..53b3db798f 100644 --- 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 | @@ -234,32 +273,32 @@ If this feature is enabled, forms will support authentication via [SingPass](htt Note that MyInfo is currently not supported for storage mode forms and enabling SingPass/CorpPass on storage mode forms also requires [SingPass/CorpPass for Storage Mode](#webhooks-and-singpasscorppass-for-storage-mode) to be enabled. -| Variable | Description | -| :------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `SPCP_COOKIE_MAX_AGE_PRESERVED` | Duration of SingPass JWT before expiry in milliseconds. Defaults to 30 days. | -| `SINGPASS_ESRVC_ID` | e-service ID registered with National Digital Identity office for SingPass authentication. | -| `SINGPASS_PARTNER_ENTITY_ID` | Partner ID registered with National Digital Identity Office for SingPass authentication. | -| `SINGPASS_IDP_LOGIN_URL` | URL of SingPass Login Page. | -| `SINGPASS_IDP_ENDPOINT` | URL to retrieve NRIC of SingPass-validated user from. | -| `SINGPASS_IDP_ID` | Partner ID of National Digital Identity Office for SingPass authentication. | -| `CORPPASS_ESRVC_ID` | e-service ID registered with National Digital Identity office for CorpPass authentication. | -| `CORPPASS_PARTNER_ENTITY_ID` | Partner ID registered with National Digital Identity Office for CorpPass authentication. | -| `CORPPASS_IDP_LOGIN_URL` | URL of CorpPass Login Page. | -| `CORPPASS_IDP_ENDPOINT` | URL to retrieve UEN of CorpPass-validated user from. | -| `CORPPASS_IDP_ID` | Partner ID of National Digital Identity Office for CorpPass authentication. | -| `SP_FORMSG_KEY_PATH` | Path to X.509 key used for SingPass related communication with National Digital Identity office. | -| `SP_FORMSG_CERT_PATH` | Path to X.509 cert used for SingPass related communication with National Digital Identity office. | -| `SP_IDP_CERT_PATH` | Path to National Digital Identity office's X.509 cert used for SingPass related communication. | -| `CP_FORMSG_KEY_PATH` | Path to X.509 key used for CorpPass related communication with National Digital Identity office. | -| `CP_FORMSG_CERT_PATH` | Path to X.509 cert used for CorpPass related communication with National Digital Identity office. | -| `CP_IDP_CERT_PATH` | Path to National Digital Identity office's X.509 cert used for CorpPass related communication. | -| `MYINFO_CLIENT_CONFIG` | Configures [MyInfoGovClient](https://github.com/opengovsg/myinfo-gov-client). Set this to either`stg` or `prod` to fetch MyInfo data from the corresponding endpoints. | -| `MYINFO_FORMSG_KEY_PATH` | Filepath to MyInfo private key, which is used to decrypt returned responses. | -| `MYINFO_APP_KEY` | (deprecated) Directly specify contents of the MyInfo FormSG private key. Only works if `NODE_ENV` is set to `development`. | -| `IS_SP_MAINTENANCE` | If set, displays a banner message on SingPass forms. Overrides `IS_CP_MAINTENANCE`. | -| `IS_CP_MAINTENANCE` | If set, displays a banner message on CorpPass forms. | -| `FILE_SYSTEM_ID` | The id of the AWS Elastic File System (EFS) file system to mount onto the instances. | -| `CERT_PATH` | The specific directory within the network file system that is to be mounted. This directory is expected to contain the public certs and private keys relevant to SingPass, CorpPass and MyInfo. | +| Variable | Description | +| :------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `SPCP_COOKIE_MAX_AGE_PRESERVED` | Duration of SingPass JWT before expiry in milliseconds. Defaults to 30 days. | +| `SINGPASS_ESRVC_ID` | e-service ID registered with National Digital Identity office for SingPass authentication. | +| `SINGPASS_PARTNER_ENTITY_ID` | Partner ID registered with National Digital Identity Office for SingPass authentication. | +| `SINGPASS_IDP_LOGIN_URL` | URL of SingPass Login Page. | +| `SINGPASS_IDP_ENDPOINT` | URL to retrieve NRIC of SingPass-validated user from. | +| `SINGPASS_IDP_ID` | Partner ID of National Digital Identity Office for SingPass authentication. | +| `CORPPASS_ESRVC_ID` | e-service ID registered with National Digital Identity office for CorpPass authentication. | +| `CORPPASS_PARTNER_ENTITY_ID` | Partner ID registered with National Digital Identity Office for CorpPass authentication. | +| `CORPPASS_IDP_LOGIN_URL` | URL of CorpPass Login Page. | +| `CORPPASS_IDP_ENDPOINT` | URL to retrieve UEN of CorpPass-validated user from. | +| `CORPPASS_IDP_ID` | Partner ID of National Digital Identity Office for CorpPass authentication. | +| `SP_FORMSG_KEY_PATH` | Path to X.509 key used for SingPass related communication with National Digital Identity office. | +| `SP_FORMSG_CERT_PATH` | Path to X.509 cert used for SingPass related communication with National Digital Identity office. | +| `SP_IDP_CERT_PATH` | Path to National Digital Identity office's X.509 cert used for SingPass related communication. | +| `CP_FORMSG_KEY_PATH` | Path to X.509 key used for CorpPass related communication with National Digital Identity office. | +| `CP_FORMSG_CERT_PATH` | Path to X.509 cert used for CorpPass related communication with National Digital Identity office. | +| `CP_IDP_CERT_PATH` | Path to National Digital Identity office's X.509 cert used for CorpPass related communication. | +| `MYINFO_CLIENT_CONFIG` | Configures [MyInfoGovClient](https://github.com/opengovsg/myinfo-gov-client). Set this to either`stg` or `prod` to fetch MyInfo data from the corresponding endpoints. | +| `MYINFO_FORMSG_KEY_PATH` | Filepath to MyInfo private key, which is used to decrypt returned responses. | +| `MYINFO_APP_KEY` | (deprecated) Directly specify contents of the MyInfo FormSG private key. Only works if `NODE_ENV` is set to `development`. | +| `IS_SP_MAINTENANCE` | If set, displays a banner message on SingPass forms. Overrides `IS_CP_MAINTENANCE`. | +| `IS_CP_MAINTENANCE` | If set, displays a banner message on CorpPass forms. | +| `FILE_SYSTEM_ID` | The id of the AWS Elastic File System (EFS) file system to mount onto the instances. | +| `CERT_PATH` | The specific directory within the network file system that is to be mounted. This directory is expected to contain the public certs and private keys relevant to SingPass, CorpPass and MyInfo. | #### Verified Emails/SMSes From dbb3be0df613cc7b4845da6bd48e7fe49f47c4e1 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Tue, 22 Sep 2020 15:51:58 +0800 Subject: [PATCH 11/21] style: update avatar styling to center on iOS --- src/public/modules/core/css/avatar-dropdown.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/public/modules/core/css/avatar-dropdown.css b/src/public/modules/core/css/avatar-dropdown.css index e1bb64c6e1..10fd228aaa 100644 --- a/src/public/modules/core/css/avatar-dropdown.css +++ b/src/public/modules/core/css/avatar-dropdown.css @@ -14,7 +14,7 @@ } .navbar__avatar__avatar { - display: block; + display: flex; color: #fff; text-transform: uppercase; border: 2px solid #484848; @@ -26,6 +26,8 @@ font-size: 16px; cursor: pointer; position: relative; + align-items: center; + justify-content: center; } @media not all and (min-width: 768px) { From aef4155b8dae70958086c9541b29e9154938105e Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Thu, 24 Sep 2020 14:00:38 +0800 Subject: [PATCH 12/21] fix: typo in banner component comment --- src/public/modules/core/components/banner.client.component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/public/modules/core/components/banner.client.component.js b/src/public/modules/core/components/banner.client.component.js index b94c87256e..80b6d2fa46 100644 --- a/src/public/modules/core/components/banner.client.component.js +++ b/src/public/modules/core/components/banner.client.component.js @@ -35,7 +35,7 @@ function bannerController() { } const processBannerMessage = () => { - // Retrieve banenr type from message, but it is possible that no types + // Retrieve banner type from message, but it is possible that no types // exist. const vmMessage = vm.message || '' const type = vmMessage.split(':').shift().toLowerCase() From 43136d832dc0b115e1fa6b29805bc3841cdbecdb Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 28 Sep 2020 17:02:25 +0800 Subject: [PATCH 13/21] style: add vendor prefixes to avatar-dropdown.css --- src/public/modules/core/css/avatar-dropdown.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/public/modules/core/css/avatar-dropdown.css b/src/public/modules/core/css/avatar-dropdown.css index 10fd228aaa..fbffccc786 100644 --- 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,6 +21,8 @@ } .navbar__avatar__avatar { + display: -webkit-box; + display: -ms-flexbox; display: flex; color: #fff; text-transform: uppercase; @@ -26,7 +35,11 @@ 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; } From 3e5cc5454f49e6c29cf93d38b2c19a60a5596825 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 28 Sep 2020 17:37:52 +0800 Subject: [PATCH 14/21] style: remove section.content styling add add .page-container class --- src/public/modules/core/css/core.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css index 54cee88c34..612671eacb 100755 --- a/src/public/modules/core/css/core.css +++ b/src/public/modules/core/css/core.css @@ -31,7 +31,13 @@ body { overscroll-behavior-y: none; } -section.content { +.vcenter { + display: inline-block; + vertical-align: middle; + float: none; +} + +.page-container { display: -webkit-box; display: -ms-flexbox; display: flex; @@ -39,13 +45,7 @@ section.content { -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; - height: 100%; -} - -.vcenter { - display: inline-block; - vertical-align: middle; - float: none; + height: 100vh; } /* ====================================================== */ From 7ecaa99c21243f568ea3a0e95c7d94e32c12a81d Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 28 Sep 2020 17:43:14 +0800 Subject: [PATCH 15/21] feat: add page-container class to all route htmls for correct styling --- .../admin/views/admin-form.client.view.html | 108 +++--- .../admin/views/list-forms.client.view.html | 199 ++++++----- .../modules/forms/base/css/base-form.css | 2 +- src/public/modules/users/css/sign-in.css | 2 +- .../users/views/billing.client.view.html | 330 +++++++++--------- .../views/examples-list.client.view.html | 196 ++++++----- 6 files changed, 429 insertions(+), 408 deletions(-) diff --git a/src/public/modules/forms/admin/views/admin-form.client.view.html b/src/public/modules/forms/admin/views/admin-form.client.view.html index eafda2dd36..545202e871 100644 --- a/src/public/modules/forms/admin/views/admin-form.client.view.html +++ b/src/public/modules/forms/admin/views/admin-form.client.view.html @@ -1,57 +1,59 @@ - -
- -
- -
-

{{myform.title}}

-

Saved at {{lastModifiedString}}

-
-
-
- - +
+ +
+ + -
- - - -
-
- -
- +
+

{{myform.title}}

+

Saved at {{lastModifiedString}}

- -
- - - - +
+
+ + +
- -
+ + + +
+
+ +
+ +
+ + +
+ + +
diff --git a/src/public/modules/forms/admin/views/list-forms.client.view.html b/src/public/modules/forms/admin/views/list-forms.client.view.html index aed9664515..7e13365d5c 100644 --- a/src/public/modules/forms/admin/views/list-forms.client.view.html +++ b/src/public/modules/forms/admin/views/list-forms.client.view.html @@ -1,114 +1,125 @@ - - +
+ + -
-
-
- -
- -
Welcome back, {{vm.userName}}
+
+
+
+ +
+
- -
- - Create new form -
+ +
Welcome back, {{vm.userName}}
- -
- -
-
- {{form.title | limitTo: 24}}{{form.title.length > 24 ? '...' : - ''}} -
-
{{form.title}}
-
{{form.lastModifiedString}}
-
- Published -
-
- Inactive -
+ +
+ + Create new form
- + +
- -
- + +
+
+ {{form.title | limitTo: 24}}{{form.title.length > 24 ? '...' : + ''}} +
+
{{form.title}}
+
{{form.lastModifiedString}}
+
+ Published +
+
+ Inactive +
+
+ +
+ +
+ + + +
+ -
- -
-
- -
-
-
-
Welcome {{vm.userName}}
+ +
+
+
+
Welcome {{vm.userName}}
+ +
+ Your dashboard seems empty. Start creating a new form or view + some examples below. +
+ +
-
- Your dashboard seems empty. Start creating a new form or view some - examples below. -
-
- +
-
-
-
+
+
diff --git a/src/public/modules/forms/base/css/base-form.css b/src/public/modules/forms/base/css/base-form.css index 795299b091..be6929756e 100644 --- a/src/public/modules/forms/base/css/base-form.css +++ b/src/public/modules/forms/base/css/base-form.css @@ -274,7 +274,7 @@ ul.dropdown-menu[uib-datepicker-popup-wrap] { -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; - height: 100%; + height: 100vh; } #admin-form .form-controls .row { diff --git a/src/public/modules/users/css/sign-in.css b/src/public/modules/users/css/sign-in.css index 51081d4933..3fb1c4018c 100755 --- a/src/public/modules/users/css/sign-in.css +++ b/src/public/modules/users/css/sign-in.css @@ -6,7 +6,7 @@ */ #sign-in { - height: 100%; + height: 100vh; background-color: #fff; } diff --git a/src/public/modules/users/views/billing.client.view.html b/src/public/modules/users/views/billing.client.view.html index 4453b875bb..c7aa4c0d8e 100644 --- a/src/public/modules/users/views/billing.client.view.html +++ b/src/public/modules/users/views/billing.client.view.html @@ -1,182 +1,188 @@ - +
+ -
-
-
Billing
-
-
- Export monthly bill charges -
- -
- - - -
-
-
-
-
-
- {{vm.sumTotal}} login(s) for - {{vm.esrvcId}} +
+
+
Billing
+
+
+ Export monthly bill charges +
+ +
+ + +
-
-
-
- - {{$select.selected.name}} - - - - +
+
+
+
+ {{vm.sumTotal}} login(s) for + {{vm.esrvcId}}
-
- +
+
+
+
+ + {{$select.selected.name}} + + + + +
+
+ +
-
-
-
- -
-
- -
An error occurred.
-
Note that e-service IDs are case-sensitive.
-
-
-
- - - - - - - - -
- {{row.formName}} - - {{row.authType === 'SP' ? 'SingPass' : 'CorpPass' }} - - {{row.authType}} - - {{row.total}} -
+
+
+
-
No results found
+
An error occurred.
Note that e-service IDs are case-sensitive.
-
-
-
-
- -
Bill charges
-
- To view your billing, enter your e-service ID below. -
-
e-service ID
-
- - -
-
+
+
+ +
Bill charges
+
+ To view your billing, enter your e-service ID below. +
+
e-service ID
+
+ + +
+
+
diff --git a/src/public/modules/users/views/examples-list.client.view.html b/src/public/modules/users/views/examples-list.client.view.html index e31fabbfa8..6dea69969a 100644 --- a/src/public/modules/users/views/examples-list.client.view.html +++ b/src/public/modules/users/views/examples-list.client.view.html @@ -1,106 +1,108 @@ - +
+ -
-
-
Form examples
-
-
- - {{vm.uiState.totalNumResults}} form(s) matching - ‘{{vm.searchParams.searchTerm}}’ in ‘{{ - vm.searchParams.filterByAgency ? 'Your agency' : 'All agencies' - }}’ - Reset - - - Explore forms and use as a template - -
-
-
+
+
- From 5b68d27e0ebfde85f6894c74b56c1aa5b1decca0 Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 28 Sep 2020 17:44:59 +0800 Subject: [PATCH 16/21] feat: add back overlay to trigger --- .../list-forms.client.controller.js | 6 ---- .../modules/forms/admin/css/list-forms.css | 32 +++++++++++++++++++ .../admin/views/list-forms.client.view.html | 2 +- 3 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js index 253be9a92e..b0e17f4fe2 100644 --- a/src/public/modules/forms/admin/controllers/list-forms.client.controller.js +++ b/src/public/modules/forms/admin/controllers/list-forms.client.controller.js @@ -152,12 +152,6 @@ function ListFormsController( vm.showFormBtns[formId] = true } - // Hide form buttons if area - // outside form buttons is clicked - vm.closeListFormModal = () => { - vm.clearFormBtns() - } - vm.clearFormBtns = () => { vm.showFormBtns = [] } diff --git a/src/public/modules/forms/admin/css/list-forms.css b/src/public/modules/forms/admin/css/list-forms.css index 275075bcce..414f1eb099 100644 --- a/src/public/modules/forms/admin/css/list-forms.css +++ b/src/public/modules/forms/admin/css/list-forms.css @@ -1,3 +1,10 @@ +/* +* Prefixed by https://autoprefixer.github.io +* PostCSS: v7.0.29, +* Autoprefixer: v9.7.6 +* Browsers: last 4 version +*/ + /* List forms */ #list-tab { @@ -7,9 +14,21 @@ overflow-x: hidden; } +#list-form #list-form-exist #list-form-overlay { + position: absolute; + + /* Huge width in addition to negative left positioning allows for both sides + of the form to be covered */ + width: 150vw; + left: -50%; + height: 100%; + z-index: 0; +} + #list-form { z-index: 100; padding-bottom: 50px; + position: relative; } /* Welcome message */ @@ -36,6 +55,7 @@ #list-form #list-form-exist .form-item { text-align: center; background-color: #fff; + -webkit-box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1); box-shadow: 1px 2px 6px 0 rgba(0, 0, 0, 0.1); /* Transparent border so content is not @@ -67,6 +87,8 @@ /* Mouseover behavior */ #list-form #list-form-exist .form-item#create-new:hover { + -webkit-transition: all 0.2s; + -o-transition: all 0.2s; transition: all 0.2s; background-color: #82a0e2; cursor: pointer; @@ -80,6 +102,8 @@ #list-form #list-form-exist .form-item:not(#create-new).active { background-color: #04aa80; cursor: pointer; + -webkit-transition: all 0.5s; + -o-transition: all 0.5s; transition: all 0.5s; opacity: 1; border: solid 3px #07926e; @@ -111,6 +135,7 @@ color: #323232; padding: 0 15px 10px 15px; overflow: hidden; + -o-text-overflow: ellipsis; text-overflow: ellipsis; } @@ -243,8 +268,15 @@ /* Small screen sizes */ @media not all and (min-width: 768px) { #list-form #list-form-exist { + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; flex-direction: column; } diff --git a/src/public/modules/forms/admin/views/list-forms.client.view.html b/src/public/modules/forms/admin/views/list-forms.client.view.html index 7e13365d5c..0bf7be60b9 100644 --- a/src/public/modules/forms/admin/views/list-forms.client.view.html +++ b/src/public/modules/forms/admin/views/list-forms.client.view.html @@ -9,7 +9,7 @@
From 5552c9feb44e3c5b517f69cf3ead63867cfb768a Mon Sep 17 00:00:00 2001 From: Kar Rui Lau Date: Mon, 28 Sep 2020 18:11:56 +0800 Subject: [PATCH 17/21] feat: add id to banner component --- src/public/modules/core/componentViews/banner.html | 1 + src/public/modules/core/css/banner.css | 5 +++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/public/modules/core/componentViews/banner.html b/src/public/modules/core/componentViews/banner.html index b29699c15e..09c2f8dfc4 100644 --- a/src/public/modules/core/componentViews/banner.html +++ b/src/public/modules/core/componentViews/banner.html @@ -1,4 +1,5 @@