diff --git a/client/src/App.vue b/client/src/App.vue
index af50e398..b80a48b6 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -19,6 +19,7 @@
import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
import FullscreenImage from '@/components/FullscreenImage';
import FullscreenInfographic from '@/components/FullscreenInfographic';
+ import FullscreenVideo from '@/components/FullscreenVideo';
export default {
name: 'App',
@@ -36,7 +37,8 @@
EditObjectiveGroupWizard,
NewProjectEntryWizard,
FullscreenImage,
- FullscreenInfographic
+ FullscreenInfographic,
+ FullscreenVideo
},
computed: {
diff --git a/client/src/components/FullscreenVideo.vue b/client/src/components/FullscreenVideo.vue
new file mode 100644
index 00000000..82a474a4
--- /dev/null
+++ b/client/src/components/FullscreenVideo.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/client/src/graphql/gql/topicQuery.gql b/client/src/graphql/gql/topicQuery.gql
index 38a3a931..e3538f3f 100644
--- a/client/src/graphql/gql/topicQuery.gql
+++ b/client/src/graphql/gql/topicQuery.gql
@@ -5,6 +5,7 @@ query Topic($slug: String!){
title
teaser
description
+ vimeoId
modules {
edges {
node {
diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue
index 226dc281..8d3511bc 100644
--- a/client/src/pages/topic.vue
+++ b/client/src/pages/topic.vue
@@ -4,6 +4,9 @@
{{topic.teaser}}
+
+ Video schauen
+
@@ -39,6 +42,12 @@
}
},
+ methods: {
+ openVideo() {
+ this.$store.dispatch('showFullscreenVideo', this.topic.vimeoId);
+ }
+ },
+
data() {
return {
topic: {
@@ -60,6 +69,16 @@
color: $color-darkgrey-1;
width: 90%;
@include lead-paragraph;
+ margin-bottom: $large-spacing;
+ }
+
+ &__video-link {
+ margin-bottom: $large-spacing;
+ cursor: pointer;
+ }
+
+ &__video-link-description {
+ @include heading-3;
}
&__modules {
diff --git a/client/src/store/index.js b/client/src/store/index.js
index 58dcd61b..b0a045f4 100644
--- a/client/src/store/index.js
+++ b/client/src/store/index.js
@@ -23,7 +23,8 @@ export default new Vuex.Store({
infographic: {
id: 0,
type: ''
- }
+ },
+ vimeoId: null
},
getters: {},
@@ -51,6 +52,7 @@ export default new Vuex.Store({
id: 0,
type: ''
});
+ commit('setVimeoId', null);
},
resetContentBlockPosition({commit}) {
commit('setContentBlockPosition', {});
@@ -102,6 +104,10 @@ export default new Vuex.Store({
commit('setInfographic', payload);
dispatch('showModal', 'fullscreen-infographic');
},
+ showFullscreenVideo({commit, dispatch}, payload) {
+ commit('setVimeoId', payload);
+ dispatch('showModal', 'fullscreen-video');
+ },
},
mutations: {
@@ -149,6 +155,9 @@ export default new Vuex.Store({
},
setInfographic(state, payload) {
state.infographic = payload;
+ },
+ setVimeoId(state, payload) {
+ state.vimeoId = payload;
}
}
})
diff --git a/server/books/migrations/0009_topic_vimeo_id.py b/server/books/migrations/0009_topic_vimeo_id.py
new file mode 100644
index 00000000..9af87cf2
--- /dev/null
+++ b/server/books/migrations/0009_topic_vimeo_id.py
@@ -0,0 +1,18 @@
+# Generated by Django 2.0.6 on 2019-03-11 15:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('books', '0008_auto_20190301_0954'),
+ ]
+
+ operations = [
+ migrations.AddField(
+ model_name='topic',
+ name='vimeo_id',
+ field=models.CharField(default=None, max_length=200, null=True),
+ ),
+ ]
diff --git a/server/books/models/topic.py b/server/books/models/topic.py
index d3c89890..8f8079fd 100644
--- a/server/books/models/topic.py
+++ b/server/books/models/topic.py
@@ -18,11 +18,13 @@ class Topic(StrictHierarchyPage):
order = models.PositiveIntegerField(null=False, blank=False, help_text='Order of the topic')
teaser = models.TextField()
description = RichTextField(features=DEFAULT_RICH_TEXT_FEATURES)
+ vimeo_id = models.CharField(max_length=200, null=True, default=None)
content_panels = [
FieldPanel('title', classname="full title"),
FieldPanel('order'),
FieldPanel('teaser'),
+ FieldPanel('vimeo_id'),
FieldPanel('description'),
]
diff --git a/server/books/schema/queries.py b/server/books/schema/queries.py
index 7e6d76f0..3473a790 100644
--- a/server/books/schema/queries.py
+++ b/server/books/schema/queries.py
@@ -118,7 +118,7 @@ class TopicNode(DjangoObjectType):
class Meta:
model = Topic
only_fields = [
- 'slug', 'title', 'meta_title', 'teaser', 'description',
+ 'slug', 'title', 'meta_title', 'teaser', 'description', 'vimeo_id'
]
filter_fields = {
'slug': ['exact', 'icontains', 'in'],