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

Add instructions to client

This commit is contained in:
Ramon Wenger 2020-04-10 21:28:39 +02:00
parent 8774b8d324
commit c1ac3e779f
4 changed files with 64 additions and 58 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
}
}
},

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;