@govtechsg/oobee 0.10.70 → 0.10.74

package/src/static/ejs/partials/styles/bootstrap.ejs

@@ -4547,7 +4547,7 @@
 
   .card-body {
     flex: 1 1 auto;
-    padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
+    padding: 1.5rem;
     color: var(--bs-card-color);
   }
 
@@ -7954,14 +7954,26 @@
     width: 25% !important;
   }
 
+  .w-30 {
+    width: 30% !important
+  }
+
   .w-50 {
     width: 50% !important;
   }
 
+  .w-70 {
+    width: 70% !important;
+  }
+
   .w-75 {
     width: 75% !important;
   }
 
+  .w-90 {
+    width: 90% !important;
+  }
+
   .w-100 {
     width: 100% !important;
   }
@@ -8014,6 +8026,10 @@
     min-height: 100vh !important;
   }
 
+  .flex-1 {
+    flex: 1 !important;
+  }
+
   .flex-fill {
     flex: 1 1 auto !important;
   }

package/src/static/ejs/partials/styles/header/SiteInfo.ejs

@@ -0,0 +1,121 @@
+<style>
+  #site-header {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  #site-container {
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    width: 100%;
+  }
+
+  #site-container > div {
+    min-width: 0;
+    flex-shrink: 1;
+  }
+
+  #site-container > div:nth-child(1),
+  #site-container > div:nth-child(2) {
+    overflow: hidden;
+  }
+
+  #site-container > div:nth-child(1) {
+    max-width: 48ch;
+  }
+
+  #site-container > div:nth-child(2) {
+    max-width: 56ch;
+  }
+
+  #site-container > div:nth-child(3) {
+    flex-shrink: 0;
+    width: auto;
+  }
+
+  #site-container > div:nth-child(1) > div,
+  #site-container > div:nth-child(2) {
+    overflow: hidden;
+  }
+
+  #siteName {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  #siteUrl {
+    display: inline-flex !important;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+    vertical-align: middle;
+  }
+
+  #siteUrl .url-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
+  #siteUrl svg {
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 1300px) {
+    #site-container {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.5rem;
+    }
+
+    #site-container > div:nth-child(1),
+    #site-container > div:nth-child(2) {
+      overflow: visible;
+    }
+
+    #site-container > div:nth-child(1) > div {
+      overflow: visible;
+    }
+
+    #siteName {
+      white-space: normal;
+      word-wrap: break-word;
+      word-break: break-word;
+      overflow: visible;
+    }
+
+    #siteUrl {
+      display: inline-flex !important;
+    }
+
+    #siteUrl .url-text {
+      white-space: normal;
+      word-wrap: break-word;
+      word-break: break-word;
+      overflow: visible;
+    }
+  }
+
+  #site-container svg {
+    flex-shrink: 0;
+    min-width: 24px;
+    min-height: 24px;
+  }
+
+  .label {
+    margin-bottom: 0 !important;
+  }
+
+  .link {
+    color: var(--a11y-majorelle-blue);
+    text-decoration: none;
+  }
+
+  .link:hover {
+    text-decoration: underline;
+  }
+</style>

package/src/static/ejs/partials/styles/header/aboutScanModal/AboutScanModal.ejs

@@ -0,0 +1,82 @@
+<style>
+  #aboutScanModal {
+    --left-col: 320px;
+    --gap: 24px;
+    --divider: var(--bright-gray);
+    --xpad: 1rem;
+  }
+
+  #aboutScanModal .modal-dialog .modal-dialog-centered {
+    display: flex;
+    align-items: center;
+    min-height: calc(90svh - 2rem);
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  #aboutScanModal .modal-dialog {
+    --bs-modal-width: min(1080px, calc(100vw - 2rem));
+  }
+
+  #aboutScanModal .modal-header {
+    border-bottom: 0;
+  }
+
+  #aboutScanModal .modal-header::after {
+    content: "";
+    position: absolute;
+    inset-block: 0;
+    left: calc(var(--xpad) + var(--left-col));
+    width: 1px;
+    background:  var(--divider);
+    pointer-events: none;
+  }
+
+  #aboutScanModal .modal-body {
+    max-height: calc(100vh - 7.5rem);
+    overflow-y: auto;
+    padding-top: 0;
+  }
+
+  #aboutScanModal .about-scan-divider {
+    margin-bottom: 2rem;
+  }
+
+  #aboutScanModal .about-scan-modal-grid {
+    position: relative;
+    min-height: 0;
+  }
+
+  #aboutScanModal .about-scan-modal-grid::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: var(--left-col);
+    width: 1px;
+    background: var(--divider);
+  }
+
+  #view-crawl > h2 {
+    line-height: 2rem;
+  }
+
+  #view-wcag > h2 {
+    line-height: 2rem;
+  }
+
+  #view-wcag > p {
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
+
+  .link-external-icon {
+    position: relative; top: -1px;
+  }
+
+  @media (max-width: 991.98px) {
+    #aboutScanModal .about-scan-modal-grid::before {
+      display: none;
+    }
+  }
+</style>

package/src/static/ejs/partials/styles/header/aboutScanModal/ScanConfiguration.ejs

@@ -0,0 +1,50 @@
+<style>
+  .about-scan-details-right {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: calc(var(--left-col) + var(--gap));
+    right: 0;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  .about-scan-details-right .unbulleted-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .about-scan-details-right .unbulleted-list > li {
+    padding: 0.4rem 0;
+  }
+
+  .about-scan-details-right .unbulleted-list > li + li {
+    border-top: 1px solid var(--divider, --bright-gray);
+  }
+
+  #pagesScannedList > li:first-child {
+    padding-top: 0;
+  }
+
+  #pagesScannedList > li:last-child {
+    padding-bottom: 0;
+  }
+
+  #pagesScannedList > li > p {
+    margin-bottom: 0;
+  }
+
+  .display-url-container {
+    flex: 1;
+    min-width: 0;
+  }
+
+  @media (max-width: 991.98px) {
+    .about-scan-details-right {
+      position: static;
+      overflow: visible;
+      padding: 0;
+    }
+  }
+</style>

package/src/static/ejs/partials/styles/header/aboutScanModal/ScanDetails.ejs

@@ -0,0 +1,149 @@
+<style>
+  .website-title {
+    word-break: break-word;
+  }
+
+  #scan-about > ul > li:first-child {
+    padding-top: 0.5rem;
+  }
+
+  #scan-about ul {
+    padding-left: 0;
+  }
+
+  #scan-about li {
+    display: flex;
+    line-height: 1.1rem;
+    margin-bottom: 2rem;
+  }
+
+  #scan-about li > svg {
+    flex-shrink: 0;
+    margin-left: 0.3rem;
+    margin-right: 0.6rem;
+  }
+
+  .about-scan-details-left {
+    width: var(--left-col);
+    padding-right: var(--gap);
+  }
+
+  .url-scanned-text {
+    color: var(--a11y-majorelle-blue);
+    word-break: break-word;
+  }
+
+  .wcag-criteria-label {
+    text-decoration: none;
+    margin-bottom: 0.3rem;
+  }
+
+  .advanced-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0 !important;
+  }
+
+  .advanced-group + .advanced-sublist,
+  .advanced-group + ul {
+    list-style: disc !important;
+    margin-left: 3.125rem;
+  }
+
+  .advanced-group + .advanced-sublist li,
+  .advanced-group + ul li {
+    margin: 0;
+  }
+
+  .advanced-sublist-li {
+    display: list-item !important;
+    margin-bottom: 0.3rem !important;
+  }
+
+  .advanced-sublist-li:first-child {
+    margin-top: 0.5rem !important;
+  }
+
+  .advanced-sublist-li:last-child {
+    margin-bottom: 2rem !important;
+  }
+
+  .about-scan-toggle {
+    border: none;
+    background-color: var(--true-white);
+    text-align: left;
+    padding: 0;
+    text-decoration: none;
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .about-scan-toggle:hover {
+    text-decoration: none;
+  }
+
+  .about-scan-toggle .about-us-type-of-scan-text {
+    color: var(--a11y-majorelle-blue) !important;
+    display: inline !important;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .about-scan-toggle:hover .about-us-type-of-scan-text,
+  .about-scan-toggle .about-us-type-of-scan-text:focus-visible {
+    text-decoration: underline;
+  }
+
+  .about-scan-link{
+    color: var(--a11y-majorelle-blue);
+    text-decoration: none;
+    cursor: pointer;
+  }
+  .about-scan-link:hover,
+  .about-scan-link:focus-visible,
+  .about-scan-toggle:hover .about-scan-link {
+    text-decoration: underline;
+  }
+
+  .about-scan-link-row {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    line-height: 1.2;
+  }
+
+  .about-scan-link-text {
+    color: var(--a11y-majorelle-blue);
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  .about-scan-link-text:hover,
+  .about-scan-toggle:hover .about-scan-link-text,
+  .about-scan-link-text:focus-visible {
+    text-decoration: underline;
+  }
+
+  .about-scan-link-chev {
+    position: relative;
+    top: 0.1rem;
+  }
+
+  .oobee-version-text {
+    font-size: 1.125rem;
+    font-weight: 600;
+  }
+
+  @media (max-width: 991.98px) {
+    #aboutScanModal .modal-dialog{ --bs-modal-width: calc(100vw - 1rem); }
+    #aboutScanModal .modal-header::after,
+
+    .about-scan-details-left{ width:auto; padding-right:0; }
+
+    #aboutScanModal .modal-dialog.modal-dialog-centered{
+      align-items: flex-start;
+      min-height: auto;
+    }
+  }
+
+</style>

package/src/static/ejs/partials/styles/header.ejs

@@ -0,0 +1,7 @@
+<style>
+    .header-title {
+        padding-bottom: 0 !important;
+        margin-bottom: 0;
+        color: var(--true-white) !important;
+    }
+</style>

package/src/static/ejs/partials/styles/prioritiseIssues/IssueDetailCard.ejs

@@ -0,0 +1,141 @@
+<style>
+  .issue-detail-card {
+    width: 40%;
+    max-width: 500px;
+    background: var(--true-white);
+    border-radius: 5px;
+    padding: 24px;
+    align-self: flex-start;
+    border: 1px solid var(--soft-blue);
+    box-shadow: 0 2px 4px 0 rgb(77, 52, 191, 10%);
+  }
+
+  .issue-detail-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .issue-detail-image-container {
+    width: 100%;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    margin-bottom: 0.75rem;
+  }
+
+  .issue-detail-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+  }
+
+  .issue-detail-title {
+    font-size: 1.125rem !important;
+    font-weight: 700 !important;
+    line-height: 1.3 !important;
+    margin: 0;
+  }
+
+  .issue-detail-section-label {
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+  }
+
+  .issue-detail-conformance {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+  }
+
+  .issue-detail-conformance-badges {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  .issue-detail-conformance-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 5px;
+    border: 1px solid var(--a11y-black-100);
+    font-size: 12px;
+    padding: 0 4px;
+    width: fit-content;
+    height: 20px;
+    font-weight: 700;
+  }
+
+  .mustfix-badge-label {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--light-carmine-pink);
+    color: var(--true-white);
+    border-radius: 5px;
+    border: 1px solid var(--light-carmine-pink);
+    font-size: 12px;
+    font-weight: 600;
+    padding: 0 4px;
+    width: fit-content;
+    height: 20px;
+  }
+
+  .info-alert {
+    font-size: 1rem !important;
+    line-height: 1.5 !important;
+  }
+
+  .disability-text {
+    font-weight: 600;
+    color: var(--dark-orange) !important;
+  }
+
+  .btn-view-issue-details {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    font-size: 16px;
+    width: fit-content;
+    gap: 8px;
+    margin: 0 auto;
+  }
+
+  .btn-view-issue-details:hover {
+    text-decoration: underline;
+  }
+
+  .prioritise-issues-container {
+    display: flex;
+    gap: 24px;
+    align-items: flex-start;
+    margin-top: 20px;
+  }
+
+  .prioritise-issues-main {
+    flex: 1;
+    min-width: 0;
+    align-self: stretch;
+  }
+
+  @media (max-width: 1024px) {
+    .prioritise-issues-container {
+      flex-direction: column;
+    }
+
+    .issue-detail-card {
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .prioritise-issues-main {
+      width: 100%;
+    }
+  }
+</style>