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

Update styling on project detail page

This commit is contained in:
Ramon Wenger 2021-10-07 11:22:02 +02:00
parent bb694e443d
commit 4f9d3bc33d
13 changed files with 93 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/src/components/AddWidget.vue
View File

@ -48,8 +48,7 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import "~styles/helpers";
.add-widget {
display: none;

3
client/src/components/BackLink.vue
View File

@ -11,6 +11,7 @@
import ChevronLeft from '@/components/icons/ChevronLeft';
import {MODULE_PAGE} from '@/router/module.names';
import {ROOMS_PAGE} from '@/router/room.names';
import {PROJECTS_PAGE} from '@/router/portfolio.names';
export default {
props: {
@ -39,6 +40,8 @@
return {name: 'topic', params: {topicSlug: this.slug}};
case 'module':
return {name: MODULE_PAGE};
case 'portfolio':
return {name: PROJECTS_PAGE};
default:
return {name: ROOMS_PAGE};
}

2
client/src/components/icons/PlusIcon.vue
View File

@ -1,6 +1,6 @@
<template>
<svg
viewBox="16 16 23 23"
viewBox="15 15 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
d="M33.855 23.7749H26.215V16.1349C26.215 15.4584 25.6666 14.9099 24.99 14.9099C24.3135 14.9099 23.765 15.4584 23.765 16.1349V23.7749H16.125C15.4485 23.7749 14.9 24.3234 14.9 24.9999C14.9 25.6765 15.4485 26.2249 16.125 26.2249H23.765V33.8649C23.765 34.5415 24.3135 35.0899 24.99 35.0899C25.6666 35.0899 26.215 34.5415 26.215 33.8649V26.2249H33.855C34.5316 26.2249 35.08 25.6765 35.08 24.9999C35.08 24.3234 34.5316 23.7749 33.855 23.7749Z"

5
client/src/components/page-form/PageForm.vue
View File

@ -24,8 +24,7 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
@import "~styles/helpers";
.page-form {
width: 710px;
@ -41,6 +40,8 @@
}
grid-template-rows: 1fr 55px;
@include widget-shadow;
margin: $large-spacing 0;
&__page {

15
client/src/components/portfolio/AddProject.vue
View File

@ -1,15 +0,0 @@
<template>
<add-widget
route="/new-project"
data-cy="add-project-widget"/>
</template>
<script>
import AddWidget from '@/components/AddWidget';
export default {
components: {
AddWidget
}
};
</script>

42
client/src/components/portfolio/AddProjectEntry.vue
View File

@ -1,18 +1,17 @@
<template>
<add-widget
:reverse="true"
@click="addProjectEntry"/>
<a
class="add-project-entry"
@click="addProjectEntry">
<plus-icon class="add-project-entry__icon" />
<span class="add-project-entry__text">Beitrag erfassen</span>
</a>
</template>
<script>
import AddWidget from '@/components/AddWidget';
import PlusIcon from '@/components/icons/PlusIcon';
export default {
props: ['project'],
components: {
AddWidget
},
components: {PlusIcon},
methods: {
addProjectEntry() {
@ -21,3 +20,28 @@
}
};
</script>
<style lang="scss" scoped>
@import "~styles/helpers";
.add-project-entry {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid $color-brand;
border-radius: $default-border-radius;
cursor: pointer;
&__icon {
width: 20px;
height: 20px;
fill: $color-brand;
margin-right: $small-spacing;
}
&__text {
@include navigation-link;
color: $color-brand;
}
}
</style>

1
client/src/components/portfolio/EditProject.vue
View File

@ -27,7 +27,6 @@
id: project.id,
title: project.title,
description: project.description,
appearance: project.appearance,
objectives: project.objectives
}
}

27
client/src/components/portfolio/ProjectForm.vue
View File

@ -9,10 +9,6 @@
v-model="localProject.description"
label="Beschreibung"
type="textarea"/>
<color-chooser
:selected-color="localProject.appearance"
@input="updateColor"
/>
<template slot="footer">
<button
:class="{'button--disabled': !formValid}"
@ -55,20 +51,13 @@
return this.localProject.title;
}
},
created() {
this.$store.dispatch('setSpecialContainerClass', this.localProject.appearance);
},
beforeDestroy() {
this.$store.dispatch('setSpecialContainerClass', '');
},
methods: {
updateColor(newColor) {
this.localProject.appearance = newColor;
this.$store.dispatch('setSpecialContainerClass', newColor);
}
},
};
</script>
<style scoped lang="scss">
@import "~styles/helpers";
.project-form {
@include widget-shadow;
}
</style>

3
client/src/pages/portfolio/newProject.vue
View File

@ -11,8 +11,6 @@
import ADD_PROJECT_MUTATION from '@/graphql/gql/mutations/addProject.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
const defaultAppearance = 'blue';
export default {
components: {
ProjectForm
@ -24,7 +22,6 @@
title: '',
description: '',
objectives: '',
appearance: defaultAppearance
};
}
},

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

@ -17,7 +17,6 @@
<script>
import ProjectWidget from '@/components/portfolio/ProjectWidget';
import AddProject from '@/components/portfolio/AddProject';
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
@ -30,8 +29,7 @@
ProjectList,
CreateProjectButton,
PortfolioOnboarding,
ProjectWidget,
AddProject
ProjectWidget
},
apollo: {

55
client/src/pages/portfolio/project.vue
View File

@ -3,6 +3,18 @@
:class="specialContainerClass"
class="project">
<div class="project__header">
<back-link
class="project__back"
title="Zurück zur Übersicht"
type="portfolio"/>
<a class="link">Mit Lehrperson teilen</a>
<project-actions
:id="project.id"
class="project__actions"
v-if="!me.readOnly && !me.selectedClass.readOnly"/>
<h1
class="project__title"
data-cy="project-title">{{ project.title }}</h1>
@ -10,19 +22,7 @@
{{ project.description }}
</p>
<h2 class="project__objectives-title">Ziele</h2>
<ul class="project__objectives">
<li
:key="index"
class="project__objective"
v-for="(objective, index) in objectives">{{ objective }}
</li>
</ul>
<div class="project__meta">
<project-actions
:id="project.id"
v-if="!me.readOnly && !me.selectedClass.readOnly"/>
<owner-widget :owner="project.student"/>
<entry-count-widget :entry-count="projectEntryCount"/>
</div>
@ -52,11 +52,13 @@
import ME_QUERY from '@/graphql/gql/queries/meQuery.gql';
import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
import BackLink from '@/components/BackLink';
export default {
props: ['slug'],
components: {
BackLink,
AddProjectEntry,
ProjectEntry,
ProjectActions,
@ -126,10 +128,32 @@
@import "~styles/helpers";
.project {
@include skillbox-colors;
&__header {
padding: $large-spacing;
border-bottom: 1px solid $color-silver;
display: grid;
grid-template-areas:
"b a"
"t t"
"d d"
"m m"
}
&__back {
grid-area: b;
}
&__actions {
grid-area: a;
justify-self: end;
}
&__title {
grid-area: t;
}
&__description {
grid-area: d;
}
&__add-entry {
@ -160,6 +184,8 @@
}
&__meta {
grid-area: m;
display: flex;
flex-direction: column;
@include desktop {
@ -179,7 +205,6 @@
}
&__content {
background-color: rgba($color-charcoal-dark, 0.18);
display: flex;
flex-direction: column;
/*max-width: 840px;*/

1
client/src/router/portfolio.names.js
View File

@ -1 +1,2 @@
export const NEW_PROJECT_PAGE = 'new-project';
export const PROJECTS_PAGE = 'portfolio';

4
client/src/router/portfolio.routes.js
View File

@ -2,10 +2,10 @@ import portfolio from '@/pages/portfolio/portfolio';
import project from '@/pages/portfolio/project';
import newProject from '@/pages/portfolio/newProject';
import editProject from '@/pages/portfolio/editProject';
import {NEW_PROJECT_PAGE} from '@/router/portfolio.names';
import {NEW_PROJECT_PAGE, PROJECTS_PAGE} from '@/router/portfolio.names';
const portfolioRoutes = [
{path: '/portfolio', name: 'portfolio', component: portfolio, meta: {hideFooter: true}},
{path: '/portfolio', name: PROJECTS_PAGE, component: portfolio, meta: {hideFooter: true}},
{path: '/portfolio/:slug', name: 'project', component: project, props: true},
{path: '/new-project/', name: NEW_PROJECT_PAGE, component: newProject},
{path: '/edit-project/:id', name: 'edit-project', component: editProject, props: true},