Improv/mobile responsive report (#261)

* Core layout changes to desktop UI to support mobile responsive UI * New media queries and css declarations for mobile UI * New scripts to support search feature * Updates to the following to support search feature tagged with comments _search feat changes_ --------- Co-authored-by: Joshua Lai <[email protected]>
GovTechSG · Jan 22, 2024 · d32771e · d32771e
1 parent 9d5947e
commit d32771e
Show file tree

Hide file tree

Showing 14 changed files with 2,218 additions and 423 deletions.
diff --git a/.gitignore b/.gitignore
@@ -29,3 +29,6 @@ verapdf*
 amazon-corretto-11.jdk/
 jre
 
+# test folders
+/test-codes
+_test-ui
diff --git a/__mocks__/mock-report.html b/__mocks__/mock-report.html
diff --git a/static/ejs/partials/components/reportSearch.ejs b/static/ejs/partials/components/reportSearch.ejs
@@ -0,0 +1,89 @@
+
+<p
+  class = "issue-word"
+>
+  Issues
+</p>
+
+<div id="searchBar" class="input-group">
+  <span class="input-group-text bg-white" >
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" aria-label="image of a magnifying glass">
+      <path
+        d="M21.6143 19.5152C23.0668 17.5332 23.7173 15.0759 23.4358 12.6349C23.1543 10.1939 21.9615 7.94918 20.096 6.34987C18.2305 4.75056 15.83 3.91458 13.3746 4.00919C10.9192 4.1038 8.59012 5.12202 6.85325 6.86014C5.11637 8.59825 4.09982 10.9281 4.00697 13.3835C3.91412 15.839 4.75181 18.2389 6.35246 20.1032C7.95311 21.9676 10.1987 23.1588 12.6399 23.4386C15.0811 23.7183 17.5379 23.066 19.5188 21.6122H19.5173C19.5623 21.6722 19.6103 21.7292 19.6643 21.7847L25.4393 27.5597C25.7206 27.8411 26.1022 27.9993 26.5001 27.9995C26.898 27.9996 27.2796 27.8417 27.5611 27.5604C27.8426 27.2792 28.0008 26.8976 28.0009 26.4997C28.001 26.1018 27.8431 25.7201 27.5618 25.4387L21.7868 19.6637C21.7332 19.6094 21.6756 19.5592 21.6143 19.5137V19.5152ZM22.0013 13.7492C22.0013 14.8326 21.788 15.9054 21.3734 16.9063C20.9588 17.9072 20.3511 18.8167 19.585 19.5828C18.8189 20.3489 17.9094 20.9566 16.9085 21.3712C15.9075 21.7858 14.8348 21.9992 13.7513 21.9992C12.6679 21.9992 11.5951 21.7858 10.5942 21.3712C9.59327 20.9566 8.6838 20.3489 7.91772 19.5828C7.15163 18.8167 6.54394 17.9072 6.12934 16.9063C5.71474 15.9054 5.50135 14.8326 5.50135 13.7492C5.50135 11.5611 6.37054 9.46272 7.91772 7.91554C9.46489 6.36837 11.5633 5.49917 13.7513 5.49917C15.9394 5.49917 18.0378 6.36837 19.585 7.91554C21.1322 9.46272 22.0013 11.5611 22.0013 13.7492Z"
+        fill="#B5C5CA"
+      />
+    </svg>
+  </span>
+
+  <input
+    onfocus="showFilter()"
+    oninput="showFilter()"
+    onclick="showFilter()"
+    type="text"
+    class="form-control border-start-0"
+    id="searchBarInput"
+    placeholder="Search..."
+
+  />
+</div>
+
+<div
+  id="searchFilter"
+  class="d-none"
+>
+
+  <div class="ps-xl-3">In:</div>      
+
+
+    <button
+      id="issueDescriptionsButton"
+      onclick="changeFilterColor(this)"
+      onmouseover="handleFilterMouseOver(this)"
+      onmouseout="handleFilterMouseOut(this)"
+      class="filter-button-issue"
+
+    >
+      <span
+        id="issueDescriptionsWords"
+        class = "filter-words"
+
+        >Issue Descriptions</span
+      >
+    </button>
+
+
+
+    <button
+      id="pagesButton"
+      onclick="changeFilterColor(this)"
+      onmouseover="handleFilterMouseOver(this)"
+      onmouseout="handleFilterMouseOut(this)"
+      class="filter-button-pages"
+
+    >
+      <span
+        id="pagesWords"
+        class=" filter-words"
+
+        >Pages</span
+      >
+    </button>
+
+
+
+    <button
+      id="htmlButton"
+      onclick="changeFilterColor(this)"
+      onmouseover="handleFilterMouseOver(this)"
+      onmouseout="handleFilterMouseOut(this)"
+      class="filter-button-html"
+
+    >
+      <span
+        id="htmlWords"
+        class="filter-words"
+        >HTML elements/Paths</span
+      >
+    </button>
+
+</div>
diff --git a/static/ejs/partials/components/ruleOffcanvas.ejs b/static/ejs/partials/components/ruleOffcanvas.ejs
@@ -37,6 +37,8 @@
     </div>
   </div>
   <div class="offcanvas-body">
+    <!-- search feat changes -->
+    <div id="expandedRuleSearchWarning"></div>
     <div id="expandedRuleInfoText"></div>
     <nav id="expandedRuleCategorySelectors" aria-label="Occurrence category"></nav>
     <div id="expandedRuleCategoryContent" class="mt-4"></div>

diff --git a/static/ejs/partials/components/scanAbout.ejs b/static/ejs/partials/components/scanAbout.ejs
@@ -1,5 +1,5 @@
-<aside id="scan-about" class="z-1 card flex-shrink-0">
-  <h2>About this scan</h2>
+<aside id="scan-about" class="flex-shrink-0">
+  <h2 class="mb-3">About this scan</h2>
   <ul>
     <li>
       <svg
@@ -170,11 +170,11 @@
       <% }) %>  
     <% } %>
   </ul>
-  <hr class="my-4" />
+  <hr class="my-4 d-none d-md-block" />
   <iframe
     id="a11y-online-banner"
     title="GovTech Accessibility Enabling Team information banner"
-    class="h-auto w-100"
+    class="h-auto w-100 d-none"
     src="https://govtechsg.github.io/purple-banner-embeds/"
     scrolling="no"
   ></iframe>

diff --git a/static/ejs/partials/components/wcagCompliance.ejs b/static/ejs/partials/components/wcagCompliance.ejs
@@ -25,54 +25,41 @@
   ).toFixed(2);
 %>
 
-<div id="wcag-compliance-card" class="card h-100 p-3">
-  <h2 class="mb-0">WCAG Compliance</h2>
-  <div class="wcag-compliance-passes-panel">
-    <div class="d-flex justify-content-between align-items-center">
-      <div class="d-flex align-items-center">
-        <span class="fw-bold">Automated: WCAG (A & AA) Passes</span>
-        <button
-          aria-label="More on automated testing WCAG coverage"
-          id="wcagModalToggle"
-          class="ms-2"
-          data-bs-toggle="modal"
-          data-bs-target="#wcagModal"
-        >
-          <svg
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M11.9528 2.05329C9.22079 -0.68205 4.78867 -0.68477 2.0533 2.04718C-0.682042 4.7792 -0.684795 9.21135 2.04722 11.9467C4.77917 14.6821 9.21135 14.6848 11.9467 11.9528C14.682 9.22085 14.6848 4.78863 11.9528 2.05329ZM7.00216 11.2406C6.6319 11.2406 6.33174 10.9405 6.33174 10.5702C6.33174 10.1999 6.63187 9.89976 7.00216 9.89976C7.37243 9.89976 7.67259 10.1999 7.67259 10.5702C7.67255 10.9405 7.37243 11.2406 7.00216 11.2406ZM8.09214 7.20401C7.70918 7.42788 7.67645 7.7033 7.6748 8.49691C7.6747 8.54938 7.67453 8.60233 7.67423 8.65558C7.67185 9.03068 7.36712 9.33312 6.99253 9.33312C6.99105 9.33312 6.98957 9.33312 6.98813 9.33312C6.61159 9.33074 6.3083 9.02356 6.31066 8.64699C6.31099 8.59568 6.31109 8.54468 6.31119 8.49415C6.31287 7.67852 6.31492 6.66352 7.40395 6.02694C8.27777 5.51613 8.3879 5.18059 8.28543 4.74029C8.16503 4.2231 7.69273 4.08907 7.32418 4.1312C7.20042 4.14541 6.58322 4.24724 6.58322 4.85783C6.58322 5.23431 6.27795 5.5396 5.90141 5.5396C5.52487 5.5396 5.21964 5.23431 5.21964 4.85783C5.21964 3.76416 6.02107 2.90831 7.16859 2.77656C8.35043 2.64099 9.35515 3.32135 9.61338 4.4312C9.99939 6.08915 8.61379 6.89911 8.09214 7.20401Z"
-              fill="#B5C5CA"
-            />
-          </svg>
-        </button>
-      </div>
-      <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>%</span>
-    </div>
-    <div class="wcag-compliance-passes-bar">
-      <div
-        class="wcag-compliance-passes-bar-progress"
-        style="width: <%= wcagPassPercentage %>%"
-      ></div>
+<div id="wcag-compliance-card" class="card-body">
+  <h2>WCAG Compliance</h2>
+  <div class="d-flex align-items-center">
+    <span class="flex-grow-1"><span class="d-none d-md-inline">Automated: </span>WCAG (A & AA) Passes</span>
+    <span aria-label="Pass percentage" class="ms-2"><%= wcagPassPercentage %>%</span>
+  </div>
+  <div class="wcag-compliance-passes-bar">
+    <div
+      class="wcag-compliance-passes-bar-progress"
+      style="width: <%= wcagPassPercentage %>%"
+    >
     </div>
   </div>
-  <p>
+  <p class="d-none d-md-block">
     Only a subset of
-    <a
-      href="https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&versions=2.1&levels=aaa"
-      target="_blank"
-      >WCAG 2.1</a
-    >
-    (Conformance Level A & AA) Success Criteria can be automatically checked so
-    <a aria-label="Manual testing guide" href="http://go.gov.sg/a11y-manual-testing" target="_blank">manual testing</a>
-    is still required.
+        <a
+        href="https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&versions=2.1&levels=aaa"
+        target="_blank"
+        >WCAG 2.1</a
+        >
+        (Conformance Level A & AA) Success Criteria can be automatically checked so
+        <a aria-label="Manual testing guide" href="http://go.gov.sg/a11y-manual-testing" target="_blank">manual testing</a>
+        is still required.
   </p>
+  <button
+  id="wcagModalToggle"
+  type="button"
+  data-bs-toggle="modal"
+  data-bs-target="#wcagModal"
+  >
+    More details
+  </button>
+
 </div>
+<!-- START Modal Pop up -->
 <div
   id="wcagModal"
   class="modal fade"
@@ -130,3 +117,4 @@
     </div>
   </div>
 </div>
+<!-- END Modal Pop up -->
diff --git a/static/ejs/partials/header.ejs b/static/ejs/partials/header.ejs
@@ -1,70 +1,63 @@
-<header aria-label="Report header" id="header">
-  <div class="z-2 card flex-row justify-content-between px-3 py-4">
-    <div class="d-flex align-items-center">
-      <svg
-        aria-hidden="true"
-        width="48"
-        height="48"
-        viewBox="0 0 48 48"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="24" cy="24" r="24" fill="#785EF0" />
-        <path
-          d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z"
-          fill="white"
-        />
-        <path
-          d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z"
-          fill="white"
-        />
-        <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white" />
-        <path
-          d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z"
-          fill="white"
-        />
-        <path
-          d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z"
-          fill="white"
-        />
-        <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white" />
-        <path
-          d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z"
-          fill="white"
-        />
-        <path
-          d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z"
-          fill="white"
-        />
-        <path
-          d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z"
-          fill="white"
-        />
-        <path
-          d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z"
-          fill="white"
-        />
-      </svg>
+<header>
+  <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="24" cy="24" r="24" fill="#785EF0" />
+    <title>Purple A11y Logo</title>
+    <path
+      d="M16.2528 24.9725V23.832C16.2528 21.5526 14.4057 19.7056 12.1264 19.7056C9.84708 19.7056 8 21.5526 8 23.832V27.0721C8 29.2906 9.74991 31.0986 11.9448 31.1939V29.2806C11.9448 26.905 13.8772 24.9725 16.2528 24.9725Z"
+      fill="white"
+    />
+    <path
+      d="M12.308 29.28V31.1979H16.2528V25.3352C14.0779 25.3352 12.308 27.1051 12.308 29.28Z"
+      fill="white"
+    />
+    <path d="M22.8201 25.3289H18.6937V31.1997H22.8201V25.3289Z" fill="white" />
+    <path
+      d="M22.8201 17.6016C20.5408 17.6016 18.6937 19.4486 18.6937 21.728V24.9672H22.8201V17.6016Z"
+      fill="white"
+    />
+    <path
+      d="M29.3876 17.6016C27.1082 17.6016 25.2612 19.4486 25.2612 21.728V24.9672H29.3876V17.6016Z"
+      fill="white"
+    />
+    <path d="M29.3876 25.3289H25.2612V31.1997H29.3876V25.3289Z" fill="white" />
+    <path
+      d="M36.3182 31.199C38.5976 31.199 40.4446 29.3519 40.4446 27.0726V25.3281H36.3182V31.199Z"
+      fill="white"
+    />
+    <path
+      d="M40.4446 19.7056C38.1653 19.7056 36.3182 21.5526 36.3182 23.832V24.9644H40.4446V19.7056Z"
+      fill="white"
+    />
+    <path
+      d="M35.955 23.832C35.955 21.5526 34.1079 19.7056 31.8286 19.7056V22.844C31.8286 23.6195 32.0429 24.3441 32.4143 24.9644H35.955V23.832Z"
+      fill="white"
+    />
+    <path
+      d="M35.955 26.9709V25.3281H32.6595C33.4123 26.3261 34.6083 26.9709 35.955 26.9709Z"
+      fill="white"
+    />
+  </svg>
+  <h1 class="d-inline mb-0 ms-3">
+    <span class="d-md-none">A11y</span><span class="d-none d-md-inline">Accessibility</span> Site
+    Report
+  </h1>
 
-      <h1 class="d-inline mb-0 ms-3">Accessibility Site Report</h1>
-    </div>
-    <%#
-    <div class="toggleWrapper">
-      <input tabindex="0" type="checkbox" class="dm" id="dm" />
-      <label for="dm" class="toggle">
-        <span class="toggle__handler">
-          <span class="crater crater--1"></span>
-          <span class="crater crater--2"></span>
-          <span class="crater crater--3"></span>
-        </span>
-        <span class="star star--1"></span>
-        <span class="star star--2"></span>
-        <span class="star star--3"></span>
-        <span class="star star--4"></span>
-        <span class="star star--5"></span>
-        <span class="star star--6"></span>
-      </label>
-    </div>
-    %>
+  <%#
+  <div class="toggleWrapper">
+    <input tabindex="0" type="checkbox" class="dm" id="dm" />
+    <label for="dm" class="toggle">
+      <span class="toggle__handler">
+        <span class="crater crater--1"></span>
+        <span class="crater crater--2"></span>
+        <span class="crater crater--3"></span>
+      </span>
+      <span class="star star--1"></span>
+      <span class="star star--2"></span>
+      <span class="star star--3"></span>
+      <span class="star star--4"></span>
+      <span class="star star--5"></span>
+      <span class="star star--6"></span>
+    </label>
   </div>
+  %>
 </header>