feat: divide most list.scss styles into components

- list-card.vue and the Home.vue
- listSearch.vue
- topNavigation.vue
- EditTeam.vue
- List.vue
- ShowList.vue

src/components/home/topNavigation.vue

@@ -149,3 +149,36 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  $edit-icon-width: 1rem;
+
+  @media screen and (min-width: $tablet) {
+    // We need a fixed width for overflowing ellipsis to work
+    --nav-username-width: 0;
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
+  }
+
+  @media screen and (max-width: $tablet) {
+    // We need a fixed width for overflowing ellipsis to work
+    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
+  }
+
+  h1 {
+    margin: 0;
+  }
+
+  ::v-deep.dropdown-trigger {
+    color: $grey-400;
+    margin-left: 1rem;
+    height: 1rem;
+    width: 1rem;
+    cursor: pointer;
+  }
+}
+</style>

src/components/list/partials/list-card.vue

@@ -81,3 +81,132 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-card {
+  cursor: pointer;
+  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+  height: $list-height;
+  background: $white;
+  margin: 0 $list-spacing $list-spacing 0;
+  padding: 1rem;
+  border-radius: $radius;
+  box-shadow: $shadow-sm;
+  transition: box-shadow $transition;
+
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  &:hover {
+    box-shadow: $shadow-md;
+  }
+
+  &:active,
+  &:focus,
+  &:focus:not(:active) {
+    box-shadow: $shadow-xs !important;
+  }
+
+  @media screen and (min-width: $widescreen) {
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
+    $lists-per-row: 3;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $tablet) {
+    $lists-per-row: 2;
+    & {
+      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
+    }
+
+    &:nth-child(#{$lists-per-row}n) {
+      margin-right: 0;
+    }
+  }
+
+  @media screen and (max-width: $mobile) {
+    $lists-per-row: 1;
+    & {
+      width: 100%;
+      margin-right: 0;
+    }
+  }
+
+  .is-archived-container {
+    width: 100%;
+    text-align: right;
+
+    .is-archived {
+      font-size: .75rem;
+      float: left;
+    }
+  }
+
+  .title {
+    align-self: flex-end;
+    font-family: $vikunja-font;
+    font-weight: 400;
+    font-size: 1.5rem;
+    color: $text;
+    width: 100%;
+    margin-bottom: 0;
+    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  &.has-light-text .title {
+    color: $light;
+  }
+
+  &.has-background {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .title {
+      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
+      color: $white;
+    }
+  }
+
+  .favorite {
+    transition: opacity $transition, color $transition;
+    opacity: 0;
+
+    &:hover {
+      color: $orange;
+    }
+
+    &.is-archived {
+      display: none;
+    }
+
+    &.is-favorite {
+      display: inline-block;
+      opacity: 1;
+      color: $orange;
+    }
+  }
+
+  &:hover .favorite {
+    opacity: 1;
+  }
+}
+</style>

src/components/tasks/partials/listSearch.vue

@@ -79,3 +79,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-namespace-title {
+  color: $grey-500;
+}
+</style>

src/styles/components/list.scss

@@ -1,54 +1,3 @@
-.card.is-fullwidth {
-  margin-bottom: 1rem;
-
-  .add-form {
-    margin: 1rem;
-  }
-
-  .content {
-    padding: 0;
-  }
-}
-
-.list-view .task-add {
-	padding: 1rem 1rem 0;
-}
-
-.list-title {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  $edit-icon-width: 1rem;
-
-  @media screen and (min-width: $tablet) {
-    // We need a fixed width for overflowing ellipsis to work
-    --nav-username-width: 0;
-    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width} - #{$vikunja-nav-logo-full-width} - var(--nav-username-width));
-  }
-
-  @media screen and (max-width: $tablet) {
-    // We need a fixed width for overflowing ellipsis to work
-    width: calc(100vw - #{$user-dropdown-width-mobile} - #{2 * $hamburger-menu-icon-spacing} - #{$hamburger-menu-icon-width} - #{$edit-icon-width} - #{2 * $navbar-icon-width});
-  }
-
-  h1 {
-    margin: 0;
-  }
-
-  .dropdown-trigger {
-    color: $grey-400;
-    margin-left: 1rem;
-    height: 1rem;
-    width: 1rem;
-    cursor: pointer;
-  }
-}
-
-.edit-list {
-  padding-bottom: 1rem;
-}
-
 $filter-container-top-default: -59px;
 $filter-container-top-link-share-gantt: -138px;
 $filter-container-top-link-share-list: -47px;
@@ -136,9 +85,6 @@ $filter-container-top-link-share-list: -47px;
   }
 }
 
-.list-namespace-title {
-  color: $grey-500;
-}
 
 .link-share-container .gantt-chart-container .filter-container,
 .gantt-chart-container .filter-container {
@@ -154,148 +100,3 @@ $filter-container-top-link-share-list: -47px;
   right: 9rem;
   margin-top: $filter-container-top-default;
 }
-
-.is-archived .notification.is-warning {
-  margin-bottom: 1rem;
-}
-
-$lists-per-row: 5;
-$list-height: 150px;
-$list-spacing: 1rem;
-
-.list-card {
-  cursor: pointer;
-  width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-  height: $list-height;
-  background: $white;
-  margin: 0 $list-spacing $list-spacing 0;
-  padding: 1rem;
-  border-radius: $radius;
-  box-shadow: $shadow-sm;
-  transition: box-shadow $transition;
-
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  &:hover {
-    box-shadow: $shadow-md;
-  }
-
-  &:active,
-  &:focus,
-  &:focus:not(:active) {
-    box-shadow: $shadow-xs !important;
-  }
-
-  @media screen and (min-width: $widescreen) {
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $widescreen) and (min-width: $tablet) {
-    $lists-per-row: 3;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
-
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $tablet) {
-    $lists-per-row: 2;
-    & {
-      width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
-    }
-
-    &:nth-child(#{$lists-per-row}n) {
-      margin-right: 0;
-    }
-  }
-
-  @media screen and (max-width: $mobile) {
-    $lists-per-row: 1;
-    & {
-      width: 100%;
-      margin-right: 0;
-    }
-  }
-
-  .is-archived-container {
-    width: 100%;
-    text-align: right;
-
-    .is-archived {
-      font-size: .75rem;
-      float: left;
-    }
-  }
-
-  .title {
-    align-self: flex-end;
-    font-family: $vikunja-font;
-    font-weight: 400;
-    font-size: 1.5rem;
-    color: $text;
-    width: 100%;
-    margin-bottom: 0;
-    max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-  }
-
-  &.has-light-text .title {
-    color: $light;
-  }
-
-  &.has-background {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
-
-    .title {
-      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
-      color: $white;
-    }
-  }
-
-  .favorite {
-    transition: opacity $transition, color $transition;
-    opacity: 0;
-
-    &:hover {
-      color: $orange;
-    }
-
-    &.is-archived {
-      display: none;
-    }
-
-    &.is-favorite {
-      display: inline-block;
-      opacity: 1;
-      color: $orange;
-    }
-  }
-
-  &:hover .favorite {
-    opacity: 1;
-  }
-}
-
-.list-cards-wrapper-2-rows {
-	flex-wrap: wrap;
-	max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
-	overflow: hidden;
-	
-	@media screen and (max-width: $mobile) {
-		max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
-	}
-}

src/styles/variables/variables.scss

@@ -43,3 +43,6 @@ $navbar-icon-width: 40px;
 $editor-border-color: #ddd;
 
 $dropdown-item-hover-background-color: $grey-100;
+$lists-per-row: 5;
+$list-height: 150px;
+$list-spacing: 1rem;

src/views/Home.vue

@@ -141,3 +141,15 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-cards-wrapper-2-rows {
+	flex-wrap: wrap;
+	max-height: calc(#{$list-height * 2} + #{$list-spacing * 2} - 4px);
+	overflow: hidden;
+	
+	@media screen and (max-width: $mobile) {
+		max-height: calc(#{$list-height * 4} + #{$list-spacing * 4} - 4px);
+	}
+}
+</style>

src/views/list/ShowList.vue

@@ -148,3 +148,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.is-archived .notification.is-warning {
+  margin-bottom: 1rem;
+}
+</style>

src/views/list/views/List.vue

@@ -309,3 +309,9 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.list-view .task-add {
+	padding: 1rem 1rem 0;
+}
+</style>

src/views/teams/EditTeam.vue

@@ -298,3 +298,13 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.card.is-fullwidth {
+  margin-bottom: 1rem;
+
+  .content {
+    padding: 0;
+  }
+}
+</style>