From 3342fbb91850d245f5694b60249561d9014954e5 Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Tue, 30 Aug 2022 16:25:14 -0500
Subject: [PATCH] web/satellite: make project dashboard/overview responsive

This change modifies the new project dashboard to accommodate
small screen sizes.

Resolves https://github.com/storj/storj/issues/5036

Change-Id: I27a8acd144a24f21f0fa43808640ba5bca6b49a8
---
 .../components/common/VDateRangePicker.vue    |  18 ++-
 .../components/project/buckets/BucketArea.vue |  26 +++-
 .../components/project/buckets/BucketItem.vue | 118 +++++++++++++++---
 .../project/buckets/NoBucketsArea.vue         |   3 +-
 .../NewProjectDashboard.vue                   | 114 ++++++++++++++---
 .../static/images/project/bucket.svg          |   3 +
 .../__snapshots__/BucketArea.spec.ts.snap     |   4 +-
 .../__snapshots__/BucketItem.spec.ts.snap     |  29 ++++-
 8 files changed, 266 insertions(+), 49 deletions(-)
 create mode 100644 web/satellite/static/images/project/bucket.svg

diff --git a/web/satellite/src/components/common/VDateRangePicker.vue b/web/satellite/src/components/common/VDateRangePicker.vue
index 618e6e816..0a2a4b228 100644
--- a/web/satellite/src/components/common/VDateRangePicker.vue
+++ b/web/satellite/src/components/common/VDateRangePicker.vue
@@ -46,7 +46,7 @@ export default class VDateRangePicker extends Vue {
     }
 
     .mx-calendar {
-        width: 50%;
+        width: 100%;
     }
 
     .mx-date-row {
@@ -107,4 +107,20 @@ export default class VDateRangePicker extends Vue {
         height: 20px;
         border-width: 4px 0 0 4px;
     }
+
+    @media screen and (max-width: 768px) {
+
+        .range-selection__popup {
+            width: 320px !important;
+        }
+
+        .mx-range-wrapper {
+            flex-direction: column;
+        }
+
+        .mx-calendar + .mx-calendar {
+            border-left: none;
+            border-top: 1px solid #e8e8e8;
+        }
+    }
 </style>
diff --git a/web/satellite/src/components/project/buckets/BucketArea.vue b/web/satellite/src/components/project/buckets/BucketArea.vue
index 9256d141d..9e015f31e 100644
--- a/web/satellite/src/components/project/buckets/BucketArea.vue
+++ b/web/satellite/src/components/project/buckets/BucketArea.vue
@@ -14,7 +14,7 @@
                 />
             </div>
             <div v-if="buckets.length" class="buckets-container">
-                <SortingHeader />
+                <SortingHeader class="buckets-container__header" />
                 <VList
                     class="buckets-list"
                     :data-set="buckets"
@@ -197,8 +197,8 @@ export default class BucketArea extends Vue {
 
     .buckets-container {
         background-color: #fff;
-        border-radius: 6px;
-        padding-bottom: 20px;
+        border-radius: 10px;
+        box-shadow: 0 0 32px rgb(0 0 0 / 4%);
     }
 
     .empty-search-result-area {
@@ -207,7 +207,7 @@ export default class BucketArea extends Vue {
         justify-content: center;
         padding: 20px 0;
         background-color: #fff;
-        border-radius: 6px;
+        border-radius: 10px;
 
         &__title {
             font-family: 'font_bold', sans-serif;
@@ -217,10 +217,26 @@ export default class BucketArea extends Vue {
     }
 
     .buckets-list {
-        padding-top: 20px;
+        padding: 20px 0;
+        border-radius: 10px;
     }
 
     :deep(.pagination-container) {
         padding-left: 0;
     }
+
+    @media screen and (max-width: 960px) {
+
+        .buckets-container__header {
+            display: none;
+        }
+
+        .buckets-list {
+            padding: 0;
+
+            & > :deep(*:not(:first-child)) {
+                border-top: 1px solid #c7cdd2;
+            }
+        }
+    }
 </style>
diff --git a/web/satellite/src/components/project/buckets/BucketItem.vue b/web/satellite/src/components/project/buckets/BucketItem.vue
index 89bba250b..834eb5da9 100644
--- a/web/satellite/src/components/project/buckets/BucketItem.vue
+++ b/web/satellite/src/components/project/buckets/BucketItem.vue
@@ -3,11 +3,30 @@
 
 <template>
     <div class="container">
-        <p class="container__item name" :title="itemData.name">{{ itemData.name }}</p>
-        <p class="container__item">{{ itemData.storage.toFixed(2) }}GB</p>
-        <p class="container__item">{{ itemData.egress.toFixed(2) }}GB</p>
-        <p class="container__item">{{ itemData.objectCount.toString() }}</p>
-        <p class="container__item">{{ itemData.segmentCount.toString() }}</p>
+        <div class="container__header" :title="itemData.name">
+            <BucketIcon class="container__header__icon" />
+            <p class="container__header__name">{{ itemData.name }}</p>
+        </div>
+        <div class="container__item">
+            <div class="container__item__inner">
+                <p class="container__item__inner__label">Storage</p>
+                <p class="container__item__inner__value">{{ itemData.storage.toFixed(2) }}GB</p>
+            </div>
+            <div class="container__item__inner">
+                <p class="container__item__inner__label">Bandwidth</p>
+                <p class="container__item__inner__value">{{ itemData.egress.toFixed(2) }}GB</p>
+            </div>
+        </div>
+        <div class="container__item">
+            <div class="container__item__inner">
+                <p class="container__item__inner__label">Objects</p>
+                <p class="container__item__inner__value">{{ itemData.objectCount.toString() }}</p>
+            </div>
+            <div class="container__item__inner">
+                <p class="container__item__inner__label">Segments</p>
+                <p class="container__item__inner__value">{{ itemData.segmentCount.toString() }}</p>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -16,8 +35,14 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import { Bucket } from '@/types/buckets';
 
+import BucketIcon from '@/../static/images/project/bucket.svg';
+
 // @vue/component
-@Component
+@Component({
+    components: {
+        BucketIcon,
+    }
+})
 export default class BucketItem extends Vue {
     @Prop({default: () => new Bucket('', 0, 0, 0, 0, new Date(), new Date())})
     private readonly itemData: Bucket;
@@ -29,22 +54,81 @@ export default class BucketItem extends Vue {
         padding: 20px 40px;
         outline: none;
         display: flex;
-        background: #fff;
         margin-bottom: 1px;
-        width: calc(100% - 80px);
+        box-sizing: border-box;
+        font-family: 'font_medium', sans-serif;
+        font-size: 16px;
+
+        &__header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+
+            &__icon {
+                display: none;
+                margin-right: 10px;
+            }
+
+            &__name {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
 
         &__item {
-            width: 20%;
-            font-family: 'font_medium', sans-serif;
-            font-size: 16px;
-            margin: 0;
+            display: flex;
+            width: 100%;
+
+            &__inner {
+                width: 50%;
+
+                &__label {
+                    display: none;
+                    margin-bottom: 4px;
+                    font-family: 'font_regular', sans-serif;
+                    font-size: 14px;
+                }
+            }
         }
     }
 
-    .name {
-        width: 40%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    @media screen and (max-width: 960px) {
+
+        .container {
+            flex-wrap: wrap;
+            padding: 20px 24px;
+
+            &__header {
+
+                &__icon {
+                    display: block;
+                }
+
+                &__name {
+                    font-family: 'font_bold', sans-serif;
+                }
+            }
+
+            &__item {
+                width: 50%;
+                margin-top: 16px;
+
+                &__inner__label {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+
+        .container {
+            flex-direction: column;
+
+            &__item {
+                width: 100%;
+            }
+        }
     }
 </style>
diff --git a/web/satellite/src/components/project/buckets/NoBucketsArea.vue b/web/satellite/src/components/project/buckets/NoBucketsArea.vue
index b272b76e0..c0cc9d6b3 100644
--- a/web/satellite/src/components/project/buckets/NoBucketsArea.vue
+++ b/web/satellite/src/components/project/buckets/NoBucketsArea.vue
@@ -76,7 +76,8 @@ export default class NoBucketArea extends Vue {
             font-size: 18px;
             line-height: 26px;
             color: #354049;
-            margin: 15px 0 30px;
+            margin: 15px 15px 30px;
+            text-align: center;
         }
 
         &__second-button {
diff --git a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
index 24e258d10..7164eb1ce 100644
--- a/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
+++ b/web/satellite/src/components/project/newProjectDashboard/NewProjectDashboard.vue
@@ -2,7 +2,7 @@
 // See LICENSE for copying information.
 
 <template>
-    <div ref="dashboard" class="project-dashboard">
+    <div class="project-dashboard">
         <h1 class="project-dashboard__title" aria-roledescription="title">Dashboard</h1>
         <p class="project-dashboard__message">
             Expect a delay of a few hours between network activity and the latest dashboard stats.
@@ -70,7 +70,7 @@
             </div>
         </div>
         <div class="project-dashboard__charts">
-            <div class="project-dashboard__charts__container">
+            <div ref="chartContainer" class="project-dashboard__charts__container">
                 <div class="project-dashboard__charts__container__header">
                     <h3 class="project-dashboard__charts__container__header__title">Storage</h3>
                 </div>
@@ -144,7 +144,6 @@
                 </template>
             </InfoContainer>
             <InfoContainer
-                class="project-dashboard__info__middle"
                 title="Objects"
                 :subtitle="`Updated ${now}`"
                 :value="limits.objectCount.toString()"
@@ -178,7 +177,7 @@
             <p class="project-dashboard__stats-header__title">Buckets</p>
         </div>
         <VLoader v-if="areBucketsFetching" />
-        <BucketArea v-else />
+        <BucketArea v-else class="project-dashboard__bucket-area" />
     </div>
 </template>
 
@@ -232,7 +231,7 @@ export default class NewProjectDashboard extends Vue {
     public chartWidth = 0;
 
     public $refs: {
-        dashboard: HTMLDivElement;
+        chartContainer: HTMLDivElement;
     }
 
     public readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@@ -290,9 +289,7 @@ export default class NewProjectDashboard extends Vue {
      * Used container size recalculation for charts resizing.
      */
     public recalculateChartWidth(): void {
-        // sixty pixels.
-        const additionalPaddingRight = 60;
-        this.chartWidth = this.$refs.dashboard.getBoundingClientRect().width / 2 - additionalPaddingRight;
+        this.chartWidth = this.$refs.chartContainer.getBoundingClientRect().width;
     }
 
     /**
@@ -435,7 +432,6 @@ export default class NewProjectDashboard extends Vue {
 <style scoped lang="scss">
     .project-dashboard {
         padding: 56px 55px 56px 40px;
-        height: calc(100% - 112px);
         max-width: calc(100vw - 280px - 95px);
         background-image: url('../../../../static/images/project/background.png');
         background-position: top right;
@@ -493,7 +489,12 @@ export default class NewProjectDashboard extends Vue {
             display: flex;
             align-items: center;
             justify-content: space-between;
-            margin: 65px 0 16px;
+            flex-wrap: wrap;
+            margin: 63px -8px 14px;
+
+            > * {
+                margin: 2px 8px;
+            }
 
             &__title {
                 font-family: 'font_Bold', sans-serif;
@@ -516,9 +517,10 @@ export default class NewProjectDashboard extends Vue {
         &__charts {
             display: flex;
             align-items: center;
+            justify-content: space-between;
 
             &__container {
-                width: 100%;
+                width: calc((100% - 20px) / 2);
                 background-color: #fff;
                 box-shadow: 0 0 32px rgb(0 0 0 / 4%);
                 border-radius: 10px;
@@ -607,19 +609,18 @@ export default class NewProjectDashboard extends Vue {
                     color: #000;
                 }
             }
-
-            > *:first-child {
-                margin-right: 20px;
-            }
         }
 
         &__info {
             display: flex;
-            align-items: center;
             margin-top: 16px;
+            justify-content: space-between;
+            align-items: stretch;
+            flex-wrap: wrap;
 
-            &__middle {
-                margin: 0 16px;
+            .info-container {
+                width: calc((100% - 32px) / 3);
+                box-sizing: border-box;
             }
 
             &__label,
@@ -639,6 +640,10 @@ export default class NewProjectDashboard extends Vue {
                 }
             }
         }
+
+        &__bucket-area {
+            margin-top: 0;
+        }
     }
 
     .new-project-button {
@@ -663,6 +668,8 @@ export default class NewProjectDashboard extends Vue {
         background: #56606d;
         border-radius: 4px;
         padding: 8px;
+        position: relative;
+        right: 25%;
     }
 
     :deep(.info__box__arrow) {
@@ -672,10 +679,81 @@ export default class NewProjectDashboard extends Vue {
         margin: 0 0 -2px 40px;
     }
 
+    :deep(.range-selection__popup) {
+        z-index: 1;
+    }
+
     @media screen and (max-width: 1280px) {
 
         .project-dashboard {
             max-width: calc(100vw - 86px - 95px);
         }
     }
+
+    @media screen and (max-width: 960px) {
+
+        :deep(.range-selection__popup) {
+            right: -148px;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+
+        .project-dashboard {
+
+            &__stats-header {
+                margin-bottom: 20px;
+            }
+
+            &__charts {
+                flex-direction: column;
+
+                &__container {
+                    width: 100%;
+                }
+
+                &__container:first-child {
+                    margin-right: 0;
+                    margin-bottom: 22px;
+                }
+            }
+
+            &__info {
+                margin-top: 52px;
+
+                > .info-container {
+                    width: calc((100% - 25px) / 2);
+                    margin-bottom: 24px;
+                }
+
+                > .info-container:last-child {
+                    width: 100%;
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        :deep(.range-selection__popup) {
+            left: 0;
+        }
+    }
+
+    @media screen and (max-width: 480px) {
+
+        .project-dashboard {
+
+            &__charts__container:first-child {
+                margin-bottom: 20px;
+            }
+
+            &__info {
+                margin-top: 32px;
+
+                > .info-container {
+                    width: 100%;
+                    margin-bottom: 16px;
+                }
+            }
+        }
+    }
 </style>
diff --git a/web/satellite/static/images/project/bucket.svg b/web/satellite/static/images/project/bucket.svg
new file mode 100644
index 000000000..ae85b8340
--- /dev/null
+++ b/web/satellite/static/images/project/bucket.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.94232 0C12.3287 0 15.8846 1.41577 15.8846 3.16222C15.8846 3.18684 15.8839 3.21139 15.8825 3.23587L15.8846 3.23576L15.8812 3.25676C15.8747 3.34414 15.8594 3.43063 15.8355 3.5161L13.6784 15.7376C13.6578 16.9885 11.0975 18 7.94232 18C4.80603 18 2.25762 17.0006 2.20697 15.7601L2.20649 15.7376L0.0496288 3.51771C0.0253459 3.43129 0.00981089 3.34382 0.00338464 3.25544L0 3.23576L0.00211202 3.23587C0.000706552 3.21139 0 3.18684 0 3.16222C0 1.41577 3.5559 0 7.94232 0ZM7.94232 6.32444C5.57808 6.32444 3.45511 5.91314 2.00017 5.26045L3.5636 14.1197L3.81923 15.4762L3.84291 15.4946C3.9766 15.5948 4.18351 15.7078 4.45219 15.8167L4.50675 15.8385C5.37281 16.1771 6.60689 16.3821 7.94232 16.3821C9.28547 16.3821 10.5259 16.1747 11.392 15.8329C11.7041 15.7097 11.9368 15.5803 12.0734 15.4701L12.0845 15.4609L13.8846 5.26039C12.4297 5.91312 10.3066 6.32444 7.94232 6.32444ZM7.94232 1.61788C6.0014 1.61788 4.2014 1.921 2.92472 2.42932C2.37614 2.64773 1.96798 2.88827 1.73308 3.10939C1.71811 3.12348 1.70445 3.13691 1.69205 3.14963L1.68024 3.16207L1.70159 3.18448L1.73308 3.21505C1.96798 3.43617 2.37614 3.67671 2.92472 3.89513C4.2014 4.40344 6.0014 4.70656 7.94232 4.70656C9.88324 4.70656 11.6832 4.40344 12.9599 3.89513C13.5085 3.67671 13.9167 3.43617 14.1516 3.21505C14.1665 3.20096 14.1802 3.18753 14.1926 3.17481L14.2045 3.16207L14.1831 3.13996L14.1516 3.10939C13.9167 2.88827 13.5085 2.64773 12.9599 2.42932C11.6832 1.921 9.88324 1.61788 7.94232 1.61788Z" fill="#2C353A"/>
+</svg>
diff --git a/web/satellite/tests/unit/project/buckets/__snapshots__/BucketArea.spec.ts.snap b/web/satellite/tests/unit/project/buckets/__snapshots__/BucketArea.spec.ts.snap
index 00773c7a0..073e8afc3 100644
--- a/web/satellite/tests/unit/project/buckets/__snapshots__/BucketArea.spec.ts.snap
+++ b/web/satellite/tests/unit/project/buckets/__snapshots__/BucketArea.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`BucketArea.vue renders correctly with bucket 1`] = `
       <vheader-stub styletype="common" placeholder="Buckets" search="[Function]" class="buckets-header-component"></vheader-stub>
     </div>
     <div class="buckets-container">
-      <sortingheader-stub></sortingheader-stub>
+      <sortingheader-stub class="buckets-container__header"></sortingheader-stub>
       <vlist-stub itemcomponent="[Function]" onitemclick="[Function]" dataset="[object Object]" class="buckets-list"></vlist-stub>
     </div>
     <!---->
@@ -25,7 +25,7 @@ exports[`BucketArea.vue renders correctly with pagination 1`] = `
       <vheader-stub styletype="common" placeholder="Buckets" search="[Function]" class="buckets-header-component"></vheader-stub>
     </div>
     <div class="buckets-container">
-      <sortingheader-stub></sortingheader-stub>
+      <sortingheader-stub class="buckets-container__header"></sortingheader-stub>
       <vlist-stub itemcomponent="[Function]" onitemclick="[Function]" dataset="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" class="buckets-list"></vlist-stub>
     </div>
     <!---->
diff --git a/web/satellite/tests/unit/project/buckets/__snapshots__/BucketItem.spec.ts.snap b/web/satellite/tests/unit/project/buckets/__snapshots__/BucketItem.spec.ts.snap
index 0b3bb5b4d..5a349c3e5 100644
--- a/web/satellite/tests/unit/project/buckets/__snapshots__/BucketItem.spec.ts.snap
+++ b/web/satellite/tests/unit/project/buckets/__snapshots__/BucketItem.spec.ts.snap
@@ -2,10 +2,29 @@
 
 exports[`BucketItem.vue renders correctly 1`] = `
 <div class="container">
-  <p title="name" class="container__item name">name</p>
-  <p class="container__item">1.00GB</p>
-  <p class="container__item">1.00GB</p>
-  <p class="container__item">1</p>
-  <p class="container__item">1</p>
+  <div title="name" class="container__header">
+    <bucketicon-stub class="container__header__icon"></bucketicon-stub>
+    <p class="container__header__name">name</p>
+  </div>
+  <div class="container__item">
+    <div class="container__item__inner">
+      <p class="container__item__inner__label">Storage</p>
+      <p class="container__item__inner__value">1.00GB</p>
+    </div>
+    <div class="container__item__inner">
+      <p class="container__item__inner__label">Bandwidth</p>
+      <p class="container__item__inner__value">1.00GB</p>
+    </div>
+  </div>
+  <div class="container__item">
+    <div class="container__item__inner">
+      <p class="container__item__inner__label">Objects</p>
+      <p class="container__item__inner__value">1</p>
+    </div>
+    <div class="container__item__inner">
+      <p class="container__item__inner__label">Segments</p>
+      <p class="container__item__inner__value">1</p>
+    </div>
+  </div>
 </div>
 `;