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

Add play icon to topic page

This commit is contained in:
Ramon Wenger 2019-03-12 10:35:51 +01:00
parent d36bbafb04
commit 4a834b8140
2 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/icons/Play.vue Normal file
View File

@ -0,0 +1,5 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M50,0a50,50,0,1,0,50,50A50,50,0,0,0,50,0ZM38,74V26L70,50Z" style="fill:#17a887"/>
</svg>
</template>

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

@ -5,6 +5,7 @@
{{topic.teaser}} {{topic.teaser}}
</p> </p>
<div v-if="topic.vimeoId" class="topic__video-link" @click="openVideo"> <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> <span class="topic__video-link-description">Video schauen</span>
</div> </div>
<div class="topic__modules"> <div class="topic__modules">
@ -15,11 +16,13 @@
<script> <script>
import ModuleTeaser from '@/components/modules/ModuleTeaser.vue'; import ModuleTeaser from '@/components/modules/ModuleTeaser.vue';
import Play from '@/components/icons/Play';
import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql'; import TOPIC_QUERY from '@/graphql/gql/topicQuery.gql';
export default { export default {
components: { components: {
ModuleTeaser ModuleTeaser,
Play
}, },
apollo: { apollo: {
@ -75,6 +78,13 @@
&__video-link { &__video-link {
margin-bottom: $large-spacing; margin-bottom: $large-spacing;
cursor: pointer; cursor: pointer;
display: flex;
align-items: center;
}
&__video-link-icon {
width: 40px;
margin-right: $medium-spacing;
} }
&__video-link-description { &__video-link-description {