Niquarl/joinpeertube
1
0
Fork 0
forked from nutomic/joinpeertube
Code Issues Pull requests Releases Wiki Activity

Fix buttons with icons

Browse source
This commit is contained in:
Chocobozzz 2019-09-11 17:36:26 +02:00
parent 414c3101dd
commit b9f7a681d3
No known key found for this signature in database
GPG key ID: 583A612D890159BE
5 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/components/ContentSelection.vue
View file

@ -4,18 +4,18 @@
<div class="left"> <div class="left">
<img :src="thumbnailUrl" alt="thumbnail"/> <img :src="thumbnailUrl" alt="thumbnail"/>
<button class="jpt-button jpt-button-light"> <button class="jpt-button jpt-button-medium">
<span v-if="type === 'video'"> <span class="span-wrapper" v-if="type === 'video'">
<icon-video></icon-video> <icon-video></icon-video>
Watch the video Watch the video
</span> </span>
<span v-if="type === 'channel'"> <span class="span-wrapper" v-if="type === 'channel'">
<icon-channel></icon-channel> <icon-channel></icon-channel>
Discover the channel Discover the channel
</span> </span>
<span v-if="type === 'instance'"> <span class="span-wrapper" v-if="type === 'instance'">
<icon-instance></icon-instance> <icon-instance></icon-instance>
Go on the instance Go on the instance
</span> </span>
@ -66,6 +66,22 @@
margin-top: 30px; margin-top: 30px;
width: 250px; width: 250px;
height: 35px; height: 35px;
.span-wrapper {
display: block;
width: 100%;
position: relative;
}
svg {
width: 20px;
height: 20px;
position: absolute;
left: 24px;
top: 0;
bottom: 0;
margin: auto;
}
} }
} }

12
src/components/icons/IconInstance.vue
View file

@ -1,10 +1,12 @@
<template> <template>
<svg width="41px" height="20px" viewBox="0 0 41 20" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg width="18" height="18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="">
xmlns:xlink="http://www.w3.org/1999/xlink"> <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
<g id="icone/instance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g class="currentLayer" style=""><title>Layer 1</title>
<g id="icone/instance" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" class="">
<path <path
d="M26.5555556,17.7777778 L26.5555556,9.86666667 L27.6666667,10.9777778 L27.6666667,17.7777778 C27.6666667,18.3914275 27.1692053,18.8888889 26.5555556,18.8888889 L22.6666667,18.8888889 L22.6666667,13.3333333 L19.3333333,13.3333333 L19.3333333,18.8888889 L15.4444444,18.8888889 C14.8307947,18.8888889 14.3333333,18.3914275 14.3333333,17.7777778 L14.3333333,11.1111111 L15.4444444,10 L15.4444444,17.7777778 L18.2222222,17.7777778 L18.2222222,12.2222222 L23.7777778,12.2222222 L23.7777778,17.7777778 L26.5555556,17.7777778 Z M29.7277778,9.60555556 L29.7222222,9.61111111 C29.9109871,9.83153349 29.8982957,10.1601079 29.6930907,10.3653129 C29.4878857,10.5705179 29.1593113,10.5832093 28.9388889,10.3944444 L21,2.45 L13.0611111,10.3888889 C12.8406887,10.5776538 12.5121143,10.5649624 12.3069093,10.3597573 C12.1017043,10.1545523 12.0890129,9.82597793 12.2777778,9.60555556 L20.6111111,1.27222222 C20.8277986,1.05682023 21.177757,1.05682023 21.3944444,1.27222222 L29.7277778,9.60555556 Z" d="M14.41136646270752,16.667107820510864 L14.41136646270752,8.755995988845825 L15.522477149963379,9.867106676101685 L15.522477149963379,16.667107820510864 C15.522477149963379,17.280757188796997 15.025015830993652,17.778218507766724 14.41136646270752,17.778218507766724 L10.522477149963379,17.778218507766724 L10.522477149963379,12.222662210464478 L7.189145088195801,12.222662210464478 L7.189145088195801,17.778218507766724 L3.30025577545166,17.778218507766724 C2.686605453491211,17.778218507766724 2.1891441345214844,17.280757188796997 2.1891441345214844,16.667107820510864 L2.1891441345214844,10.000439882278442 L3.30025577545166,8.889329195022583 L3.30025577545166,16.667107820510864 L6.078032493591309,16.667107820510864 L6.078032493591309,11.111551523208618 L11.633589744567871,11.111551523208618 L11.633589744567871,16.667107820510864 L14.41136646270752,16.667107820510864 zM17.58358860015869,8.494884729385376 L17.57803249359131,8.500439882278442 C17.766798973083496,8.720862627029419 17.75410747528076,9.049436807632446 17.548901557922363,9.254641771316528 C17.343697547912598,9.45984673500061 17.015122413635254,9.472538232803345 16.794699668884277,9.28377366065979 L8.85581111907959,1.3393292427062988 L0.9169225692749023,9.278218507766724 C0.6964998245239258,9.466983079910278 0.36792564392089844,9.454291582107544 0.1627206802368164,9.249086618423462 C-0.042484283447265625,9.04388165473938 -0.05517578125,8.715307474136353 0.1335887908935547,8.494884729385376 L8.46692180633545,0.1615513563156128 C8.683609962463379,-0.053850531578063965 9.033568382263184,-0.053850531578063965 9.25025463104248,0.1615513563156128 L17.58358860015869,8.494884729385376 z"
id="Mask" fill="#000000" fill-rule="nonzero"></path> id="Mask" fill="#000000" fill-rule="nonzero"/>
</g>
</g> </g>
</svg> </svg>
</template> </template>

2
src/components/icons/IconVideo.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/> <rect id="backgroundrect" width="100%" height="100%" x="0" y="0" fill="none" stroke="none"/>
<g class="currentLayer" style=""><title>Layer 1</title> <g class="currentLayer" style=""><title>Layer 1</title>

8
src/scss/main.scss
View file

@ -78,13 +78,17 @@ main {
background-color: transparent; background-color: transparent;
align-items: center; align-items: center;
.icon { svg {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
} }
.jpt-button-light { .jpt-big-button-icon svg {
margin-right: 30px;
}
.jpt-button-medium {
border-width: 2px; border-width: 2px;
} }

7
src/views/Home.vue
View file

@ -14,13 +14,13 @@
</div> </div>
<div class="buttons-row"> <div class="buttons-row">
<button class="jpt-button what-is-peertube"> <button class="jpt-button jpt-big-button-icon what-is-peertube">
<icon-instance></icon-instance> <icon-instance></icon-instance>
<span v-translate>What is PeerTube?</span> <span v-translate>What is PeerTube?</span>
</button> </button>
<button class="jpt-button instances-list"> <button class="jpt-button jpt-big-button-icon instances-list">
<icon-instance></icon-instance> <icon-instance></icon-instance>
<translate>See the instances list</translate> <translate>See the instances list</translate>
@ -325,7 +325,10 @@
} }
.jpt-button-legend { .jpt-button-legend {
margin-top: 5px;
max-width: 330px; max-width: 330px;
font-size: 13px;
text-align: center;
} }
.presentation { .presentation {