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

Refactor handling of mobile view

This commit is contained in:
Ramon Wenger 2020-06-02 16:46:58 +02:00
parent 2ebceec717
commit b5d9d6a998
4 changed files with 146 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,12 +1,11 @@
<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"
@ -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: {

80
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">
<div class="content-navigation__item">
<router-link <router-link
:class="{'top-navigation__link--active': isActive('book')}" :class="{'content-navigation__link--active': isActive('book')}"
to="/book/topic/berufliche-grundbildung" to="/book/topic/berufliche-grundbildung"
active-class="top-navigation__link--active" active-class="content-navigation__link--active"
class="top-navigation__link" class="content-navigation__link"
@click.native="hideMobileNavigation">Inhalte @click.native="close">Themen
</router-link> </router-link>
<mobile-subnavigation v-if="mobile"/> <book-topic-navigation
v-if="isSidebar"
/>
</div> </div>
<div class="top-navigation__item"> <div class="content-navigation__item">
<router-link <router-link
to="/rooms" to="/rooms"
active-class="top-navigation__link--active" active-class="content-navigation__link--active"
class="top-navigation__link" class="content-navigation__link"
@click.native="hideMobileNavigation">Räume @click.native="close">Instrumente
</router-link> </router-link>
</div> </div>
<div class="top-navigation__item"> <div class="content-navigation__item">
<router-link <router-link
to="/portfolio" to="/portfolio"
active-class="top-navigation__link--active" active-class="content-navigation__link--active"
class="top-navigation__link" class="content-navigation__link"
@click.native="hideMobileNavigation">Portfolio @click.native="close">News
</router-link>
</div>
</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="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> </router-link>
</div> </div>
<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">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');
} }
} }
} }

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

@ -8,6 +8,7 @@
@click="close"> @click="close">
<cross class="profile-sidebar__close-icon"/> <cross class="profile-sidebar__close-icon"/>
</a> </a>
<div class="profile-sidebar__section">
<profile-widget class="profile-sidebar__item"/> <profile-widget class="profile-sidebar__item"/>
<div <div
class="profile-sidebar__item" class="profile-sidebar__item"
@ -17,16 +18,19 @@
class="profile-sidebar__link">Meine Aktivitäten class="profile-sidebar__link">Meine Aktivitäten
</router-link> </router-link>
</div> </div>
</div>
<div class="profile-sidebar__section">
<div class="profile-sidebar__item"> <div class="profile-sidebar__item">
<h3 class="profile-sidebar__subtitle">Klasse</h3>
<class-selection-widget/> <class-selection-widget/>
<div @click="close"> <div @click="close">
<router-link <router-link
:to="{name: 'my-class'}" :to="{name: 'my-class'}"
class="profile-sidebar__link">Klassenliste anzeigen class="profile-sidebar__link">Klassenliste
</router-link> </router-link>
</div> </div>
</div> </div>
</div>
<div class="profile-sidebar__section">
<div <div
class="profile-sidebar__item" class="profile-sidebar__item"
@click="close"> @click="close">
@ -34,7 +38,6 @@
:to="{name:'join-class'}" :to="{name:'join-class'}"
data-cy="join-class-link" data-cy="join-class-link"
class="profile-sidebar__link">Zugangscode class="profile-sidebar__link">Zugangscode
eingeben
</router-link> </router-link>
</div> </div>
<div class="profile-sidebar__item"> <div class="profile-sidebar__item">
@ -45,6 +48,7 @@
Supportanfragen: rahel.wenger@hep-verlag.ch Supportanfragen: rahel.wenger@hep-verlag.ch
</p> </p>
</div> </div>
</div>
</template> </template>
<script> <script>

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