From 5db13e9124451f523ce76a021934722a5c4ea95b Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 09:37:12 +0200 Subject: [PATCH 1/9] Refactor sidebar state to allow for multiple sidebars --- client/src/components/HeaderBar.vue | 2 +- client/src/components/UserWidget.vue | 2 +- .../book-navigation/BookTopicNavigation.vue | 8 +++--- ...leNavigation.vue => NavigationSidebar.vue} | 27 ++++++++++++------- client/src/components/profile/Avatar.vue | 2 +- .../src/components/profile/ProfileSidebar.vue | 23 +++++++++++----- client/src/graphql/client.js | 4 ++- .../gql/local/mutations/toggleSidebar.gql | 4 +-- client/src/graphql/gql/local/sidebar.gql | 2 ++ client/src/graphql/resolvers.js | 9 +++++-- client/src/graphql/typedefs.js | 11 +++++--- client/src/mixins/open-sidebar.js | 6 +++-- client/src/mixins/sidebar.js | 11 +++++--- 13 files changed, 73 insertions(+), 38 deletions(-) rename client/src/components/book-navigation/{MobileNavigation.vue => NavigationSidebar.vue} (75%) diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue index 2075da30..fa5528b2 100644 --- a/client/src/components/HeaderBar.vue +++ b/client/src/components/HeaderBar.vue @@ -10,7 +10,7 @@
+ @click="openSidebar('profile')"> diff --git a/client/src/components/UserWidget.vue b/client/src/components/UserWidget.vue index 157763ef..1fd567e8 100644 --- a/client/src/components/UserWidget.vue +++ b/client/src/components/UserWidget.vue @@ -5,7 +5,7 @@
+ @click="openSidebar('profile')"> diff --git a/client/src/components/book-navigation/BookTopicNavigation.vue b/client/src/components/book-navigation/BookTopicNavigation.vue index 10bc5cb1..2ddb547e 100644 --- a/client/src/components/book-navigation/BookTopicNavigation.vue +++ b/client/src/components/book-navigation/BookTopicNavigation.vue @@ -7,7 +7,7 @@ tag="div" class="book-topics__topic book-subnavigation__item" v-for="topic in topics" - @click.native="hideMobileNavigation"> + @click.native="closeSidebar('navigation')"> {{ topic.order }}. {{ topic.title }} @@ -16,6 +16,7 @@ diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js index 45a6838d..973cd873 100644 --- a/client/src/graphql/client.js +++ b/client/src/graphql/client.js @@ -17,7 +17,9 @@ const writeLocalCache = cache => { }, sidebar: { __typename: 'Sidebar', - open: false + open: false, + profile: false, + navigation: false }, helloEmail: { __typename: 'HelloEmail', diff --git a/client/src/graphql/gql/local/mutations/toggleSidebar.gql b/client/src/graphql/gql/local/mutations/toggleSidebar.gql index fc32729e..c05a9221 100644 --- a/client/src/graphql/gql/local/mutations/toggleSidebar.gql +++ b/client/src/graphql/gql/local/mutations/toggleSidebar.gql @@ -1,3 +1,3 @@ -mutation($open: Boolean!) { - toggleSidebar(open: $open) @client +mutation($sidebar: SidebarInput!) { + toggleSidebar(sidebar: $sidebar) @client } diff --git a/client/src/graphql/gql/local/sidebar.gql b/client/src/graphql/gql/local/sidebar.gql index 4cdb1bc6..978bf3cf 100644 --- a/client/src/graphql/gql/local/sidebar.gql +++ b/client/src/graphql/gql/local/sidebar.gql @@ -1,5 +1,7 @@ query Sidebar { sidebar @client { open + profile + navigation } } diff --git a/client/src/graphql/resolvers.js b/client/src/graphql/resolvers.js index 11cd35eb..2dd4abeb 100644 --- a/client/src/graphql/resolvers.js +++ b/client/src/graphql/resolvers.js @@ -16,9 +16,14 @@ export const resolvers = { cache.writeQuery({query: HELLO_EMAIL, data}); return data.helloEmail; }, - toggleSidebar: (_, {open}, {cache}) => { + toggleSidebar: (_, {sidebar: {profile, navigation}}, {cache}) => { const data = cache.readQuery({query: SIDEBAR}); - data.sidebar.open = open; + if (typeof profile !== 'undefined') { + data.sidebar.profile = profile; + } + if (typeof navigation !== 'undefined') { + data.sidebar.navigation = navigation; + } cache.writeQuery({query: SIDEBAR, data}); return data.sidebar; } diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js index c17dd4a3..faf3879b 100644 --- a/client/src/graphql/typedefs.js +++ b/client/src/graphql/typedefs.js @@ -1,6 +1,11 @@ import gql from 'graphql-tag'; export const typeDefs = gql` + type SidebarInput { + navigation: Boolean + profile: Boolean + } + type ScrollPosition { scrollTo: String! } @@ -12,13 +17,13 @@ export const typeDefs = gql` type Sidebar { open: Boolean! + navigation: Boolean + profile: Boolean } type Mutation { scrollTo(scrollTo: String!): ScrollPosition - } - - type Mutation { helloEmail(email: String!): HelloEmail + toggleSidebar(sidebar: SidebarInput!): Sidebar } `; diff --git a/client/src/mixins/open-sidebar.js b/client/src/mixins/open-sidebar.js index ffaba465..dbe423d0 100644 --- a/client/src/mixins/open-sidebar.js +++ b/client/src/mixins/open-sidebar.js @@ -2,12 +2,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql'; export default { methods: { - openSidebar() { + openSidebar(type) { this.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work this.$apollo.mutate({ mutation: TOGGLE_SIDEBAR, variables: { - open: true + sidebar: { + [type]: true + } } }); }); diff --git a/client/src/mixins/sidebar.js b/client/src/mixins/sidebar.js index 17c66a8e..796a045d 100644 --- a/client/src/mixins/sidebar.js +++ b/client/src/mixins/sidebar.js @@ -3,12 +3,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql'; export default { methods: { - closeSidebar() { - if (this.sidebar.open) { + closeSidebar(type) { + if (this.sidebar[type]) { this.$apollo.mutate({ mutation: TOGGLE_SIDEBAR, variables: { - open: false + sidebar: { + [type]: false + } } }); } @@ -23,7 +25,8 @@ export default { data: () => ({ sidebar: { - open: false + profile: false, + navigation: false } }) } From 283ee0db9b0397c1c83cfa4851b393de36b35064 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:34:28 +0200 Subject: [PATCH 2/9] Remove obsolete property from state --- client/src/graphql/client.js | 1 - client/src/graphql/gql/local/sidebar.gql | 1 - client/src/graphql/typedefs.js | 2 -- 3 files changed, 4 deletions(-) diff --git a/client/src/graphql/client.js b/client/src/graphql/client.js index 973cd873..af3c7316 100644 --- a/client/src/graphql/client.js +++ b/client/src/graphql/client.js @@ -17,7 +17,6 @@ const writeLocalCache = cache => { }, sidebar: { __typename: 'Sidebar', - open: false, profile: false, navigation: false }, diff --git a/client/src/graphql/gql/local/sidebar.gql b/client/src/graphql/gql/local/sidebar.gql index 978bf3cf..8526d5d1 100644 --- a/client/src/graphql/gql/local/sidebar.gql +++ b/client/src/graphql/gql/local/sidebar.gql @@ -1,6 +1,5 @@ query Sidebar { sidebar @client { - open profile navigation } diff --git a/client/src/graphql/typedefs.js b/client/src/graphql/typedefs.js index faf3879b..4f7c8552 100644 --- a/client/src/graphql/typedefs.js +++ b/client/src/graphql/typedefs.js @@ -14,9 +14,7 @@ export const typeDefs = gql` email: String! } - type Sidebar { - open: Boolean! navigation: Boolean profile: Boolean } From 986809247a291af6937a98cfe44f42fc99ce2a48 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:38:14 +0200 Subject: [PATCH 3/9] Add sidebar component to layouts --- client/src/App.vue | 4 +--- client/src/layouts/BlankLayout.vue | 7 ++++++- client/src/layouts/DefaultLayout.vue | 7 +++---- 3 files changed, 10 insertions(+), 8 deletions(-) diff --git a/client/src/App.vue b/client/src/App.vue index b6fe73f8..5c2867a8 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -10,7 +10,7 @@ :is="showModal" v-if="showModal"/> - +
@@ -21,7 +21,6 @@ import FullScreenLayout from '@/layouts/FullScreenLayout'; import PublicLayout from '@/layouts/PublicLayout'; import Modal from '@/components/Modal'; - import MobileNavigation from '@/components/book-navigation/MobileNavigation'; import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard'; import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard'; import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard'; @@ -49,7 +48,6 @@ FullScreenLayout, PublicLayout, Modal, - MobileNavigation, NewContentBlockWizard, EditContentBlockWizard, NewRoomEntryWizard, diff --git a/client/src/layouts/BlankLayout.vue b/client/src/layouts/BlankLayout.vue index a050d6f9..b819cf6a 100644 --- a/client/src/layouts/BlankLayout.vue +++ b/client/src/layouts/BlankLayout.vue @@ -1,6 +1,7 @@ @@ -16,8 +17,12 @@ diff --git a/client/src/layouts/DefaultLayout.vue b/client/src/layouts/DefaultLayout.vue index 2400094a..fc3a7e9f 100644 --- a/client/src/layouts/DefaultLayout.vue +++ b/client/src/layouts/DefaultLayout.vue @@ -2,13 +2,10 @@
+ - -
@@ -19,12 +16,14 @@ import MobileHeader from '@/components/MobileHeader'; import ProfileSidebar from '@/components/profile/ProfileSidebar'; import DefaultFooter from '@/layouts/DefaultFooter'; + import NavigationSidebar from '@/components/book-navigation/NavigationSidebar'; export default { components: { HeaderBar, MobileHeader, ProfileSidebar, + NavigationSidebar, DefaultFooter }, From 6e77cfe4338edb3b54298b5999a24514bcedbe1c Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:39:59 +0200 Subject: [PATCH 4/9] Update some styles --- client/src/layouts/DefaultFooter.vue | 8 ++++++-- client/src/styles/_book-subnavigation.scss | 3 ++- client/src/styles/_default-layout.scss | 3 +-- client/src/styles/_mixins.scss | 13 ++++++++++--- client/src/styles/_navigation.scss | 2 +- 5 files changed, 20 insertions(+), 9 deletions(-) diff --git a/client/src/layouts/DefaultFooter.vue b/client/src/layouts/DefaultFooter.vue index 0b2a693b..f8510b5e 100644 --- a/client/src/layouts/DefaultFooter.vue +++ b/client/src/layouts/DefaultFooter.vue @@ -68,6 +68,8 @@ .default-footer { background-color: $color-silver-light; + max-width: 100vw; + overflow: hidden; &__section { width: 100%; @@ -77,7 +79,8 @@ } &__info { - width: $footer-width; + width: 100%; + max-width: $footer-width; padding: 2*$large-spacing 0; display: flex; justify-content: space-between; @@ -98,7 +101,8 @@ } &__links { - width: $footer-width; + width: 100%; + max-width: $footer-width; padding: $large-spacing 0; } diff --git a/client/src/styles/_book-subnavigation.scss b/client/src/styles/_book-subnavigation.scss index e288346d..64e1dae3 100644 --- a/client/src/styles/_book-subnavigation.scss +++ b/client/src/styles/_book-subnavigation.scss @@ -1,10 +1,11 @@ .book-subnavigation { &__item { @include small-text; + line-height: 2; margin-bottom: $small-spacing; cursor: pointer; - color: $color-silver-dark; + color: $color-charcoal-dark; &--mobile { color: $color-white; diff --git a/client/src/styles/_default-layout.scss b/client/src/styles/_default-layout.scss index 0fa55e54..3576be7c 100644 --- a/client/src/styles/_default-layout.scss +++ b/client/src/styles/_default-layout.scss @@ -6,6 +6,7 @@ margin: 0 auto; width: 100%; + /* * For IE10+ */ @@ -19,8 +20,6 @@ min-height: 100vh; grid-auto-rows: 1fr; - - &--show-filter { grid-template-rows: auto auto 1fr $footer-height; -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss index 9f4e1589..012764e0 100644 --- a/client/src/styles/_mixins.scss +++ b/client/src/styles/_mixins.scss @@ -114,7 +114,8 @@ @mixin small-text { font-family: $sans-serif-font-family; font-weight: 400; - font-size: toRem(16px); + //font-size: toRem(16px); todo: did this really change or is this only for the subnavigation + font-size: toRem(14px); } @mixin aside-text { @@ -127,6 +128,13 @@ font-weight: 600; } +@mixin navigation-link { + font-family: $sans-serif-font-family; + color: $color-charcoal-dark; + font-size: toRem(18px); + font-weight: 600; +} + @mixin meta-title { color: $color-silver-dark; font-size: toRem(36px); @@ -152,10 +160,9 @@ } @mixin default-link { - font-size: toRem(18px); + font-size: toRem(14px); font-family: $sans-serif-font-family; font-weight: $font-weight-regular; - color: $color-silver-dark; cursor: pointer; &--active { diff --git a/client/src/styles/_navigation.scss b/client/src/styles/_navigation.scss index 4139c3a6..1e6f07e1 100644 --- a/client/src/styles/_navigation.scss +++ b/client/src/styles/_navigation.scss @@ -1,4 +1,4 @@ -.top-navigation { +.content-navigation { display: flex; &__link { From 2ebceec717a6d16a1a2dca8bbe7583195550d8b9 Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:44:47 +0200 Subject: [PATCH 5/9] 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; } From b5d9d6a998f15d9204e4a8473c73ead1833566cd Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Tue, 2 Jun 2020 16:46:58 +0200 Subject: [PATCH 6/9] Refactor handling of mobile view --- client/src/components/HeaderBar.vue | 20 ++- .../book-navigation/ContentNavigation.vue | 102 +++++++++----- .../src/components/profile/ProfileSidebar.vue | 130 +++++++++--------- client/src/pages/start.vue | 2 - 4 files changed, 146 insertions(+), 108 deletions(-) diff --git a/client/src/components/HeaderBar.vue b/client/src/components/HeaderBar.vue index 31b622a9..dde98b7a 100644 --- a/client/src/components/HeaderBar.vue +++ b/client/src/components/HeaderBar.vue @@ -1,12 +1,11 @@ From 26bb96b0254f14f8684ff217d37405685e6cdefb Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 3 Jun 2020 10:57:30 +0200 Subject: [PATCH 8/9] Set fixed dimensions for cross icon --- client/src/components/LogoutWidget.vue | 2 +- client/src/components/Modal.vue | 5 - .../book-navigation/NavigationSidebar.vue | 6 - client/src/components/icons/Cross.vue | 10 +- .../src/components/profile/ProfileSidebar.vue | 258 +++++++++--------- client/src/layouts/FullScreenLayout.vue | 5 - client/src/layouts/SimpleLayout.vue | 5 - 7 files changed, 136 insertions(+), 155 deletions(-) diff --git a/client/src/components/LogoutWidget.vue b/client/src/components/LogoutWidget.vue index bdbfb3e7..eea2361f 100644 --- a/client/src/components/LogoutWidget.vue +++ b/client/src/components/LogoutWidget.vue @@ -32,7 +32,7 @@ align-items: center; &__logout { - @include default-link;; + @include default-link; cursor: pointer; } } diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue index 82541022..27c872f1 100644 --- a/client/src/components/Modal.vue +++ b/client/src/components/Modal.vue @@ -121,11 +121,6 @@ align-content: center; } - &__close-icon { - width: 40px; - height: 40px; - } - &__footer { grid-area: footer; -ms-grid-row: 3; diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue index 11f10ca2..1914d3ef 100644 --- a/client/src/components/book-navigation/NavigationSidebar.vue +++ b/client/src/components/book-navigation/NavigationSidebar.vue @@ -97,11 +97,5 @@ justify-self: center; cursor: pointer; } - - &__close-icon { - width: 30px; - height: 30px; - opacity: 0.5; - } } diff --git a/client/src/components/icons/Cross.vue b/client/src/components/icons/Cross.vue index 43422926..5bdc1eec 100644 --- a/client/src/components/icons/Cross.vue +++ b/client/src/components/icons/Cross.vue @@ -2,8 +2,16 @@ + class="cross"> + + diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue index cfd8e4ff..aa728585 100644 --- a/client/src/components/profile/ProfileSidebar.vue +++ b/client/src/components/profile/ProfileSidebar.vue @@ -1,150 +1,144 @@ diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue index beff442f..284ff8fd 100644 --- a/client/src/layouts/FullScreenLayout.vue +++ b/client/src/layouts/FullScreenLayout.vue @@ -45,11 +45,6 @@ display:flex; justify-content:end; - - &__icon { - width: 40px; - height: 40px; - } } diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue index 7cf00234..6c8e7744 100644 --- a/client/src/layouts/SimpleLayout.vue +++ b/client/src/layouts/SimpleLayout.vue @@ -71,10 +71,5 @@ margin-right: $medium-spacing; margin-top: $medium-spacing; } - - &__icon { - width: 40px; - height: 40px; - } } From 2d5c84e8429df9560846d8ada06c2f3132abe3da Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 3 Jun 2020 10:57:48 +0200 Subject: [PATCH 9/9] Update links in navigation --- client/src/components/book-navigation/ContentNavigation.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/book-navigation/ContentNavigation.vue b/client/src/components/book-navigation/ContentNavigation.vue index 9760f021..ed4c327b 100644 --- a/client/src/components/book-navigation/ContentNavigation.vue +++ b/client/src/components/book-navigation/ContentNavigation.vue @@ -20,7 +20,7 @@
Instrumente @@ -29,7 +29,7 @@
News @@ -58,7 +58,7 @@
Portfolio