Add book and topic views including styling
This commit is contained in:
Ramon Wenger
parent
e97942f36f
commit
031e2a797d
|
|
@ -1,11 +1,15 @@
|
|||
<template>
|
||||
<aside>
|
||||
<h2>Themen</h2>
|
||||
<ul>
|
||||
<li v-for="topic in topics" :key="topic.id">{{topic.id}}. {{topic.title}}</li>
|
||||
</ul>
|
||||
<h2>Basiswissen</h2>
|
||||
<h2>ABU News</h2>
|
||||
<aside class="book-sidebar">
|
||||
<h2 class="book-sidebar__title">Themen</h2>
|
||||
<nav class="book-topics">
|
||||
<div class="book-topics__topic"
|
||||
:class="{'book-topics__topic--active': topic.active}"
|
||||
v-for="topic in topics"
|
||||
:key="topic.id">{{topic.id}}. {{topic.title}}
|
||||
</div>
|
||||
</nav>
|
||||
<h2 class="book-sidebar__title">Basiswissen</h2>
|
||||
<h2 class="book-sidebar__title">ABU News</h2>
|
||||
</aside>
|
||||
|
||||
</template>
|
||||
|
|
@ -15,17 +19,48 @@
|
|||
data: () => {
|
||||
return {
|
||||
topics: [
|
||||
{id: 1, title: 'Berufliche Grundbildung'},
|
||||
{id: 1, title: 'Berufliche Grundbildung', active: true},
|
||||
{id: 2, title: 'Geld und Kauf'},
|
||||
{id: 3, title: 'Geld und Kauf'},
|
||||
{id: 4, title: 'Geld und Kauf'},
|
||||
{id: 5, title: 'Kauf und Geld'},
|
||||
{id: 6, title: 'Geld und Kauf'},
|
||||
{id: 7, title: 'Geld und Kauf'},
|
||||
{id: 8, title: 'Geld und Kauf'},
|
||||
{id: 9, title: 'Geld und Kauf'}
|
||||
{id: 3, title: 'Risiko und Sicherheit'},
|
||||
{id: 4, title: 'Demokratie und Mitgestaltung'},
|
||||
{id: 5, title: 'Kultur und Kunst'},
|
||||
{id: 6, title: 'Die Schweiz in Europa und der Welt'},
|
||||
{id: 7, title: 'Markt und Konsum'},
|
||||
{id: 8, title: 'Globale Herausforderungen'},
|
||||
{id: 9, title: 'Wohnen und Zusammenleben'},
|
||||
{id: 10, title: 'Arbeit und Zukunft'},
|
||||
{id: 11, title: 'Grundsätzliches zum Recht'}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_functions.scss";
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.book-sidebar {
|
||||
&__title {
|
||||
font-size: toRem(17px);
|
||||
font-weight: 400;
|
||||
color: $color-grey;
|
||||
}
|
||||
}
|
||||
|
||||
.book-topics {
|
||||
padding-left: 24px;
|
||||
margin-bottom: 25px;
|
||||
|
||||
&__topic {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-size: toRem(14px);
|
||||
margin-bottom: 20px;
|
||||
color: $color-grey;
|
||||
|
||||
&--active {
|
||||
color: $color-brand;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<nav class="top-navigation">
|
||||
<router-link to="/module" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
|
||||
<router-link to="/book/topic" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
|
||||
<router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume</router-link>
|
||||
<router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio</router-link>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
<template>
|
||||
<div class="module-teaser">
|
||||
<img src="@/assets/maggie.jpg" alt="" class="module-teaser__image">
|
||||
<router-link to="/module" tag="div" class="module-teaser">
|
||||
<img :src="'https://picsum.photos/300/150?random='+id" alt="" class="module-teaser__image">
|
||||
<div class="module-teaser__body">
|
||||
<h3 class="module-teaser__meta-title">Modul 1</h3>
|
||||
<h3 class="module-teaser__title">Mein neues Umfeld</h3>
|
||||
<p class="module-teaser__description">Wie erging es Ihnen am ersten Arbeits- und Schultag?</p>
|
||||
<h3 class="module-teaser__meta-title">{{metaTitle}}</h3>
|
||||
<h3 class="module-teaser__title">{{title}}</h3>
|
||||
<p class="module-teaser__description">{{description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['metaTitle', 'title', 'description', 'id']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
|
@ -22,6 +25,8 @@
|
|||
width: 100%;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
||||
&__image {
|
||||
width: 100%;
|
||||
|
|
@ -33,7 +38,7 @@
|
|||
}
|
||||
|
||||
&__meta-title {
|
||||
color: $color-lightgrey;
|
||||
color: $color-grey;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
grid-row-gap: 32px;
|
||||
min-height: 100vh;
|
||||
grid-template-areas: "h" "c";
|
||||
padding-bottom: 50px;
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
|
|
|
|||
|
|
@ -27,5 +27,10 @@
|
|||
display: grid;
|
||||
}
|
||||
grid-template-columns: 305px 1fr;
|
||||
grid-column-gap: 50px;
|
||||
|
||||
justify-items: start;
|
||||
|
||||
padding: 0 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,10 +8,7 @@
|
|||
das Zusammenleben und Zusammenarbeiten.
|
||||
</p>
|
||||
<div class="topic__modules">
|
||||
<module-teaser></module-teaser>
|
||||
<module-teaser></module-teaser>
|
||||
<module-teaser></module-teaser>
|
||||
|
||||
<module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -22,6 +19,43 @@
|
|||
export default {
|
||||
components: {
|
||||
ModuleTeaser
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
modules: [
|
||||
{
|
||||
id: 1,
|
||||
metaTitle: 'Intro',
|
||||
title: 'Video',
|
||||
description: 'Die Berufsbildung ist ein neuer Lebensabschnitt'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
metaTitle: 'Modul 1',
|
||||
title: 'Mein neues Umfeld',
|
||||
description: 'Wie erging es Ihnen am ersten Arbeits- und Schultag?'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
metaTitle: 'Modul 2',
|
||||
title: 'Lehrvertrag',
|
||||
description: 'Haben Sie etwas in Ihrem Lehrvertrag noch nicht verstanden?'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
metaTitle: 'Modul 3',
|
||||
title: 'Miteinander reden',
|
||||
description: 'Welches war Ihre letzte schwierige Gesprächs- situation?'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
metaTitle: 'Modul 4',
|
||||
title: 'Lerntipps',
|
||||
description: 'Wie gehen Sie vor, wenn Sie sich auf eine Prüfung vor-bereiten?'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -34,7 +68,9 @@
|
|||
color: $color-grey;
|
||||
font-size: 1.2rem;
|
||||
line-height: 25px;
|
||||
max-width: 895px;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
|
||||
&__modules {
|
||||
|
|
@ -45,6 +81,8 @@
|
|||
}
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 40px;
|
||||
grid-row-gap: 30px;
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue