ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Merged in feature/navigation-sidebar (pull request #66) 

Feature/navigation sidebar

Approved-by: Christian Cueni
This commit is contained in:
Ramon Wenger 2020-06-03 12:15:21 +00:00
parent 6d43226ebb 2d5c84e842
commit 80282fd629
34 changed files with 330 additions and 297 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/App.vue
View File

@ -10,7 +10,7 @@
:is="showModal" :is="showModal"
v-if="showModal"/> v-if="showModal"/>
<component :is="layout"/> <component :is="layout"/>
<mobile-navigation v-if="showMobileNavigation"/>
</div> </div>
</template> </template>
@ -21,7 +21,6 @@
import FullScreenLayout from '@/layouts/FullScreenLayout'; import FullScreenLayout from '@/layouts/FullScreenLayout';
import PublicLayout from '@/layouts/PublicLayout'; import PublicLayout from '@/layouts/PublicLayout';
import Modal from '@/components/Modal'; import Modal from '@/components/Modal';
import MobileNavigation from '@/components/book-navigation/MobileNavigation';
import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard'; import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard'; import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard'; import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
@ -49,7 +48,6 @@
FullScreenLayout, FullScreenLayout,
PublicLayout, PublicLayout,
Modal, Modal,
MobileNavigation,
NewContentBlockWizard, NewContentBlockWizard,
EditContentBlockWizard, EditContentBlockWizard,
NewRoomEntryWizard, NewRoomEntryWizard,

76
client/src/components/HeaderBar.vue
View File

@ -1,16 +1,15 @@
<template> <template>
<header class="header-bar"> <header class="header-bar">
<content-navigation/> <a
<router-link class="header-bar__sidebar-link"
to="/" @click="openSidebar('navigation')">
class="header-bar__logo" <hamburger class="header-bar__sidebar-icon"/>
data-cy="home-link"> </a>
<logo class="header-bar__logo-icon"/> <content-navigation class="header-bar__content-navigation"/>
</router-link>
<div class="user-header"> <div class="user-header">
<a <a
class="user-header__sidebar-link" class="user-header__sidebar-link"
@click="openSidebar()"> @click="openSidebar('profile')">
<current-class class="user-header__current-class"/> <current-class class="user-header__current-class"/>
</a> </a>
@ -18,16 +17,15 @@
v-bind="me" v-bind="me"
data-cy="header-user-widget"/> data-cy="header-user-widget"/>
</div> </div>
<book-navigation v-if="showSubnavigation"/>
</header> </header>
</template> </template>
<script> <script>
import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue'; import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
import BookNavigation from '@/components/book-navigation/BookNavigation';
import UserWidget from '@/components/UserWidget.vue'; import UserWidget from '@/components/UserWidget.vue';
import Logo from '@/components/icons/Logo'; import Logo from '@/components/icons/Logo';
import CurrentClass from '@/components/school-class/CurrentClass'; import CurrentClass from '@/components/school-class/CurrentClass';
import Hamburger from '@/components/icons/Hamburger';
import openSidebar from '@/mixins/open-sidebar'; import openSidebar from '@/mixins/open-sidebar';
import me from '@/mixins/me'; import me from '@/mixins/me';
@ -38,9 +36,9 @@
components: { components: {
ContentNavigation, ContentNavigation,
UserWidget, UserWidget,
BookNavigation,
Logo, Logo,
CurrentClass CurrentClass,
Hamburger
}, },
computed: { computed: {
@ -59,20 +57,19 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@supports (display: grid) { @supports (display: grid) {
display: none; display: grid;
@include desktop {
display: grid;
}
} }
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
background-color: $color-white; background-color: $color-white;
grid-auto-rows: 50px; grid-auto-rows: 50px;
width: 100%; width: 100%;
max-width: 100vw;
grid-template-columns: 1fr 1fr 1fr;
@include desktop { @include desktop {
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 50px 1fr 200px;
grid-template-rows: 50px; grid-template-rows: 50px;
grid-auto-rows: auto; grid-auto-rows: auto;
} }
@ -91,6 +88,21 @@
-ms-grid-row-align: center; -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+ * For IE10+
*/ */
@ -107,29 +119,6 @@
-ms-grid-column: 1; -ms-grid-column: 1;
-ms-grid-column-span: 3; -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 { .user-header {
@ -141,6 +130,11 @@
&__sidebar-link { &__sidebar-link {
cursor: pointer; cursor: pointer;
display: none;
@include desktop {
display: flex;
}
} }
} }
</style> </style>

5
client/src/components/LogoutWidget.vue
View File

@ -3,7 +3,7 @@
<a <a
class="logout-widget__logout" class="logout-widget__logout"
data-cy="logout" data-cy="logout"
@click="logout()">Logout</a> @click="logout()">Abmelden</a>
</div> </div>
</template> </template>
@ -28,12 +28,11 @@
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.logout-widget { .logout-widget {
color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;
&__logout { &__logout {
@include regular-text; @include default-link;
cursor: pointer; cursor: pointer;
} }
} }

5
client/src/components/Modal.vue
View File

@ -121,11 +121,6 @@
align-content: center; align-content: center;
} }
&__close-icon {
width: 40px;
height: 40px;
}
&__footer { &__footer {
grid-area: footer; grid-area: footer;
-ms-grid-row: 3; -ms-grid-row: 3;

2
client/src/components/UserWidget.vue
View File

@ -5,7 +5,7 @@
<div <div
class="user-widget__avatar" class="user-widget__avatar"
data-cy="user-widget-avatar" data-cy="user-widget-avatar"
@click="openSidebar()"> @click="openSidebar('profile')">
<avatar <avatar
:avatar-url="avatarUrl" :avatar-url="avatarUrl"
:icon-highlighted="isProfile"/> :icon-highlighted="isProfile"/>

31
client/src/components/book-navigation/BookNavigation.vue
View File

@ -1,31 +0,0 @@
<template>
<aside class="sub-navigation">
<sub-navigation-item title="Themen">
<book-topic-navigation/>
</sub-navigation-item>
<router-link
:to="{name: 'instrument-overview'}"
active-class="sub-navigation-item--active"
class="sub-navigation-item">
<span class="sub-navigation-item__title">Instrumente</span>
</router-link>
<!--<sub-navigation-item title="News">-->
<!--<template slot="title">-->
<!--<h2 class="sub-navigation__title" slot="title">ABU News</h2>-->
<!--</template>-->
<!--</sub-navigation-item>-->
</aside>
</template>
<script>
import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
export default {
components: {
SubNavigationItem,
BookTopicNavigation
}
}
</script>

8
client/src/components/book-navigation/BookTopicNavigation.vue
View File

@ -7,7 +7,7 @@
tag="div" tag="div"
class="book-topics__topic book-subnavigation__item" class="book-topics__topic book-subnavigation__item"
v-for="topic in topics" v-for="topic in topics"
@click.native="hideMobileNavigation"> @click.native="closeSidebar('navigation')">
{{ topic.order }}. {{ topic.order }}.
{{ topic.title }} {{ topic.title }}
</router-link> </router-link>
@ -16,6 +16,7 @@
<script> <script>
import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql'; import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
import sidebarMixin from '@/mixins/sidebar';
export default { export default {
props: { props: {
@ -24,6 +25,8 @@
} }
}, },
mixins: [sidebarMixin],
data() { data() {
return { return {
topics: [] topics: []
@ -33,9 +36,6 @@
methods: { methods: {
topicId(id) { topicId(id) {
return atob(id) return atob(id)
},
hideMobileNavigation() {
this.$store.dispatch('showMobileNavigation', false);
} }
}, },

175
client/src/components/book-navigation/ContentNavigation.vue
View File

@ -1,61 +1,99 @@
<template> <template>
<nav <nav
:class="{'top-navigation--mobile': mobile}" :class="{'content-navigation--sidebar': isSidebar}"
class="top-navigation"> class="content-navigation">
<div class="top-navigation__item"> <div class="content-navigation__primary">
<router-link <div class="content-navigation__item">
:class="{'top-navigation__link--active': isActive('book')}" <router-link
to="/book/topic/berufliche-grundbildung" :class="{'content-navigation__link--active': isActive('book')}"
active-class="top-navigation__link--active" to="/book/topic/berufliche-grundbildung"
class="top-navigation__link" active-class="content-navigation__link--active"
@click.native="hideMobileNavigation">Inhalte class="content-navigation__link"
</router-link> @click.native="close">Themen
</router-link>
<mobile-subnavigation v-if="mobile"/> <book-topic-navigation
v-if="isSidebar"
/>
</div>
<div class="content-navigation__item">
<router-link
to="/instruments"
active-class="content-navigation__link--active"
class="content-navigation__link"
@click.native="close">Instrumente
</router-link>
</div>
<div class="content-navigation__item">
<router-link
to="/"
active-class="content-navigation__link--active"
class="content-navigation__link"
@click.native="close">News
</router-link>
</div>
</div> </div>
<div class="top-navigation__item"> <router-link
<router-link to="/"
to="/rooms" class="content-navigation__logo"
active-class="top-navigation__link--active" data-cy="home-link"
class="top-navigation__link" v-if="!isSidebar"
@click.native="hideMobileNavigation">Räume >
</router-link> <logo class="content-navigation__logo-icon"/>
</div> </router-link>
<div class="top-navigation__item"> <div class="content-navigation__secondary">
<router-link <div class="content-navigation__item content-navigation__item--secondary">
to="/portfolio" <router-link
active-class="top-navigation__link--active" to="/rooms"
class="top-navigation__link" active-class="content-navigation__link--active"
@click.native="hideMobileNavigation">Portfolio class="content-navigation__link content-navigation__link--secondary"
</router-link> @click.native="close">Räume
</div> </router-link>
</div>
<div class="content-navigation__item content-navigation__item--secondary">
<router-link
to="/portfolio"
active-class="content-navigation__link--active"
class="content-navigation__link content-navigation__link--secondary"
@click.native="close">Portfolio
</router-link>
</div>
</div>
</nav> </nav>
</template> </template>
<script> <script>
import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation'; import Logo from '@/components/icons/Logo';
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
import sidebarMixin from '@/mixins/sidebar';
export default { export default {
props: { props: {
mobile: { isSidebar: {
default: false default: false
} }
}, },
mixins: [sidebarMixin],
components: { components: {
MobileSubnavigation BookTopicNavigation,
Logo
}, },
methods: { methods: {
isActive(linkName) { isActive(linkName) {
return linkName === 'book' && this.$route.path.indexOf('module') > -1; return linkName === 'book' && this.$route.path.indexOf('module') > -1;
}, },
hideMobileNavigation() { close() {
this.$store.dispatch('showMobileNavigation', false); this.closeSidebar('navigation');
} }
} }
} }
@ -65,21 +103,63 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.top-navigation { .content-navigation {
display: flex; display: flex;
align-items: center;
&__link { &__link {
padding: 0 24px; 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: &; $parent: &;
&--mobile { &--sidebar {
flex-direction: column; flex-direction: column;
#{$parent}__primary, #{$parent}__secondary {
display: flex;
flex-direction: column;
width: 100%;
}
#{$parent}__link { #{$parent}__link {
color: $color-white;
@include heading-4; @include heading-4;
line-height: 2.5em; line-height: 2.5em;
padding: 0; padding: 0;
@ -93,20 +173,21 @@
} }
#{$parent}__item { #{$parent}__item {
border-bottom: 1px solid $color-white; width: 100%;
//border-bottom: 1px solid $color-white;
&:nth-child(1) { /*&:nth-child(1) {*/
order: 3; /* order: 3;*/
border-bottom: 0; /* border-bottom: 0;*/
} /*}*/
&:nth-child(2) { /*&:nth-child(2) {*/
order: 1; /* order: 1;*/
} /*}*/
&:nth-child(3) { /*&:nth-child(3) {*/
order: 2; /* order: 2;*/
} /*}*/
} }
} }
} }

47
client/src/components/book-navigation/MobileSubnavigation.vue
View File

@ -1,47 +0,0 @@
<template>
<div class="mobile-subnavigation">
<div class="mobile-subnavigation__section">
<h3 class="mobile-subnavigation__title">Themen</h3>
<book-topic-navigation :mobile="true"/>
</div>
<div class="mobile-subnavigation__section">
<router-link
:to="{name: 'instrument-overview'}"
class="sub-navigation-item book-subnavigation">
<span class="sub-navigation-item__title book-subnavigation__item--mobile book-subnavigation__item">
Instrumente
</span>
</router-link>
</div>
</div>
</template>
<script>
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
export default {
components: {
BookTopicNavigation
},
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.mobile-subnavigation {
&__title {
@include small-text;
color: rgba($color-white, 0.6);
margin-bottom: $small-spacing;
}
&__section {
margin-bottom: $medium-spacing;
}
}
</style>

39
client/src/components/book-navigation/MobileNavigation.vue → client/src/components/book-navigation/NavigationSidebar.vue
View File

@ -1,12 +1,14 @@
<template> <template>
<div class="mobile-navigation"> <div
class="navigation-sidebar"
v-if="sidebar.navigation">
<content-navigation <content-navigation
:mobile="true" :is-sidebar="true"
class="mobile-navigation__main"/> class="navigation-sidebar__main"/>
<div <div
class="mobile-navigation__close-button" class="navigation-sidebar__close-button"
@click="hideMobileNavigation"> @click="close">
<cross class="mobile-navigation__close-icon"/> <cross class="navigation-sidebar__close-icon"/>
</div> </div>
</div> </div>
</template> </template>
@ -15,9 +17,13 @@
import Cross from '@/components/icons/Cross'; import Cross from '@/components/icons/Cross';
import ContentNavigation from '@/components/book-navigation/ContentNavigation'; import ContentNavigation from '@/components/book-navigation/ContentNavigation';
import sidebarMixin from '@/mixins/sidebar';
import {meQuery} from '@/graphql/queries'; import {meQuery} from '@/graphql/queries';
export default { export default {
mixins: [sidebarMixin],
components: { components: {
ContentNavigation, ContentNavigation,
Cross Cross
@ -30,8 +36,8 @@
}, },
methods: { methods: {
hideMobileNavigation() { close() {
this.$store.dispatch('showMobileNavigation', false); this.closeSidebar('navigation');
} }
}, },
@ -45,7 +51,7 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.mobile-navigation { .navigation-sidebar {
position: fixed; position: fixed;
left: 0; left: 0;
right: 0; right: 0;
@ -54,6 +60,10 @@
background-color: white; background-color: white;
z-index: 20; z-index: 20;
@include desktop {
box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.12);
}
display: grid; display: grid;
grid-template-columns: 1fr 50px; grid-template-columns: 1fr 50px;
@ -69,11 +79,10 @@
overflow-y: auto; overflow-y: auto;
@include desktop { @include desktop {
display: none; width: 285px;
} }
&__main { &__main {
background-color: $color-brand;
padding: $medium-spacing; padding: $medium-spacing;
grid-area: m; grid-area: m;
} }
@ -86,13 +95,7 @@
grid-column: 2; grid-column: 2;
align-self: center; align-self: center;
justify-self: center; justify-self: center;
} cursor: pointer;
&__close-icon {
width: 30px;
height: 30px;
opacity: 0.5;
fill: $color-white;
} }
} }
</style> </style>

10
client/src/components/icons/Cross.vue
View File

@ -2,8 +2,16 @@
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100" viewBox="0 0 100 100"
id="shape"> class="cross">
<path <path
d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/> d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/>
</svg> </svg>
</template> </template>
<style scoped lang="scss">
.cross {
width: 30px;
height: 30px;
opacity: 0.5;
}
</style>

1
client/src/components/modules/Module.vue
View File

@ -216,6 +216,7 @@
.module { .module {
display: flex; display: flex;
justify-self: center; justify-self: center;
max-width: 100vw;
@include desktop { @include desktop {
width: 800px; width: 800px;

6
client/src/components/profile/Avatar.vue
View File

@ -69,7 +69,7 @@
this.$apollo.mutate({ this.$apollo.mutate({
mutation: TOGGLE_SIDEBAR, mutation: TOGGLE_SIDEBAR,
variables: { variables: {
open: false profile: false
} }
}) })
} }
@ -124,8 +124,8 @@
height: 34px; height: 34px;
display: block; display: block;
left: 50%; left: 50%;
bottom: -7px; bottom: -3px;
transform: translateX(50%); transform: translateX(80%);
background-color: $color-white; background-color: $color-white;
border-radius: 50%; border-radius: 50%;
padding: 6px; padding: 6px;

94
client/src/components/profile/ProfileSidebar.vue
View File

@ -2,46 +2,52 @@
<div <div
v-click-outside="closeSidebar" v-click-outside="closeSidebar"
class="profile-sidebar" class="profile-sidebar"
v-if="sidebar.open"> v-if="sidebar.profile">
<a <a
class="profile-sidebar__close-link" class="profile-sidebar__close-link"
@click="closeSidebar"> @click="close">
<cross class="profile-sidebar__close-icon"/> <cross class="profile-sidebar__close-icon"/>
</a> </a>
<profile-widget class="profile-sidebar__item"/> <div class="profile-sidebar__section">
<div <profile-widget class="profile-sidebar__item"/>
class="profile-sidebar__item" <div
@click="closeSidebar"> class="profile-sidebar__item"
<router-link @click="close">
to="/me/activity"
class="profile-sidebar__link">Meine Aktivitäten</router-link>
</div>
<div class="profile-sidebar__item">
<h3 class="profile-sidebar__subtitle">Klasse</h3>
<class-selection-widget/>
<div @click="closeSidebar">
<router-link <router-link
:to="{name: 'my-class'}" to="/me/activity"
class="profile-sidebar__link">Klassenliste anzeigen</router-link> class="profile-sidebar__link">Meine Aktivitäten
</router-link>
</div> </div>
</div> </div>
<div <div class="profile-sidebar__section">
class="profile-sidebar__item" <div class="profile-sidebar__item">
@click="closeSidebar"> <class-selection-widget/>
<router-link <div @click="close">
:to="{name:'join-class'}" <router-link
data-cy="join-class-link" :to="{name: 'my-class'}"
class="profile-sidebar__link">Zugangscode class="profile-sidebar__link">Klassenliste
eingeben </router-link>
</router-link> </div>
</div> </div>
<div class="profile-sidebar__item">
<logout-widget/>
</div> </div>
<div class="profile-sidebar__section">
<div
class="profile-sidebar__item"
@click="close">
<router-link
:to="{name:'join-class'}"
data-cy="join-class-link"
class="profile-sidebar__link">Zugangscode
</router-link>
</div>
<div class="profile-sidebar__item">
<logout-widget/>
</div>
<p class="profile-sidebar__support"> <p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch Supportanfragen: rahel.wenger@hep-verlag.ch
</p> </p>
</div>
</div> </div>
</template> </template>
@ -57,12 +63,19 @@
export default { export default {
mixins: [sidebarMixin], mixins: [sidebarMixin],
components: { components: {
LogoutWidget, LogoutWidget,
ClassSelectionWidget, ClassSelectionWidget,
ProfileWidget, ProfileWidget,
Cross Cross
}, },
methods: {
close() {
this.closeSidebar('profile')
}
},
} }
</script> </script>
@ -90,10 +103,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
&__section {
margin-bottom: $large-spacing;
&:last-of-type {
margin-top: auto;
}
}
&__item { &__item {
border-bottom: 1px solid $color-silver-light; padding: $small-spacing $medium-spacing;
padding: $large-spacing $medium-spacing;
} }
&__subtitle { &__subtitle {
@ -114,13 +135,8 @@
cursor: pointer; cursor: pointer;
} }
&__close-icon {
width: 40px;
height: 40px;
}
&__support { &__support {
padding: $small-spacing; padding: $medium-spacing;
@include regular-text; @include regular-text;
color: $color-silver-dark; color: $color-silver-dark;
} }

8
client/src/components/profile/ProfileWidget.vue
View File

@ -35,10 +35,10 @@
.profile-widget { .profile-widget {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: start;
&__name { &__name {
@include heading-3; @include heading-4;
text-align: center; text-align: center;
margin-bottom: $small-spacing; margin-bottom: $small-spacing;
} }
@ -47,8 +47,8 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
width: 80px; width: 120px;
height: 80px; height: 120px;
position: relative; position: relative;
} }

11
client/src/components/school-class/ClassSelectionWidget.vue
View File

@ -105,7 +105,6 @@
position: relative; position: relative;
cursor: pointer; cursor: pointer;
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
border: 1px solid $color-silver;
border-radius: 4px; border-radius: 4px;
&__popover { &__popover {
@ -120,22 +119,22 @@
.selected-class { .selected-class {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: $small-spacing $medium-spacing; padding: $small-spacing 0;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: start;
&__text { &__text {
line-height: $large-spacing; line-height: $large-spacing;
@include regular-text; @include heading-4;
color: $color-silver-dark; margin-right: $small-spacing;
} }
&__dropdown-icon { &__dropdown-icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: $color-brand; fill: $color-charcoal-dark;
} }
} }
</style> </style>

1
client/src/components/school-class/CurrentClass.vue
View File

@ -28,6 +28,5 @@
.current-class { .current-class {
line-height: $large-spacing; line-height: $large-spacing;
@include regular-text; @include regular-text;
color: $color-silver-dark;
} }
</style> </style>

3
client/src/graphql/client.js
View File

@ -17,7 +17,8 @@ const writeLocalCache = cache => {
}, },
sidebar: { sidebar: {
__typename: 'Sidebar', __typename: 'Sidebar',
open: false profile: false,
navigation: false
}, },
helloEmail: { helloEmail: {
__typename: 'HelloEmail', __typename: 'HelloEmail',

4
client/src/graphql/gql/local/mutations/toggleSidebar.gql
View File

@ -1,3 +1,3 @@
mutation($open: Boolean!) { mutation($sidebar: SidebarInput!) {
toggleSidebar(open: $open) @client toggleSidebar(sidebar: $sidebar) @client
} }

3
client/src/graphql/gql/local/sidebar.gql
View File

@ -1,5 +1,6 @@
query Sidebar { query Sidebar {
sidebar @client { sidebar @client {
open profile
navigation
} }
} }

9
client/src/graphql/resolvers.js
View File

@ -16,9 +16,14 @@ export const resolvers = {
cache.writeQuery({query: HELLO_EMAIL, data}); cache.writeQuery({query: HELLO_EMAIL, data});
return data.helloEmail; return data.helloEmail;
}, },
toggleSidebar: (_, {open}, {cache}) => { toggleSidebar: (_, {sidebar: {profile, navigation}}, {cache}) => {
const data = cache.readQuery({query: SIDEBAR}); 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}); cache.writeQuery({query: SIDEBAR, data});
return data.sidebar; return data.sidebar;
} }

13
client/src/graphql/typedefs.js
View File

@ -1,6 +1,11 @@
import gql from 'graphql-tag'; import gql from 'graphql-tag';
export const typeDefs = gql` export const typeDefs = gql`
type SidebarInput {
navigation: Boolean
profile: Boolean
}
type ScrollPosition { type ScrollPosition {
scrollTo: String! scrollTo: String!
} }
@ -9,16 +14,14 @@ export const typeDefs = gql`
email: String! email: String!
} }
type Sidebar { type Sidebar {
open: Boolean! navigation: Boolean
profile: Boolean
} }
type Mutation { type Mutation {
scrollTo(scrollTo: String!): ScrollPosition scrollTo(scrollTo: String!): ScrollPosition
}
type Mutation {
helloEmail(email: String!): HelloEmail helloEmail(email: String!): HelloEmail
toggleSidebar(sidebar: SidebarInput!): Sidebar
} }
`; `;

7
client/src/layouts/BlankLayout.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div class="blank-layout"> <div class="blank-layout">
<profile-sidebar/> <profile-sidebar/>
<navigation-sidebar/>
<router-view/> <router-view/>
</div> </div>
</template> </template>
@ -16,8 +17,12 @@
<script> <script>
import ProfileSidebar from '@/components/profile/ProfileSidebar'; import ProfileSidebar from '@/components/profile/ProfileSidebar';
import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
export default { export default {
components: {ProfileSidebar}, components: {
ProfileSidebar,
NavigationSidebar
},
} }
</script> </script>

8
client/src/layouts/DefaultFooter.vue
View File

@ -68,6 +68,8 @@
.default-footer { .default-footer {
background-color: $color-silver-light; background-color: $color-silver-light;
max-width: 100vw;
overflow: hidden;
&__section { &__section {
width: 100%; width: 100%;
@ -77,7 +79,8 @@
} }
&__info { &__info {
width: $footer-width; width: 100%;
max-width: $footer-width;
padding: 2*$large-spacing 0; padding: 2*$large-spacing 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -98,7 +101,8 @@
} }
&__links { &__links {
width: $footer-width; width: 100%;
max-width: $footer-width;
padding: $large-spacing 0; padding: $large-spacing 0;
} }

7
client/src/layouts/DefaultLayout.vue
View File

@ -2,13 +2,10 @@
<div <div
:class="specialContainerClass" :class="specialContainerClass"
class="container skillbox layout"> class="container skillbox layout">
<navigation-sidebar/>
<profile-sidebar/> <profile-sidebar/>
<header-bar class="header layout__header"/> <header-bar class="header layout__header"/>
<mobile-header
class="header layout__header layout__header--mobile"
/>
<router-view class="layout__content"/> <router-view class="layout__content"/>
<default-footer class="layout__footer"/> <default-footer class="layout__footer"/>
</div> </div>
@ -19,12 +16,14 @@
import MobileHeader from '@/components/MobileHeader'; import MobileHeader from '@/components/MobileHeader';
import ProfileSidebar from '@/components/profile/ProfileSidebar'; import ProfileSidebar from '@/components/profile/ProfileSidebar';
import DefaultFooter from '@/layouts/DefaultFooter'; import DefaultFooter from '@/layouts/DefaultFooter';
import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
export default { export default {
components: { components: {
HeaderBar, HeaderBar,
MobileHeader, MobileHeader,
ProfileSidebar, ProfileSidebar,
NavigationSidebar,
DefaultFooter DefaultFooter
}, },

5
client/src/layouts/FullScreenLayout.vue
View File

@ -45,11 +45,6 @@
display:flex; display:flex;
justify-content:end; justify-content:end;
&__icon {
width: 40px;
height: 40px;
}
} }
</style> </style>

5
client/src/layouts/SimpleLayout.vue
View File

@ -71,10 +71,5 @@
margin-right: $medium-spacing; margin-right: $medium-spacing;
margin-top: $medium-spacing; margin-top: $medium-spacing;
} }
&__icon {
width: 40px;
height: 40px;
}
} }
</style> </style>

6
client/src/mixins/open-sidebar.js
View File

@ -2,12 +2,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
export default { export default {
methods: { 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.$nextTick(() => { // we don't want this to happen instantly, only almost instantly. Otherwise the click-outside-directive won't work
this.$apollo.mutate({ this.$apollo.mutate({
mutation: TOGGLE_SIDEBAR, mutation: TOGGLE_SIDEBAR,
variables: { variables: {
open: true sidebar: {
[type]: true
}
} }
}); });
}); });

11
client/src/mixins/sidebar.js
View File

@ -3,12 +3,14 @@ import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
export default { export default {
methods: { methods: {
closeSidebar() { closeSidebar(type) {
if (this.sidebar.open) { if (this.sidebar[type]) {
this.$apollo.mutate({ this.$apollo.mutate({
mutation: TOGGLE_SIDEBAR, mutation: TOGGLE_SIDEBAR,
variables: { variables: {
open: false sidebar: {
[type]: false
}
} }
}); });
} }
@ -23,7 +25,8 @@ export default {
data: () => ({ data: () => ({
sidebar: { sidebar: {
open: false profile: false,
navigation: false
} }
}) })
} }

2
client/src/pages/start.vue
View File

@ -2,8 +2,6 @@
<div class="start-page"> <div class="start-page">
<header-bar class="start-page__header"/> <header-bar class="start-page__header"/>
<mobile-header class="start-page__header start-page__header--mobile"/>
<div class="start-page__sections start-sections"> <div class="start-page__sections start-sections">
<section-block <section-block

3
client/src/styles/_book-subnavigation.scss
View File

@ -1,10 +1,11 @@
.book-subnavigation { .book-subnavigation {
&__item { &__item {
@include small-text; @include small-text;
line-height: 2;
margin-bottom: $small-spacing; margin-bottom: $small-spacing;
cursor: pointer; cursor: pointer;
color: $color-silver-dark; color: $color-charcoal-dark;
&--mobile { &--mobile {
color: $color-white; color: $color-white;

3
client/src/styles/_default-layout.scss
View File

@ -6,6 +6,7 @@
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
/* /*
* For IE10+ * For IE10+
*/ */
@ -19,8 +20,6 @@
min-height: 100vh; min-height: 100vh;
grid-auto-rows: 1fr; grid-auto-rows: 1fr;
&--show-filter { &--show-filter {
grid-template-rows: auto auto 1fr $footer-height; grid-template-rows: auto auto 1fr $footer-height;
-ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap -ms-grid-rows: 50px 50px 30px 1fr $footer-height; // 1 extra row for gap

13
client/src/styles/_mixins.scss
View File

@ -114,7 +114,8 @@
@mixin small-text { @mixin small-text {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 400; 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 { @mixin aside-text {
@ -127,6 +128,13 @@
font-weight: 600; 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 { @mixin meta-title {
color: $color-silver-dark; color: $color-silver-dark;
font-size: toRem(36px); font-size: toRem(36px);
@ -152,10 +160,9 @@
} }
@mixin default-link { @mixin default-link {
font-size: toRem(18px); font-size: toRem(14px);
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-silver-dark;
cursor: pointer; cursor: pointer;
&--active { &--active {

2
client/src/styles/_navigation.scss
View File

@ -1,4 +1,4 @@
.top-navigation { .content-navigation {
display: flex; display: flex;
&__link { &__link {