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

Adjust start page navigation

This commit is contained in:
Ramon Wenger 2018-11-01 17:09:32 +01:00
parent 90f980fe09
commit ee512dc7c2
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
client/src/components/SectionBlock.vue
View File

@ -1,14 +1,14 @@
<template> <template>
<div class="section-block"> <div class="section-block" @click="navigate()" :class="{'section-block--navigatable': route}">
<div class="section-block__title block-title"> <div class="section-block__title block-title">
<h2 class="block-title__title">{{title}}</h2> <h2 class="block-title__title">{{title}}</h2>
<h3 class="block-title__subtitle small-emph">{{subtitle}}</h3> <h3 class="block-title__subtitle small-emph">{{subtitle}}</h3>
</div> </div>
<div class="section-block__content section-content"> <div class="section-block__content section-content">
<div class="section-content__subsection subsection"> <div class="section-content__subsection subsection">
<router-link :to="route" class="subsection__content small-emph" v-if="route"> <a class="subsection__content small-emph" v-if="route">
Alle Inhalte {{linkText}}
</router-link> </a>
<span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span> <span class="subsection__content subsection__content--disabled" v-if="!route">Noch nicht verfügbar</span>
</div> </div>
</div> </div>
@ -17,7 +17,14 @@
<script> <script>
export default { export default {
props: ['title', 'subtitle', 'route'] props: ['title', 'subtitle', 'route', 'link-text'],
methods: {
navigate() {
if (this.route) {
this.$router.push(this.route);
}
}
}
} }
</script> </script>
@ -32,6 +39,10 @@
box-shadow: 5px 5px 21px 0px rgba(219, 219, 219, 1); box-shadow: 5px 5px 21px 0px rgba(219, 219, 219, 1);
overflow: hidden; overflow: hidden;
&--navigatable {
cursor: pointer;
}
&__title { &__title {
background-color: $color-brand; background-color: $color-brand;
padding: 20px; padding: 20px;

3
client/src/pages/start.vue
View File

@ -6,18 +6,21 @@
class="start-sections__section" class="start-sections__section"
title="Inhalte" title="Inhalte"
subtitle="Lernen" subtitle="Lernen"
link-text="Alle Inhalte anzeigen"
route="/book/topic/geld-und-kauf" route="/book/topic/geld-und-kauf"
></section-block> ></section-block>
<section-block <section-block
class="start-sections__section" class="start-sections__section"
title="Räume" title="Räume"
subtitle="Zusammenarbeiten" subtitle="Zusammenarbeiten"
link-text="Alle Räume anzeigen"
route="/rooms" route="/rooms"
></section-block> ></section-block>
<section-block <section-block
class="start-sections__section" class="start-sections__section"
title="Portfolio" title="Portfolio"
subtitle="Dokumentation & reflektieren" subtitle="Dokumentation & reflektieren"
link-text="Portfolio anzeigen"
></section-block> ></section-block>
</div> </div>
<div class="start-page__news news"> <div class="start-page__news news">