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> <template>
<div class="container"> <div class="container">
<header class="header"> <header class="header">
<router-link to="/" class="header__logo">skillBox</router-link> <router-link to="/" class="header__logo">skillBOX</router-link>
</header> </header>
<router-view></router-view> <router-view></router-view>
<footer>Footer</footer> <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> <template>
<div class="module"> <module v-bind:module="module"></module>
<h2 class="module__meta-title">Modul 1</h2> </template>
<h1 class="module__title">Mein neues Umfeld</h1>
<img src="https://picsum.photos/640/320" alt="" class="module__hero"> <script>
<div class="module__intro"> import Module from '@/components/Module.vue';
<p>
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. Sie stehen am Anfang eines neuen Lebensabschnitts. In Ihrer Rolle als Berufslernende oder Berufslernender haben Sie Verantwortung übernommen.
</p> </p>
<p> <p>
Wie erging es Ihnen am ersten Arbeits- und Schultag? Wie erging es Ihnen am ersten Arbeits- und Schultag?
</p> </p>
</div> `,
objectiveGroups: [
<h3>Lernziele</h3> {
<objective-group v-for="group in objectiveGroups" :key="group.id" :group="group"></objective-group> id: 1,
title: 'Gesellschaft',
<h3>1.1 Lehrbeginn</h3> objectives: [
<h4>Auftrag 1</h4> {
<h4>Das Interview</h4> id: 1,
<h4>Tipp</h4> text: 'Ich kann wichtige personelle und organisatorische Strukturen der Berufsfachschule beschreiben.'
<h3>1.2 Die drei Lernorte</h3> },
<h4>Unser Berufsbildungssystem</h4> {id: 2, text: 'Ich kenne die Angebote und Regeln meiner Schule.'},
<h5>Die Berufsfachschule</h5> {
id: 3,
</div> text: 'Ich kenne den Aufbau des Schullehrplans ABU und können das Qualifikationsverfahren des ' +
</template> 'allgemeinbildenden Unterrichts ABU beschreiben.'
},
<script> {id: 4, text: 'Ich kann die drei Lernorte unterscheiden.'}
import ObjectiveGroup from '@/components/ObjectiveGroup.vue'; ]
}, {
export default { id: 2,
components: { title: 'Sprache und Kommunikation',
ObjectiveGroup objectives: [
}, {
id: 1,
data: () => { text: 'Ich kenne verschiedene Arten von Fragen.'
return { },
objectiveGroups: [ {id: 2, text: 'Ich kann ein Interview mit geeigneten Fragen vorbereiten.'},
{ {
id: 1, id: 3,
title: 'Gesellschaft', text: 'Ich kann ein Interview führen und auf interessante oder ausweichende Antworten näher eingehen.'
objectives: [ },
{ {id: 4, text: 'Ich kann ein mündlich geführtes Interview schriftlich in Standardsprache festhalten.'},
id: 1, {id: 5, text: 'Ich kann mein Arbeitsplatz genau beschreiben.'}
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> </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>