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

Add new room page

This commit is contained in:
Ramon Wenger 2018-09-14 15:57:57 +02:00
parent 5b1572b228
commit 0e30f0bd45
11 changed files with 209 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div class="add-room">
<router-link to="/room/new" tag="div" class="add-room">
<add-icon class="add-room__add"></add-icon>
</div>
</router-link>
</template>
<script>
@ -26,6 +26,7 @@
border-radius: 12px;
@include widget-shadow;
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
cursor: pointer;
&__add {
width: 80px;

77
client/src/components/rooms/NewRoom.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div class="new-room">
<div class="new-room__content">
<h1 class="new-room__heading">Neues Board</h1>
<h2 class="new-room__property-heading">Titel</h2>
<input class="skillbox-input new-room__input">
<h2 class="new-room__property-heading">Beschreibung</h2>
<textarea class="skillbox-textarea new-room__textarea"></textarea>
<h2 class="new-room__property-heading">Farbe</h2>
<room-colors></room-colors>
</div>
<div class="new-room__footer">
<button class="button button--primary new-room__save-button">Speichern</button>
<button class="button">Abbrechen</button>
</div>
</div>
</template>
<script>
import RoomColors from '@/components/rooms/RoomColors';
export default {
components: {
RoomColors
},
created() {
this.$store.dispatch('setSpecialContainerClass', 'red');
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_functions.scss";
.new-room {
width: 710px;
height: 760px;
max-height: 100%;
box-sizing: border-box;
background-color: $color-white;
border-radius: $default-border-radius;
display: grid;
grid-template-rows: auto 65px;
&__heading {
font-size: toRem(35px);
}
&__content {
padding: 26px;
}
&__footer {
border-top: 1px solid $color-lightgrey;
padding: 16px 26px;
}
&__property-heading {
font-size: toRem(21px);
font-weight: 800;
}
&__input,
&__textarea {
width: 100%;
margin-bottom: 35px;
}
&__save-button {
margin-right: 15px;
}
}
</style>

85
client/src/components/rooms/RoomColors.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div class="room-colors">
<div v-for="color in colors" class="room-colors__color-wrapper"
:class="{'room-colors__color-wrapper--selected': color.selected}">
<div class="room-colors__color" :class="'room-colors__color--' + color.name">
<tick class="room-colors__selected-icon" v-if="color.selected"></tick>
</div>
</div>
</div>
</template>
<script>
import Tick from '@/components/icons/Tick';
export default {
data() {
return {
colors: [
{
name: 'yellow',
selected: true
},
{
name: 'blue'
},
{
name: 'red'
},
{
name: 'green'
}
]
}
},
components: {
Tick
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.room-colors {
display: flex;
&__color-wrapper {
margin-right: 10px;
border-radius: 50px;
padding: 10px;
&--selected {
border: 1px solid $color-darkgrey-1;
}
}
&__selected-icon {
width: 17px;
fill: $color-darkgrey-1;
}
&__color {
width: 46px;
height: 46px;
border-radius: 23px;
display: grid;
justify-items: center;
align-items: center;
&--yellow {
background-color: $color-accent-1;
}
&--blue {
background-color: $color-accent-2;
}
&--red {
background-color: $color-accent-3;
}
&--green {
background-color: $color-accent-4;
}
}
}
</style>

2
client/src/layouts/DefaultLayout.vue
View File

@ -85,7 +85,7 @@
align-items: center;
justify-content: space-around;
background-color: $color-white;
grid-auto-rows: 60px;
grid-auto-rows: 50px;
width: 100%;
grid-template-columns: 1fr 1fr 1fr;

23
client/src/pages/newRoom.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="new-room-page">
<new-room></new-room>
</div>
</template>
<script>
import NewRoom from '@/components/rooms/NewRoom';
export default {
components: {
NewRoom
}
}
</script>
<style scoped lang="scss">
.new-room-page {
display: grid;
justify-items: center;
align-items: center;
}
</style>

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

@ -119,6 +119,7 @@
},
roomAppearance: {
set(value) {
// todo: remove, this does nothing
this.$store.dispatch('setSpecialContainerClass', value);
},
get() {
@ -139,6 +140,7 @@
result({data, loading, networkStatus}) {
if (!loading) {
this.room = Object.assign({}, this.$getRidOfEdges(data).room);
this.$store.dispatch('setSpecialContainerClass', this.room.appearance);
}
}
}

2
client/src/router/index.js
View File

@ -6,6 +6,7 @@ import book from '@/pages/book'
import module from '@/pages/module'
import rooms from '@/pages/rooms'
import room from '@/pages/room'
import newRoom from '@/pages/newRoom'
import article from '@/pages/article'
import basicknowledge from '@/pages/basicknowledge'
import p404 from '@/pages/p404'
@ -14,6 +15,7 @@ const routes = [
{path: '/', name: 'module', component: module},
{path: '/module', name: 'module', component: module},
{path: '/rooms', name: 'rooms', component: rooms},
{path: '/room/new', name: 'new-room', component: newRoom},
{path: '/room/:slug', name: 'room', component: room, props: true},
{path: '/article', name: 'article', component: article, meta: {layout: 'simple'}},
{path: '/basic-knowledge', name: 'basic-knowledge', component: basicknowledge, meta: {layout: 'simple'}},

4
client/src/styles/_buttons.scss
View File

@ -11,4 +11,8 @@
&--active {
border-color: $color-brand;
}
&--primary {
border-color: $color-brand;
}
}

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

@ -24,11 +24,13 @@ $color-brand-light: #ddf3ee;
/* greyscale */
$color-darkgrey-1: #333333;
$color-darkgrey-2: #515151;
$color-grey: #a1a1a1;
$color-grey: rgba(51, 51, 51, 0.5);
$color-lightgrey-2: #dbdbdb;
$color-lightgrey: #f3f3f3;
$color-white: #ffffff;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
@ -44,7 +46,7 @@ $green: #6DD79A;
$brown: #EB9E77;
$default-border-radius: 13px;
//modal stuff
$modal-lateral-padding: 34px;

4
server/book/factories.py
View File

@ -58,7 +58,7 @@ class BasicKnowledgeBlockFactory(wagtail_factories.StructBlockFactory):
class ImageUrlBlockBlockFactory(wagtail_factories.StructBlockFactory):
title = fake_title()
url = factory.LazyAttribute(lambda x: 'https://picsum.photos/300/200/?random')
url = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
class Meta:
model = ImageUrlBlock
@ -66,7 +66,7 @@ class ImageUrlBlockBlockFactory(wagtail_factories.StructBlockFactory):
class LinkBlockFactory(wagtail_factories.StructBlockFactory):
text = fake_title()
url = factory.LazyAttribute(lambda x: 'https://picsum.photos/300/200/?random')
url = factory.LazyAttribute(lambda x: 'https://picsum.photos/600/400/?random')
class Meta:
model = LinkBlock

12
server/core/management/commands/dummy_rooms.py
View File

@ -25,7 +25,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{
@ -51,7 +51,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{
@ -77,7 +77,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{
@ -97,7 +97,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{
@ -129,7 +129,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{
@ -155,7 +155,7 @@ data = [
'type': 'image_url',
'value': {
'title': 'Ein Bild sagt mehr als 1000 Worte',
'url': 'https://picsum.photos/300/200/?random'
'url': 'https://picsum.photos/600/400/?random'
}
},
{