Verified Commit d80e05ca authored by Chocobozzz's avatar Chocobozzz
Browse files

Improve plugin selection

parent aa7e1208
Pipeline #392087 passed with stage
in 5 minutes and 3 seconds
<template>
<div id="content-selection">
<div class="content-selection">
<div class="left">
<h3 class="title-small-screens">
......@@ -64,7 +64,7 @@
<style lang="scss">
@import '../scss/_variables';
#content-selection {
.content-selection {
display: flex;
.title-small-screens {
......
<template>
<div id="plugin-selection">
<div class="plugin-selection">
<h4>
<icon-plugin></icon-plugin>
{{ title }}
</h4>
<h5>{{ subtitle }}</h5>
<div class="img-and-description">
<img :src="buildImgUrl('plugin-selection-previews/' + previewName)" alt="preview">
......@@ -21,9 +23,12 @@
<style lang="scss">
@import '../scss/_variables';
#plugin-selection {
.plugin-selection {
h4 {
font-weight: $font-semibold;
}
h5 {
margin-bottom: 30px;
}
......@@ -61,6 +66,7 @@
export default {
props: {
title: String,
subtitle: String,
previewName: String,
url: String,
description: String
......
......@@ -3,7 +3,7 @@
<div class="plugin-selection" v-for="pluginSelection in getPluginSelections()" :key="pluginSelection.url">
<plugin-selection
:title="pluginSelection.title" :url="pluginSelection.url" :description="pluginSelection.description"
:previewName="pluginSelection.preview"
:previewName="pluginSelection.preview" :subtitle="pluginSelection.subtitle"
>
</plugin-selection>
</div>
......
......@@ -9,7 +9,7 @@ import Home from './views/Home.vue'
import Help from './views/Help'
import Instances from './views/Instances'
import NotFound from './views/NotFound'
import AllContentSelections from './views/All-Content-Selections'
import AllContentsSelection from './views/All-Contents-Selection'
import Roadmap2020 from './views/Roadmap-2020'
import Roadmap2020Placeholder from './views/Roadmap-2020-Placeholder'
import ThankYou from './views/Thank-You'
......@@ -108,7 +108,7 @@ p.catch(err => {
const HallOfFame = () => import('./views/Hall-Of-Fame')
const News = () => import('./views/News')
const AllPluginSelections = () => import('./views/All-Plugin-Selections')
const AllPluginsSelection = () => import('./views/All-Plugins-Selection')
const FAQ = () => import('./views/FAQ')
let routes = []
......@@ -152,12 +152,12 @@ p.catch(err => {
component: FAQ
},
{
path: base + 'content-selections',
component: AllContentSelections
path: base + 'contents-selection',
component: AllContentsSelection
},
{
path: base + 'plugin-selections',
component: AllPluginSelections
path: base + 'plugins-selection',
component: AllPluginsSelection
},
{
path: base + 'thank-you',
......
......@@ -3,26 +3,30 @@ export default {
return {
pluginSelectionsEN: [
{
title: 'glavliiit: a plugin to improve moderation',
preview: 'glavliiit.jpg',
title: 'glavliiit',
subtitle: 'A plugin to improve moderation',
preview: 'glavliiit.png',
url: 'https://gitlab.com/grin/peertube-plugin-glavliiit',
description: 'Once installed, glavliiit allows administrators to block the registration on their instance of certain email by listing emails, domain names or users names to be blocked. This plugin also block videos containing certain words or phrases. Really handy!'
},
{
title: 'upload-limits: a plugin to alert about upload limits',
preview: 'upload-limits.jpg',
title: 'upload-limits:',
subtitle: 'A plugin to alert about upload limits',
preview: 'upload-limits.png',
url: 'https://github.com/kimsible/peertube-plugin-upload-limits',
description: 'This plugin displays an instructions alert when user uploads contents that doesn\'t respect upload limits (file size, video bit rate, audio bit rate) previously defined by instance\'s administrators. The upload is then blocked.'
},
{
title: 'video-annotation: a plugin to set annotations on video contents',
preview: 'video-annotation.jpg',
title: 'video-annotation',
subtitle: 'A plugin to set annotations on video contents',
preview: 'video-annotation.png',
url: 'https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-video-annotation',
description: 'This annotation plugin allows you to display information in the player at a given time of a video. To do so, you just have to go on the uploaded video information page, open the Plugin settings tab and then add your annotations and their time code. The placement of the annotations is in the player top right corner by default, but you can choose other locations.'
},
{
title: 'chapters: a plugin to add chapters to a video',
preview: 'chapters.jpg',
title: 'chapters',
subtitle: 'A plugin to add chapters to a video',
preview: 'chapters.png',
url: 'https://github.com/samlich/peertube-plugin-chapters',
description: 'This plugin allows content creators to add a chaptering system to their videos. Thus, watchers don\'t need to watch all the video and can choose to watch only certain parts of it. It\'s very easy to add chapters : you just have to update the video, open the Plugin settings tab and then add your chapters names and their time code. An additional button then appears in the player.'
}
......
......@@ -3,26 +3,30 @@ export default {
return {
pluginSelectionsFR: [
{
title: 'glavliiit : un plugin pour améliorer la modération',
preview: 'glavliiit.jpg',
title: 'glavliiit',
subtitle: 'Un plugin pour améliorer la modération',
preview: 'glavliiit.png',
url: 'https://gitlab.com/grin/peertube-plugin-glavliiit',
description: 'Une fois installé, glavliiit permet aux administrateur⋅ices de bloquer l\'inscription sur leur instance de certaines adresses mails en permettant de lister des mails, des noms de domaine ou des noms d\'utilisateur⋅ices à bloquer. Ce plugin permet aussi de bloquer les vidéos contenant certains mots ou expressions. Vraiment pratique !'
},
{
title: 'upload-limits : un plugin pour alerter sur les limites de téléchargement',
preview: 'upload-limits.jpg',
title: 'upload-limits',
subtitle: 'Un plugin pour alerter sur les limites de téléchargement',
preview: 'upload-limits.png',
url: 'https://github.com/kimsible/peertube-plugin-upload-limits',
description: 'Ce plugin permet d\'afficher une alerte lorsqu\'un⋅e utilisateur⋅ice télécharge un contenu qui ne respecte pas les limites de téléchargement (taille du fichier, débit vidéo, débit audio) préalablement définies par l\'instance. Le téléchargement est alors bloqué.'
},
{
title: 'video-annotation : un plugin pour ajouter des annotations sur une vidéo',
preview: 'video-annotation.jpg',
title: 'video-annotation',
subtitle: 'Un plugin pour ajouter des annotations sur une vidéo',
preview: 'video-annotation.png',
url: 'https://framagit.org/framasoft/peertube/official-plugins/-/tree/master/peertube-plugin-video-annotation',
description: 'Ce plugin d\'annotations permet d\'afficher des informations à un moment donné d\'une vidéo. Pour cela, il suffit d\'aller, au moment de compléter les informations d\'une vidéo uploadée, sur l\'onglet Paramètres du plugin et d\'y ajouter les annotations et leur time-code. Par défaut, le placement des annotations est en haut à droite du lecteur, mais il est possible de modifier cela.'
},
{
title: 'chapters : un plugin pour ajouter des chapitres à une vidéo',
preview: 'chapters.jpg',
title: 'chapters',
subtitle: 'Un plugin pour ajouter des chapitres à une vidéo',
preview: 'chapters.png',
url: 'https://github.com/samlich/peertube-plugin-chapters',
description: 'Ce plugin permet aux vidéastes d\'ajouter un système de chapitrage à leurs vidéos. Ainsi, les spectateur⋅ices ne sont pas obligés de regarder une vidéo dans son intégralité mais peuvent choisir de n\'en visionner que certaines parties. L\'ajout de chapitres se fait très simplement en ajoutant à la vidéo uploadée les noms et time-code de chaque chapitre. Un bouton supplémentaire apparaît alors dans le lecteur.'
}
......
<template>
<main id="all-content-selections">
<main id="all-contents-selection">
<div class="blocks">
<div class="title-block">
<h1 v-translate>Our content selections</h1>
<h1 v-translate>Our content selection</h1>
<div class="separator"></div>
</div>
<content-selections></content-selections>
<contents-selection></contents-selection>
</div>
</main>
</template>
......@@ -16,7 +16,7 @@
<style lang="scss">
@import '../scss/_variables.scss';
#all-content-selections {
#all-contents-selection {
.blocks {
margin: 60px auto;
}
......@@ -24,16 +24,16 @@
</style>
<script>
import ContentSelections from '../components/ContentSelections'
import ContentsSelection from '../components/ContentsSelection'
export default {
components: {
ContentSelections
ContentsSelection
},
metaInfo: function () {
return {
title: this.$gettext('Our content selections')
title: this.$gettext('Our contents selection')
}
}
}
......
<template>
<main id="all-content-selections">
<main id="all-plugin-selection">
<div class="blocks">
<div class="title-block">
<h1 v-translate>Our plugin selections</h1>
<h1 v-translate>Our plugin selection</h1>
<div class="separator"></div>
</div>
<plugin-selections></plugin-selections>
<plugins-selection></plugins-selection>
</div>
</main>
</template>
......@@ -16,7 +16,7 @@
<style lang="scss">
@import '../scss/_variables.scss';
#all-content-selections {
#all-plugin-selection {
.blocks {
margin: 60px auto;
}
......@@ -24,16 +24,16 @@
</style>
<script>
import PluginSelections from '../components/PluginSelections'
import PluginsSelection from '../components/PluginsSelection'
export default {
components: {
PluginSelections
PluginsSelection
},
metaInfo: function () {
return {
title: this.$gettext('Our plugin selections')
title: this.$gettext('Our plugins selection')
}
}
}
......
......@@ -58,16 +58,16 @@
</div>
</section>
<section class="content-selections">
<section class="contents-selection">
<div class="section-title">
<div v-translate>Discover our content selection</div>
<div class="border-title"></div>
</div>
<content-selections :sample-size-each="1"></content-selections>
<contents-selection :sample-size-each="1"></contents-selection>
<div class="bottom-link-wrapper">
<router-link to="/content-selections" class="bottom-link">
<router-link to="/contents-selection" class="bottom-link">
<span class="text" v-translate>Browse contents</span>
<icon-right></icon-right>
</router-link>
......@@ -308,7 +308,7 @@
</div>
<div class="buttons-row explore-create-account">
<router-link to="/content-selections" class="jpt-button">
<router-link to="/contents-selection" class="jpt-button">
<span v-translate>Browse contents</span>
</router-link>
......@@ -516,7 +516,7 @@
}
}
.content-selections .section-title {
.contents-selection .section-title {
// Reduce margin top now we have the search bar
margin-top: 50px;
}
......@@ -614,14 +614,14 @@
<script>
import IconInstance from '../components/icons/IconInstance.vue'
import IconRight from '../components/icons/IconRight.vue'
import ContentSelections from '../components/ContentSelections'
import ContentsSelection from '../components/ContentsSelection'
import IconLogo from '../components/icons/IconLogo'
import IconSearch from '../components/icons/IconSearch'
import SepiaSearchImage from '../components/SepiaSearchImage'
export default {
components: {
ContentSelections,
ContentsSelection,
IconInstance,
IconRight,
IconLogo,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment