feat: update TOU + PP, update public form footer (#682)

* feat: add TOU and PP to public form footer * feat: update privacy policy * feat: update TOU * style: update styling for privacy and tou pages * style: update padding * style: add browser autoprefixes * fix: remove display:table causes display width on ie11 to be unbounded
opengovsg · Nov 20, 2020 · c39d803 · c39d803
1 parent 014efb8
commit c39d803
Show file tree

Hide file tree

Showing 7 changed files with 897 additions and 721 deletions.
diff --git a/src/public/main.css b/src/public/main.css
@@ -48,4 +48,5 @@
 @import './modules/users/css/sign-in.css';
 @import './modules/users/css/examples-list.css';
 @import './modules/users/css/examples-card.css';
+@import './modules/users/css/privacy-tou.css';
 @import './modules/users/css/billing.css';
diff --git a/src/public/modules/core/css/core.css b/src/public/modules/core/css/core.css
@@ -521,7 +521,6 @@ form .input-group-btn button {
   min-height: 100vh;
   background-color: #fff;
   padding: 5% 5%;
-  display: table;
 }
 
 .static-view-container .static-view-logo {
@@ -541,7 +540,6 @@ form .input-group-btn button {
 }
 
 .static-view-container .static-view-text {
-  text-align: justify;
   margin-top: 25px;
   margin-bottom: 25px;
   color: #484848;

diff --git a/src/public/modules/forms/base/css/form.css b/src/public/modules/forms/base/css/form.css
@@ -201,11 +201,20 @@ div.start-end-page .form-actions .url-btn {
 
 #form-footer-logo {
   margin: 0 auto 19px auto;
-  width: 200px;
+  width: 340px;
+  max-width: 90%;
   border-top: 2px solid #e2e2e2;
   text-align: center;
 }
 
+#form-footer-logo .form-footer-links {
+  margin-top: 40px;
+}
+
+#form-footer-logo .form-footer-links a {
+  padding: 0 12px;
+}
+
 #form-footer-logo > p {
   font-size: 14px;
   font-weight: 600;

diff --git a/src/public/modules/forms/base/directiveViews/submit-form.directive.view.html b/src/public/modules/forms/base/directiveViews/submit-form.directive.view.html
@@ -101,6 +101,10 @@
     <a ui-sref="landing" target="_blank">
       <img src="/public/modules/core/img/logo-vertical-light.svg" />
     </a>
+    <div class="form-footer-links">
+      <a ui-sref="privacy" target="_blank">Privacy Policy</a>
+      <a ui-sref="terms" target="_blank">Terms of Use</a>
+    </div>
   </div>
   <div class="row">
     <div class="col-md-10 col-md-offset-1 col-sm-12">

diff --git a/src/public/modules/users/css/privacy-tou.css b/src/public/modules/users/css/privacy-tou.css
@@ -0,0 +1,59 @@
+/*
+* Prefixed by https://autoprefixer.github.io
+* PostCSS: v7.0.29,
+* Autoprefixer: v9.7.6
+* Browsers: last 4 version
+*/
+
+#privacy-tou ol {
+  list-style: none;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+@media screen and (max-width: 425px) {
+  #privacy-tou ol {
+    -webkit-padding-start: 28px;
+    padding-inline-start: 28px;
+  }
+}
+
+#privacy-tou li {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+#privacy-tou .tou-point-bold {
+  font-size: 20px;
+  color: #323232;
+  font-weight: 700;
+  word-break: break-word;
+}
+
+#privacy-tou .tou-point-header::before {
+  font-size: 20px;
+}
+
+#privacy-tou ol > li::before {
+  content: attr(seq) ' ';
+  position: relative;
+  left: -44px;
+  width: 0;
+  height: 0;
+  display: inline-block;
+}
+
+#privacy-tou ol > li > ol > li::before {
+  left: -50px;
+}
+
+#privacy-tou ol > li > ol > li > ol > li::before {
+  left: -60px;
+}