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: {

102
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="/rooms"
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="/portfolio"
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="/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');
} }
} }
} }

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

@ -1,78 +1,82 @@
<template> <template>
<div
v-click-outside="closeSidebar"
class="profile-sidebar"
v-if="sidebar.profile">
<a
class="profile-sidebar__close-link"
@click="close">
<cross class="profile-sidebar__close-icon"/>
</a>
<profile-widget class="profile-sidebar__item"/>
<div <div
class="profile-sidebar__item" v-click-outside="closeSidebar"
@click="close"> class="profile-sidebar"
<router-link v-if="sidebar.profile">
to="/me/activity" <a
class="profile-sidebar__link">Meine Aktivitäten class="profile-sidebar__close-link"
</router-link> @click="close">
</div> <cross class="profile-sidebar__close-icon"/>
<div class="profile-sidebar__item"> </a>
<h3 class="profile-sidebar__subtitle">Klasse</h3> <div class="profile-sidebar__section">
<class-selection-widget/> <profile-widget class="profile-sidebar__item"/>
<div @click="close"> <div
<router-link class="profile-sidebar__item"
:to="{name: 'my-class'}" @click="close">
class="profile-sidebar__link">Klassenliste anzeigen <router-link
</router-link> to="/me/activity"
</div> class="profile-sidebar__link">Meine Aktivitäten
</div> </router-link>
<div </div>
class="profile-sidebar__item" </div>
@click="close"> <div class="profile-sidebar__section">
<router-link <div class="profile-sidebar__item">
:to="{name:'join-class'}" <class-selection-widget/>
data-cy="join-class-link" <div @click="close">
class="profile-sidebar__link">Zugangscode <router-link
eingeben :to="{name: 'my-class'}"
</router-link> class="profile-sidebar__link">Klassenliste
</div> </router-link>
<div class="profile-sidebar__item"> </div>
<logout-widget/> </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"> <p class="profile-sidebar__support">
Supportanfragen: rahel.wenger@hep-verlag.ch Supportanfragen: rahel.wenger@hep-verlag.ch
</p> </p>
</div> </div>
</div>
</template> </template>
<script> <script>
import ProfileWidget from '@/components/profile/ProfileWidget'; import ProfileWidget from '@/components/profile/ProfileWidget';
import Cross from '@/components/icons/Cross'; import Cross from '@/components/icons/Cross';
import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget'; import ClassSelectionWidget from '@/components/school-class/ClassSelectionWidget';
import sidebarMixin from '@/mixins/sidebar'; import sidebarMixin from '@/mixins/sidebar';
import LogoutWidget from '@/components/LogoutWidget'; import LogoutWidget from '@/components/LogoutWidget';
export default { export default {
mixins: [sidebarMixin], mixins: [sidebarMixin],
components: { components: {
LogoutWidget, LogoutWidget,
ClassSelectionWidget, ClassSelectionWidget,
ProfileWidget, ProfileWidget,
Cross Cross
}, },
methods: { methods: {
close() { close() {
this.closeSidebar('profile') this.closeSidebar('profile')
} }
}, },
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

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