bcgov · Fosol · Mar 18, 2024 · Mar 18, 2024
diff --git a/src/dashboard/src/app/login/Login.module.scss b/src/dashboard/src/app/login/Login.module.scss
@@ -16,12 +16,20 @@
   align-items: center;
   justify-content: center;
 
+  @media (max-width: $mobile) {
+    width: 100%;
+  }
+
   h1 {
     font-size: 4em;
     line-height: 1.2;
     letter-spacing: -2px;
     width: 65%;
     margin-bottom: 40px;
+
+    @media (max-width: $mobile) {
+      font-size: $font-size-32;
+    }
   }
 
   p {
@@ -34,6 +42,10 @@
   padding: 0 50px;
   margin: 4% 0;
 
+  @media (max-width: $mobile) {
+    width: 100%;
+  }
+
   h3 {
     font-size: 1.33em;
     font-weight: bold;

diff --git a/src/dashboard/src/components/charts/doughnut/allOrganizations/AllOrganizations.module.scss b/src/dashboard/src/components/charts/doughnut/allOrganizations/AllOrganizations.module.scss
@@ -85,8 +85,8 @@
     font-size: $font-size-large;
     text-align: center;
     position: absolute;
-    top: 50%;
-    left: 56%;
+    top: 51%;
+    left: 54%;
     transform: translate(-50%, -50%);
 
     span {

diff --git a/src/dashboard/src/components/charts/line/LineChart.module.scss b/src/dashboard/src/components/charts/line/LineChart.module.scss
@@ -22,10 +22,4 @@
   .chartContainer {
     min-height: 420px;
   }
-}
-
-.disclaimer {
-  font-size: $font-size-12;
-  margin: 2px 0 -7px 5px;
-  color: $info-gray;
 }
diff --git a/src/dashboard/src/components/charts/line/LineChart.tsx b/src/dashboard/src/components/charts/line/LineChart.tsx
@@ -27,6 +27,7 @@ interface LineChartProps<TData = DefaultDataPoint<'line'>, TLabel = unknown> {
   large?: boolean;
   options?: ChartOptions<'line'>;
   filter?: React.ReactNode;
+  disclaimer?: React.ReactNode;
   data: ChartData<'line', TData, TLabel>;
   showExport?: boolean;
   exportDisabled?: boolean;
@@ -43,6 +44,7 @@ export const LineChart = <
   data,
   options = defaultChartOptions,
   filter,
+  disclaimer,
   showExport,
   exportDisabled,
   loading,
@@ -52,8 +54,8 @@ export const LineChart = <
       {loading && <LoadingAnimation />}
       {label && <h1>{label}</h1>}
       {filter}
+      {disclaimer}
       <div className={styles.chartContainer}>
-      <p className={styles.disclaimer}>*Data shows totals on last available day of each month.</p>
         <Line data={data} options={{ ...options, maintainAspectRatio: !large }} />
       </div>
       {showExport && (

diff --git a/src/dashboard/src/components/charts/storageTrends/StorageTrendsChart.module.scss b/src/dashboard/src/components/charts/storageTrends/StorageTrendsChart.module.scss
@@ -12,4 +12,10 @@
     right: unset;
     display: block;
   }
+}
+
+.disclaimer {
+  font-size: $font-size-12;
+  margin: 2px 0 -7px 5px;
+  color: $info-gray;
 }
diff --git a/src/dashboard/src/components/charts/storageTrends/StorageTrendsChart.tsx b/src/dashboard/src/components/charts/storageTrends/StorageTrendsChart.tsx
@@ -101,6 +101,9 @@ export const StorageTrendsChart: React.FC<LineChartProps> = ({
       large={large}
       showExport
       exportDisabled
+      disclaimer={
+        <p className={styles.disclaimer}>*Data shows totals on last available day of each month.</p>
+      }
       filter={
         <div className={styles.date}>
           <DateRangePicker

diff --git a/src/dashboard/src/components/filter/Filter.module.scss b/src/dashboard/src/components/filter/Filter.module.scss
@@ -22,6 +22,23 @@
       display: none;
     }
   }
+
+  @media (max-width: $mobile) {
+    flex-direction: column;
+    position: relative;
+    top: -60px;
+    margin-bottom: -40px;
+
+    >div {
+      margin: 5px 0;
+      max-width: unset;
+    }
+
+    button {
+      width: 100%;
+      margin: 15px 0 0;
+    }
+  }
 }
 
 .reset {
@@ -45,4 +62,14 @@
   &:hover {
     background-color: $bc-yellow;
   }
+
+  @media (max-width: $mobile) {
+    position: unset;
+    max-width: unset;
+    font-size: $font-size-normal;
+  }
+
+  &.hidden {
+    display: none;
+  }
 }
diff --git a/src/dashboard/src/components/filter/Filter.tsx b/src/dashboard/src/components/filter/Filter.tsx
@@ -101,6 +101,9 @@ export const Filter: React.FC = () => {
   //   // eslint-disable-next-line react-hooks/exhaustive-deps
   // }, [readyKey, updateDashboard, lockKey]);
 
+  const allFiltersUnchosen =
+    !values.tenant && !values.organization && !values.operatingSystemItem && !values.serverItem;
+
   return (
     <div className={styles.filter}>
       <h1>Filter by:</h1>
@@ -133,7 +136,7 @@ export const Filter: React.FC = () => {
         Update
       </Button>
       <button
-        className={styles.reset}
+        className={`${styles.reset} ${allFiltersUnchosen ? styles.hidden : ''}`}
         onClick={async () => {
           const tenant = tenants.length === 1 ? tenants[0] : undefined;
           const organization = organizations.length === 1 ? organizations[0] : undefined;

diff --git a/src/dashboard/src/components/header/Header.module.scss b/src/dashboard/src/components/header/Header.module.scss
@@ -11,6 +11,10 @@
     position: relative;
     top: 5px;
     margin-right: 10px;
+
+    @media (max-width: $mobile) {
+      display: none;
+    }
   }
 }
 
@@ -27,15 +31,27 @@
     flex-direction: column;
     padding: 0 65px;
 
+    @media (max-width: $mobile)  {
+      padding: 0 20px;
+    }
+
     >div {
       display: flex;
       position: relative;
+
+      @media (max-width: $mobile) {
+        flex-direction: column-reverse;
+      }
     }
   }
 
   &.filterPadding {
     margin-bottom: 61px;
     min-height: 260px;
+
+    @media (max-width: $mobile) {
+      margin-bottom: 30px;
+    }
   }
 
   &.adminPadding {
@@ -55,6 +71,12 @@
   >div {
     display: flex;
     align-items: center;
+
+    @media (max-width: $mobile) {
+      &:last-of-type {
+        justify-content: space-between;
+      }
+    }
   }
 
   h1 {
@@ -63,6 +85,10 @@
     font-weight: 300;
     font-size: $font-size-medium;
 
+    @media (max-width: $mobile) {
+      font-size: $font-size-20;
+    }
+
     &:after {
       content: '';
       height: 35px;
@@ -84,6 +110,10 @@
 
   p {
     font-size: $font-size-18;
+
+    @media (max-width: $mobile)  {
+      font-size: $font-size-small;
+    }
   }
 }
 
@@ -112,6 +142,10 @@
     cursor: pointer;
     color: $white;
 
+    @media (max-width: $mobile) {
+      text-decoration: underline;
+    }
+
     &:hover {
       text-decoration: underline;
     }
@@ -142,6 +176,10 @@
       right: -30px;
       top: 12px;
       pointer-events: none;
+
+      @media (max-width: $mobile) {
+        top: 8px;
+      }
     }
   }
 }
@@ -154,6 +192,11 @@
   color: $white;
   @include nav-icon('../../../public/images/server-icon.png');
 
+  @media (max-width: $mobile) {
+    top: 0;
+    text-decoration: underline;
+  }
+
   &::before {
     background-size: contain;
     height: 18px;

diff --git a/src/dashboard/src/styles/_variables.scss b/src/dashboard/src/styles/_variables.scss
@@ -13,4 +13,5 @@ $font-size-40: 2.5rem;
 // Screen size breakpoints
 $container: 1440px;
 $desktop: 1310px;
-$tablet: 1024px;
+$tablet: 1024px;
+$mobile: 975px;