[511] UI-only: Adjust homepage banner height and fix style issues on …

…mobile (#512) * fix mobile/tables style for the homepage, reduce home hero height * adjust mobile styling on the Map analysis page
OWASP · May 28, 2024 · 1e33416 · 1e33416
1 parent 7871310
commit 1e33416
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 19 deletions.
diff --git a/application/frontend/src/pages/Explorer/explorer.scss b/application/frontend/src/pages/Explorer/explorer.scss
@@ -1,5 +1,5 @@
 main#explorer-content {
-  padding: 20px 40px;
+  padding: 30px;
 
   .search-field {
     input {
@@ -17,7 +17,7 @@ main#explorer-content {
     display: flex;
     margin-bottom: 20px;
     .menu-title {
-      margin: 0;
+      margin: 0 10px 0 0;
     }
     ul {
       list-style: none;
@@ -31,6 +31,9 @@ main#explorer-content {
       + li {
         border-left: 1px solid #b1b0b0;
       }
+      &:first-child {
+        padding-left: 0;
+      }
     }
   }
 
@@ -118,3 +121,9 @@ main#explorer-content {
     margin-left: 0;
   }
 }
+
+@media (min-width: 0px) and (max-width: 770px) {
+  #graphs-menu {
+    flex-direction: column;
+  }
+}
diff --git a/application/frontend/src/pages/Explorer/explorer.tsx b/application/frontend/src/pages/Explorer/explorer.tsx
@@ -138,7 +138,7 @@ export const Explorer = () => {
 
         <div id="explorer-wrapper">
           <div className="search-field">
-            <input id="filter" type="text" placeholder="Search..." onKeyUp={update} />
+            <input id="filter" type="text" placeholder="Search Explorer..." onKeyUp={update} />
             <div id="search-summary"></div>
           </div>
           <div id="graphs-menu">

diff --git a/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss b/application/frontend/src/pages/GapAnalysis/GapAnalysis.scss
@@ -0,0 +1,16 @@
+main#gap-analysis {
+  padding: 30px;
+
+  span.name {
+    padding: 0 10px;
+  }
+}
+
+@media (min-width: 0px) and (max-width: 500px) {
+  main#gap-analysis {
+    span.name {
+      width: 85px;
+      display: inline-block;
+    }
+  }
+}
diff --git a/application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx b/application/frontend/src/pages/GapAnalysis/GapAnalysis.tsx
@@ -1,3 +1,5 @@
+import './GapAnalysis.scss';
+
 import axios from 'axios';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -142,7 +144,6 @@ export const GapAnalysis = () => {
   }, [setStandardOptions, setLoadingStandards, setError]);
 
   useEffect(() => {
-    console.log('gajob changed, polling');
     const pollingCallback = () => {
       const fetchData = async () => {
         const result = await axios.get(`${apiUrl}/ma_job_results?id=` + gaJob, {
@@ -224,14 +225,15 @@ export const GapAnalysis = () => {
   );
 
   return (
-    <div style={{ padding: '30px' }}>
+    <main id="gap-analysis">
       <h1 className="standard-page__heading">Map Analysis</h1>
+      <LoadingAndErrorIndicator loading={loadingGA || loadingStandards} error={error} />
+
       <Table celled padded compact>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>
-              {' '}
-              Base:{' '}
+              <span className="name">Base:</span>
               <Dropdown
                 placeholder="Base Standard"
                 search
@@ -242,7 +244,7 @@ export const GapAnalysis = () => {
               />
             </Table.HeaderCell>
             <Table.HeaderCell>
-              Compare:{' '}
+              <span className="name">Compare:</span>
               <Dropdown
                 placeholder="Compare Standard"
                 search
@@ -271,7 +273,6 @@ export const GapAnalysis = () => {
           </Table.Row>
         </Table.Header>
         <Table.Body>
-          <LoadingAndErrorIndicator loading={loadingGA || loadingStandards} error={error} />
           {gapAnalysis && (
             <>
               {Object.keys(gapAnalysis)
@@ -312,6 +313,6 @@ export const GapAnalysis = () => {
           )}
         </Table.Body>
       </Table>
-    </div>
+    </main>
   );
 };
diff --git a/application/frontend/src/pages/Search/search.scss b/application/frontend/src/pages/Search/search.scss
@@ -6,7 +6,7 @@
   padding: 0 0 40px;
 
   .home-hero {
-    padding: 60px 0;
+    padding: 30px 0;
     background-color: #2e3b61;
     width: 100%;
     .hero-container {
@@ -31,8 +31,7 @@
   }
 
   .search-page__sub-heading {
-    margin-top: 0px;
-    margin-bottom: 30px;
+    margin: 0 0 10px;
     color: #eee;
   }
 
@@ -57,8 +56,7 @@
 
 // mobile
 @media (min-width: 0px) and (max-width: 599px) {
-  .search-page {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .home-hero h1.ui.header {
+    font-size: 1.5rem;
   }
 }
diff --git a/application/frontend/src/scaffolding/Header/header.scss b/application/frontend/src/scaffolding/Header/header.scss
@@ -37,12 +37,12 @@
     .header__nav-bar__link {
       padding-top: 10px;
       padding-bottom: 10px;
-      text-align: center;
-      margin: 0 2px;
 
       .item {
         width: 100%;
         height: 100%;
+        margin: 0;
+        text-align: center;
       }
       &:hover:not(.header__nav-bar__link--active) .item {
         text-decoration: underline;
@@ -79,10 +79,21 @@ nav + * {
   }
 }
 
-@media (min-width: 0px) and (max-width: 520px) {
+@media (min-width: 0px) and (max-width: 770px) {
   .header__nav-bar {
     justify-content: center;
 
+    &.ui.secondary.menu {
+      padding: 0 0 10px;
+      flex-direction: column;
+      align-items: center;
+
+      .header__nav-bar-logo {
+        margin-right: 0;
+        padding: 20px 0 0;
+      }
+    }
+
     &.ui.menu:not(.vertical) .right.menu {
       display: flex;
       justify-content: center;