nutomic/joinpeertube
1
1
Fork 1
Code Issues 5 Pull requests Releases Wiki Activity

Add mascot to the homepage

Browse source
This commit is contained in:
Chocobozzz 2019-10-30 17:19:58 +01:00
parent d672e45c60
commit 47844eb603
No known key found for this signature in database
GPG key ID: 583A612D890159BE
2 changed files with 68 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/icons/IconLogo.vue Normal file
View file

@ -0,0 +1,36 @@
<template>
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" viewBox="2799 -911 16 22" version="1.1" id="svg13" sodipodi:docname="logo.svg" width="16" height="22" inkscape:version="0.92.2 5c3e80d, 2017-08-06">
<g id="Artboard_1" data-name="Artboard – 1" class="cls-1" transform="translate(0.03356777,-1.9929667)">
<g id="Symbol_3_1" data-name="Symbol 3 – 1" transform="translate(2759,-975)">
<g id="Group_44" data-name="Group 44" transform="translate(0,2.333)">
<path id="Path_4" data-name="Path 4" class="cls-3" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,564)" inkscape:connector-curvature="0" style="fill:#211f20"/>
<path id="Path_5" data-name="Path 5" class="cls-4" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(989,574.667)" inkscape:connector-curvature="0" style="fill:#737373"/>
<path id="Path_6" data-name="Path 6" class="cls-5" d="m -949,-500 v 10.667 l 8,-5.333" transform="translate(997,569.333)" inkscape:connector-curvature="0" style="fill:#f1680d"/>
<path id="Path_7" data-name="Path 7" class="cls-6" d="M 0,0 V 10.667 L 8,5.333 Z" transform="rotate(180,24,40)" inkscape:connector-curvature="0" style="fill:rgba(255,255,255,0)"/>
</g>
</g>
</g>
</svg>
</template>
<style>
.cls-3 {
fill: #211f20;
}
.cls-4 {
fill: #737373;
}
.cls-5 {
fill: #f1680d;
}
.cls-6 {
fill: rgba(255, 255, 255, 0);
}
</style>
<script>
export default {}
</script>

35
src/views/Home.vue
View file

@ -8,6 +8,8 @@
<div class="description" v-translate>A free software to take back control of your videos</div>
</div>
<img class="peertube-mascot" :src="buildImgUrl(mascotPaths[currentMascot])" @click="switchMascot()" alt="PeerTube mascot">
<div class="marketing" v-translate>
With more than 100 000 hosted videos, viewed more than 6 millions times and 20 000 users,
PeerTube is the decentralized free software alternative to videos platforms developed by Framasoft
@ -15,7 +17,7 @@
<div class="buttons-row">
<a href="#what-is-peertube" class="jpt-button jpt-big-button-icon">
<icon-instance></icon-instance>
<icon-logo></icon-logo>
<span v-translate>What is PeerTube?</span>
</a>
@ -427,9 +429,14 @@
}
}
.peertube-mascot {
display: block;
margin: 30px auto 0;
}
.marketing {
font-size: 16px;
margin: 50px auto;
margin: 30px auto;
width: 500px;
text-align: center;
@ -485,17 +492,39 @@
import IconInstance from '../components/icons/IconInstance.vue'
import IconRight from '../components/icons/IconRight.vue'
import ContentSelections from '../components/ContentSelections'
import IconLogo from '../components/icons/IconLogo'
export default {
components: {
ContentSelections,
IconInstance,
IconRight
IconRight,
IconLogo
},
metaInfo: {
title: 'JoinPeerTube',
titleTemplate: null
},
data () {
return {
mascotPaths: [
'mascot/default.png',
'mascot/arguing.png',
'mascot/oh.png',
'mascot/defeated.png',
'mascot/happy.png'
],
currentMascot: 0
}
},
methods: {
switchMascot () {
this.currentMascot++
this.currentMascot %= this.mascotPaths.length
}
}
}
</script>