From 87f7a515a6709a128f0d219983f6ce7f5cb2e1bd Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Mon, 18 Oct 2021 14:21:02 +0200 Subject: [PATCH] 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 | 33 +++ src/components/list/partials/list-card.vue | 129 ++++++++++++ src/components/tasks/partials/listSearch.vue | 6 + src/styles/components/list.scss | 201 +------------------ src/styles/variables/variables.scss | 3 + src/views/Home.vue | 12 ++ src/views/list/ShowList.vue | 6 + src/views/list/views/List.vue | 6 + src/views/teams/EditTeam.vue | 10 + 9 files changed, 206 insertions(+), 200 deletions(-) diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue index 8f312e83..97b64805 100644 --- a/src/components/home/topNavigation.vue +++ b/src/components/home/topNavigation.vue @@ -149,3 +149,36 @@ export default { }, } + + \ No newline at end of file diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue index f54f1117..94d03f86 100644 --- a/src/components/list/partials/list-card.vue +++ b/src/components/list/partials/list-card.vue @@ -81,3 +81,132 @@ export default { }, } + + \ No newline at end of file diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue index 252424f4..ea642f1f 100644 --- a/src/components/tasks/partials/listSearch.vue +++ b/src/components/tasks/partials/listSearch.vue @@ -79,3 +79,9 @@ export default { }, } + + \ No newline at end of file diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss index a9e83ce9..a681b42d 100644 --- a/src/styles/components/list.scss +++ b/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 { @@ -153,149 +99,4 @@ $filter-container-top-link-share-list: -47px; .link-share-container .filter-container { 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); - } -} +} \ No newline at end of file diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss index abe0ef0a..0801bedc 100644 --- a/src/styles/variables/variables.scss +++ b/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; diff --git a/src/views/Home.vue b/src/views/Home.vue index d5231bd9..c31febc0 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -141,3 +141,15 @@ export default { }, } + + \ No newline at end of file diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue index 68e417d9..4c72a04b 100644 --- a/src/views/list/ShowList.vue +++ b/src/views/list/ShowList.vue @@ -148,3 +148,9 @@ export default { }, } + + \ No newline at end of file diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue index 7324b460..ac62ea57 100644 --- a/src/views/list/views/List.vue +++ b/src/views/list/views/List.vue @@ -309,3 +309,9 @@ export default { }, } + + diff --git a/src/views/teams/EditTeam.vue b/src/views/teams/EditTeam.vue index 65fd5bd4..741c9565 100644 --- a/src/views/teams/EditTeam.vue +++ b/src/views/teams/EditTeam.vue @@ -298,3 +298,13 @@ export default { }, } + + \ No newline at end of file