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

Add first component

This commit is contained in:
Ramon Wenger 2018-08-08 17:31:19 +02:00
parent 773a907be3
commit 4a46feb4af
4 changed files with 78 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/components/ModuleTeaser.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="module-teaser">
<img src="~/assets/maggie.jpg" 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>
</div>
</div>
</template>
<style scoped lang="scss">
.module-teaser {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
border: 1px solid #E2E2E2;
height: 330px;
width: 300px;
border-radius: 12px;
&__image {
width: 100%;
max-height: 150px;
}
&__body {
padding: 20px;
}
}
</style>

26
client/src/layouts/default.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<div class="container">
<header>Header</header>
<aside>
<h2>Themen</h2>
<ul>
<li>1. Berufliche Grundbildung</li>
<li>2. Geld und Kauf</li>
<li>3. Geld und Kauf</li>
<li>4. Geld und Kauf</li>
<li>5. Geld und Kauf</li>
<li>6. Geld und Kauf</li>
<li>7. Geld und Kauf</li>
<li>8. Geld und Kauf</li>
<li>9. Geld und Kauf</li>
</ul>
<h2>Basiswissen</h2>
<h2>ABU News</h2>
</aside>
<main>
<nuxt/>
</main>
<footer>Footer</footer>
</div>
</template>

1
client/src/pages/index.vue
View File

@ -22,6 +22,7 @@
modules: {
query: ALL_MODULES,
prefetch: true,
manual: true,
result({data, loading, networkStatus}) {
if (!loading) {
this.modules = data.modules.edges.map(node => node.node);

22
client/src/pages/topic.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="topic">
<h1 class="topic__title">Berufliche Grundbildung</h1>
<p class="topic__teaser">
Die berufliche Grundbildung lehrt Sie, den Arbeitsalltag erfolgreich zu bewältigen, Ihre Fähigkeiten zu entwickeln und beruflich flexibel zu sein. Ebenso wichtig ist der Umgang mit verschiedensten Mitmenschen. Eine angemessene mündliche Kommunikation erleichtert
das Zusammenleben und Zusammenarbeiten.
</p>
<module-teaser></module-teaser>
<module-teaser></module-teaser>
<module-teaser></module-teaser>
</div>
</template>
<script>
import ModuleTeaser from '~/components/ModuleTeaser.vue';
export default {
components: {
ModuleTeaser
}
}
</script>