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>
<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">
<!-- FIXME: replace with own css -->
<link href="https://surveyjs.azureedge.net/1.0.87/survey.css" type="text/css" rel="stylesheet"/>
<<<<<<< HEAD
=======
>>>>>>> Add import
<script>
window.UPLOADCARE_PUBLIC_KEY = '78212ff39934a59775ac';

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

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

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

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

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

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

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

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

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

@ -84,7 +84,7 @@
&__link {
display: block;
&: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;
&--selected {
border: 1px solid $color-darkgrey-1;
border: 1px solid $color-charcoal-dark;
}
}
&__selected-icon {
width: 17px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
}
&__color {

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

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

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

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

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

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

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

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

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

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

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

@ -58,7 +58,7 @@
background-color: $color-white;
border-radius: 12px;
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;
@supports (display: grid) {
display: grid;
@ -130,7 +130,7 @@
grid-area: header;
-ms-grid-row: 1;
padding: 10px $modal-lateral-padding;
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
}
&__body {
@ -162,7 +162,7 @@
&__footer {
grid-area: footer;
-ms-grid-row: 3;
border-top: 1px solid $color-lightgrey;
border-top: 1px solid $color-silver-light;
padding: 16px $modal-lateral-padding;
}
}

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

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

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

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

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

@ -54,7 +54,7 @@
.block-title {
&__title, &__subtitle {
color: $color-darkgrey-1;
color: $color-charcoal-dark;
font-family: $sans-serif-font-family;
}
@ -86,7 +86,7 @@
font-weight: 600;
&--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-column-gap: 80px;
align-items: center;
border-bottom: 1px solid $color-grey;
border-bottom: 1px solid $color-silver-dark;
padding: 15px 0;
&__student-name {

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

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

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

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

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

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

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

@ -66,7 +66,7 @@
&__trash-icon {
width: 25px;
height: 25px;
fill: $color-grey;
fill: $color-silver-dark;
cursor: pointer;
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__description" v-html="value.description"></div>
<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>
</div>
</template>
@ -14,8 +14,9 @@
</script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.instrument-widget {
margin-bottom: 30px;
margin-bottom: $small-spacing;
&__description {
margin-bottom: 25px;

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

@ -42,7 +42,7 @@
&__toggle {
font-family: $sans-serif-font-family;
color: $color-grey;
color: $color-silver-dark;
font-size: toRem(15px);
/*margin-bottom: 15px;*/
display: block;
@ -52,11 +52,11 @@
&__text {
font-size: toRem(18px);
color: $color-grey;
color: $color-silver-dark;
/deep/ p {
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>
<div class="assignment">
<h3 class="assignment__title" :id="id">{{assignment.title}}</h3>
<p class="assignment__assignment-text">
{{assignment.assignment}}
</p>
@ -255,13 +254,13 @@
padding: 5px 0;
margin-right: 15px;
outline: 0;
color: $color-grey;
color: $color-silver-dark;
cursor: pointer;
border-bottom: 2px solid transparent;
&--active {
border-bottom-color: $color-darkgrey-1;
color: $color-darkgrey-1;
border-bottom-color: $color-charcoal-dark;
color: $color-charcoal-dark;
}
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -35,7 +35,7 @@
&__item {
line-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 {
@include small-text;
color: $color-grey;
color: $color-silver-dark;
}
}

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

@ -109,7 +109,7 @@
&__hint {
margin-top: $small-spacing;
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 {
width: 30px;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
margin-right: 15px;
}

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

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

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

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

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

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

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

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

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

@ -112,7 +112,7 @@
.visibility-menu {
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);
width: 180px;
box-sizing: border-box;

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

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

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

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

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

@ -122,7 +122,7 @@
&__title {
color: $color-brand;
text-align: center;
border-bottom: 1px solid $color-lightgrey;
border-bottom: 1px solid $color-silver-light;
padding-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
@ -182,7 +182,7 @@
}
.news {
background-color: $color-darkgrey-1;
background-color: $color-charcoal-dark;
color: $color-white;
padding-top: $large-spacing;
padding-bottom: $large-spacing;
@ -246,7 +246,7 @@
@include desktop {
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 {
&__teaser {
color: $color-darkgrey-1;
color: $color-charcoal-dark;
width: 90%;
@include lead-paragraph;
margin-bottom: $large-spacing;

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

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

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

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

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

@ -1,6 +1,6 @@
.button {
background: transparent;
border: 2px solid $color-grey;
border: 2px solid $color-silver-dark;
padding: 5px 15px;
border-radius: 3px;
font-family: $sans-serif-font-family;
@ -20,8 +20,8 @@
background-color: $color-white;
}
&--disabled {
border: 2px solid $color-lightgrey;
background-color: $color-lightgrey;
border: 2px solid $color-silver-light;
background-color: $color-silver-light;
}
}
@ -35,7 +35,7 @@
&__icon {
width: 25px;
height: 25px;
fill: $color-grey;
fill: $color-silver-dark;
cursor: pointer;
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);
border-radius: 4px;
box-sizing: border-box;
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
max-width: 100%;
background-color: $color-white;
}

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

@ -8,7 +8,7 @@
@mixin widget-shadow {
@include widget-shadow-base;
border: 1px solid $color-lightgrey;
border: 1px solid $color-silver-light;
}
@mixin widget-shadow-reverse {
@ -19,7 +19,7 @@
@mixin room-widget-text-style {
font-family: $sans-serif-font-family;
font-size: 1rem;
fill: $color-darkgrey-1;
fill: $color-charcoal-dark;
}
@mixin input-box-shadow {
@ -57,14 +57,14 @@
}
@mixin content-box($main-color) {
background-color: rgba($main-color, 0.15);
@mixin content-box($color-list) {
background-color: nth($color-list, 2);
padding: 15px;
align-items: start;
border-radius: $default-border-radius;
/deep/ .button {
border-color: $main-color;
border-color: nth($color-list, 1);
background-color: $color-white;
}
}
@ -77,7 +77,7 @@
@mixin main-title {
font-family: $sans-serif-font-family;
font-weight: 700;
font-weight: 800;
font-size: toRem(64px);
}
@ -96,7 +96,7 @@
@mixin heading-3 {
font-family: $sans-serif-font-family;
font-weight: 600;
font-size: toRem(22px);
font-size: toRem(24px);
}
@mixin heading-4 {
@ -119,7 +119,7 @@
@mixin meta-title {
font-family: $serif-font-family;
font-size: toRem(42px);
font-size: toRem(36px);
}
@mixin lead-paragraph {
@ -138,3 +138,7 @@
margin-bottom: $medium-spacing;
@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 'mixins';
.objective-group {
background-color: $color-lightgrey;
padding: 17px;
margin-bottom: 35px;
&__objective-list {
padding-left: 20px;
list-style: disc;
list-style: none;
&--no-list {
list-style: none;
@ -16,7 +14,13 @@
}
&__objective {
margin-bottom: 28px;
padding: $small-spacing 0;
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;
font-family: $sans-serif-font-family;
font-weight: $font-weight-regular;
color: $color-grey;
color: $color-silver-dark;
&--active {
color: $color-brand;

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

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

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

@ -1,5 +1,5 @@
.uploadcare--panel {
background: $color-lightgrey;
background: $color-silver-light;
height: 200px;
border: none;
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: #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 */
$color-brand-dark: #138E72;
$color-brand: #17A887;
@ -27,17 +30,20 @@ $color-brand-light: #DCF2ED;
$color-error: #C02108;
/* greyscale */
$color-darkgrey-1: #333333;
$color-grey: #999999;
$color-silver: #d0d0d0;
$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: transparent;
$color-lightgrey: #f0f0f0;
$color-white: #ffffff;
$header-color: $color-darkgrey-1;
$intro-color: $color-grey;
$header-color: $color-charcoal-dark;
$intro-color: $color-silver-dark;
$sans-serif-font-family: 'Montserrat', Arial, sans-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):
id = blocks.TextBlock()
class SubtitleBlock(blocks.StructBlock):
text = blocks.TextBlock()
# 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
#
# 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 books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock
ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock
from core.wagtail_utils import StrictHierarchyPage
from users.models import SchoolClass
@ -46,6 +46,7 @@ class ContentBlock(StrictHierarchyPage):
('document_block', DocumentBlock()),
('infogram_block', InfogramBlock()),
('genially_block', GeniallyBlock()),
('subtitle', SubtitleBlock()),
], null=True, blank=True)
type = models.CharField(