Update topic page
This commit is contained in:
parent
7105082a56
commit
9fedebd42c
|
|
@ -6,7 +6,10 @@
|
||||||
<profile-sidebar/>
|
<profile-sidebar/>
|
||||||
<header-bar class="header layout__header"/>
|
<header-bar class="header layout__header"/>
|
||||||
|
|
||||||
<router-view class="layout__content"/>
|
<router-view
|
||||||
|
:key="$route.fullPath"
|
||||||
|
class="layout__content"
|
||||||
|
/>
|
||||||
<default-footer class="layout__footer"/>
|
<default-footer class="layout__footer"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="book">
|
|
||||||
<main class="book__content">
|
|
||||||
<router-view :key="$route.fullPath"/>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "@/styles/_mixins.scss";
|
|
||||||
|
|
||||||
.book {
|
|
||||||
padding-top: $large-spacing;
|
|
||||||
|
|
||||||
&__content {
|
|
||||||
display: -ms-grid;
|
|
||||||
-ms-grid-columns: 1200px;
|
|
||||||
@supports (display: grid) {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
grid-column-gap: 50px;
|
|
||||||
|
|
||||||
justify-items: start;
|
|
||||||
|
|
||||||
padding: 0 24px;
|
|
||||||
|
|
||||||
@include desktop {
|
|
||||||
grid-template-columns: 1200px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,32 +1,38 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="topic">
|
<div class="topic">
|
||||||
<h1 class="topic__title">{{ topic.title }}</h1>
|
<div class="topic__navigation">
|
||||||
<p class="topic__teaser">
|
<book-topic-navigation />
|
||||||
{{ topic.teaser }}
|
|
||||||
</p>
|
|
||||||
<div class="topic__links">
|
|
||||||
<div
|
|
||||||
class="topic__video-link topic__link"
|
|
||||||
v-if="topic.vimeoId"
|
|
||||||
@click="openVideo">
|
|
||||||
<play-icon class="topic__video-link-icon topic__link-icon"/>
|
|
||||||
<span class="topic__link-description">Video schauen</span>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
:href="topic.instructions"
|
|
||||||
target="_blank"
|
|
||||||
class="topic__instruction-link topic__link"
|
|
||||||
v-if="me.isTeacher && topic.instructions">
|
|
||||||
<bulb-icon class="topic__instruction-icon topic__link-icon"/>
|
|
||||||
<span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="topic__modules">
|
|
||||||
<module-teaser
|
<div class="topic__content">
|
||||||
:key="module.id"
|
<h1 class="topic__title">{{ topic.title }}</h1>
|
||||||
v-bind="module"
|
<p class="topic__teaser">
|
||||||
v-for="module in modules"/>
|
{{ topic.teaser }}
|
||||||
|
</p>
|
||||||
|
<div class="topic__links">
|
||||||
|
<div
|
||||||
|
class="topic__video-link topic__link"
|
||||||
|
v-if="topic.vimeoId"
|
||||||
|
@click="openVideo">
|
||||||
|
<play-icon class="topic__video-link-icon topic__link-icon"/>
|
||||||
|
<span class="topic__link-description">Video schauen</span>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
:href="topic.instructions"
|
||||||
|
target="_blank"
|
||||||
|
class="topic__instruction-link topic__link"
|
||||||
|
v-if="me.isTeacher && topic.instructions">
|
||||||
|
<bulb-icon class="topic__instruction-icon topic__link-icon"/>
|
||||||
|
<span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="topic__modules">
|
||||||
|
<module-teaser
|
||||||
|
:key="module.id"
|
||||||
|
v-bind="module"
|
||||||
|
v-for="module in modules"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -37,11 +43,13 @@
|
||||||
import BulbIcon from '@/components/icons/BulbIcon';
|
import BulbIcon from '@/components/icons/BulbIcon';
|
||||||
import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
|
import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
|
||||||
import me from '@/mixins/me';
|
import me from '@/mixins/me';
|
||||||
|
import BookTopicNavigation from '@/components/book-navigation/BookTopicNavigation';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
||||||
mixins: [me],
|
mixins: [me],
|
||||||
components: {
|
components: {
|
||||||
|
BookTopicNavigation,
|
||||||
ModuleTeaser,
|
ModuleTeaser,
|
||||||
PlayIcon,
|
PlayIcon,
|
||||||
BulbIcon
|
BulbIcon
|
||||||
|
|
@ -90,6 +98,14 @@
|
||||||
@import "@/styles/_mixins.scss";
|
@import "@/styles/_mixins.scss";
|
||||||
|
|
||||||
.topic {
|
.topic {
|
||||||
|
display: grid;
|
||||||
|
padding: $large-spacing 0;
|
||||||
|
grid-template-columns: 300px 1fr;
|
||||||
|
|
||||||
|
&__navigation {
|
||||||
|
padding: 0 $medium-spacing;
|
||||||
|
}
|
||||||
|
|
||||||
&__teaser {
|
&__teaser {
|
||||||
color: $color-charcoal-dark;
|
color: $color-charcoal-dark;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
|
|
@ -133,7 +149,7 @@
|
||||||
grid-row-gap: $large-spacing;
|
grid-row-gap: $large-spacing;
|
||||||
|
|
||||||
@include desktop {
|
@include desktop {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, minmax(auto, 380px));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue