chore: merge release v4.50.2 back into develop

CHANGELOG.md

@@ -4,9 +4,17 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v4.50.2](https://github.com/opengovsg/FormSG/compare/v4.50.1...v4.50.2)
+
+- feat: update table field styling to not rely on multiple divs [`e857aed`](https://github.com/opengovsg/FormSG/commit/e857aed667145441758f09f311c2b9f16f57645b)
+- chore: bump version to 4.50.1 [`95b5548`](https://github.com/opengovsg/FormSG/commit/95b55485cc6a3f70172d5744986ab3a0bb155dd5)
+
 #### [v4.50.1](https://github.com/opengovsg/FormSG/compare/v4.50.0...v4.50.1)
 
+> 14 December 2020
+
 - fix: email format validation should allow 126/163.com, align frontend and backend validation [`a577a5d`](https://github.com/opengovsg/FormSG/commit/a577a5d913f24094517c3d84c5902069fa2f623b)
+- chore: bump version to 4.50.1 [`3fceed3`](https://github.com/opengovsg/FormSG/commit/3fceed38c939608588599b0f02a3182cd992869c)
 
 #### [v4.50.0](https://github.com/opengovsg/FormSG/compare/v4.49.1...v4.50.0)
 
@@ -63,10 +71,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore(deps-dev): bump eslint-plugin-simple-import-sort [`#820`](https://github.com/opengovsg/FormSG/pull/820)
 - ref: migrate create new form api flow to TypeScript [`#806`](https://github.com/opengovsg/FormSG/pull/806)
 - chore(deps-dev): bump @types/jest from 26.0.15 to 26.0.16 [`#812`](https://github.com/opengovsg/FormSG/pull/812)
-- ref: migrate copy template form flow to TypeScript  [`#793`](https://github.com/opengovsg/FormSG/pull/793)
+- ref: migrate copy template form flow to TypeScript [`#793`](https://github.com/opengovsg/FormSG/pull/793)
 - fix(deps): bump validator from 13.1.17 to 13.5.1 [`#811`](https://github.com/opengovsg/FormSG/pull/811)
 - ref: migrate duplicate admin form endpoint to TypeScript [`#789`](https://github.com/opengovsg/FormSG/pull/789)
-- ref: migrate endpoint for getting admin form to TypeScript  [`#807`](https://github.com/opengovsg/FormSG/pull/807)
+- ref: migrate endpoint for getting admin form to TypeScript [`#807`](https://github.com/opengovsg/FormSG/pull/807)
 - chore(deps-dev): bump eslint-config-prettier from 6.15.0 to 7.0.0 [`#810`](https://github.com/opengovsg/FormSG/pull/810)
 - chore: enhance jest test reliability [`#800`](https://github.com/opengovsg/FormSG/pull/800)
 - docs: remove dangling commas from mongo scripts [`#794`](https://github.com/opengovsg/FormSG/pull/794)
@@ -123,7 +131,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: Hotfix v4.32.1 -- split mail by semicolon in addition to comma when validating [`#222`](https://github.com/opengovsg/FormSG/pull/222)
 - feat: Release v4.32.0 [`#201`](https://github.com/opengovsg/FormSG/pull/201)
 - Release v4.31.0 - improve docs, log IP, fix tests [`#152`](https://github.com/opengovsg/FormSG/pull/152)
-- Release 4.30.4  - revert filtering by submission ID [`#137`](https://github.com/opengovsg/FormSG/pull/137)
+- Release 4.30.4 - revert filtering by submission ID [`#137`](https://github.com/opengovsg/FormSG/pull/137)
 - build: Release 4.30.3 - Typescript migrations, filter storage mode responses by submission id [`#123`](https://github.com/opengovsg/FormSG/pull/123)
 - Release 4.30.2 - fix AWS endpoint and /emailnotifications log group [`#78`](https://github.com/opengovsg/FormSG/pull/78)
 - build: Release 4.30.1 - Fix field creation on old clients [`#74`](https://github.com/opengovsg/FormSG/pull/74)
@@ -163,8 +171,8 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump winston-cloudwatch from 2.3.2 to 2.4.0 [`#728`](https://github.com/opengovsg/FormSG/pull/728)
 - refactor: migrate mobile number validator to ts [`#713`](https://github.com/opengovsg/FormSG/pull/713)
 - chore(deps-dev): bump ts-jest from 26.4.1 to 26.4.4 [`#720`](https://github.com/opengovsg/FormSG/pull/720)
-- refactor: migrate rating validator to ts  [`#724`](https://github.com/opengovsg/FormSG/pull/724)
-- refactor: migrate radio button validator to ts  [`#723`](https://github.com/opengovsg/FormSG/pull/723)
+- refactor: migrate rating validator to ts [`#724`](https://github.com/opengovsg/FormSG/pull/724)
+- refactor: migrate radio button validator to ts [`#723`](https://github.com/opengovsg/FormSG/pull/723)
 - feat: migrate get encrypt metadata endpoint controller to TypeScript [`#711`](https://github.com/opengovsg/FormSG/pull/711)
 - fix(AdminFormRoutes): add Joi validation on /submission endpoint [`#712`](https://github.com/opengovsg/FormSG/pull/712)
 - chore(deps-dev): bump prettier from 2.1.2 to 2.2.0 [`#709`](https://github.com/opengovsg/FormSG/pull/709)
@@ -245,7 +253,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ref: migrate fetch form submission counts flow to Typescript [`#592`](https://github.com/opengovsg/FormSG/pull/592)
 - fix: resolve & in url upon redirect, shift prefill to textfield component [`#569`](https://github.com/opengovsg/FormSG/pull/569)
 - feat(monitoring): add memory monitoring to EC2 instances [`#620`](https://github.com/opengovsg/FormSG/pull/620)
-- ref: migrate createPresignedPost endpoint for logos to TypeScript  [`#607`](https://github.com/opengovsg/FormSG/pull/607)
+- ref: migrate createPresignedPost endpoint for logos to TypeScript [`#607`](https://github.com/opengovsg/FormSG/pull/607)
 - fix: package.json & package-lock.json to reduce vulnerabilities [`#637`](https://github.com/opengovsg/FormSG/pull/637)
 - fix(deps): bump @sentry/browser from 5.24.2 to 5.27.3 [`#631`](https://github.com/opengovsg/FormSG/pull/631)
 - fix(deps): bump helmet from 4.1.1 to 4.2.0 [`#624`](https://github.com/opengovsg/FormSG/pull/624)
@@ -312,7 +320,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): upgrade Chromium and puppeteer-core [`#572`](https://github.com/opengovsg/FormSG/pull/572)
 - fix(deps): bump fp-ts from 2.8.3 to 2.8.5 [`#567`](https://github.com/opengovsg/FormSG/pull/567)
 - chore(deps-dev): bump @babel/core from 7.11.6 to 7.12.3 [`#536`](https://github.com/opengovsg/FormSG/pull/536)
-- feat: add examples module to handle /examples endpoints  [`#412`](https://github.com/opengovsg/FormSG/pull/412)
+- feat: add examples module to handle /examples endpoints [`#412`](https://github.com/opengovsg/FormSG/pull/412)
 - fix(deps): bump aws-sdk from 2.770.0 to 2.783.0 [`#561`](https://github.com/opengovsg/FormSG/pull/561)
 - refactor: remove unused verified mobile beta check [`#556`](https://github.com/opengovsg/FormSG/pull/556)
 - refactor: create initial PublicFormController for handling feedback submission [`#525`](https://github.com/opengovsg/FormSG/pull/525)
@@ -339,7 +347,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: Hotfix v4.32.1 -- split mail by semicolon in addition to comma when validating [`#222`](https://github.com/opengovsg/FormSG/pull/222)
 - feat: Release v4.32.0 [`#201`](https://github.com/opengovsg/FormSG/pull/201)
 - Release v4.31.0 - improve docs, log IP, fix tests [`#152`](https://github.com/opengovsg/FormSG/pull/152)
-- Release 4.30.4  - revert filtering by submission ID [`#137`](https://github.com/opengovsg/FormSG/pull/137)
+- Release 4.30.4 - revert filtering by submission ID [`#137`](https://github.com/opengovsg/FormSG/pull/137)
 - build: Release 4.30.3 - Typescript migrations, filter storage mode responses by submission id [`#123`](https://github.com/opengovsg/FormSG/pull/123)
 - Release 4.30.2 - fix AWS endpoint and /emailnotifications log group [`#78`](https://github.com/opengovsg/FormSG/pull/78)
 - build: Release 4.30.1 - Fix field creation on old clients [`#74`](https://github.com/opengovsg/FormSG/pull/74)
@@ -458,7 +466,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 - fix: early return when validating empty email string [`#433`](https://github.com/opengovsg/FormSG/pull/433)
 - fix(deps): bump angular-cookies from 1.8.0 to 1.8.1 [`#419`](https://github.com/opengovsg/FormSG/pull/419)
-- * /billing [`#426`](https://github.com/opengovsg/FormSG/pull/426)
+- - /billing [`#426`](https://github.com/opengovsg/FormSG/pull/426)
 - chore: merge release v4.38.1 into develop [`#430`](https://github.com/opengovsg/FormSG/pull/430)
 - feat: soft-launch rate-limiting of API endpoints [`#389`](https://github.com/opengovsg/FormSG/pull/389)
 - refactor: use res.json or sendStatus for objects or empty body [`#424`](https://github.com/opengovsg/FormSG/pull/424)
@@ -587,7 +595,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - refactor: migrate /auth endpoint handling to Typescript, Domain Driven Design [`#215`](https://github.com/opengovsg/FormSG/pull/215)
 - chore(deps-dev): bump stylelint-config-prettier from 8.0.1 to 8.0.2 [`#280`](https://github.com/opengovsg/FormSG/pull/280)
 - fix: upgrade mongoose from 5.9.19 to 5.10.0 [`#289`](https://github.com/opengovsg/FormSG/pull/289)
-- revert: reintroduce convict  [`#287`](https://github.com/opengovsg/FormSG/pull/287)
+- revert: reintroduce convict [`#287`](https://github.com/opengovsg/FormSG/pull/287)
 - revert(convict): "refactor: use convict for configuration (#190)" [`#285`](https://github.com/opengovsg/FormSG/pull/285)
 - chore(deps-dev): bump @typescript-eslint/eslint-plugin and @typescript-eslint/parser [`#246`](https://github.com/opengovsg/FormSG/pull/246)
 - feat: verified sms modal [`#274`](https://github.com/opengovsg/FormSG/pull/274)
@@ -640,7 +648,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix: fix linting not working on frontend code [`#217`](https://github.com/opengovsg/FormSG/pull/217)
 - fix: pass missing $state param into EditContactNumberModalController [`#216`](https://github.com/opengovsg/FormSG/pull/216)
 - feat: add Emergency Contact feature frontend [`#142`](https://github.com/opengovsg/FormSG/pull/142)
-- refactor:  convert webhook service to Typescript [`#83`](https://github.com/opengovsg/FormSG/pull/83)
+- refactor: convert webhook service to Typescript [`#83`](https://github.com/opengovsg/FormSG/pull/83)
 - chore(deps-dev): bump sinon from 6.3.5 to 9.0.3 [`#207`](https://github.com/opengovsg/FormSG/pull/207)
 - feat: Share form secret keys across browser tabs using BroadcastChannel [`#203`](https://github.com/opengovsg/FormSG/pull/203)
 - chore: merge Release v4.32.0 into develop branch [`#205`](https://github.com/opengovsg/FormSG/pull/205)
@@ -668,7 +676,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - feat: add core ApplicationError for express app [`#195`](https://github.com/opengovsg/FormSG/pull/195)
 - chore(deps-dev): bump typescript to 4.0.2 [`#196`](https://github.com/opengovsg/FormSG/pull/196)
 - fix(deps): bump font-awesome from 4.6.1 to 4.7.0 [`#186`](https://github.com/opengovsg/FormSG/pull/186)
-- feat: migrate `util/response` to new Submission module (service, utils, etc)  [`#176`](https://github.com/opengovsg/FormSG/pull/176)
+- feat: migrate `util/response` to new Submission module (service, utils, etc) [`#176`](https://github.com/opengovsg/FormSG/pull/176)
 - feat: log form ID in GA event labels [`#154`](https://github.com/opengovsg/FormSG/pull/154)
 - refactor(verification): convert to module and typescriptify [`#172`](https://github.com/opengovsg/FormSG/pull/172)
 - feat: support &`;'" in form title [`#156`](https://github.com/opengovsg/FormSG/pull/156)
@@ -688,7 +696,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - fix(deps): bump node-cache from 5.1.1 to 5.1.2 [`#145`](https://github.com/opengovsg/FormSG/pull/145)
 - feat: include user ip address when sending otp [`#147`](https://github.com/opengovsg/FormSG/pull/147)
 - chore(deps-dev): bump htmlhint from 0.11.0 to 0.14.1 [`#116`](https://github.com/opengovsg/FormSG/pull/116)
-- fix(deps): bump angular-* dependency packages from 1.7.9 to 1.8.0 [`#108`](https://github.com/opengovsg/FormSG/pull/108)
+- fix(deps): bump angular-\* dependency packages from 1.7.9 to 1.8.0 [`#108`](https://github.com/opengovsg/FormSG/pull/108)
 - feat: log IP, submissionId and formId together [`#130`](https://github.com/opengovsg/FormSG/pull/130)
 - fix(deps): bump crypto-js from 3.3.0 to 4.0.0 [`#110`](https://github.com/opengovsg/FormSG/pull/110)
 - [develop] Release 4.30.4 [`#138`](https://github.com/opengovsg/FormSG/pull/138)
@@ -741,7 +749,7 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - chore: add dependabot.yml [`#82`](https://github.com/opengovsg/FormSG/pull/82)
 - feat: remove allowSms beta flag [`#73`](https://github.com/opengovsg/FormSG/pull/73)
 - feat(FormSchema): Document new indexes for form dashboard [`#77`](https://github.com/opengovsg/FormSG/pull/77)
-- refactor: add _id to all model interfaces [`#75`](https://github.com/opengovsg/FormSG/pull/75)
+- refactor: add \_id to all model interfaces [`#75`](https://github.com/opengovsg/FormSG/pull/75)
 - Bump version to 4.30.3 [`4e97a48`](https://github.com/opengovsg/FormSG/commit/4e97a48e52eefa621b1ef84f1d991d90e96a57b4)
 
 #### [v4.30.2](https://github.com/opengovsg/FormSG/compare/v4.30.1...v4.30.2)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "FormSG",
   "description": "Form Manager for Government",
-  "version": "4.50.1",
+  "version": "4.50.2",
   "homepage": "https://form.gov.sg",
   "authors": [
     "FormSG <formsg@data.gov.sg>"

src/public/modules/forms/base/componentViews/field-table.client.view.html

@@ -18,7 +18,8 @@
   <div>
     <!-- View for screen width >= 768px. Either this or the next div is shown. -->
     <div class="table-scrollable table-desktop">
-      <div class="table-row">
+      <!-- Labels to be shown in desktop mode but not mobile mode -->
+      <div class="table-row table-labels-desktop">
         <!-- ng-class in ng-repeat below sets whether the column is col-xs-6, col-xs-12 or max-width -->
         <div
           ng-repeat="tableField in vm.field.columns"
@@ -52,6 +53,13 @@
             ng-class="{'table-row-blue': $evenRow, 'col-xs-12': vm.field.columns.length === 1,
               'col-xs-6': vm.field.columns.length === 2,'bottom-row-line': vm.isLastRow(n) && $oddRow }"
           >
+            <!-- Labels to be shown in mobile mode but not desktop mode -->
+            <div class="label-custom label-bottom table-labels-mobile">
+              {{vm.field.columns[$index].title}}
+              <span class="field-optional" ng-if="!component.required"
+                >(optional)</span
+              >
+            </div>
             <field-directive
               class="table-component"
               field="component"
@@ -61,7 +69,16 @@
           <!-- ng-class below sets a couple of things:
 						=> whether a row is blue or white
 						=> whether a line should be added at the bottom (applies only for the bottom row)
-					-->
+          -->
+          <!-- Mobile delete button for layout purposes, will be hidden on desktop -->
+          <div
+            class="table-delete-row-mobile"
+            ng-if="vm.field.additionalRowCount > 0 && n >= vm.field.minimumRows"
+            ng-class="{ 'bottom-row-line': vm.isLastRow(n) && $oddRow, 'table-row-blue': $evenRow }"
+            ng-style="{ 'pointer-events': vm.field.disabled ? 'none' : '', 'cursor': vm.field.disabled ? 'default' : '' }"
+          >
+            <i class="bx bx-trash bx-lg" ng-click="vm.deleteTableRow(n)"></i>
+          </div>
           <div
             class="table-delete-row"
             ng-if="vm.field.additionalRowCount > 0"
@@ -77,40 +94,6 @@
         </div>
       </div>
     </div>
-    <!-- View for screen width < 768px. Either this or the previous div is shown. -->
-    <div class="row table-mobile">
-      <!-- ng-class in ng-repeat below sets a couple of things:
-				=> whether a row is blue or white
-				=> whether a line should be added at the bottom (applies only for the bottom row)
-			-->
-      <div class="col-xs-12">
-        <div
-          ng-repeat="n in vm.generateTableRowIndexes()"
-          ng-init="$evenRow = $even; $oddRow = $odd"
-          class="col-xs-12 table-column-mobile"
-          ng-class="{'table-row-blue': $evenRow,'bottom-row-line': vm.isLastRow(n) && $oddRow }"
-        >
-          <div ng-repeat="component in vm.field.components[n]">
-            <div class="table-row-mobile field-input">
-              <div class="label-custom label-bottom">
-                {{vm.field.columns[$index].title}}
-                <span class="field-optional" ng-if="!component.required"
-                  >(optional)</span
-                >
-              </div>
-              <field-directive field="component" class="table-component" />
-            </div>
-          </div>
-          <div
-            class="table-delete-row-mobile"
-            ng-if="n >= vm.field.minimumRows"
-            ng-style="{ 'pointer-events': vm.field.disabled ? 'none' : '', 'cursor': vm.field.disabled ? 'default' : '' }"
-          >
-            <i class="bx bx-trash bx-lg" ng-click="vm.deleteTableRow(n)"></i>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 
   <field-error-component ng-if="vm.isTableError()"> </field-error-component>

src/public/modules/forms/base/css/form-field.css

@@ -444,29 +444,22 @@
 
 /* Table */
 
-@media (min-width: 768px) {
-  .field-group.table-field .table-mobile {
-    display: none;
-  }
-}
-
-@media not all and (min-width: 768px) {
-  .field-group.table-field .table-desktop {
-    display: none;
-  }
-}
-
 .field-group.table-field .table-row {
   display: flex;
   align-items: center;
 }
 
+.field-group.table-field .table-labels-mobile {
+  display: none;
+}
+
 .field-group.table-field .table-column {
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 12px;
   padding-top: 12px;
   min-width: 280px;
+  flex: 1;
 }
 
 .field-group.table-field .table-column .field-group.row,
@@ -521,9 +514,7 @@
 }
 
 .field-group.table-field .table-delete-row-mobile {
-  padding-bottom: 15px;
-  padding-top: 5px;
-  color: #2f60ce;
+  display: none;
 }
 
 .field-group.table-field .table-row-mobile {
@@ -578,3 +569,43 @@
 .field-group.table-field .ui-select-match {
   overflow: hidden;
 }
+
+/* Mobile styling for table */
+@media (max-width: 768px) {
+  .field-group.table-field .table-row div.bottom-row-line {
+    border-bottom: none;
+  }
+
+  .field-group.table-field .table-row.table-labels-desktop {
+    display: none;
+  }
+
+  .field-group.table-field .table-row div.bottom-row-line:last-child {
+    border-bottom: 1px solid #ddd;
+  }
+
+  .field-group.table-field .table-delete-row {
+    display: none;
+  }
+
+  .field-group.table-field .table-delete-row-mobile {
+    display: flex;
+    width: 100%;
+    padding: 10px;
+    padding-top: 0;
+    color: #2f60ce;
+  }
+
+  .field-group.table-field .table-labels-mobile {
+    display: flex;
+  }
+
+  .field-group.table-field .table-row {
+    /* Block for IE11 compatibility in mobile */
+    display: block;
+  }
+
+  .field-group.table-field .table-column {
+    width: 100%;
+  }
+}