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

Merged in feature/modules (pull request #19) 

Feature/modules
This commit is contained in:
Christian Cueni 2019-07-11 08:44:12 +00:00
parent b50a489e7d 7bdeb4b6f5
commit d3c467e189
62 changed files with 199 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

@ -6,11 +6,14 @@
<title>skillbox</title> <title>skillbox</title>
<link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css"> <link href='https://fonts.googleapis.com/css?family=Material+Icons' rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,800" rel="stylesheet">
<link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet"> <link href="https://use.typekit.net/tck7ptw.css" rel="stylesheet">
<!-- FIXME: replace with own css --> <!-- FIXME: replace with own css -->
<link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/> <link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/>
<<<<<<< HEAD
=======
>>>>>>> Add import
<script> <script>
window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac'; window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';

2
client/src/components/AddContentBlockButton.vue
View File

@ -47,7 +47,7 @@
&__icon { &__icon {
height: 57px; height: 57px;
fill: $color-grey; fill: $color-silver-dark;
} }
} }
</style> </style>

4
client/src/components/AddContentElement.vue
View File

@ -22,14 +22,14 @@
.add-content-element { .add-content-element {
display: flex; display: flex;
justify-content: center; justify-content: center;
border-bottom: 2px solid $color-grey; border-bottom: 2px solid $color-silver-dark;
margin-bottom: 21px + 25px; margin-bottom: 21px + 25px;
cursor: pointer; cursor: pointer;
&__icon { &__icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
fill: $color-grey; fill: $color-silver-dark;
margin-bottom: -21px; margin-bottom: -21px;
background-color: $color-white; background-color: $color-white;
border-radius: 50px; border-radius: 50px;

4
client/src/components/AddObjectiveGroupButton.vue
View File

@ -54,11 +54,11 @@
&__icon { &__icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
} }
&__text { &__text {
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
} }

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

@ -60,7 +60,7 @@
&__add { &__add {
width: 80px; width: 80px;
fill: $color-grey; fill: $color-silver-dark;
} }
&--reverse { &--reverse {

2
client/src/components/AssignmentWithSubmissions.vue
View File

@ -84,7 +84,7 @@
&__link { &__link {
display: block; display: block;
&:first-of-type { &:first-of-type {
border-top: 1px solid $color-grey; border-top: 1px solid $color-silver-dark;
} }
} }

4
client/src/components/ColorChooser.vue
View File

@ -56,13 +56,13 @@
padding: 10px; padding: 10px;
&--selected { &--selected {
border: 1px solid $color-darkgrey-1; border: 1px solid $color-charcoal-dark;
} }
} }
&__selected-icon { &__selected-icon {
width: 17px; width: 17px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
} }
&__color { &__color {

44
client/src/components/ContentBlock.vue
View File

@ -12,6 +12,7 @@
</a> </a>
</div> </div>
<h3 v-if="instrumentLabel !== ''" class="content-block__instrument-label">{{instrumentLabel}}</h3>
<h4 class="content-block__title">{{contentBlock.title}}</h4> <h4 class="content-block__title">{{contentBlock.title}}</h4>
<component v-for="component in contentBlock.contents" <component v-for="component in contentBlock.contents"
@ -39,6 +40,7 @@
import DocumentBlock from '@/components/content-blocks/DocumentBlock'; import DocumentBlock from '@/components/content-blocks/DocumentBlock';
import InfogramBlock from '@/components/content-blocks/InfogramBlock'; import InfogramBlock from '@/components/content-blocks/InfogramBlock';
import GeniallyBlock from '@/components/content-blocks/GeniallyBlock'; import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
import Assignment from '@/components/content-blocks/assignment/Assignment'; import Assignment from '@/components/content-blocks/assignment/Assignment';
import Solution from '@/components/content-blocks/Solution'; import Solution from '@/components/content-blocks/Solution';
import AddContentBlockButton from '@/components/AddContentBlockButton'; import AddContentBlockButton from '@/components/AddContentBlockButton';
@ -50,6 +52,11 @@
import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql'; import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';
import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql'; import DELETE_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/deleteContentBlock.gql';
const instruments = {
base_communication: 'Sprache & Kommunikation',
base_society: 'Gesellschaft'
};
export default { export default {
props: ['contentBlock', 'parent'], props: ['contentBlock', 'parent'],
@ -64,6 +71,7 @@
'document_block': DocumentBlock, 'document_block': DocumentBlock,
'infogram_block': InfogramBlock, 'infogram_block': InfogramBlock,
'genially_block': GeniallyBlock, 'genially_block': GeniallyBlock,
'subtitle': SubtitleBlock,
Solution, Solution,
Assignment, Assignment,
Task, Task,
@ -77,6 +85,14 @@
computed: { computed: {
specialClass() { specialClass() {
return `content-block--${this.contentBlock.type.toLowerCase()}` return `content-block--${this.contentBlock.type.toLowerCase()}`
},
instrumentLabel() {
const contentType = this.contentBlock.type.toLowerCase()
if (!(contentType in instruments)) {
return ''
}
return `Instrument - ${instruments[contentType]}`
} }
}, },
@ -132,6 +148,11 @@
line-height: 1.5; line-height: 1.5;
} }
&__instrument-label {
margin-bottom: 0;
@include regular-text();
}
&__actions { &__actions {
position: absolute; position: absolute;
left: -70px; left: -70px;
@ -144,15 +165,32 @@
} }
&--base_communication { &--base_communication {
@include content-box($color-accent-1); @include content-box($color-accent-1-list);
.content-block__instrument-label {
color: $color-accent-1-dark;
}
} }
&--task { &--task {
@include content-box($color-brand); @include light-border(bottom);
.content-block__title {
color: $color-brand;
margin-top: $default-padding;
@include light-border(bottom);
@include desktop {
margin-top: 0;
}
}
} }
&--base_society { &--base_society {
@include content-box($color-accent-2); @include content-box($color-accent-2-list);
.content-block__instrument-label {
color: $color-accent-2-dark;
}
} }
/deep/ p { /deep/ p {

2
client/src/components/FilterBar.vue
View File

@ -65,7 +65,7 @@
z-index: 9; z-index: 9;
padding: 0 24px; padding: 0 24px;
height: 50px; height: 50px;
background-color: $color-lightgrey; background-color: $color-silver-light;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: left; justify-items: left;

8
client/src/components/HelpfulTooltip.vue
View File

@ -31,7 +31,7 @@
&__icon { &__icon {
width: 20px; width: 20px;
height: 20px; height: 20px;
fill: $color-grey; fill: $color-silver-dark;
} }
&__tooltip { &__tooltip {
@ -47,7 +47,7 @@
width: auto; width: auto;
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-grey; border: 1px solid $color-silver-dark;
border-radius: 5px; border-radius: 5px;
padding: $small-spacing; padding: $small-spacing;
@include small-text; @include small-text;
@ -58,8 +58,8 @@
left: 0; left: 0;
top: 18px; top: 18px;
margin-left: -1px; margin-left: -1px;
border-left: 1px solid $color-grey; border-left: 1px solid $color-silver-dark;
border-top: 1px solid $color-grey; border-top: 1px solid $color-silver-dark;
background-color: $color-white; background-color: $color-white;
width: 10px; width: 10px;
height: 10px; height: 10px;

2
client/src/components/LogoutWidget.vue
View File

@ -25,7 +25,7 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.logout-widget { .logout-widget {
color: $color-grey; color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;

2
client/src/components/MobileHeader.vue
View File

@ -48,7 +48,7 @@
&__hamburger { &__hamburger {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-grey; fill: $color-silver-dark;
} }
} }
</style> </style>

6
client/src/components/Modal.vue
View File

@ -58,7 +58,7 @@
background-color: $color-white; background-color: $color-white;
border-radius: 12px; border-radius: 12px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
display: -ms-grid; display: -ms-grid;
@supports (display: grid) { @supports (display: grid) {
display: grid; display: grid;
@ -130,7 +130,7 @@
grid-area: header; grid-area: header;
-ms-grid-row: 1; -ms-grid-row: 1;
padding: 10px $modal-lateral-padding; padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
} }
&__body { &__body {
@ -162,7 +162,7 @@
&__footer { &__footer {
grid-area: footer; grid-area: footer;
-ms-grid-row: 3; -ms-grid-row: 3;
border-top: 1px solid $color-lightgrey; border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding; padding: 16px $modal-lateral-padding;
} }
} }

2
client/src/components/MoreOptionsWidget.vue
View File

@ -39,7 +39,7 @@
&__ellipses { &__ellipses {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-top: -7px; margin-top: -7px;
} }

4
client/src/components/NewsTeaser.vue
View File

@ -22,13 +22,13 @@
.news-teaser { .news-teaser {
display: flex; display: flex;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
padding-bottom: $large-spacing; padding-bottom: $large-spacing;
text-align: center; text-align: center;
@include desktop { @include desktop {
border-bottom: 0; border-bottom: 0;
border-left: 1px solid $color-lightgrey; border-left: 1px solid $color-silver-light;
padding-bottom: 0; padding-bottom: 0;
text-align: left; text-align: left;
} }

4
client/src/components/SectionBlock.vue
View File

@ -54,7 +54,7 @@
.block-title { .block-title {
&__title, &__subtitle { &__title, &__subtitle {
color: $color-darkgrey-1; color: $color-charcoal-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
@ -86,7 +86,7 @@
font-weight: 600; font-weight: 600;
&--disabled { &--disabled {
color: $color-grey; color: $color-silver-dark;
} }
} }
} }

2
client/src/components/StudentSubmission.vue
View File

@ -54,7 +54,7 @@
grid-template-columns: 170px 1fr; grid-template-columns: 170px 1fr;
grid-column-gap: 80px; grid-column-gap: 80px;
align-items: center; align-items: center;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-silver-dark;
padding: 15px 0; padding: 15px 0;
&__student-name { &__student-name {

2
client/src/components/TopNavigation.vue
View File

@ -39,7 +39,7 @@
padding: 0 24px; padding: 0 24px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

6
client/src/components/UserWidget.vue
View File

@ -29,13 +29,13 @@
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.user-widget { .user-widget {
color: $color-grey; color: $color-silver-dark;
display: flex; display: flex;
align-items: center; align-items: center;
&__name { &__name {
padding: 0px 10px; padding: 0px 10px;
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
} }
@ -46,7 +46,7 @@
&__avatar { &__avatar {
width: 30px; width: 30px;
height: 30px; height: 30px;
fill: $color-grey; fill: $color-silver-dark;
} }
&--is-profile { &--is-profile {

2
client/src/components/book-navigation/BookTopicNavigation.vue
View File

@ -34,7 +34,7 @@
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: toRem(14px); font-size: toRem(14px);
margin-bottom: 20px; margin-bottom: 20px;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

2
client/src/components/content-blocks/DocumentBlock.vue
View File

@ -66,7 +66,7 @@
&__trash-icon { &__trash-icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
cursor: pointer; cursor: pointer;
justify-self: center; justify-self: center;
} }

5
client/src/components/content-blocks/InstrumentWidget.vue
View File

@ -2,7 +2,7 @@
<div class="instrument-widget"> <div class="instrument-widget">
<div class="instrument-widget__description" v-html="value.description"></div> <div class="instrument-widget__description" v-html="value.description"></div>
<router-link class="instrument-widget__button button" tag="button" <router-link class="instrument-widget__button button" tag="button"
:to="{name: 'instrument', params: { slug: value.slug }}">Instrument lesen :to="{name: 'instrument', params: { slug: value.slug }}">Instrument anzeigen
</router-link> </router-link>
</div> </div>
</template> </template>
@ -14,8 +14,9 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
.instrument-widget { .instrument-widget {
margin-bottom: 30px; margin-bottom: $small-spacing;
&__description { &__description {
margin-bottom: 25px; margin-bottom: 25px;

6
client/src/components/content-blocks/Solution.vue
View File

@ -42,7 +42,7 @@
&__toggle { &__toggle {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
font-size: toRem(15px); font-size: toRem(15px);
/*margin-bottom: 15px;*/ /*margin-bottom: 15px;*/
display: block; display: block;
@ -52,11 +52,11 @@
&__text { &__text {
font-size: toRem(18px); font-size: toRem(18px);
color: $color-grey; color: $color-silver-dark;
/deep/ p { /deep/ p {
font-size: toRem(18px); font-size: toRem(18px);
color: $color-grey; color: $color-silver-dark;
} }
} }
} }

16
client/src/components/content-blocks/SubtitleBlock.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<h5 class="subtitle" v-html="value.text"></h5>
</template>
<script>
export default {
props: ['value']
}
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.subtitle {
margin-bottom: $large-spacing;
}
</style>

7
client/src/components/content-blocks/assignment/Assignment.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div class="assignment"> <div class="assignment">
<h3 class="assignment__title" :id="id">{{assignment.title}}</h3>
<p class="assignment__assignment-text"> <p class="assignment__assignment-text">
{{assignment.assignment}} {{assignment.assignment}}
</p> </p>
@ -255,13 +254,13 @@
padding: 5px 0; padding: 5px 0;
margin-right: 15px; margin-right: 15px;
outline: 0; outline: 0;
color: $color-grey; color: $color-silver-dark;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: 2px solid transparent;
&--active { &--active {
border-bottom-color: $color-darkgrey-1; border-bottom-color: $color-charcoal-dark;
color: $color-darkgrey-1; color: $color-charcoal-dark;
} }
} }

4
client/src/components/content-blocks/assignment/SubmissionForm.vue
View File

@ -66,13 +66,13 @@
&__save-status-icon { &__save-status-icon {
width: 22px; width: 22px;
height: 22px; height: 22px;
fill: $color-grey; fill: $color-silver-dark;
margin-right: 8px; margin-right: 8px;
} }
&__save-status-text { &__save-status-text {
font-size: toRem(14px); font-size: toRem(14px);
color: $color-grey; color: $color-silver-dark;
} }
@keyframes spin { @keyframes spin {

4
client/src/components/content-forms/ContentBlockElementChooserWidget.vue
View File

@ -84,7 +84,7 @@
grid-column-gap: 0px; grid-column-gap: 0px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
text-align: center; text-align: center;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
padding: 30px 5px; padding: 30px 5px;
border-radius: 12px; border-radius: 12px;
margin-top: 20px; margin-top: 20px;
@ -126,7 +126,7 @@
position: absolute; position: absolute;
width: 20px; width: 20px;
height: 20px; height: 20px;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
border-bottom: 0; border-bottom: 0;
border-right: 0; border-right: 0;
background-color: white; background-color: white;

2
client/src/components/content-forms/DocumentForm.vue
View File

@ -73,7 +73,7 @@
& + label { & + label {
cursor: pointer; cursor: pointer;
background-color: $color-lightgrey; background-color: $color-silver-light;
height: 150px; height: 150px;
display: flex; display: flex;
width: 100%; width: 100%;

2
client/src/components/content-forms/ImageForm.vue
View File

@ -101,7 +101,7 @@
& + label { & + label {
cursor: pointer; cursor: pointer;
background-color: $color-lightgrey; background-color: $color-silver-light;
height: 150px; height: 150px;
display: flex; display: flex;
width: 100%; width: 100%;

2
client/src/components/inputs/BaseInput.vue
View File

@ -68,7 +68,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
display: flex; display: flex;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
box-sizing: border-box; box-sizing: border-box;

7
client/src/components/modules/Module.vue
View File

@ -147,7 +147,7 @@
display: flex; display: flex;
justify-self: center; justify-self: center;
@include desktop { @include desktop {
width: 640px; width: 800px;
} }
flex-direction: column; flex-direction: column;
padding: $large-spacing 15px; padding: $large-spacing 15px;
@ -166,9 +166,11 @@
} }
&__meta-title { &__meta-title {
font-size: 2.6rem; color: $color-silver-dark;
font-size: 2.25rem;
font-weight: 300; font-weight: 300;
font-family: $serif-font-family; font-family: $serif-font-family;
line-height: 3.25rem;
} }
&__intro { &__intro {
@ -184,5 +186,6 @@
} }
} }
} }
} }
</style> </style>

2
client/src/components/modules/ModuleNavigation.vue
View File

@ -101,7 +101,7 @@
@mixin module-navigation-typography { @mixin module-navigation-typography {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
} }

2
client/src/components/modules/ModuleTeaser.vue
View File

@ -56,7 +56,7 @@
} }
&__meta-title { &__meta-title {
color: $color-grey; color: $color-silver-dark;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
@include regular-text; @include regular-text;
} }

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

@ -57,7 +57,7 @@
} }
&__footer { &__footer {
border-top: 1px solid $color-lightgrey; border-top: 1px solid $color-silver-light;
padding: $small-spacing $medium-spacing; padding: $small-spacing $medium-spacing;
} }
} }

2
client/src/components/portfolio/ProjectActions.vue
View File

@ -108,7 +108,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
} }

2
client/src/components/portfolio/ProjectEntry.vue
View File

@ -98,7 +98,7 @@
&__date { &__date {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
font-size: toRem(17px); font-size: toRem(17px);
} }

2
client/src/components/profile/Avatar.vue
View File

@ -47,7 +47,7 @@
&__placeholder { &__placeholder {
height: $max-width; height: $max-width;
fill: $color-grey; fill: $color-silver-dark;
&--highlighted { &--highlighted {
fill: $color-brand; fill: $color-brand;

2
client/src/components/profile/Classlist.vue
View File

@ -35,7 +35,7 @@
&__item { &__item {
line-height: $height; line-height: $height;
height: $height; height: $height;
border-bottom: 1px solid $color-grey; border-bottom: 1px solid $color-silver-dark;
} }
} }

2
client/src/components/profile/ModuleActivity.vue
View File

@ -65,7 +65,7 @@
&__module-name { &__module-name {
@include small-text; @include small-text;
color: $color-grey; color: $color-silver-dark;
} }
} }

2
client/src/components/profile/PasswordChangeForm.vue
View File

@ -109,7 +109,7 @@
&__hint { &__hint {
margin-top: $small-spacing; margin-top: $small-spacing;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
color: $color-grey; color: $color-silver-dark;
} }
} }

2
client/src/components/rooms/EntryCountWidget.vue
View File

@ -27,7 +27,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }

2
client/src/components/rooms/RoomActions.vue
View File

@ -74,7 +74,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
} }

2
client/src/components/rooms/RoomGroupWidget.vue
View File

@ -29,7 +29,7 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }

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

@ -79,13 +79,13 @@
svg { svg {
width: 30px; width: 30px;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
margin-right: 15px; margin-right: 15px;
} }
&__content { &__content {
padding: 22px; padding: 22px;
color: $color-darkgrey-1; color: $color-charcoal-dark;
cursor: pointer; cursor: pointer;
/* /*

2
client/src/components/rooms/WidgetPopover.vue
View File

@ -40,7 +40,7 @@
&__link { &__link {
& > a { & > a {
display: inline-block; display: inline-block;
color: $color-grey; color: $color-silver-dark;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: toRem(14px); font-size: toRem(14px);
line-height: 1.5; line-height: 1.5;

2
client/src/components/visibility/VisibilityPopover.vue
View File

@ -112,7 +112,7 @@
.visibility-menu { .visibility-menu {
border-radius: 13px; border-radius: 13px;
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.15);
width: 180px; width: 180px;
box-sizing: border-box; box-sizing: border-box;

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

@ -165,7 +165,7 @@
} }
&__content { &__content {
background-color: rgba($color-darkgrey-1, 0.18); background-color: rgba($color-charcoal-dark, 0.18);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/*max-width: 840px;*/ /*max-width: 840px;*/

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

@ -131,7 +131,7 @@
&__content { &__content {
padding: 50px 15px; padding: 50px 15px;
background-color: rgba($color-darkgrey-1, 0.18); background-color: rgba($color-charcoal-dark, 0.18);
@include desktop { @include desktop {
columns: 4; columns: 4;
padding: 50px 60px; padding: 50px 60px;

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

@ -122,7 +122,7 @@
&__title { &__title {
color: $color-brand; color: $color-brand;
text-align: center; text-align: center;
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
padding-bottom: 30px; padding-bottom: 30px;
margin-left: 30px; margin-left: 30px;
margin-right: 30px; margin-right: 30px;
@ -182,7 +182,7 @@
} }
.news { .news {
background-color: $color-darkgrey-1; background-color: $color-charcoal-dark;
color: $color-white; color: $color-white;
padding-top: $large-spacing; padding-top: $large-spacing;
padding-bottom: $large-spacing; padding-bottom: $large-spacing;
@ -246,7 +246,7 @@
@include desktop { @include desktop {
text-align: left; text-align: left;
border-left: 1px solid $color-lightgrey; border-left: 1px solid $color-silver-light;
} }
} }
} }

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

@ -69,7 +69,7 @@
.topic { .topic {
&__teaser { &__teaser {
color: $color-darkgrey-1; color: $color-charcoal-dark;
width: 90%; width: 90%;
@include lead-paragraph; @include lead-paragraph;
margin-bottom: $large-spacing; margin-bottom: $large-spacing;

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

@ -1,5 +1,5 @@
.action-icon { .action-icon {
width: 40px; width: 40px;
height: 40px; height: 40px;
fill: $color-grey; fill: $color-silver-dark;
} }

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

@ -11,7 +11,7 @@
} }
&__meta { &__meta {
border-bottom: 1px solid $color-lightgrey; border-bottom: 1px solid $color-silver-light;
align-self: end; align-self: end;
padding: 20px 0; padding: 20px 0;
width: 100%; width: 100%;

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

@ -1,6 +1,6 @@
.button { .button {
background: transparent; background: transparent;
border: 2px solid $color-grey; border: 2px solid $color-silver-dark;
padding: 5px 15px; padding: 5px 15px;
border-radius: 3px; border-radius: 3px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
@ -20,8 +20,8 @@
background-color: $color-white; background-color: $color-white;
} }
&--disabled { &--disabled {
border: 2px solid $color-lightgrey; border: 2px solid $color-silver-light;
background-color: $color-lightgrey; background-color: $color-silver-light;
} }
} }
@ -35,7 +35,7 @@
&__icon { &__icon {
width: 25px; width: 25px;
height: 25px; height: 25px;
fill: $color-grey; fill: $color-silver-dark;
cursor: pointer; cursor: pointer;
justify-self: center; justify-self: center;
} }

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

@ -4,7 +4,7 @@
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.15);
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
max-width: 100%; max-width: 100%;
background-color: $color-white; background-color: $color-white;
} }

20
client/src/styles/_mixins.scss
View File

@ -8,7 +8,7 @@
@mixin widget-shadow { @mixin widget-shadow {
@include widget-shadow-base; @include widget-shadow-base;
border: 1px solid $color-lightgrey; border: 1px solid $color-silver-light;
} }
@mixin widget-shadow-reverse { @mixin widget-shadow-reverse {
@ -19,7 +19,7 @@
@mixin room-widget-text-style { @mixin room-widget-text-style {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-size: 1rem; font-size: 1rem;
fill: $color-darkgrey-1; fill: $color-charcoal-dark;
} }
@mixin input-box-shadow { @mixin input-box-shadow {
@ -57,14 +57,14 @@
} }
@mixin content-box($main-color) { @mixin content-box($color-list) {
background-color: rgba($main-color, 0.15); background-color: nth($color-list, 2);
padding: 15px; padding: 15px;
align-items: start; align-items: start;
border-radius: $default-border-radius; border-radius: $default-border-radius;
/deep/ .button { /deep/ .button {
border-color: $main-color; border-color: nth($color-list, 1);
background-color: $color-white; background-color: $color-white;
} }
} }
@ -77,7 +77,7 @@
@mixin main-title { @mixin main-title {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 700; font-weight: 800;
font-size: toRem(64px); font-size: toRem(64px);
} }
@ -96,7 +96,7 @@
@mixin heading-3 { @mixin heading-3 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
font-size: toRem(22px); font-size: toRem(24px);
} }
@mixin heading-4 { @mixin heading-4 {
@ -119,7 +119,7 @@
@mixin meta-title { @mixin meta-title {
font-family: $serif-font-family; font-family: $serif-font-family;
font-size: toRem(42px); font-size: toRem(36px);
} }
@mixin lead-paragraph { @mixin lead-paragraph {
@ -138,3 +138,7 @@
margin-bottom: $medium-spacing; margin-bottom: $medium-spacing;
@include heading-3; @include heading-3;
} }
@mixin light-border($border-position) {
border-#{$border-position}: 1px solid $color-silver;
}

14
client/src/styles/_objective-group.scss
View File

@ -1,13 +1,11 @@
@import 'variables'; @import 'variables';
@import 'mixins';
.objective-group { .objective-group {
background-color: $color-lightgrey;
padding: 17px;
margin-bottom: 35px; margin-bottom: 35px;
&__objective-list { &__objective-list {
padding-left: 20px; list-style: none;
list-style: disc;
&--no-list { &--no-list {
list-style: none; list-style: none;
@ -16,7 +14,13 @@
} }
&__objective { &__objective {
margin-bottom: 28px; padding: $small-spacing 0;
line-height: 1.5; line-height: 1.5;
@include light-border(top);
}
&:last-child {
@include light-border(bottom);
} }
} }

2
client/src/styles/_top-navigation.scss
View File

@ -6,7 +6,7 @@
padding: 0 24px; padding: 0 24px;
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-grey; color: $color-silver-dark;
&--active { &--active {
color: $color-brand; color: $color-brand;

22
client/src/styles/_typography.scss
View File

@ -5,12 +5,13 @@
* { * {
font-size: $base-font-size; font-size: $base-font-size;
font-weight: $font-weight-regular; font-weight: $font-weight-regular;
color: $color-darkgrey-1; color: $color-charcoal-dark;
} }
h1, h2, h3, h4, h5 { h1, h2, h3, h4, h5 {
font-family: $sans-serif-font-family; font-family: $sans-serif-font-family;
font-weight: 600; font-weight: 600;
color: $header-color
} }
p, a, li { p, a, li {
@ -30,26 +31,33 @@ a {
h1 { h1 {
font-size: 2rem; font-size: 2rem;
font-weight: 800; font-weight: 800;
color: $header-color; margin-bottom: 21px;
margin-bottom: 35px;
@include desktop { @include desktop {
font-size: 4rem; // 64px font-size: 4rem; // 64px
line-height: 4.5rem;
margin-bottom: 20px;
} }
} }
h2 { h2 {
font-size: 2.625rem; // 42px font-size: 2.75rem; // 44px
margin-bottom: 24px; margin-bottom: 24px;
} }
h3 { h3 {
font-size: 2.1875rem; // 35px font-size: 2.125rem; // 34px
margin-bottom: 24px; line-height: 2.63rem; // 42px
margin-bottom: 52px;
} }
h4 { h4 {
font-size: 1.3125rem; // 21px font-size: 1.5rem; // 24px
margin-bottom: 24px;
}
h5 {
font-size: 1.125rem; // 18px
margin-bottom: 24px; margin-bottom: 24px;
} }

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

@ -1,5 +1,5 @@
.uploadcare--panel { .uploadcare--panel {
background: $color-lightgrey; background: $color-silver-light;
height: 200px; height: 200px;
border: none; border: none;
border-radius: 0; border-radius: 0;

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

@ -19,6 +19,9 @@ $color-accent-5-dark: #09496F;
$color-accent-5: #004E7C; $color-accent-5: #004E7C;
$color-accent-5: #DBE6EC; $color-accent-5: #DBE6EC;
$color-accent-1-list: $color-accent-1 $color-accent-1-light $color-accent-1-dark;
$color-accent-2-list: $color-accent-2 $color-accent-2-light $color-accent-2-dark;
/* brand */ /* brand */
$color-brand-dark: #138E72; $color-brand-dark: #138E72;
$color-brand: #17A887; $color-brand: #17A887;
@ -27,17 +30,20 @@ $color-brand-light: #DCF2ED;
$color-error: #C02108; $color-error: #C02108;
/* greyscale */ /* greyscale */
$color-darkgrey-1: #333333; $color-silver: #d0d0d0;
$color-grey: #999999; $color-silver-light: #f0f0f0;
$color-silver-dark: #aaaaaa;
$color-charcoal: #616161;
$color-charcoal-light: #828282;
$color-charcoal-dark: #333333;
//$color-grey--lighter: rgba(51, 51, 51, 0.18); //$color-grey--lighter: rgba(51, 51, 51, 0.18);
$color-grey--lighter: transparent; $color-grey--lighter: transparent;
$color-lightgrey: #f0f0f0;
$color-white: #ffffff; $color-white: #ffffff;
$header-color: $color-charcoal-dark;
$intro-color: $color-silver-dark;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
$sans-serif-font-family: 'Montserrat', Arial, sans-serif; $sans-serif-font-family: 'Montserrat', Arial, sans-serif;
$serif-font-family: "ff-meta-serif-web-pro", serif; $serif-font-family: "ff-meta-serif-web-pro", serif;

4
server/books/blocks.py
View File

@ -73,6 +73,10 @@ class InfogramBlock(blocks.StructBlock):
class GeniallyBlock(blocks.StructBlock): class GeniallyBlock(blocks.StructBlock):
id = blocks.TextBlock() id = blocks.TextBlock()
class SubtitleBlock(blocks.StructBlock):
text = blocks.TextBlock()
# 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block' # 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
# #
# url = blocks.URLBlock() # url = blocks.URLBlock()

3
server/books/models/contentblock.py
View File

@ -6,7 +6,7 @@ from wagtail.core.fields import StreamField
from wagtail.images.blocks import ImageChooserBlock from wagtail.images.blocks import ImageChooserBlock
from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \ from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock
from core.wagtail_utils import StrictHierarchyPage from core.wagtail_utils import StrictHierarchyPage
from users.models import SchoolClass from users.models import SchoolClass
@ -46,6 +46,7 @@ class ContentBlock(StrictHierarchyPage):
('document_block', DocumentBlock()), ('document_block', DocumentBlock()),
('infogram_block', InfogramBlock()), ('infogram_block', InfogramBlock()),
('genially_block', GeniallyBlock()), ('genially_block', GeniallyBlock()),
('subtitle', SubtitleBlock()),
], null=True, blank=True) ], null=True, blank=True)
type = models.CharField( type = models.CharField(