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

Merge branch 'develop'

This commit is contained in:
Ramon Wenger 2020-10-08 16:51:54 +02:00
parent ffd87e57bf 58833f3aae
commit f201de2d46
15 changed files with 162 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
bitbucket-pipelines.yml
View File

@ -19,13 +19,14 @@ definitions:
caches: caches:
npm: $HOME/.npm npm: $HOME/.npm
cypress: $HOME/.cache/Cypress cypress: $HOME/.cache/Cypress
clientmodules: client/node_modules
aliases: aliases:
- &lint - &lint
name: lint name: lint
caches: caches:
- node - clientmodules
script: script:
- npm install --prefix client - npm install --prefix client
- npm run lint --prefix client - npm run lint --prefix client
@ -43,6 +44,7 @@ aliases:
caches: caches:
- pip - pip
- node - node
- clientmodules
- npm - npm
artifacts: artifacts:
- client/cypress/**/*.png - client/cypress/**/*.png
@ -64,6 +66,7 @@ aliases:
name: run jest tests name: run jest tests
caches: caches:
- node - node
- clientmodules
script: script:
- echo "This pipeline rules!" - echo "This pipeline rules!"
- *setup-tests - *setup-tests

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

@ -248,7 +248,7 @@
@import "@/styles/_mixins.scss"; @import "@/styles/_mixins.scss";
.content-block { .content-block {
margin-bottom: 2.5em; margin-bottom: $section-spacing;
position: relative; position: relative;
&__container { &__container {
@ -257,10 +257,11 @@
&__title { &__title {
line-height: 1.5; line-height: 1.5;
margin-top: -0.5rem; // to offset the 1.5 line height, it leaves a padding on top
} }
&__instrument-label { &__instrument-label {
margin-bottom: 0; margin-bottom: $medium-spacing;
@include regular-text(); @include regular-text();
} }
@ -286,7 +287,9 @@
.content-block__title { .content-block__title {
color: $color-brand; color: $color-brand;
margin-top: $default-padding; margin-top: $default-padding;
margin-bottom: $large-spacing;
@include light-border(bottom); @include light-border(bottom);
@include desktop { @include desktop {
margin-top: 0; margin-top: 0;
} }

179
client/src/components/content-blocks/ContentComponent.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div <div
:class="{'content-component--bookmarked': bookmarked}" :class="componentClass"
:data-scrollto="component.id" :data-scrollto="component.id"
class="content-component"> >
<bookmark-actions <bookmark-actions
:bookmarked="bookmarked" :bookmarked="bookmarked"
:note="note" :note="note"
@ -19,96 +19,117 @@
</template> </template>
<script> <script>
import {mapGetters} from 'vuex'; import {mapGetters} from 'vuex';
import TextBlock from '@/components/content-blocks/TextBlock'; import TextBlock from '@/components/content-blocks/TextBlock';
import InstrumentWidget from '@/components/content-blocks/InstrumentWidget'; import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
import ImageBlock from '@/components/content-blocks/ImageBlock'; import ImageBlock from '@/components/content-blocks/ImageBlock';
import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock'; import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
import VideoBlock from '@/components/content-blocks/VideoBlock'; import VideoBlock from '@/components/content-blocks/VideoBlock';
import LinkBlock from '@/components/content-blocks/LinkBlock'; import LinkBlock from '@/components/content-blocks/LinkBlock';
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 ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock'; import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
import GeniallyBlock from '@/components/content-blocks/GeniallyBlock'; import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
import SubtitleBlock from '@/components/content-blocks/SubtitleBlock'; import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock'; import SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
import ContentListBlock from '@/components/content-blocks/ContentListBlock'; import ContentListBlock from '@/components/content-blocks/ContentListBlock';
import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug'; import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
import Assignment from '@/components/content-blocks/assignment/Assignment'; import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock'; import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution'; import Solution from '@/components/content-blocks/Solution';
import Instruction from '@/components/content-blocks/Instruction'; import Instruction from '@/components/content-blocks/Instruction';
import BookmarkActions from '@/components/notes/BookmarkActions'; import BookmarkActions from '@/components/notes/BookmarkActions';
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation'; import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
export default { export default {
props: ['component', 'parent', 'bookmarks', 'notes', 'root'], props: ['component', 'parent', 'bookmarks', 'notes', 'root'],
components: { components: {
'text_block': TextBlock, 'text_block': TextBlock,
'basic_knowledge': InstrumentWidget, // for legacy 'basic_knowledge': InstrumentWidget, // for legacy
'instrument': InstrumentWidget, 'instrument': InstrumentWidget,
'image_block': ImageBlock, 'image_block': ImageBlock,
'image_url_block': ImageUrlBlock, 'image_url_block': ImageUrlBlock,
'video_block': VideoBlock, 'video_block': VideoBlock,
'link_block': LinkBlock, 'link_block': LinkBlock,
'document_block': DocumentBlock, 'document_block': DocumentBlock,
'infogram_block': InfogramBlock, 'infogram_block': InfogramBlock,
'genially_block': GeniallyBlock, 'genially_block': GeniallyBlock,
'subtitle': SubtitleBlock, 'subtitle': SubtitleBlock,
'section_title': SectionTitleBlock, 'section_title': SectionTitleBlock,
'content_list': ContentListBlock, 'content_list': ContentListBlock,
'module_room_slug': ModuleRoomSlug, 'module_room_slug': ModuleRoomSlug,
'thinglink_block': ThinglinkBlock, 'thinglink_block': ThinglinkBlock,
Survey, Survey,
Solution, Solution,
Instruction, Instruction,
Assignment, Assignment,
BookmarkActions BookmarkActions
},
computed: {
...mapGetters(['editModule']),
bookmarked() {
return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
}, },
note() {
computed: { const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
...mapGetters(['editModule']), return bookmark && bookmark.note;
bookmarked() {
return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
},
note() {
const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
return bookmark && bookmark.note;
},
showBookmarkActions() {
return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
}
}, },
showBookmarkActions() {
methods: { return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
addNote(id) { },
this.$store.dispatch('addNote', { componentClass() {
content: id, let classes = ['content-component', `content-component--${this.component.type}`];
type: this.parent.__typename, if (this.bookmarked) {
block: this.root classes.push('content-component--bookmarked');
});
},
editNote() {
this.$store.dispatch('editNote', this.note);
},
bookmarkContent(uuid, bookmarked) {
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
} }
return classes;
} }
}; },
methods: {
addNote(id) {
this.$store.dispatch('addNote', {
content: id,
type: this.parent.__typename,
block: this.root
});
},
editNote() {
this.$store.dispatch('editNote', this.note);
},
bookmarkContent(uuid, bookmarked) {
this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
.content-component { .content-component {
position: relative; position: relative;
&--bookmarked { &--bookmarked {
}
} }
&--subtitle {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--section_title {
margin-top: $section-spacing;
margin-bottom: $large-spacing;
}
&--text_block {
margin-bottom: $large-spacing;
}
}
</style> </style>

3
client/src/components/content-blocks/SectionTitleBlock.vue
View File

@ -12,9 +12,10 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.section-title { .section-title {
margin-bottom: 30px; margin-bottom: 30px;
line-height: $default-heading-line-height; @include heading-line-height;
} }
</style> </style>

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

@ -12,9 +12,12 @@
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss"; @import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.subtitle { .subtitle {
padding-top: 1px; padding-top: 1px;
margin-bottom: $large-spacing; margin-bottom: $medium-spacing;
line-height: $default-heading-line-height; margin-bottom: calc(#{$large-spacing} - 0.1rem);
@include heading-line-height;
} }
</style> </style>

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

@ -11,7 +11,10 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
.text-block { .text-block {
margin-bottom: 30px; margin-bottom: $medium-spacing; // if calc is not supported
margin-bottom: calc(#{$large-spacing} - 0.25rem); // to offset the 1.5 line height, which leaves a padding
} }
</style> </style>

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

@ -26,11 +26,13 @@
<h3 id="objectives">Lernziele</h3> <h3 id="objectives">Lernziele</h3>
<objective-groups :groups="languageCommunicationObjectiveGroups"/> <div class="module__objective-groups">
<objective-groups :groups="languageCommunicationObjectiveGroups"/>
<objective-groups :groups="societyObjectiveGroups"/> <objective-groups :groups="societyObjectiveGroups"/>
<objective-groups :groups="interdisciplinaryObjectiveGroups"/> <objective-groups :groups="interdisciplinaryObjectiveGroups"/>
</div>
<chapter <chapter
:chapter="chapter" :chapter="chapter"
@ -254,12 +256,9 @@
} }
&__intro { &__intro {
line-height: 1.5;
margin-bottom: 3em;
> /deep/ p { > /deep/ p {
font-size: toRem(25px); font-size: toRem(25px);
margin-bottom: 1.5em; margin-bottom: $large-spacing;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -271,5 +270,8 @@
margin-top: 3px; margin-top: 3px;
} }
&__objective-groups {
margin-bottom: $large-spacing;
}
} }
</style> </style>

3
client/src/components/objective-groups/ObjectiveGroup.vue
View File

@ -58,8 +58,11 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
.objective-group { .objective-group {
position: relative; position: relative;
margin-top: $large-spacing;
&__actions { &__actions {
position: absolute; position: absolute;

12
client/src/components/objective-groups/ObjectiveGroups.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div> <div class="objective-groups">
<objective-group <objective-group
:key="group.id" :key="group.id"
:group="group" :group="group"
@ -63,3 +63,13 @@
} }
}; };
</script> </script>
<style scoped lang="scss">
@import "@/styles/_variables.scss";
.objective-groups {
margin-bottom: $large-spacing;
display: flex;
flex-direction: column;
}
</style>

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

@ -37,9 +37,9 @@
margin-bottom: 25px; margin-bottom: 25px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
break-inside: avoid-page; break-inside: avoid-column;
cursor: pointer;
overflow: hidden; overflow: hidden;
cursor: pointer;
display: none; display: none;
@include desktop { @include desktop {

8
client/src/pages/instrument.vue
View File

@ -55,13 +55,17 @@
.instrument { .instrument {
&__title { &__title {
font-size: toRem(35px); font-size: toRem(35px);
margin-bottom: 40px; margin-bottom: $large-spacing;
line-height: $default-heading-line-height; line-height: $default-heading-line-height;
} }
& /deep/ { & /deep/ {
& p { & p {
margin-bottom: 40px; margin-bottom: $large-spacing;
}
& p:last-child {
margin-bottom: 0;
} }
& ul { & ul {

1
client/src/styles/_intro.scss
View File

@ -1,5 +1,6 @@
.intro { .intro {
@include lead-paragraph; @include lead-paragraph;
margin-bottom: $section-spacing;
> p { > p {
@include lead-paragraph; @include lead-paragraph;

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

@ -206,3 +206,8 @@
@mixin default-box-shadow { @mixin default-box-shadow {
box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.12);
} }
@mixin heading-line-height {
line-height: $default-heading-line-height;
margin-top: -0.2rem; // to offset the 1.2 line height, it leaves a padding on top
}

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

@ -2,8 +2,6 @@
@import 'mixins'; @import 'mixins';
.objective-group { .objective-group {
margin-bottom: 35px;
&__objective-list { &__objective-list {
list-style: none; list-style: none;

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

@ -22,6 +22,7 @@ p, a, li {
p { p {
line-height: 1.5; line-height: 1.5;
margin-top: -0.25rem; // to offset the 1.5 line height, it leaves a padding on top
} }
a { a {
@ -43,22 +44,22 @@ h1 {
h2 { h2 {
font-size: 2.75rem; // 44px font-size: 2.75rem; // 44px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
h3 { h3 {
font-size: 2.125rem; // 34px font-size: 2.125rem; // 34px
margin-bottom: 52px; margin-bottom: $large-spacing;
} }
h4 { h4 {
font-size: 1.5rem; // 24px font-size: 1.5rem; // 24px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
h5 { h5 {
font-size: 1.125rem; // 18px font-size: 1.125rem; // 18px
margin-bottom: 24px; margin-bottom: $large-spacing;
} }
input, textarea, select, button { input, textarea, select, button {