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

Parametrize module component

This commit is contained in:
Ramon Wenger 2018-08-14 15:10:37 +02:00
parent 29499350c1
commit fc1b0519c4
3 changed files with 126 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="container">
<header class="header">
<router-link to="/" class="header__logo">skillBox</router-link>
<router-link to="/" class="header__logo">skillBOX</router-link>
</header>
<router-view></router-view>
<footer>Footer</footer>

70
client/src/components/Module.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div class="module">
<h2 class="module__meta-title">{{module.metaTitle}}</h2>
<h1 class="module__title">{{module.title}}</h1>
<img src="https://picsum.photos/640/320" alt="" class="module__hero">
<div class="module__intro" v-html="module.intro">
</div>
<h3>Lernziele</h3>
<objective-group v-for="group in module.objectiveGroups" :key="group.id" :group="group"></objective-group>
<h3>1.1 Lehrbeginn</h3>
<h4>Auftrag 1</h4>
<h4>Das Interview</h4>
<h4>Tipp</h4>
<h3>1.2 Die drei Lernorte</h3>
<h4>Unser Berufsbildungssystem</h4>
<h5>Die Berufsfachschule</h5>
</div>
</template>
<script>
import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
export default {
components: {
ObjectiveGroup
},
props: ['module']
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.module {
display: flex;
justify-self: center;
width: 640px;
flex-direction: column;
padding: 0 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&__hero {
margin-bottom: 35px;
border-radius: 12px;
}
&__meta-title {
font-size: 2.6rem;
font-weight: 300;
font-family: $serif-font-family;
}
&__intro {
font-size: 1.5625rem;
line-height: 1.5;
margin-bottom: 1em;
> /deep/ p {
margin-bottom: 1.5em;
}
}
}
</style>

155
client/src/pages/module.vue
View File

@ -1,110 +1,65 @@
<template>
<div class="module">
<h2 class="module__meta-title">Modul 1</h2>
<h1 class="module__title">Mein neues Umfeld</h1>
<img src="https://picsum.photos/640/320" alt="" class="module__hero">
<div class="module__intro">
<p>
<module v-bind:module="module"></module>
</template>
<script>
import Module from '@/components/Module.vue';
export default {
components: {
Module
},
data: () => {
return {
module: {
title: 'Mein neues Umfeld',
metaTitle: 'Modul 1',
intro: `
<p>
Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
</p>
<p>
Wie erging es Ihnen am ersten Arbeits- und Schultag?
</p>
</div>
<h3>Lernziele</h3>
<objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group>
<h3>1.1 Lehrbeginn</h3>
<h4>Auftrag 1</h4>
<h4>Das Interview</h4>
<h4>Tipp</h4>
<h3>1.2 Die drei Lernorte</h3>
<h4>Unser Berufsbildungssystem</h4>
<h5>Die Berufsfachschule</h5>
</div>
</template>
<script>
import ObjectiveGroup from '@/components/ObjectiveGroup.vue';
export default {
components: {
ObjectiveGroup
},
data: () => {
return {
objectiveGroups: [
{
id: 1,
title: 'Gesellschaft',
objectives: [
{
id: 1,
text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
},
{id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
{
id: 3,
text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
'allgemeinbildenden Unterrichts ABU beschreiben.'
},
{id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
]
}, {
id: 2,
title: 'Sprache und Kommunikation',
objectives: [
{
id: 1,
text: 'Ich kenne verschiedene Arten von Fragen.'
},
{id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
{
id: 3,
text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
},
{id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
{id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
]
}
]
`,
objectiveGroups: [
{
id: 1,
title: 'Gesellschaft',
objectives: [
{
id: 1,
text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
},
{id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
{
id: 3,
text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
'allgemeinbildenden Unterrichts ABU beschreiben.'
},
{id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
]
}, {
id: 2,
title: 'Sprache und Kommunikation',
objectives: [
{
id: 1,
text: 'Ich kenne verschiedene Arten von Fragen.'
},
{id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
{
id: 3,
text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
},
{id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
{id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
]
}
]
}
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.module {
display: flex;
justify-self: center;
width: 640px;
flex-direction: column;
&__hero {
margin-bottom: 35px;
border-radius: 12px;
}
&__meta-title {
font-size: 2.6rem;
font-weight: 300;
font-family: $serif-font-family;
}
&__intro {
font-size: 1.5625rem;
line-height: 1.5;
margin-bottom: 1em;
&> p {
margin-bottom: 1.5em;
}
}
}
</style>