style(content_scroll): only the page content will scroll, the rest of…

… the page is fixed (#1128)
XPEHO · Nov 27, 2023 · 9421cf7 · 9421cf7
1 parent d2d20c2
commit 9421cf7
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 32 deletions.
diff --git a/yaki_admin/package-lock.json b/yaki_admin/package-lock.json
diff --git a/yaki_admin/src/components/ButtonTextIcon.vue b/yaki_admin/src/components/ButtonTextIcon.vue
@@ -12,7 +12,7 @@ const props = defineProps({
 
 const classList = [
   "button--general",
-  "button--color-delete",
+  "button--color-primary",
   "button--sized-content",
   "button--height-secondary",
   "button--icon-text-style",

diff --git a/yaki_admin/src/components/SideBarMenuDropDown.vue b/yaki_admin/src/components/SideBarMenuDropDown.vue
@@ -112,9 +112,9 @@ const props = defineProps({
 }
 
 .drop-down__create-team {
-  margin-block: 10px;
-  padding-block: 16px;
+  margin-block: 4px;
   padding-inline-start: 16px;
+  height: 56px;
 
   display: flex;
   align-items: center;
@@ -139,7 +139,14 @@ const props = defineProps({
   }
 
   &:hover {
-    background-color: #fab9a1;
+    background-color: #ff9169;
+    cursor: pointer;
+    color: rgb(238, 237, 237);
+    figure {
+      img {
+        filter: invert(0.9);
+      }
+    }
   }
 
   &:active {

diff --git a/yaki_admin/src/features/captain/layouts/CaptainPageContent.vue b/yaki_admin/src/features/captain/layouts/CaptainPageContent.vue
@@ -22,11 +22,14 @@ onBeforeMount(async () => {
     </template>
     <template #content>
       <section class="user-list__container">
+        <p>Team description : Coming soon.</p>
         <p v-if="teammateStore.getTeammateList.length > 0">Teammates :</p>
-        <user-info-card
-          v-for="teammate in teammateStore.getTeammateList"
-          :user="teammate"
-          :key="teammate.id" />
+        <section class="user-list__in-team-container">
+          <user-info-card
+            v-for="teammate in teammateStore.getTeammateList"
+            :user="teammate"
+            :key="teammate.id" />
+        </section>
       </section>
     </template>
   </page-content-layout>
@@ -35,9 +38,20 @@ onBeforeMount(async () => {
 <style scoped lang="scss">
 $border-radius: 24px;
 .user-list__container {
-  border-radius: $border-radius;
+  padding-block-end: 10rem;
 
-  > p {
+  > p:nth-of-type(1) {
+    color: #7d818c;
+    font-family: Rubik;
+    font-size: 15px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 150%;
+
+    padding-block-end: 32px;
+  }
+
+  > p:nth-of-type(2) {
     color: #7d818c;
     font-size: 16px;
     font-style: normal;
@@ -47,14 +61,17 @@ $border-radius: 24px;
     padding-block-end: 16px;
   }
 
-  article:nth-of-type(1) {
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
-  }
+  .user-list__in-team-container {
+    border-radius: $border-radius;
+    article:nth-of-type(1) {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
 
-  article:last-of-type {
-    border-bottom-left-radius: $border-radius;
-    border-bottom-right-radius: $border-radius;
+    article:last-of-type {
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
   }
 }
 </style>
diff --git a/yaki_admin/src/features/captain/layouts/PageContentHeader.vue b/yaki_admin/src/features/captain/layouts/PageContentHeader.vue
@@ -39,8 +39,6 @@ const onClickDeleteTeam = () => {
           @click.prevent="onClickDeleteTeam" />
       </div>
     </div>
-
-    <p>team description : coming soon</p>
   </section>
 </template>
 
@@ -50,8 +48,8 @@ const onClickDeleteTeam = () => {
   flex-direction: column;
   gap: 16px;
 
+  padding-block-end: 24px;
   padding-inline: 40px;
-  padding-block: 24px 16px;
 
   figure {
     background-color: black;
@@ -88,14 +86,5 @@ const onClickDeleteTeam = () => {
     line-height: 100%; /* 40px */
     letter-spacing: -2px;
   }
-
-  p {
-    color: #7d818c;
-    font-family: Rubik;
-    font-size: 15px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 150%;
-  }
 }
 </style>
diff --git a/yaki_admin/src/global-layouts/PageContentLayout.vue b/yaki_admin/src/global-layouts/PageContentLayout.vue
@@ -8,7 +8,11 @@
 
 <style scoped lang="scss">
 .content-wrapper {
-  margin-top: 48px;
   padding-inline: 40px;
+  overflow: auto;
+
+  scrollbar-width: thin;
+  scrollbar-gutter: stable both-edges;
+  scrollbar-color: rgba(3, 3, 3, 0.446) transparent;
 }
 </style>
diff --git a/yaki_admin/src/global-layouts/PageLayout.vue b/yaki_admin/src/global-layouts/PageLayout.vue
@@ -24,7 +24,11 @@ import modalState from "@/features/shared/modal/services/modalState";
   height: 100%;
 }
 .page-content {
-  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  padding-block-start: 44px;
+
   background-color: $background-color-theme-primary;
+  overflow: hidden;
 }
 </style>