Merge branch 'feature/portfolio' into develop
This commit is contained in:
Ramon Wenger
commit
96779f84dc
|
|
@ -16,6 +16,7 @@
|
|||
import EditRoomEntryWizard from '@/components/rooms/room-entries/EditRoomEntryWizard';
|
||||
import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
|
||||
import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
|
||||
import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
NewRoomEntryWizard,
|
||||
EditRoomEntryWizard,
|
||||
NewObjectiveGroupWizard,
|
||||
EditObjectiveGroupWizard
|
||||
EditObjectiveGroupWizard,
|
||||
NewProjectEntryWizard
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<component :is="component" v-bind="properties" class="add-widget" @click="$emit('click')" :class="{ 'add-widget--reverse': reverse }">
|
||||
<add-icon class="add-widget__add"></add-icon>
|
||||
</component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddIcon from '@/components/icons/AddIcon.vue';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
route: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
reverse: { // use reverse colors
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
click: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
component() {
|
||||
// only use the router link if the route prop is provided, otherwise render a normal anchor tag
|
||||
return this.route ? 'router-link' : 'a'
|
||||
},
|
||||
properties() {
|
||||
return this.route ? {
|
||||
to: this.route,
|
||||
tag: 'div'
|
||||
} : {}
|
||||
}
|
||||
},
|
||||
|
||||
components: {
|
||||
AddIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.add-widget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include widget-shadow;
|
||||
cursor: pointer;
|
||||
|
||||
&__add {
|
||||
width: 80px;
|
||||
fill: $color-grey;
|
||||
}
|
||||
|
||||
&--reverse {
|
||||
@include widget-shadow-reverse;
|
||||
}
|
||||
|
||||
&--reverse &__add {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="modal__backdrop">
|
||||
<div class="modal">
|
||||
<div class="modal" :class="{'modal--hide-header': hideHeader}">
|
||||
<div class="modal__header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
|
@ -19,6 +19,13 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hideHeader: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
hideModal() {
|
||||
this.$store.dispatch('hideModal');
|
||||
|
|
@ -44,6 +51,19 @@
|
|||
grid-template-areas: "header" "body" "footer";
|
||||
position: relative;
|
||||
|
||||
&--hide-header {
|
||||
grid-template-rows: 1fr 65px;
|
||||
grid-template-areas: "body" "footer";
|
||||
}
|
||||
|
||||
&--hide-header &__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&--hide-header &__body {
|
||||
padding: $default-padding;
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
display: grid;
|
||||
position: fixed;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="widget-footer">
|
||||
<a @click="showMenu = !showMenu" class="widget-footer__more-link">
|
||||
<ellipses></ellipses>
|
||||
</a>
|
||||
<widget-popover :entity="entity"
|
||||
@delete="onDelete"
|
||||
@hide-me="showMenu = false"
|
||||
@edit="onEdit"
|
||||
:id="id"
|
||||
v-if="showMenu"></widget-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Ellipses from '@/components/icons/Ellipses.vue';
|
||||
import WidgetPopover from '@/components/rooms/WidgetPopover';
|
||||
|
||||
export default {
|
||||
props: ['on-delete', 'on-edit', 'id', 'entity'],
|
||||
|
||||
components: {
|
||||
Ellipses,
|
||||
WidgetPopover
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
showMenu: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
|
||||
.widget-footer {
|
||||
background-color: $color-grey--lighter;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom-left-radius: $default-border-radius;
|
||||
border-bottom-right-radius: $default-border-radius;
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
*/
|
||||
-ms-grid-row: 2;
|
||||
|
||||
&__more-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
fill: $color-darkgrey-1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="text-form-with-help-text">
|
||||
<h3 class="text-form-with-help-text__heading"><span class="text-form-with-help-text__title">{{title}}</span>
|
||||
<info-icon class="text-form-with-help-text__icon"></info-icon>
|
||||
</h3>
|
||||
<text-form @text-change-value="$emit('change', $event.target.value)" :value="v"></text-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TextForm from '@/components/content-forms/TextForm';
|
||||
import InfoIcon from '@/components/icons/InfoIcon';
|
||||
|
||||
export default {
|
||||
props: ['title', 'value'],
|
||||
|
||||
components: {
|
||||
TextForm,
|
||||
InfoIcon
|
||||
},
|
||||
|
||||
computed: {
|
||||
v() {
|
||||
return {
|
||||
text: this.value
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.text-form-with-help-text {
|
||||
margin-bottom: 30px;
|
||||
|
||||
&__heading {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: toRem(22px);
|
||||
font-weight: 600;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
fill: $color-grey;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<add-widget route="/new-project"></add-widget>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddWidget from '@/components/AddWidget';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddWidget
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<template>
|
||||
<add-widget :reverse="true" @click="addProjectEntry"></add-widget>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddWidget from '@/components/AddWidget';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddWidget
|
||||
},
|
||||
|
||||
methods: {
|
||||
addProjectEntry() {
|
||||
console.log('click');
|
||||
this.$store.dispatch('addProjectEntry', '');
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<template>
|
||||
<modal :hide-header="true">
|
||||
<div class="project-entry-modal">
|
||||
<text-form-with-help-text title="Tätigkeit" :value="value">
|
||||
</text-form-with-help-text>
|
||||
<text-form-with-help-text title="Reflexion" :value="value">
|
||||
</text-form-with-help-text>
|
||||
<text-form-with-help-text title="Nächste Schritte" :value="value">
|
||||
</text-form-with-help-text>
|
||||
</div>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '@/components/Modal';
|
||||
import TextFormWithHelpText from '@/components/content-forms/TextFormWithHelpText';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
TextFormWithHelpText
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
value: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="owner-widget">
|
||||
<user-icon></user-icon>
|
||||
<span>
|
||||
{{name}}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import UserIcon from '@/components/icons/UserIcon.vue';
|
||||
|
||||
export default {
|
||||
props: ['name'],
|
||||
|
||||
components: {
|
||||
UserIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.owner-widget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.6;
|
||||
|
||||
svg {
|
||||
width: 30px;
|
||||
fill: $color-darkgrey-1;
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
& > span {
|
||||
@include room-widget-text-style;;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<template>
|
||||
<div class="portfolio">
|
||||
<add-project></add-project>
|
||||
|
||||
<project-widget
|
||||
v-for="project in projects"
|
||||
v-bind="project" :key="project.id"
|
||||
class="portfolio__project"
|
||||
></project-widget>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectWidget from '@/components/portfolio/ProjectWidget';
|
||||
import AddProject from '@/components/portfolio/AddProject';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ProjectWidget,
|
||||
AddProject
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
projects: [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Quartalsarbeit: Mein Lehrbetrieb',
|
||||
appearance: 'green',
|
||||
slug: 'quartalsarbeit'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Mein Projekt 2',
|
||||
appearance: 'red',
|
||||
slug: 'mein-projekt-2'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Mein Projekt 3',
|
||||
appearance: 'blue',
|
||||
slug: 'mein-projekt-3'
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.portfolio {
|
||||
|
||||
display: -ms-grid;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
grid-row-gap: 30px;
|
||||
grid-auto-rows: 200px;
|
||||
width: 640px;
|
||||
justify-self: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div class="project-entry">
|
||||
<h3 class="project-entry__heading">Tätigkeit</h3>
|
||||
<p class="project-entry__paragraph">
|
||||
Ich führe das Interview mit meiner Kollegin durch.
|
||||
</p>
|
||||
<h3 class="project-entry__heading">Reflexion</h3>
|
||||
<p class="project-entry__paragraph">
|
||||
Da ich geeignete Fragen hatte, konnte meine Kollegin umfangreiche Antworten zum Thema geben. Die Eingangshalle
|
||||
eignete sich nicht als Interviewort, da es viele Nebengeräusche hatte. Wir fanden aber dann ein freies
|
||||
Klassenzimmer. Nicht nur die Fragen sind wichtig. Auch die Ortswahl, wo man das Interview aufzeichnen möchte,
|
||||
ist sehr wichtig für ein erfolgreiches Interview.
|
||||
</p>
|
||||
<h3 class="project-entry__heading">
|
||||
Nächste Schritte
|
||||
</h3>
|
||||
<p class="project-entry__paragraph">
|
||||
Interview im Raum „Mein Lehrbetrieb“ ablegen.
|
||||
</p>
|
||||
<div class="project-entry__date">
|
||||
21. Juni 2018
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.project-entry {
|
||||
background-color: $color-white;
|
||||
border-radius: $default-border-radius;
|
||||
padding: 30px 20px;
|
||||
|
||||
&__heading {
|
||||
font-size: toRem(22px);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
&__paragraph {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__date {
|
||||
font-family: $sans-serif-font-family;
|
||||
color: $color-text-gray;
|
||||
font-size: toRem(17px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="project-widget" :class="widgetClass">
|
||||
<router-link :to="{name: 'project', params: {slug: slug}}" tag="div" class="project-widget__content">
|
||||
<h3 class="project-widget__title">{{title}}</h3>
|
||||
|
||||
<entry-count-widget entry-count="4"></entry-count-widget>
|
||||
<owner-widget name="Hans Muster"></owner-widget>
|
||||
|
||||
</router-link>
|
||||
<widget-footer
|
||||
entity="Eintrag"
|
||||
></widget-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OwnerWidget from '@/components/portfolio/OwnerWidget';
|
||||
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
||||
import WidgetFooter from '@/components/WidgetFooter';
|
||||
|
||||
export default {
|
||||
props: ['title', 'appearance', 'slug'],
|
||||
|
||||
components: {
|
||||
WidgetFooter,
|
||||
EntryCountWidget,
|
||||
OwnerWidget
|
||||
},
|
||||
|
||||
computed: {
|
||||
widgetClass() {
|
||||
return `project-widget--${this.appearance}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.project-widget {
|
||||
border-radius: $default-border-radius;
|
||||
background-color: $color-accent-4;
|
||||
@include widget-shadow;
|
||||
box-sizing: border-box;
|
||||
|
||||
display: -ms-grid;
|
||||
@supports (display: grid) {
|
||||
display: grid;
|
||||
}
|
||||
grid-template-rows: 150px 1fr;
|
||||
|
||||
&__content {
|
||||
padding: 23px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: toRem(22px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@include skillbox-colors;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,33 +1,13 @@
|
|||
<template>
|
||||
<router-link to="/new-room" tag="div" class="add-room">
|
||||
<add-icon class="add-room__add"></add-icon>
|
||||
</router-link>
|
||||
<add-widget route="/new-room"></add-widget>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddIcon from '@/components/icons/AddIcon.vue';
|
||||
import AddWidget from '@/components/AddWidget';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AddIcon
|
||||
AddWidget
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.add-room {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include widget-shadow;
|
||||
cursor: pointer;
|
||||
|
||||
&__add {
|
||||
width: 80px;
|
||||
fill: $color-grey;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="room-entry-count-widget">
|
||||
<div class="entry-count-widget">
|
||||
<cards></cards>
|
||||
<span>{{entryCount}} {{entryCount === 1 ? 'Beitrag' : 'Beiträge'}}</span>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
<style scoped lang="scss">
|
||||
@import "@/styles/_mixins.scss";
|
||||
|
||||
.room-entry-count-widget {
|
||||
.entry-count-widget {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
opacity: 0.6;
|
||||
|
|
@ -3,21 +3,16 @@
|
|||
<router-link :to="{name: 'room', params: {slug: slug}}" tag="div" class="room-widget__content">
|
||||
<h2 class="room-widget__title">{{title}}</h2>
|
||||
<room-group-widget v-bind="schoolClass"></room-group-widget>
|
||||
<room-entry-count-widget :entryCount="entryCount"></room-entry-count-widget>
|
||||
<entry-count-widget :entryCount="entryCount"></entry-count-widget>
|
||||
</router-link>
|
||||
<div class="room-widget__footer" v-if="canEditRoom">
|
||||
<div>
|
||||
<a @click="showMenu = !showMenu" class="room-widget__more-link">
|
||||
<ellipses></ellipses>
|
||||
</a>
|
||||
<widget-popover entity="Raum"
|
||||
@delete="deleteRoom"
|
||||
@hide-me="showMenu = false"
|
||||
@edit="editRoom"
|
||||
<widget-footer
|
||||
v-if="canEditRoom"
|
||||
:on-delete="deleteRoom"
|
||||
:on-edit="editRoom"
|
||||
:id="id"
|
||||
v-if="showMenu"></widget-popover>
|
||||
</div>
|
||||
</div>
|
||||
entity="Raum"
|
||||
>
|
||||
</widget-footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -25,10 +20,9 @@
|
|||
import DELETE_ROOM_MUTATION from '@/graphql/gql/mutations/deleteRoom.gql';
|
||||
import ROOMS_QUERY from '@/graphql/gql/roomsQuery.gql';
|
||||
|
||||
import Ellipses from '@/components/icons/Ellipses.vue';
|
||||
import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
|
||||
import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
|
||||
import WidgetPopover from '@/components/rooms/WidgetPopover';
|
||||
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
||||
import WidgetFooter from '@/components/WidgetFooter';
|
||||
|
||||
import {meQuery} from '@/graphql/queries';
|
||||
|
||||
|
|
@ -36,10 +30,9 @@
|
|||
props: ['slug', 'title', 'entryCount', 'appearance', 'schoolClass', 'id'],
|
||||
|
||||
components: {
|
||||
RoomEntryCountWidget,
|
||||
Ellipses,
|
||||
EntryCountWidget,
|
||||
RoomGroupWidget,
|
||||
WidgetPopover
|
||||
WidgetFooter
|
||||
},
|
||||
|
||||
data() {
|
||||
|
|
@ -128,24 +121,5 @@
|
|||
&__title {
|
||||
font-size: 1.375rem;
|
||||
}
|
||||
|
||||
&__more-link {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
background-color: rgba(51, 51, 51, 0.18);
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-bottom-left-radius: $default-border-radius;
|
||||
border-bottom-right-radius: $default-border-radius;
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
*/
|
||||
-ms-grid-row: 2;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
},
|
||||
specialContainerClass() {
|
||||
let cls = this.$store.state.specialContainerClass;
|
||||
return cls ? `skillbox--${cls}` : ''
|
||||
return [cls ? `skillbox--${cls}` : '', {'skillbox--show-filter': this.showFilter}]
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -63,13 +63,19 @@
|
|||
margin: 0 auto;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-rows: auto 1fr;
|
||||
grid-row-gap: 32px;
|
||||
min-height: 100vh;
|
||||
grid-auto-rows: 1fr;
|
||||
|
||||
grid-template-areas: "h" "." "c";
|
||||
grid-template-areas: "h" "c";
|
||||
padding-bottom: 50px;
|
||||
|
||||
&--show-filter {
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-areas: "h" "." "c";
|
||||
}
|
||||
|
||||
/*
|
||||
* For IE10+
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,12 +1,23 @@
|
|||
<template>
|
||||
<p class="portfolio-page">Diese Funktion steht noch nicht zur Verfügung.</p>
|
||||
<div class="portfolio-page">
|
||||
<portfolio></portfolio>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Portfolio from '@/components/portfolio/Portfolio';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Portfolio
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.portfolio-page {
|
||||
display: grid;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
padding-top: 25vh;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,99 @@
|
|||
<template>
|
||||
<div class="project">
|
||||
<div class="project__header">
|
||||
<h1 class="project__title">Quartalsarbeit: Mein Lehrbetrieb</h1>
|
||||
<p class="project__description">
|
||||
Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200
|
||||
Zeichen enthalten. Das ist eine Beschreibung und kann maximal 200 Zeichen enthalten.
|
||||
</p>
|
||||
|
||||
<h2 class="project__objectives-title">Ziele</h2>
|
||||
<ul class="project__objectives">
|
||||
<li class="project__objective">Ich kann ein Interview mit geeigneten Fragen vorbereiten.</li>
|
||||
<li class="project__objective">Ich kann ein Interview führen und auf interessante oder ausweichende
|
||||
Antworten näher eingehen.
|
||||
</li>
|
||||
<li class="project__objective">Ich kann ein mündlich geführtes Interview in Standardsprache
|
||||
aufzeichnen.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="project__content">
|
||||
<add-project-entry class="project__add-entry"></add-project-entry>
|
||||
<project-entry></project-entry>
|
||||
<project-entry></project-entry>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProjectEntry from '@/components/portfolio/ProjectEntry';
|
||||
import AddProjectEntry from '@/components/portfolio/AddProjectEntry';
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
AddProjectEntry,
|
||||
ProjectEntry
|
||||
},
|
||||
|
||||
created() {
|
||||
this.$store.dispatch('setSpecialContainerClass', 'red');
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.$store.dispatch('setSpecialContainerClass', '');
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/styles/_variables.scss";
|
||||
@import "@/styles/_functions.scss";
|
||||
|
||||
.project {
|
||||
margin-bottom: -50px;
|
||||
|
||||
&__header {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
&__add-entry {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
&__description,
|
||||
&__objective {
|
||||
font-family: $sans-serif-font-family;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
&__objectives-title {
|
||||
font-size: toRem(22px);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__objectives {
|
||||
list-style: disc;
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
&__objective {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
&__content {
|
||||
background-color: $color-grey--lighter;
|
||||
display: grid;
|
||||
grid-template-columns: 840px;
|
||||
grid-row-gap: 30px;
|
||||
justify-content: center;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
</p>
|
||||
<div class="room__meta">
|
||||
<room-group-widget v-bind="room.schoolClass"></room-group-widget>
|
||||
<room-entry-count-widget :entry-count="roomEntryCount"></room-entry-count-widget>
|
||||
<entry-count-widget :entry-count="roomEntryCount"></entry-count-widget>
|
||||
</div>
|
||||
</div>
|
||||
<div class="room__content">
|
||||
|
|
@ -23,13 +23,13 @@
|
|||
import AddRoomEntryButton from '@/components/rooms/AddRoomEntryButton.vue';
|
||||
import RoomEntry from '@/components/rooms/RoomEntry.vue';
|
||||
import RoomGroupWidget from '@/components/rooms/RoomGroupWidget';
|
||||
import RoomEntryCountWidget from '@/components/rooms/RoomEntryCountWidget';
|
||||
import EntryCountWidget from '@/components/rooms/EntryCountWidget';
|
||||
|
||||
export default {
|
||||
props: ['slug'],
|
||||
|
||||
components: {
|
||||
RoomEntryCountWidget,
|
||||
EntryCountWidget,
|
||||
RoomGroupWidget,
|
||||
AddRoomEntryButton,
|
||||
RoomEntry
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
title="Portfolio"
|
||||
subtitle="Dokumentieren & reflektieren"
|
||||
link-text="Portfolio anzeigen"
|
||||
route="/portfolio"
|
||||
></section-block>
|
||||
</div>
|
||||
<div class="start-page__news news">
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import p404 from '@/pages/p404'
|
|||
import start from '@/pages/start'
|
||||
import submission from '@/pages/studentSubmission'
|
||||
import portfolio from '@/pages/portfolio'
|
||||
import project from '@/pages/project'
|
||||
|
||||
const routes = [
|
||||
{path: '/', component: start, meta: {layout: 'blank'}},
|
||||
|
|
@ -47,6 +48,7 @@ const routes = [
|
|||
{path: '/basic-knowledge/:slug', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},
|
||||
{path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
|
||||
{path: '/portfolio', name: 'portfolio', component: portfolio},
|
||||
{path: '/portfolio/:slug', name: 'project', component: project},
|
||||
{
|
||||
path: '/book',
|
||||
name: 'book',
|
||||
|
|
|
|||
|
|
@ -17,7 +17,8 @@ export default new Vuex.Store({
|
|||
parentRoom: null,
|
||||
parentModule: '',
|
||||
objectiveGroupType: '',
|
||||
currentObjectiveGroup: ''
|
||||
currentObjectiveGroup: '',
|
||||
parentProject: null
|
||||
},
|
||||
|
||||
getters: {},
|
||||
|
|
@ -39,6 +40,7 @@ export default new Vuex.Store({
|
|||
commit('setParentModule', '');
|
||||
commit('setObjectiveGroupType', '');
|
||||
commit('setCurrentObjectiveGroup', '');
|
||||
commit('setParentProject', null);
|
||||
},
|
||||
resetContentBlockPosition({commit}) {
|
||||
commit('setContentBlockPosition', {});
|
||||
|
|
@ -77,7 +79,11 @@ export default new Vuex.Store({
|
|||
},
|
||||
setfilterForSchoolClass({commit}, payload) {
|
||||
commit('setfilterForSchoolClass', payload);
|
||||
}
|
||||
},
|
||||
addProjectEntry({commit, dispatch}, payload) {
|
||||
commit('setParentProject', payload);
|
||||
dispatch('showModal', 'new-project-entry-wizard');
|
||||
},
|
||||
},
|
||||
|
||||
mutations: {
|
||||
|
|
@ -116,6 +122,9 @@ export default new Vuex.Store({
|
|||
},
|
||||
setCurrentObjectiveGroup(state, payload) {
|
||||
state.currentObjectiveGroup = payload;
|
||||
},
|
||||
setParentProject(state, payload) {
|
||||
state.parentProject = payload;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
@import 'variables';
|
||||
|
||||
@mixin widget-shadow {
|
||||
@mixin widget-shadow-base {
|
||||
border-radius: $default-border-radius;
|
||||
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@mixin widget-shadow {
|
||||
@include widget-shadow-base;
|
||||
border: 1px solid $color-lightgrey-2;
|
||||
}
|
||||
|
||||
@mixin widget-shadow-reverse {
|
||||
@include widget-shadow-base;
|
||||
border: 2px solid $color-white;
|
||||
}
|
||||
|
||||
@mixin room-widget-text-style {
|
||||
font-family: $sans-serif-font-family;
|
||||
font-size: 1rem;
|
||||
|
|
|
|||
|
|
@ -25,12 +25,14 @@ $color-brand-light: #ddf3ee;
|
|||
$color-darkgrey-1: #333333;
|
||||
$color-darkgrey-2: #515151;
|
||||
$color-grey: rgba(51, 51, 51, 0.5);
|
||||
$color-grey--lighter: rgba(51, 51, 51, 0.18);
|
||||
$color-lightgrey-2: #dbdbdb;
|
||||
$color-lightgrey: #f3f3f3;
|
||||
$color-white: #ffffff;
|
||||
$color-text-gray: rgb(161, 161, 161);
|
||||
|
||||
|
||||
|
||||
$header-color: $color-darkgrey-1;
|
||||
$intro-color: $color-grey;
|
||||
|
||||
|
|
@ -52,3 +54,6 @@ $input-border-radius: 3px;
|
|||
//modal stuff
|
||||
$modal-lateral-padding: 34px;
|
||||
$modal-input-width: 560px;
|
||||
|
||||
|
||||
$default-padding: 30px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue