fix(style): fix dashboard elements spacing

bimdata · Apr 13, 2021 · 753328c · 753328c
1 parent 554b764
commit 753328c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 20 deletions.
diff --git a/src/components/generic/carousel-list/CarouselList.scss b/src/components/generic/carousel-list/CarouselList.scss
@@ -2,7 +2,6 @@
   $button-size: 44px;
 
   position: relative;
-  padding: $spacing-unit;
 
   &__container {
     overflow-x: hidden;

diff --git a/src/components/specific/dashboard/dashboard-project-list/DashboardProjectList.scss b/src/components/specific/dashboard/dashboard-project-list/DashboardProjectList.scss
@@ -1,13 +1,10 @@
 .dashboard-project-list {
+  padding: $spacing-unit;
+
   &__title {
-    padding: $spacing-unit/2 $spacing-unit;
+    margin-bottom: $spacing-unit;
+    padding-left: $spacing-unit;
+    font-size: 1.2rem;
     font-weight: bold;
   }
-
-  &__content {
-    display: flex;
-    gap: 64px;
-    padding: $spacing-unit;
-    overflow-x: auto;
-  }
 }
diff --git a/src/components/specific/dashboard/dashboard-project-list/DashboardProjectList.vue b/src/components/specific/dashboard/dashboard-project-list/DashboardProjectList.vue
@@ -3,24 +3,26 @@
     <div class="dashboard-project-list__title">
       {{ $t("DashboardProjectList.title") }}
     </div>
-    <div class="dashboard-project-list__content">
+    <CarouselList>
       <ProjectCard
         v-for="project in displayedProjects"
         :key="project.id"
         :project="project"
         :actionMenu="false"
       />
-    </div>
+    </CarouselList>
   </div>
 </template>
 
 <script>
 import { ref, watchEffect } from "vue";
 // Components
+import CarouselList from "@/components/generic/carousel-list/CarouselList";
 import ProjectCard from "@/components/specific/projects/project-card/ProjectCard";
 
 export default {
   components: {
+    CarouselList,
     ProjectCard
   },
   props: {
@@ -37,7 +39,7 @@ export default {
         displayedProjects.value = props.projects
           .slice()
           .sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1))
-          .slice(0, 4);
+          .slice(0, 5);
       }
     });
 

diff --git a/src/components/specific/dashboard/dashboard-space-list/DashboardSpaceList.scss b/src/components/specific/dashboard/dashboard-space-list/DashboardSpaceList.scss
@@ -1,7 +1,10 @@
 .dashboard-space-list {
-  padding: $spacing-unit * 2;
+  padding: $spacing-unit;
 
   &__title {
+    margin-bottom: $spacing-unit;
+    padding-left: $spacing-unit;
+    font-size: 1.2rem;
     font-weight: bold;
   }
 }
diff --git a/src/views/dashboard/Dashboard.scss b/src/views/dashboard/Dashboard.scss
@@ -6,12 +6,6 @@
   }
 
   &__body {
-    display: flex;
-    flex-direction: column;
-    gap: $spacing-unit * 2;
-    margin: $spacing-unit * 2 0;
-    padding: $spacing-unit;
-    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
-    background-color: $color-white;
+    margin: $spacing-unit * 3 0;
   }
 }