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

Implement help page

Browse source
This commit is contained in:
Chocobozzz 2019-09-11 16:39:56 +02:00
parent 6d6fa2b026
commit 414c3101dd
No known key found for this signature in database
GPG key ID: 583A612D890159BE
8 changed files with 203 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/help/cat.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
public/img/help/dog.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

BIN
public/img/help/panda.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/img/help/rabbit.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 51 KiB

14
src/components/Header.vue
View file

@ -6,7 +6,7 @@
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
<div class="support">
soutenu par
developed by
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
</div>
@ -22,27 +22,27 @@
<div id="navbar" class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<router-link class="nav-link" :to="getPath('/')">Home</router-link>
<router-link class="nav-link" to="/">Home</router-link>
</li>
<li class="nav-item ">
<router-link class="nav-link create-account" :to="getPath('/')">Create an account</router-link>
<router-link class="nav-link create-account" to="/">Create an account</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="getPath('/news')">News</router-link>
<router-link class="nav-link" to="/news">News</router-link>
</li>
<li class="nav-item">
<a class="nav-link">Help</a>
<router-link class="nav-link" to="/help">Help</router-link>
</li>
<li class="nav-item">
<a class="nav-link">Contribute</a>
<a class="nav-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">Contribute</a>
</li>
<li class="nav-item">
<a class="nav-link">Git</a>
<a class="nav-link" href="https://github.com/Chocobozzz/PeerTube" target="_blank" rel="noopener noreferrer">Git</a>
</li>
<div class="pull-right">

5
src/main.js
View file

@ -6,6 +6,7 @@ import GetTextPlugin from 'vue-gettext'
import App from './App.vue'
import Home from './views/Home.vue'
import Help from './views/Help'
import './scss/bootstrap.scss'
import './scss/main.scss'
@ -56,6 +57,10 @@ const routes = [
{
path: '/',
component: Home
},
{
path: '/help',
component: Help
}
]

2
src/scss/main.scss
View file

@ -150,7 +150,7 @@ main {
.text {
border-bottom: 3px solid $orange;
padding: 0 5px;
margin-right: 5px;
margin-right: 10px;
}
}

190
src/views/Help.vue Normal file
View file

@ -0,0 +1,190 @@
<template>
<main>
<div class="blocks">
<div class="title-block">
<div class="title">Help</div>
<p>Questions on PeerTube? Need help? You've come to the right place!</p>
<div class="separator"></div>
</div>
<div class="block-with-image understand">
<div class="image-block">
<img :src="buildImgUrl('help/rabbit.png')" alt="Rabbit image">
</div>
<div class="text-block">
<div class="title">Better understand and use PeerTube</div>
<p>You have a question?</p>
<div class="bottom-link-wrapper">
<router-link to="/faq" class="bottom-link">
<span class="text" v-translate>Discover our FAQ</span>
<icon-right></icon-right>
</router-link>
</div>
<p>Need a detailed guide?</p>
<div class="bottom-link-wrapper">
<a class="bottom-link" href="https://docs.joinpeertube.org" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>Read the documentation</span>
<icon-right></icon-right>
</a>
</div>
</div>
</div>
<div class="block-with-image community">
<div class="text-block">
<div class="title">Ask questions to the community</div>
<div class="bottom-link-wrapper">
<a href="https://framacolibri.org/c/peertube" class="bottom-link" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>Go to the forum</span>
<icon-right></icon-right>
</a>
</div>
</div>
<div class="image-block">
<img :src="buildImgUrl('help/cat.png')" alt="Cat image">
</div>
</div>
<div class="block-with-image administrators">
<div class="image-block">
<img :src="buildImgUrl('help/panda.png')" alt="Panda image">
</div>
<div class="text-block">
<div class="title">For PeerTube admins</div>
<div class="bottom-link-wrapper">
<a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>Install PeerTube</span>
<icon-right></icon-right>
</a>
</div>
<div class="bottom-link-wrapper">
<a class="bottom-link" href="https://docs.joinpeertube.org/#/install-any-os?id=upgrade" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>Upgrade PeerTube</span>
<icon-right></icon-right>
</a>
</div>
<div class="bottom-link-wrapper">
<a class="bottom-link" href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>Administer PeerTube</span>
<icon-right></icon-right>
</a>
</div>
</div>
</div>
<div class="block-with-image contribute">
<div class="text-block">
<div class="title">Contribute to PeerTube</div>
<div class="bottom-link-wrapper">
<a class="bottom-link" href="https://docs.joinpeertube.org/#/contribute-getting-started" target="_blank" rel="noopener noreferrer">
<span class="text" v-translate>How to contribute?</span>
<icon-right></icon-right>
</a>
</div>
</div>
<div class="image-block">
<img :src="buildImgUrl('help/dog.png')" alt="Dog image">
</div>
</div>
</div>
</main>
</template>
<style scoped lang="scss">
@import '../scss/_variables.scss';
.blocks {
margin: 60px auto;
width: 500px;
}
.title {
font-family: 'Proza Libre', sans-serif;
font-weight: $font-semibold;
}
.title-block {
text-align: center;
margin-bottom: 100px;
display: flex;
flex-direction: column;
align-items: center;
.title {
margin-bottom: 10px;
font-size: 34px;
font-weight: $font-semibold;
}
.separator {
margin-top: 30px;
background-color: $orange;
height: 3px;
width: 200px;
}
}
.block-with-image {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 100px;
.image-block + .text-block,
.text-block + .image-block {
margin-left: 40px;
}
.text-block {
text-align: right;
p {
margin-bottom: 0;
}
.title {
font-size: 24px;
margin-bottom: 25px;
}
.bottom-link-wrapper {
margin-top: 5px;
margin-bottom: 0;
}
.bottom-link-wrapper + * {
margin-top: 40px;
}
}
.image-block + .text-block {
text-align: left;
}
}
</style>
<script>
import IconRight from '../components/icons/IconRight'
export default {
components: {
IconRight
}
}
</script>