From 2ebceec717a6d16a1a2dca8bbe7583195550d8b9 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:44:47 +0200 Subject: [PATCH] Implement new sidebar styling --- client/src/components/HeaderBar.vue | 54 ++++---- client/src/components/LogoutWidget.vue | 5 +- .../book-navigation/ContentNavigation.vue | 73 ++++++++--- .../book-navigation/NavigationSidebar.vue | 8 +- client/src/components/modules/Module.vue | 1 + client/src/components/profile/Avatar.vue | 4 +- .../src/components/profile/ProfileSidebar.vue | 119 ++++++++++-------- .../src/components/profile/ProfileWidget.vue | 8 +- .../school-class/ClassSelectionWidget.vue | 11 +- .../components/school-class/CurrentClass.vue | 1 - 10 files changed, 166 insertions(+), 118 deletions(-) diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue index fa5528b2..31b622a9 100644 --- a/client/src/components/HeaderBar.vue +++ b/client/src/components/HeaderBar.vue @@ -59,20 +59,19 @@ display: flex; flex-direction: row; @supports (display: grid) { - display: none; - - @include desktop { - display: grid; - } + display: grid; } align-items: center; justify-content: space-between; background-color: $color-white; grid-auto-rows: 50px; width: 100%; + max-width: 100vw; + + grid-template-columns: 1fr 1fr 1fr; @include desktop { - grid-template-columns: 1fr 1fr 1fr; + grid-template-columns: 50px 1fr 200px; grid-template-rows: 50px; grid-auto-rows: auto; } @@ -91,6 +90,21 @@ -ms-grid-row-align: center; } + &__content-navigation { + grid-column: 2; + justify-content: space-between; + } + + &__sidebar-link { + padding: $small-spacing; + cursor: pointer; + } + + &__sidebar-icon { + width: 30px; + height: 30px; + } + /* * For IE10+ */ @@ -107,29 +121,6 @@ -ms-grid-column: 1; -ms-grid-column-span: 3; } - - &__logo { - color: #17A887; - font-size: 36px; - font-weight: 800; - font-family: $sans-serif-font-family; - display: flex; - justify-self: center; - - /* - * For IE10+ - */ - -ms-grid-column: 2; - -ms-grid-row-align: center; - -ms-grid-column-align: center; - } - - &__logo-icon { - - width: 212px; - height: 31px; - - } } .user-header { @@ -141,6 +132,11 @@ &__sidebar-link { cursor: pointer; + display: none; + + @include desktop { + display: flex; + } } } diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue index 3255f15b..bdbfb3e7 100644 --- a/client/src/components/LogoutWidget.vue +++ b/client/src/components/LogoutWidget.vue @@ -3,7 +3,7 @@ Logout + @click="logout()">Abmelden @@ -28,12 +28,11 @@ @import "@/styles/_mixins.scss"; .logout-widget { - color: $color-silver-dark; display: flex; align-items: center; &__logout { - @include regular-text; + @include default-link;; cursor: pointer; } } diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue index 7a46c226..aef366bb 100644 --- a/client/src/components/book-navigation/ContentNavigation.vue +++ b/client/src/components/book-navigation/ContentNavigation.vue @@ -65,21 +65,63 @@ @import "@/styles/_variables.scss"; @import "@/styles/_mixins.scss"; - .top-navigation { + .content-navigation { display: flex; + align-items: center; &__link { padding: 0 24px; - @include default-link; + @include navigation-link; + } + + &__primary, &__secondary { + display: none; + flex-direction: row; + + @include desktop { + display: flex; + } + } + + &__logo { + color: #17A887; + font-size: 36px; + font-weight: 800; + font-family: $sans-serif-font-family; + display: flex; + justify-self: center; + + /* + * For IE10+ + */ + -ms-grid-column: 2; + -ms-grid-row-align: center; + -ms-grid-column-align: center; + } + + &__logo-icon { + width: 212px; + height: 31px; + } + + &__link { + &--secondary { + @include regular-text; + } } $parent: &; - &--mobile { + &--sidebar { flex-direction: column; + #{$parent}__primary, #{$parent}__secondary { + display: flex; + flex-direction: column; + width: 100%; + } + #{$parent}__link { - color: $color-white; @include heading-4; line-height: 2.5em; padding: 0; @@ -93,20 +135,21 @@ } #{$parent}__item { - border-bottom: 1px solid $color-white; + width: 100%; + //border-bottom: 1px solid $color-white; - &:nth-child(1) { - order: 3; - border-bottom: 0; - } + /*&:nth-child(1) {*/ + /* order: 3;*/ + /* border-bottom: 0;*/ + /*}*/ - &:nth-child(2) { - order: 1; - } + /*&:nth-child(2) {*/ + /* order: 1;*/ + /*}*/ - &:nth-child(3) { - order: 2; - } + /*&:nth-child(3) {*/ + /* order: 2;*/ + /*}*/ } } } diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue index 069044de..11f10ca2 100644 --- a/client/src/components/book-navigation/NavigationSidebar.vue +++ b/client/src/components/book-navigation/NavigationSidebar.vue @@ -60,6 +60,10 @@ background-color: white; z-index: 20; + @include desktop { + box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12); + } + display: grid; grid-template-columns: 1fr 50px; @@ -75,12 +79,10 @@ overflow-y: auto; @include desktop { - //display: none; width: 285px; } &__main { - background-color: $color-brand; padding: $medium-spacing; grid-area: m; } @@ -93,13 +95,13 @@ grid-column: 2; align-self: center; justify-self: center; + cursor: pointer; } &__close-icon { width: 30px; height: 30px; opacity: 0.5; - fill: $color-white; } } diff --git a/client/src/components/modules/Module.vue b/client/src/components/modules/Module.vue index 89549c76..ebead69c 100644 --- a/client/src/components/modules/Module.vue +++ b/client/src/components/modules/Module.vue @@ -216,6 +216,7 @@ .module { display: flex; justify-self: center; + max-width: 100vw; @include desktop { width: 800px; diff --git a/client/src/components/profile/Avatar.vue b/client/src/components/profile/Avatar.vue index 8bfba351..5bc8cb0f 100644 --- a/client/src/components/profile/Avatar.vue +++ b/client/src/components/profile/Avatar.vue @@ -124,8 +124,8 @@ height: 34px; display: block; left: 50%; - bottom: -7px; - transform: translateX(50%); + bottom: -3px; + transform: translateX(80%); background-color: $color-white; border-radius: 50%; padding: 6px; diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue index b885ee20..f748f4c1 100644 --- a/client/src/components/profile/ProfileSidebar.vue +++ b/client/src/components/profile/ProfileSidebar.vue @@ -76,62 +76,71 @@ diff --git a/client/src/components/profile/ProfileWidget.vue b/client/src/components/profile/ProfileWidget.vue index 30edecc2..88fff0b9 100644 --- a/client/src/components/profile/ProfileWidget.vue +++ b/client/src/components/profile/ProfileWidget.vue @@ -35,10 +35,10 @@ .profile-widget { display: flex; flex-direction: column; - align-items: center; + align-items: start; &__name { - @include heading-3; + @include heading-4; text-align: center; margin-bottom: $small-spacing; } @@ -47,8 +47,8 @@ display: flex; justify-content: center; margin-bottom: $medium-spacing; - width: 80px; - height: 80px; + width: 120px; + height: 120px; position: relative; } diff --git a/client/src/components/school-class/ClassSelectionWidget.vue b/client/src/components/school-class/ClassSelectionWidget.vue index 841b6003..16723f90 100644 --- a/client/src/components/school-class/ClassSelectionWidget.vue +++ b/client/src/components/school-class/ClassSelectionWidget.vue @@ -105,7 +105,6 @@ position: relative; cursor: pointer; margin-bottom: $medium-spacing; - border: 1px solid $color-silver; border-radius: 4px; &__popover { @@ -120,22 +119,22 @@ .selected-class { width: 100%; box-sizing: border-box; - padding: $small-spacing $medium-spacing; + padding: $small-spacing 0; display: flex; align-items: center; - justify-content: space-between; + justify-content: start; &__text { line-height: $large-spacing; - @include regular-text; - color: $color-silver-dark; + @include heading-4; + margin-right: $small-spacing; } &__dropdown-icon { width: 20px; height: 20px; - fill: $color-brand; + fill: $color-charcoal-dark; } } diff --git a/client/src/components/school-class/CurrentClass.vue b/client/src/components/school-class/CurrentClass.vue index c1cc9d3b..81669111 100644 --- a/client/src/components/school-class/CurrentClass.vue +++ b/client/src/components/school-class/CurrentClass.vue @@ -28,6 +28,5 @@ .current-class { line-height: $large-spacing; @include regular-text; - color: $color-silver-dark; }