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

Add new portfolio page layout

This commit is contained in:
Ramon Wenger 2019-01-29 09:20:18 +01:00
parent c468a13720
commit 8e9cd3600d
13 changed files with 319 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
client/src/components/AddWidget.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<router-link :to="link" tag="div" class="add-widget">
<add-icon class="add-widget__add"></add-icon>
</router-link>
</template>
<script>
import AddIcon from '@/components/icons/AddIcon.vue';
export default {
props: ['link'],
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;
}
}
</style>

62
client/src/components/WidgetFooter.vue Normal file
View File

@ -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>

13
client/src/components/portfolio/AddProject.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<add-widget link="/new-portfolio-entry"></add-widget>
</template>
<script>
import AddWidget from '@/components/AddWidget';
export default {
components: {
AddWidget
}
}
</script>

40
client/src/components/portfolio/OwnerWidget.vue Normal file
View File

@ -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>

65
client/src/components/portfolio/Portfolio.vue Normal file
View File

@ -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>

67
client/src/components/portfolio/ProjectWidget.vue Normal file
View File

@ -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>

26
client/src/components/rooms/AddRoom.vue
View File

@ -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 link="/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>

4
client/src/components/rooms/RoomEntryCountWidget.vue → client/src/components/rooms/EntryCountWidget.vue
View File

@ -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;

52
client/src/components/rooms/RoomWidget.vue
View File

@ -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"
:id="id"
v-if="showMenu"></widget-popover>
</div>
</div>
<widget-footer
v-if="canEditRoom"
:on-delete="deleteRoom"
:on-edit="editRoom"
:id="id"
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>

15
client/src/pages/portfolio.vue
View File

@ -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>

6
client/src/pages/room.vue
View File

@ -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

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

@ -21,6 +21,7 @@
title="Portfolio"
subtitle="Dokumentieren & reflektieren"
link-text="Portfolio anzeigen"
route="/portfolio"
></section-block>
</div>
<div class="start-page__news news">

2
client/src/styles/_variables.scss
View File

@ -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;