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

Merged in feature/instructions (pull request #58) 

Feature/instructions

Approved-by: Christian Cueni
This commit is contained in:
Ramon Wenger 2020-04-14 07:33:17 +00:00
parent 9bf7f2e9fa dcd9f0a92c
commit dbcad5e0f7
11 changed files with 147 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
client/package-lock.json generated
View File

@ -9130,8 +9130,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@ -9149,13 +9148,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -9168,18 +9165,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@ -9282,8 +9276,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@ -9293,7 +9286,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -9306,20 +9298,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@ -9336,7 +9325,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -9409,8 +9397,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@ -9420,7 +9407,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -9496,8 +9482,7 @@
},
"safe-buffer": {
"version": "5.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@ -9527,7 +9512,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -9545,7 +9529,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -9584,13 +9567,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.2",
"bundled": true,
"optional": true
"bundled": true
}
}
},
@ -11636,8 +11617,7 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"aproba": {
"version": "1.2.0",
@ -11680,8 +11660,7 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"concat-map": {
"version": "0.0.1",
@ -11692,8 +11671,7 @@
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"core-util-is": {
"version": "1.0.2",
@ -11810,8 +11788,7 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"ini": {
"version": "1.3.5",
@ -11823,7 +11800,6 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -11853,7 +11829,6 @@
"version": "2.3.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -11872,7 +11847,6 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -11966,7 +11940,6 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -12052,8 +12025,7 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"safer-buffer": {
"version": "2.1.2",
@ -12089,7 +12061,6 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -12109,7 +12080,6 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -12153,14 +12123,12 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true
"dev": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"dev": true,
"optional": true
"dev": true
}
}
},

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

@ -38,6 +38,7 @@
import Assignment from '@/components/content-blocks/assignment/Assignment';
import Survey from '@/components/content-blocks/SurveyBlock';
import Solution from '@/components/content-blocks/Solution';
import Instruction from '@/components/content-blocks/Instruction';
import BookmarkActions from '@/components/notes/BookmarkActions';
import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';
@ -63,6 +64,7 @@
'thinglink_block': ThinglinkBlock,
Survey,
Solution,
Instruction,
Assignment,
BookmarkActions
},

50
client/src/components/content-blocks/Instruction.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<div class="instruction" v-if="me.isTeacher">
<bulb-icon class="instruction__icon"></bulb-icon>
<a class="instruction__link" :href="value.url">{{text}}</a>
</div>
</template>
<script>
import me from '@/mixins/me';
import BulbIcon from '@/components/icons/BulbIcon';
export default {
props: ['value'],
mixins: [me],
components: {
BulbIcon
},
computed: {
text() {
return this.value.text ? this.value.text : 'Anweisungen'
}
}
}
</script>
<style scoped lang="scss">
@import "@/styles/_mixins.scss";
.instruction {
margin-bottom: 1rem;
display: flex;
align-items: center;
&__icon {
width: 40px;
height: 40px;
background-color: $color-brand;
fill: $color-white;
border-radius: 20px;
margin-right: $small-spacing;
}
&__link {
@include heading-3;
}
}
</style>

10
client/src/components/icons/BulbIcon.vue Normal file
View File

@ -0,0 +1,10 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
<path
d="M50,6.41C25.74,6.41,6,26,6,50S25.74,93.59,50,93.59,94,74,94,50,74.26,6.41,50,6.41Zm0,82.43A39.1,39.1,0,0,1,10.74,50a39.26,39.26,0,0,1,78.52,0A39.1,39.1,0,0,1,50,88.85Z"/>
<path
d="M50,22.72A19,19,0,0,0,30.91,41.64a18.72,18.72,0,0,0,6.36,14.13c1.21,1.2,1.66.89,1.68,2.78l0,.84a3.34,3.34,0,0,0,1,2.47,3.53,3.53,0,0,0,2.38,1H57.64a3.39,3.39,0,0,0,2.39-1,3.55,3.55,0,0,0,1-2.57c-.06-1.61.22-2.1,1.75-3.62A18.87,18.87,0,0,0,50,22.72ZM64.35,41.64a14.26,14.26,0,0,1-4.77,10.52l-.24.24c-2.48,2.45-3,3.61-3,5.7H43.67c-.07-2.08-.57-3.22-3.18-5.8A14.27,14.27,0,1,1,64.35,41.64Z"/>
<path
d="M56.43,78.67H43.57a4,4,0,0,1-4-4v-4a4,4,0,0,1,4-4H56.43a4,4,0,0,1,4,4v4A4,4,0,0,1,56.43,78.67ZM43.57,70.76v4H56.43v-4Z"/>
</svg>
</template>

1
client/src/graphql/gql/topicQuery.gql
View File

@ -6,6 +6,7 @@ query Topic($slug: String!){
teaser
description
vimeoId
instructions
modules {
edges {
node {

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

@ -4,9 +4,16 @@
<p class="topic__teaser">
{{topic.teaser}}
</p>
<div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo">
<play class="topic__video-link-icon"></play>
<span class="topic__video-link-description">Video schauen</span>
<div class="topic__links">
<div v-if="topic.vimeoId" class="topic__video-link topic__link" @click="openVideo">
<play-icon class="topic__video-link-icon topic__link-icon"></play-icon>
<span class="topic__link-description">Video schauen</span>
</div>
<a target="_blank" :href="topic.instructions" v-if="me.isTeacher && topic.instructions" class="topic__instruction-link topic__link">
<bulb-icon class="topic__instruction-icon topic__link-icon"></bulb-icon>
<span class="topic__link-description">Anweisungen zum Thema anzeigen</span>
</a>
</div>
<div class="topic__modules">
<module-teaser v-for="module in modules" :key="module.id" v-bind="module"></module-teaser>
@ -16,15 +23,20 @@
<script>
import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
import Play from '@/components/icons/Play';
import PlayIcon from '@/components/icons/Play';
import BulbIcon from '@/components/icons/BulbIcon';
import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
import me from '@/mixins/me';
export default {
components: {
ModuleTeaser,
Play
PlayIcon,
BulbIcon
},
mixins: [me],
apollo: {
topic() {
return {
@ -75,22 +87,37 @@
margin-bottom: $large-spacing;
}
&__video-link {
&__links {
margin-bottom: $large-spacing;
display: flex;
}
&__link {
cursor: pointer;
display: flex;
align-items: center;
}
&__video-link-icon {
&__video-link {
margin-right: $large-spacing;
}
&__link-icon {
width: 40px;
height: 40px;
margin-right: $medium-spacing;
}
&__video-link-description {
&__link-description {
@include heading-3;
}
&__instruction-icon {
fill: $color-white;
border-radius: 20px;
background-color: $color-brand;
}
&__modules {
margin-top: 40px;
display: flex;

8
server/books/blocks.py
View File

@ -110,6 +110,14 @@ class ModuleRoomSlugBlock(blocks.StructBlock):
title = blocks.TextBlock()
class InstructionBlock(blocks.StructBlock):
class Meta:
icon = 'help'
url = blocks.URLBlock()
text = blocks.TextBlock(required=False)
# 'text_block' 'task' 'basic_knowledge' 'student_entry' 'image_block'
#
# url = blocks.URLBlock()

18
server/books/migrations/0020_topic_instructions.py Normal file
View File

@ -0,0 +1,18 @@
# Generated by Django 2.1.15 on 2020-04-10 18:43
from django.db import migrations, models
class Migration(migrations.Migration):
dependencies = [
('books', '0019_auto_20200408_0841'),
]
operations = [
migrations.AddField(
model_name='topic',
name='instructions',
field=models.CharField(blank=True, default=None, max_length=255, null=True),
),
]

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

@ -8,7 +8,7 @@ from wagtail.images.blocks import ImageChooserBlock
from books.blocks import TextBlock, BasicKnowledgeBlock, LinkBlock, VideoBlock, DocumentBlock, \
ImageUrlBlock, AssignmentBlock, InfogramBlock, GeniallyBlock, SubtitleBlock, SurveyBlock, ModuleRoomSlugBlock, \
ThinglinkBlock
ThinglinkBlock, InstructionBlock
from books.utils import get_type_and_value
from core.wagtail_utils import StrictHierarchyPage
from notes.models import ContentBlockBookmark
@ -60,6 +60,7 @@ class ContentBlock(StrictHierarchyPage):
('genially_block', GeniallyBlock()),
('thinglink_block', ThinglinkBlock()),
('subtitle', SubtitleBlock()),
('instruction', InstructionBlock()),
('module_room_slug', ModuleRoomSlugBlock())
]

2
server/books/models/topic.py
View File

@ -19,12 +19,14 @@ class Topic(StrictHierarchyPage):
teaser = models.TextField()
description = RichTextField(features=DEFAULT_RICH_TEXT_FEATURES)
vimeo_id = models.CharField(max_length=200, blank=True, null=True, default=None)
instructions = models.CharField(max_length=255, blank=True, null=True, default=None)
content_panels = [
FieldPanel('title', classname="full title"),
FieldPanel('order'),
FieldPanel('teaser'),
FieldPanel('vimeo_id'),
FieldPanel('instructions'),
FieldPanel('description'),
]

2
server/books/schema/queries.py
View File

@ -194,7 +194,7 @@ class TopicNode(DjangoObjectType):
class Meta:
model = Topic
only_fields = [
'slug', 'title', 'meta_title', 'teaser', 'description', 'vimeo_id', 'order'
'slug', 'title', 'meta_title', 'teaser', 'description', 'vimeo_id', 'order', 'instructions'
]
filter_fields = {
'slug': ['exact', 'icontains', 'in'],