Merge pull request #452 from GovTechSG/fix/templates-responsiveness

Fix/templates responsiveness

collections/_components/text-area.html

@@ -9,44 +9,44 @@
 ---
 
 {% capture textarea-default %}
-<div class="sgds form-group">
+
     <div class="d-flex justify-content-between">
         <div for="exampleFormControlTextarea1" class="form-label">Label</div>
         <div class="form-text">0/200</div>
     </div>
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in"></textarea>
-</div>
+
 {% endcapture %}
 
 {% capture textarea-hover %}
-<div class="sgds form-group">
+
     <div class="d-flex justify-content-between">
         <div for="exampleFormControlTextarea1" class="form-label">Label</div>
         <div class="form-text">0/200</div>
     </div>
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" autofocus></textarea>
-</div>
+
 {% endcapture %}
 
 {% capture textarea-error %}
-<div class="sgds form-group was-validated">
+<form class="was-validated">
     <div class="d-flex justify-content-between">
         <div for="exampleFormControlTextarea1" class="form-label">Label</div>
         <div class="form-text">0/200</div>
     </div>
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" required></textarea>
     <div class="invalid-feedback">Error message</div>
-</div>
+</form>
 {% endcapture %}
 
 {% capture textarea-disabled %}
-<div class="sgds form-group">
+
     <div class="d-flex justify-content-between">
         <div for="exampleFormControlTextarea1" class="form-label">Label</div>
         <div class="form-text">0/200</div>
     </div>
     <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="This is text that has been filled in" disabled></textarea>
-</div>
+
 {% endcapture %}
 
 <div class="page-component">

collections/_components/text-input.html

@@ -9,23 +9,23 @@
 ---
 
 {% capture with-hint-icon %}
-<div class="sgds form-group mb-2">
+<div class="mb-2">
     <label for="defaultWith" class="form-label">Default</label>
     <div id="defaultWithHelp" class="form-text">This is the hint text</div>
     <div class="sgds form-control-group">
         <input type="text" class=" form-control" id="defaultWith" aria-describedby="defaultWith" placeholder="Text goes here">
         <i class="bi bi-search form-control-icon"></i>
     </div>
 </div>
-<div class="sgds form-group mb-2">
+<div class="mb-2">
     <label for="hoverWith" class="form-label">Hover</label>
     <div id="hoverWithHelp" class="form-text">This is the hint text</div>
     <div class="sgds form-control-group">
         <input type="text" class="form-control" id="hoverWith" aria-describedby="hoverWithHelp" placeholder="Text goes here" autofocus />
         <i class="bi bi-search form-control-icon"></i>
     </div>
 </div>
-<div class="sgds form-group mb-2 was-validated">
+<div class="mb-2 was-validated">
     <label for="errorWith" class="form-label">Error</label>
     <div id="errorWithHelp" class="form-text">This is the hint text</div>
     <div class="sgds form-control-group">
@@ -34,7 +34,7 @@
         <div id="errorWithInvalid" class="invalid-feedback">Error message</div>
     </div>
 </div>
-<div class="sgds form-group has-feedback mb-2">
+<div class="has-feedback mb-2">
     <label for="disabledWith" class="form-label">Disabled</label>
     <div id="disabledWithHelp" class="form-text">This is the hint text</div>
     <div class="sgds form-control-group">
@@ -45,20 +45,20 @@
 {% endcapture %}
 
 {% capture without-hint-icon %}
-<div class="form-group mb-2">
+<div class="mb-2">
     <label for="defaultWithout" class="form-label">Default</label>
     <input type="text" class="form-control" id="defaultWithout" placeholder="Text goes here" />
 </div>
-<div class="form-group mb-2">
+<div class="mb-2">
     <label for="hoverWithout" class="form-label">Hover</label>
     <input type="text" class="form-control" id="hoverWithout" placeholder="Text goes here" autofocus />
 </div>
-<div class="form-group mb-2 was-validated">
+<div class="mb-2 was-validated">
     <label for="errorWithout" class="form-label">Error</label>
     <input type="text" class="form-control" id="errorWithout" aria-describedby="errorWithoutInvalid" placeholder="Text goes here" required />
     <div id="errorWithoutInvalid" class="invalid-feedback">Error message</div>
 </div>
-<div class="form-group mb-2">
+<div class="mb-2">
     <label for="disabledWithout" class="form-label">Disabled</label>
     <input type="text" class="form-control" id="disabledWithout" placeholder="Text goes here" disabled />
 </div>

collections/_patterns/address.html

@@ -6,21 +6,21 @@
 ---
 
 {% capture address-pattern %}
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="postalCode" class="form-label">Postal Code</label>
     <input type="text" inputmode="numeric" pattern="[0-9]*" class="form-control" id="postalCode" placeholder="e.g 730317" autocomplete="postal-code" maxlength="6" onkeypress="return onlyNumberKey(event)">
 </div>
 <button class="btn btn-primary mb-3" onclick="findAddress()">Find Address</button>
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="streetName" class="form-label">Block/Street Name</label>
     <input type="text" class="form-control" id="streetName" placeholder="e.g. 220 Pasir Ris Drive 50" autocomplete="street-address">
 </div>
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="buildingNumber" class="form-label">Building/House Number</label>
     <div id="buildingNumberText" class="form-text">If applicable</div>
     <input type="text" class="form-control" id="buildingNumber" autocomplete="on" aria-describedby="buildingNumberText">
 </div>
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="unitNumber" class="form-label">Unit Number</label>
     <div id="unitNumberText" class="form-text">If applicable</div>
     <input type="text" class="form-control" id="unitNumber" autocomplete="on" aria-describedby="unitNumberText">

collections/_patterns/date.html

@@ -6,24 +6,24 @@
 ---
 
 {% capture single-date-input %}
-<div class="sgds form-group">
+
     <label class="form-label" for="dateInput">Date of Birth</label>
     <span class="form-text">E.g 01 June 1980</span>
     <input class="form-control" type="text" id="dateInput" autocomplete="on" />
-</div>
+
 {% endcapture %}
 
 {% capture isolated-date-input %}
 <div class="sgds row">
-    <div class="col form-group">
+    <div class="col">
       <label class="form-label" for="day">DD</label>
       <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="day" autocomplete="on" maxlength="2" onkeypress="return onlyNumberKey(event)" />
     </div>
-    <div class="col form-group">
+    <div class="col">
       <label class="form-label" for="month">MM</label>
       <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="month" autocomplete="on" maxlength="2" onkeypress="return onlyNumberKey(event)"/>
     </div>
-     <div class="col form-group">
+     <div class="col">
       <label class="form-label" for="year">YYYY</label>
       <input class="form-control" type="text" inputmode="numeric" pattern="[0-9]*" id="year" autocomplete="on" maxlength="4" onkeypress="return onlyNumberKey(event)"/>
     </div>

collections/_patterns/email-address.html

@@ -6,11 +6,11 @@
 ---
 
 {% capture email-pattern %}
-<div class="sgds form-group">
+
     <label class="form-label" for="email">Email Address</label>
     <span class="form-text">Your email will only be used for updates</span>
     <input class="form-control" type="email" id="email" autocomplete="email" spellcheck="false" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" maxlength="256" placeholder="Enter email" oninput="setValidation()" />
-</div>
+
 {% endcapture %}
 
 <!-- Page starts here -->

collections/_patterns/name.html

@@ -5,18 +5,18 @@
 ---
 
 {% capture general-name-field %}
-<div class="sgds form-group">
+
     <label class="form-label" for="fullName">Full Name as per NRIC</label>
     <input class="form-control" type="text" id="fullName" autocomplete="name" required />
-</div>
+
 {% endcapture %}
 
 {% capture multiline-name-field %}
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label class="form-label" for="givenName">Given Name</label>
     <input class="form-control" type="text" id="givenName" autocomplete="given-name" required />
 </div>
-<div class="sgds form-group">
+<div class="mb-3">
     <label class="form-label" for="familyName">Family Name</label>
     <input class="form-control" type="text" id="familyName" autocomplete="family-name" required />
 </div>

collections/_patterns/payment.html

@@ -6,11 +6,11 @@
 ---
 
 {% capture payment-pattern %}
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="nameOnCard" class="form-label">Name on Card</label>
     <input type="text" class="form-control" id="nameOnCard" autocomplete="name">
 </div>
-<div class="sgds form-group mb-3">
+<div class="mb-3">
     <label for="cardNumber" class="form-label">Card Number</label>
     <div id="cardNumberText" class="form-text">Enter the 16-digit number on the card</div>
     <input type="text" inputmode="numeric" pattern="[0-9]*" maxlength="19" class="form-control" id="cardNumber"

collections/_patterns/phone-number.html

@@ -5,13 +5,12 @@
 ---
 
 {% capture phone-number %}
-<div class="sgds form-group">
+
     <label class="form-label" for="phone">Phone Number</label>
     <div class="input-group">
       <span class="input-group-text">+65</span>
       <input class="form-control" type="text" id="phone" autocomplete="tel-local" pattern="[0-9]" maxlength="8" />
     </div>
-</div>
 {% endcapture %}
 
 <!-- Page starts here -->

content/faq.html

@@ -10,7 +10,7 @@
         {% include breadcrumb.html %}
         <h1 class="fw-bold">How can we help you?</h1>
         {% if site.search %}
-        <div class="sgds form-group">
+        <div>
             <label for="search" class="form-label">Search:</label>
             <input type="text" class="js-shuffle-search form-control" id="search">
         </div>

content/product-sites.html

@@ -6,14 +6,10 @@
 
 <div class="directory-list">
     <ul>
-    {% for agency in site.data.product-sites %}
-
-            {% for sites in agency.sites %}
-            <li>
-                <a href="{{sites.url}}" class="external">{{sites.url}}</a>
-            </li>
-            {% endfor %}
-
-    {% endfor %}
+        {% for sites in site.data.product-sites %}
+        <li>
+            <a href="{{sites.url}}" class="external">{{sites.url}}</a>
+        </li>
+        {% endfor %}
     </ul>
 </div>

sass/_templates.scss

@@ -1,21 +1,21 @@
 sgds-template-grid {
     background: #fafafa;
-
     &.with-sidenav {
         display: grid;
         grid-template-columns: 15rem minmax(min-content, 1fr);
 
         &.with-toc {
             grid-template-columns: 15rem minmax(min-content, 1fr) 15rem;
         }
-    }
-    @include media-breakpoint-down(lg) {
-        display: block;
-        sgds-aside-area,
-        aside {
-            display: none;
+        @include media-breakpoint-down(lg) {
+            display: block;
+            sgds-aside-area,
+            aside {
+                display: none;
+            }
         }
     }
+
 }
 
 sgds-aside-area {