Merged in feature/navigation-sidebar (pull request #66)
Feature/navigation sidebar Approved-by: Christian Cueni
This commit is contained in:
commit
80282fd629
|
|
@ -10,7 +10,7 @@
|
|||
:is="showModal"
|
||||
v-if="showModal"/>
|
||||
<component :is="layout"/>
|
||||
<mobile-navigation v-if="showMobileNavigation"/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,16 +1,15 @@
|
|||
<template>
|
||||
<header class="header-bar">
|
||||
<content-navigation/>
|
||||
<router-link
|
||||
to="/"
|
||||
class="header-bar__logo"
|
||||
data-cy="home-link">
|
||||
<logo class="header-bar__logo-icon"/>
|
||||
</router-link>
|
||||
<a
|
||||
class="header-bar__sidebar-link"
|
||||
@click="openSidebar('navigation')">
|
||||
<hamburger class="header-bar__sidebar-icon"/>
|
||||
</a>
|
||||
<content-navigation class="header-bar__content-navigation"/>
|
||||
<div class="user-header">
|
||||
<a
|
||||
class="user-header__sidebar-link"
|
||||
@click="openSidebar()">
|
||||
@click="openSidebar('profile')">
|
||||
<current-class class="user-header__current-class"/>
|
||||
</a>
|
||||
|
||||
|
|
@ -18,16 +17,15 @@
|
|||
v-bind="me"
|
||||
data-cy="header-user-widget"/>
|
||||
</div>
|
||||
<book-navigation v-if="showSubnavigation"/>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentNavigation from '@/components/book-navigation/ContentNavigation.vue';
|
||||
import BookNavigation from '@/components/book-navigation/BookNavigation';
|
||||
import UserWidget from '@/components/UserWidget.vue';
|
||||
import Logo from '@/components/icons/Logo';
|
||||
import CurrentClass from '@/components/school-class/CurrentClass';
|
||||
import Hamburger from '@/components/icons/Hamburger';
|
||||
|
||||
import openSidebar from '@/mixins/open-sidebar';
|
||||
import me from '@/mixins/me';
|
||||
|
|
@ -38,9 +36,9 @@
|
|||
components: {
|
||||
ContentNavigation,
|
||||
UserWidget,
|
||||
BookNavigation,
|
||||
Logo,
|
||||
CurrentClass
|
||||
CurrentClass,
|
||||
Hamburger
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
@ -59,20 +57,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 +88,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 +119,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 +130,11 @@
|
|||
|
||||
&__sidebar-link {
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
@include desktop {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<a
|
||||
class="logout-widget__logout"
|
||||
data-cy="logout"
|
||||
@click="logout()">Logout</a>
|
||||
@click="logout()">Abmelden</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,11 +121,6 @@
|
|||
align-content: center;
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
grid-area: footer;
|
||||
-ms-grid-row: 3;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div
|
||||
class="user-widget__avatar"
|
||||
data-cy="user-widget-avatar"
|
||||
@click="openSidebar()">
|
||||
@click="openSidebar('profile')">
|
||||
<avatar
|
||||
:avatar-url="avatarUrl"
|
||||
:icon-highlighted="isProfile"/>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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 }}
|
||||
</router-link>
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
<script>
|
||||
import ALL_TOPICS_QUERY from '@/graphql/gql/allTopicsQuery.gql';
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
|
|
@ -24,6 +25,8 @@
|
|||
}
|
||||
},
|
||||
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
data() {
|
||||
return {
|
||||
topics: []
|
||||
|
|
@ -33,9 +36,6 @@
|
|||
methods: {
|
||||
topicId(id) {
|
||||
return atob(id)
|
||||
},
|
||||
hideMobileNavigation() {
|
||||
this.$store.dispatch('showMobileNavigation', false);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -1,61 +1,99 @@
|
|||
<template>
|
||||
<nav
|
||||
:class="{'top-navigation--mobile': mobile}"
|
||||
class="top-navigation">
|
||||
<div class="top-navigation__item">
|
||||
<router-link
|
||||
:class="{'top-navigation__link--active': isActive('book')}"
|
||||
to="/book/topic/berufliche-grundbildung"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Inhalte
|
||||
</router-link>
|
||||
:class="{'content-navigation--sidebar': isSidebar}"
|
||||
class="content-navigation">
|
||||
<div class="content-navigation__primary">
|
||||
<div class="content-navigation__item">
|
||||
<router-link
|
||||
:class="{'content-navigation__link--active': isActive('book')}"
|
||||
to="/book/topic/berufliche-grundbildung"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__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 class="top-navigation__item">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Räume
|
||||
</router-link>
|
||||
</div>
|
||||
<router-link
|
||||
to="/"
|
||||
class="content-navigation__logo"
|
||||
data-cy="home-link"
|
||||
v-if="!isSidebar"
|
||||
>
|
||||
<logo class="content-navigation__logo-icon"/>
|
||||
</router-link>
|
||||
|
||||
<div class="top-navigation__item">
|
||||
<router-link
|
||||
to="/portfolio"
|
||||
active-class="top-navigation__link--active"
|
||||
class="top-navigation__link"
|
||||
@click.native="hideMobileNavigation">Portfolio
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="content-navigation__secondary">
|
||||
<div class="content-navigation__item content-navigation__item--secondary">
|
||||
<router-link
|
||||
to="/rooms"
|
||||
active-class="content-navigation__link--active"
|
||||
class="content-navigation__link content-navigation__link--secondary"
|
||||
@click.native="close">Räume
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<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 {
|
||||
props: {
|
||||
mobile: {
|
||||
isSidebar: {
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
MobileSubnavigation
|
||||
BookTopicNavigation,
|
||||
Logo
|
||||
},
|
||||
|
||||
methods: {
|
||||
isActive(linkName) {
|
||||
return linkName === 'book' && this.$route.path.indexOf('module') > -1;
|
||||
},
|
||||
hideMobileNavigation() {
|
||||
this.$store.dispatch('showMobileNavigation', false);
|
||||
close() {
|
||||
this.closeSidebar('navigation');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -65,21 +103,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 +173,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;*/
|
||||
/*}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -1,12 +1,14 @@
|
|||
<template>
|
||||
<div class="mobile-navigation">
|
||||
<div
|
||||
class="navigation-sidebar"
|
||||
v-if="sidebar.navigation">
|
||||
<content-navigation
|
||||
:mobile="true"
|
||||
class="mobile-navigation__main"/>
|
||||
:is-sidebar="true"
|
||||
class="navigation-sidebar__main"/>
|
||||
<div
|
||||
class="mobile-navigation__close-button"
|
||||
@click="hideMobileNavigation">
|
||||
<cross class="mobile-navigation__close-icon"/>
|
||||
class="navigation-sidebar__close-button"
|
||||
@click="close">
|
||||
<cross class="navigation-sidebar__close-icon"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,9 +17,13 @@
|
|||
import Cross from '@/components/icons/Cross';
|
||||
import ContentNavigation from '@/components/book-navigation/ContentNavigation';
|
||||
|
||||
import sidebarMixin from '@/mixins/sidebar';
|
||||
|
||||
import {meQuery} from '@/graphql/queries';
|
||||
|
||||
export default {
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
ContentNavigation,
|
||||
Cross
|
||||
|
|
@ -30,8 +36,8 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
hideMobileNavigation() {
|
||||
this.$store.dispatch('showMobileNavigation', false);
|
||||
close() {
|
||||
this.closeSidebar('navigation');
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -45,7 +51,7 @@
|
|||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.mobile-navigation {
|
||||
.navigation-sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -54,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;
|
||||
|
|
@ -69,11 +79,10 @@
|
|||
overflow-y: auto;
|
||||
|
||||
@include desktop {
|
||||
display: none;
|
||||
width: 285px;
|
||||
}
|
||||
|
||||
&__main {
|
||||
background-color: $color-brand;
|
||||
padding: $medium-spacing;
|
||||
grid-area: m;
|
||||
}
|
||||
|
|
@ -86,13 +95,7 @@
|
|||
grid-column: 2;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0.5;
|
||||
fill: $color-white;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,8 +2,16 @@
|
|||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 100 100"
|
||||
id="shape">
|
||||
class="cross">
|
||||
<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"/>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.cross {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -216,6 +216,7 @@
|
|||
.module {
|
||||
display: flex;
|
||||
justify-self: center;
|
||||
max-width: 100vw;
|
||||
|
||||
@include desktop {
|
||||
width: 800px;
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
this.$apollo.mutate({
|
||||
mutation: TOGGLE_SIDEBAR,
|
||||
variables: {
|
||||
open: false
|
||||
profile: false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -2,46 +2,52 @@
|
|||
<div
|
||||
v-click-outside="closeSidebar"
|
||||
class="profile-sidebar"
|
||||
v-if="sidebar.open">
|
||||
v-if="sidebar.profile">
|
||||
<a
|
||||
class="profile-sidebar__close-link"
|
||||
@click="closeSidebar">
|
||||
@click="close">
|
||||
<cross class="profile-sidebar__close-icon"/>
|
||||
</a>
|
||||
<profile-widget class="profile-sidebar__item"/>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="closeSidebar">
|
||||
<router-link
|
||||
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">
|
||||
<div class="profile-sidebar__section">
|
||||
<profile-widget class="profile-sidebar__item"/>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="close">
|
||||
<router-link
|
||||
:to="{name: 'my-class'}"
|
||||
class="profile-sidebar__link">Klassenliste anzeigen</router-link>
|
||||
to="/me/activity"
|
||||
class="profile-sidebar__link">Meine Aktivitäten
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="profile-sidebar__item"
|
||||
@click="closeSidebar">
|
||||
<router-link
|
||||
:to="{name:'join-class'}"
|
||||
data-cy="join-class-link"
|
||||
class="profile-sidebar__link">Zugangscode
|
||||
eingeben
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="profile-sidebar__item">
|
||||
<logout-widget/>
|
||||
<div class="profile-sidebar__section">
|
||||
<div class="profile-sidebar__item">
|
||||
<class-selection-widget/>
|
||||
<div @click="close">
|
||||
<router-link
|
||||
:to="{name: 'my-class'}"
|
||||
class="profile-sidebar__link">Klassenliste
|
||||
</router-link>
|
||||
</div>
|
||||
</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">
|
||||
Supportanfragen: rahel.wenger@hep-verlag.ch
|
||||
</p>
|
||||
<p class="profile-sidebar__support">
|
||||
Supportanfragen: rahel.wenger@hep-verlag.ch
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -57,12 +63,19 @@
|
|||
export default {
|
||||
|
||||
mixins: [sidebarMixin],
|
||||
|
||||
components: {
|
||||
LogoutWidget,
|
||||
ClassSelectionWidget,
|
||||
ProfileWidget,
|
||||
Cross
|
||||
},
|
||||
|
||||
methods: {
|
||||
close() {
|
||||
this.closeSidebar('profile')
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -90,10 +103,18 @@
|
|||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
|
||||
&__section {
|
||||
margin-bottom: $large-spacing;
|
||||
|
||||
&:last-of-type {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-bottom: 1px solid $color-silver-light;
|
||||
padding: $large-spacing $medium-spacing;
|
||||
padding: $small-spacing $medium-spacing;
|
||||
}
|
||||
|
||||
&__subtitle {
|
||||
|
|
@ -114,13 +135,8 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__close-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
&__support {
|
||||
padding: $small-spacing;
|
||||
padding: $medium-spacing;
|
||||
@include regular-text;
|
||||
color: $color-silver-dark;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -28,6 +28,5 @@
|
|||
.current-class {
|
||||
line-height: $large-spacing;
|
||||
@include regular-text;
|
||||
color: $color-silver-dark;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ const writeLocalCache = cache => {
|
|||
},
|
||||
sidebar: {
|
||||
__typename: 'Sidebar',
|
||||
open: false
|
||||
profile: false,
|
||||
navigation: false
|
||||
},
|
||||
helloEmail: {
|
||||
__typename: 'HelloEmail',
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
mutation($open: Boolean!) {
|
||||
toggleSidebar(open: $open) @client
|
||||
mutation($sidebar: SidebarInput!) {
|
||||
toggleSidebar(sidebar: $sidebar) @client
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
query Sidebar {
|
||||
sidebar @client {
|
||||
open
|
||||
profile
|
||||
navigation
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
import gql from 'graphql-tag';
|
||||
|
||||
export const typeDefs = gql`
|
||||
type SidebarInput {
|
||||
navigation: Boolean
|
||||
profile: Boolean
|
||||
}
|
||||
|
||||
type ScrollPosition {
|
||||
scrollTo: String!
|
||||
}
|
||||
|
|
@ -9,16 +14,14 @@ export const typeDefs = gql`
|
|||
email: String!
|
||||
}
|
||||
|
||||
|
||||
type Sidebar {
|
||||
open: Boolean!
|
||||
navigation: Boolean
|
||||
profile: Boolean
|
||||
}
|
||||
|
||||
type Mutation {
|
||||
scrollTo(scrollTo: String!): ScrollPosition
|
||||
}
|
||||
|
||||
type Mutation {
|
||||
helloEmail(email: String!): HelloEmail
|
||||
toggleSidebar(sidebar: SidebarInput!): Sidebar
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<div class="blank-layout">
|
||||
<profile-sidebar/>
|
||||
<navigation-sidebar/>
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,8 +17,12 @@
|
|||
|
||||
<script>
|
||||
import ProfileSidebar from '@/components/profile/ProfileSidebar';
|
||||
import NavigationSidebar from '@/components/book-navigation/NavigationSidebar';
|
||||
|
||||
export default {
|
||||
components: {ProfileSidebar},
|
||||
components: {
|
||||
ProfileSidebar,
|
||||
NavigationSidebar
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,13 +2,10 @@
|
|||
<div
|
||||
:class="specialContainerClass"
|
||||
class="container skillbox layout">
|
||||
<navigation-sidebar/>
|
||||
<profile-sidebar/>
|
||||
<header-bar class="header layout__header"/>
|
||||
|
||||
<mobile-header
|
||||
class="header layout__header layout__header--mobile"
|
||||
/>
|
||||
|
||||
<router-view class="layout__content"/>
|
||||
<default-footer class="layout__footer"/>
|
||||
</div>
|
||||
|
|
@ -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
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -45,11 +45,6 @@
|
|||
|
||||
display:flex;
|
||||
justify-content:end;
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -71,10 +71,5 @@
|
|||
margin-right: $medium-spacing;
|
||||
margin-top: $medium-spacing;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,6 @@
|
|||
<div class="start-page">
|
||||
<header-bar class="start-page__header"/>
|
||||
|
||||
<mobile-header class="start-page__header start-page__header--mobile"/>
|
||||
|
||||
<div class="start-page__sections start-sections">
|
||||
|
||||
<section-block
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.top-navigation {
|
||||
.content-navigation {
|
||||
display: flex;
|
||||
|
||||
&__link {
|
||||
|
|
|
|||
Loading…
Reference in New Issue