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

Add instruments to mobile subnavigation

This commit is contained in:
Ramon Wenger 2019-11-26 16:57:22 +01:00
parent 9e3a7d1607
commit 88bbd505f0
7 changed files with 69 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@ -13,7 +13,7 @@
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/MobileNavigation'; 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';

30
client/src/components/MobileSubnavigation.vue
View File

@ -1,30 +0,0 @@
<template>
<div class="mobile-subnavigation">
<h3 class="mobile-subnavigation__title">Themen</h3>
<book-topic-navigation :mobile="true"></book-topic-navigation>
</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;
}
}
</style>

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

@ -24,7 +24,7 @@
</template> </template>
<script> <script>
import MobileSubnavigation from '@/components/MobileSubnavigation'; import MobileSubnavigation from '@/components/book-navigation/MobileSubnavigation';
export default { export default {
props: { props: {

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

@ -4,8 +4,7 @@
<book-topic-navigation></book-topic-navigation> <book-topic-navigation></book-topic-navigation>
</sub-navigation-item> </sub-navigation-item>
<sub-navigation-item title="Instrument"> <sub-navigation-item title="Instrument">
<router-link tag="div" class="book-subnavigation__item" to="/instruments/sprache-kommunikation">Sprache und Kommunikation</router-link> <instrument-navigation></instrument-navigation>
<router-link tag="div" class="book-subnavigation__item" to="/instruments/gesellschaft">Gesellschaft</router-link>
</sub-navigation-item> </sub-navigation-item>
<!--<sub-navigation-item title="News">--> <!--<sub-navigation-item title="News">-->
<!--<template slot="title">--> <!--<template slot="title">-->
@ -18,11 +17,13 @@
<script> <script>
import SubNavigationItem from '@/components/book-navigation/SubNavigationItem'; import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation'; import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
import InstrumentNavigation from '@/components/book-navigation/InstrumentNavigation';
export default { export default {
components: { components: {
SubNavigationItem, SubNavigationItem,
BookTopicNavigation BookTopicNavigation,
InstrumentNavigation
} }
} }
</script> </script>

18
client/src/components/book-navigation/InstrumentNavigation.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<router-link tag="div" class="book-subnavigation__item" :class="{'book-subnavigation__item--mobile': mobile}" to="/instruments/sprache-kommunikation">Sprache und
Kommunikation
</router-link>
<router-link tag="div" class="book-subnavigation__item" :class="{'book-subnavigation__item--mobile': mobile}" to="/instruments/gesellschaft">Gesellschaft</router-link>
</div>
</template>
<script>
export default {
props: {
mobile: {
default: false
}
}
}
</script>

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

@ -64,7 +64,7 @@
display: grid; display: grid;
grid-template-columns: 1fr 50px; grid-template-columns: 1fr 50px;
grid-template-rows: 50px 200px auto 100px; grid-template-rows: 50px 280px auto 100px;
grid-template-areas: "m m" "m m" "s s"; grid-template-areas: "m m" "m m" "s s";

44
client/src/components/book-navigation/MobileSubnavigation.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<div class="mobile-subnavigation">
<div class="mobile-subnavigation__section">
<h3 class="mobile-subnavigation__title">Themen</h3>
<book-topic-navigation :mobile="true"></book-topic-navigation>
</div>
<div class="mobile-subnavigation__section">
<h3 class="mobile-subnavigation__title">Instrumente</h3>
<instrument-navigation :mobile="true"></instrument-navigation>
</div>
</div>
</template>
<script>
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
import InstrumentNavigation from '@/components/book-navigation/InstrumentNavigation';
export default {
components: {
BookTopicNavigation,
InstrumentNavigation
},
}
</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>