Fix missing translations

This commit is contained in:
Chocobozzz 2019-10-24 12:53:33 +02:00
parent 6dbe2c1e87
commit 507ce501af
No known key found for this signature in database
GPG key ID: 583A612D890159BE
16 changed files with 739 additions and 696 deletions

View file

@ -19,10 +19,6 @@
</b-card>
</template>
<style scoped>
</style>
<script>
import { BCollapse, BCard, BCardHeader, BCardBody, BCardText, VBToggle } from 'bootstrap-vue'

View file

@ -1,5 +1,5 @@
<template>
<div class="root">
<div id="content-selection">
<div class="left">
<img :src="thumbnailUrl" alt="thumbnail"/>
@ -51,10 +51,10 @@
</template>
<style lang="scss" scoped>
<style lang="scss">
@import '../scss/_variables';
.root {
#content-selection {
display: flex;
@media screen and (max-width: $small-screen) {
@ -67,68 +67,68 @@
margin-bottom: 20px !important;
}
}
}
.left {
margin-right: 20px;
.left {
margin-right: 20px;
img {
display: block;
width: 250px;
height: 137px;
border-radius: 3px;
}
img {
display: block;
width: 250px;
height: 137px;
border-radius: 3px;
}
button {
display: flex;
flex-direction: row !important;
margin-top: 30px;
width: 250px;
height: 35px;
button {
display: flex;
flex-direction: row !important;
margin-top: 30px;
width: 250px;
height: 35px;
.icon {
margin-right: 10px;
.icon {
margin-right: 10px;
svg {
vertical-align: sub;
width: 20px;
height: 20px;
svg {
vertical-align: sub;
width: 20px;
height: 20px;
}
}
}
}
}
.right {
.title {
font-size: 24px;
font-weight: $font-semibold;
display: flex;
align-items: center;
font-family: 'Proza Libre', sans-serif;
.right {
.title {
font-size: 24px;
font-weight: $font-semibold;
display: flex;
align-items: center;
font-family: 'Proza Libre', sans-serif;
.icon {
margin-right: 10px;
position: relative;
top: -2px;
}
}
.description {
font-size: 16px;
min-height: 170px;
}
.tags {
display: flex;
flex-wrap: wrap;
@media screen and (max-width: $responsive-screen) {
justify-content: center;
.icon {
margin-right: 10px;
position: relative;
top: -2px;
}
}
.tag {
margin-top: 10px;
.description {
font-size: 16px;
min-height: 170px;
}
.tags {
display: flex;
flex-wrap: wrap;
@media screen and (max-width: $responsive-screen) {
justify-content: center;
}
.tag {
margin-top: 10px;
}
}
}
}

View file

@ -1,5 +1,5 @@
<template>
<div class="root">
<div id="content-selections">
<div class="content-selection" v-for="contentSelection in getContentSelections()">
<content-selection :type="contentSelection.type" :title="contentSelection.title"
:thumbnail-url="contentSelection.thumbnailUrl" :url="contentSelection.url" :tags="contentSelection.tags"
@ -10,16 +10,18 @@
</div>
</template>
<style lang="scss" scoped>
<style lang="scss">
@import '../scss/_variables';
.content-selection {
margin-bottom: 80px;
}
#content-selections {
.content-selection {
margin-bottom: 80px;
}
.discover-instances {
display: flex;
justify-content: flex-end;
.discover-instances {
display: flex;
justify-content: flex-end;
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<footer>
<footer id="main-footer">
<div>
<a target="_blank" rel="noopener noreferrer" href="https://framasoft.org/en/legals/" v-translate>Legal notices</a>
@ -18,11 +18,11 @@
</footer>
</template>
<style lang="scss" scoped>
<style lang="scss">
@import '../scss/_variables.scss';
@import '../scss/_mixins.scss';
footer {
#main-footer {
margin-top: 30px;
background-color: #fff;
padding: 30px 200px;
@ -37,10 +37,8 @@
margin-bottom: 10px;
}
}
}
@media screen and (max-width: $responsive-screen) {
footer {
@media screen and (max-width: $responsive-screen) {
padding: 30px;
}
}

View file

@ -6,7 +6,7 @@
<img alt="PeerTube" :src="buildImgUrl('brand-small.png')">
<div class="support">
developed by
<translate>developed by</translate>
<img alt="Framasoft text logo" :src="buildImgUrl('framasoft-logo-text-small.png')">
</div>
@ -47,65 +47,68 @@
</header>
</template>
<style lang="scss" scoped>
<style lang="scss">
@import '../scss/_variables.scss';
@import '../scss/_mixins.scss';
header {
margin-bottom: 30px;
}
#main-header {
.navbar-collapse {
&.collapsing,
&.show {
padding-top: 20px;
header {
margin-bottom: 30px;
}
.nav-item {
margin-right: 0;
margin-top: 5px;
.navbar-collapse {
&.collapsing,
&.show {
padding-top: 20px;
.nav-item {
margin-right: 0;
margin-top: 5px;
}
}
}
}
.navbar-brand {
@include disable-default-a-behaviour;
.navbar-brand {
@include disable-default-a-behaviour;
color: #000;
font-family: 'Proza Libre', sans-serif;
font-size: 10px;
color: #000;
font-family: 'Proza Libre', sans-serif;
font-size: 10px;
.support img {
vertical-align: initial;
margin-left: 1px;
.support img {
vertical-align: initial;
margin-left: 3px;
}
}
}
nav {
min-height: 60px;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
nav {
min-height: 60px;
background-color: #fff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
}
.navbar-nav {
align-items: center;
}
.navbar-nav {
align-items: center;
}
.nav-item {
margin-right: 40px;
}
.nav-item {
margin-right: 40px;
}
.nav-link {
color: #000 !important;
padding: 0 !important;
font-family: 'Proza Libre', sans-serif;
}
.nav-link {
color: #000 !important;
padding: 0 !important;
font-family: 'Proza Libre', sans-serif;
}
.create-account {
font-weight: $font-semibold;
}
.create-account {
font-weight: $font-semibold;
}
.router-link-active:not(.navbar-brand) {
border-bottom: 3px solid $orange;
.router-link-active:not(.navbar-brand) {
border-bottom: 3px solid $orange;
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div class="i18n">
<div id="i18n">
<b-dropdown>
<template slot="button-content">
<img :src="buildImgUrl('language.png')" alt="Change languages logo"/>
@ -27,29 +27,29 @@
</template>
<style lang="scss">
.i18n .dropdown {
button {
height: 60px;
color: #000;
background-color: #fff;
border: none;
#i18n {
.text {
font-size: 11px;
}
.dropdown-toggle::after {
display: none;
}
.dropdown {
button {
height: 60px;
color: #000;
background-color: #fff;
border: none;
}
.translate svg {
width: 20px;
margin-right: 5px;
vertical-align: top;
}
}
</style>
.dropdown-toggle::after {
display: none;
}
<style scoped>
.text {
font-size: 11px;
.translate svg {
width: 20px;
margin-right: 5px;
vertical-align: top;
}
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<div class="root">
<div id="instance-card">
<div class="left">
<div class="name-host">
@ -92,10 +92,10 @@
</div>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
.root {
#instance-card {
min-height: 185px;
width: 770px;
margin: auto;
@ -103,104 +103,114 @@
border: solid 1px #d9d9d9;
padding: 20px 25px 15px 25px;
display: flex;
}
.left,
.right {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.icon,
.label {
margin-right: 5px;
}
.label {
color: $grey;
letter-spacing: -0.5px;
}
.left {
margin-right: 40px;
width: 480px;
.name-host {
.left,
.right {
display: flex;
margin-bottom: 3px;
flex-wrap: wrap;
}
.name {
font-family: "Proza Libre", sans-serif;
font-weight: $font-semibold;
margin-right: 10px;
}
.host {
color: $grey;
}
.description {
margin-bottom: 8px;
line-height: normal;
}
.upload-limits {
display: flex;
.quota {
display: flex;
margin-right: 80px;
}
}
.tags {
display: flex;
margin-top: auto;
}
}
.right {
.follow,
.languages {
margin-bottom: 10px;
display: flex;
}
.nsfw {
display: flex;
}
.link {
margin-top: auto;
margin-bottom: 2px;
align-self: flex-end;
}
}
@media screen and (max-width: $responsive-screen) {
.root {
width: auto;
flex-direction: column;
padding: 15px 10px;
justify-content: space-between;
}
.left {
width: auto;
margin-right: 0;
.icon,
.label {
margin-right: 5px;
}
.label {
color: $grey;
letter-spacing: -0.5px;
}
.left {
margin-right: 20px;
width: 500px;
.name-host {
display: flex;
margin-bottom: 3px;
flex-wrap: wrap;
}
.right {
margin-top: 20px;
.name {
font-family: "Proza Libre", sans-serif;
font-weight: $font-semibold;
margin-right: 10px;
}
.follow,
.languages {
margin-bottom: 5px;
.host {
color: $grey;
}
.description {
margin-bottom: 8px;
line-height: normal;
}
.upload-limits {
display: flex;
.quota {
display: flex;
margin-right: 80px;
.icon {
position: relative;
top: -2px;
}
}
}
.auto-blacklist {
display: flex;
margin-top: auto;
}
.tags {
display: flex;
margin-top: auto;
}
}
.right {
.follow,
.languages {
margin-bottom: 10px;
display: flex;
}
.nsfw {
display: flex;
}
.link {
margin-top: auto;
margin-bottom: 2px;
align-self: flex-end;
}
}
@media screen and (max-width: $responsive-screen) {
.root {
width: auto;
flex-direction: column;
padding: 15px 10px;
.left {
width: auto;
margin-right: 0;
}
.link {
.right {
margin-top: 20px;
.follow,
.languages {
margin-bottom: 5px;
}
.link {
margin-top: 20px;
}
}
}
}
@ -248,7 +258,7 @@
methods: {
bytes (value) {
if (value === -1) return this.$gettext('Unlimited space for users')
if (value === -1) return this.$gettext('Unlimited space')
// https://github.com/danrevah/ngx-pipes/blob/master/src/pipes/math/bytes.ts
const dictionaryBytes = [

View file

@ -1,5 +1,5 @@
<template>
<div id="instances-list" class="root">
<div id="instances-list">
<div class="filters">
<div v-translate class="title">Filter according to your preferences</div>
@ -102,7 +102,7 @@
</form>
</div>
<div class="instances-list">
<div class="list">
<div v-translate class="title">Instances list</div>
<div class="list" v-bind:class="{ unloaded: instances.length === 0 && noResults === false }">
@ -126,85 +126,87 @@
</div>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
.title {
font-size: 24px;
}
.filters {
margin-bottom: 100px;
#instances-list {
.title {
margin-bottom: 25px;
font-size: 24px;
}
form {
border-left: 6px solid $orange;
padding-left: 24px;
.group {
margin-bottom: 30px;
display: flex;
align-items: center;
& > label {
min-width: 140px;
margin: 0 10px 0 0;
&.label-checkbox {
align-self: flex-start;
}
}
}
select {
width: 280px;
height: 35px;
line-height: 21px;
border-radius: 0;
}
.btn-group-toggle {
.btn {
display: flex;
align-items: center;
color: #000;
background-color: #fff;
border-color: $orange;
min-height: 30px;
padding: 0 15px;
cursor: pointer;
&.active {
color: #fff;
font-weight: $font-semibold;
background-color: $orange;
}
}
}
}
}
.instances-list {
margin-bottom: 50px;
}
@media screen and (max-width: $responsive-screen) {
.filters {
margin-bottom: 100px;
.title {
margin-bottom: 25px;
}
form {
padding-left: 15px;
border-left: 6px solid $orange;
padding-left: 24px;
.group {
flex-direction: column;
align-items: flex-start;
margin-bottom: 30px;
display: flex;
align-items: center;
label {
margin-bottom: 5px;
font-size: 15px;
& > label {
min-width: 140px;
margin: 0 10px 0 0;
&.label-checkbox {
align-self: flex-start;
}
}
}
select {
width: 280px;
height: 35px;
line-height: 21px;
border-radius: 0;
}
.btn-group-toggle {
.btn {
display: flex;
align-items: center;
color: #000;
background-color: #fff;
border-color: $orange;
min-height: 30px;
padding: 0 15px;
cursor: pointer;
&.active {
color: #fff;
font-weight: $font-semibold;
background-color: $orange;
}
}
}
}
}
.list {
margin-bottom: 50px;
}
@media screen and (max-width: $responsive-screen) {
.filters {
margin-bottom: 100px;
form {
padding-left: 15px;
.group {
flex-direction: column;
align-items: flex-start;
label {
margin-bottom: 5px;
font-size: 15px;
}
}
}
}
@ -246,7 +248,7 @@
}
}
.instances-list {
.list {
.title {
margin-bottom: 50px;
}

View file

@ -36,7 +36,7 @@ Vue.use(GetTextPlugin, {
translations,
availableLanguages,
defaultLanguage: 'en_US',
silent: true
silent: false
})
const localePath = window.location.pathname

View file

@ -1,5 +1,5 @@
<template>
<main>
<main id="all-content-selections">
<div class="blocks">
<div class="title-block">
@ -13,13 +13,14 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
.blocks {
margin: 60px auto;
#all-content-selections {
.blocks {
margin: 60px auto;
}
}
</style>
<script>

View file

@ -1,5 +1,5 @@
<template>
<main>
<main id="faq">
<div class="blocks">
<div class="title-block">
@ -495,33 +495,33 @@
</template>
<style lang="scss">
header a {
color: #000;
}
</style>
<style scoped lang="scss">
@import '../scss/_variables.scss';
.block .title {
font-size: 22px;
margin-top: 30px;
margin-bottom: 15px;
}
#faq {
header a {
color: #000;
}
.card {
margin: 5px 0;
}
.block .title {
font-size: 22px;
margin-top: 30px;
margin-bottom: 15px;
}
.blocks {
margin: 60px auto;
}
.card {
margin: 5px 0;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
.blocks {
margin: 60px auto;
}
blockquote {
padding: 10px 20px;
margin: 0 0 20px;
font-size: 17.5px;
border-left: 5px solid #eee;
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<main>
<main id="hall-of-fame">
<div class="blocks">
<div class="title-block">
@ -555,58 +555,60 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
@import '../scss/_mixins.scss';
.blocks {
margin: 60px auto;
}
#hall-of-fame {
.blocks {
margin: 60px auto;
}
.subtitle {
margin-bottom: 10px;
}
.subtitle {
margin-bottom: 10px;
}
.sponsors {
a {
@include disable-default-a-behaviour;
.sponsors {
a {
@include disable-default-a-behaviour;
display: inline-block;
margin-right: 10px;
display: inline-block;
margin-right: 10px;
img {
width: 270px;
height: 135px;
img {
width: 270px;
height: 135px;
}
}
}
}
ul {
padding: 0;
ul {
padding: 0;
li {
display: inline-block;
padding: 0 5px;
li {
display: inline-block;
padding: 0 5px;
&:before {
content: "\25B6";
margin-right: 12px;
}
&:before {
content: "\25B6";
margin-right: 12px;
}
&:nth-of-type(3n):before {
color: #f1680d
}
&:nth-of-type(3n):before {
color: #f1680d
}
&:nth-of-type(3n+1):before {
color: #211f20
}
&:nth-of-type(3n+1):before {
color: #211f20
}
&:nth-of-type(3n+2):before {
color: #737373
}
&:nth-of-type(3n+2):before {
color: #737373
}
a {
color: #000;
a {
color: #000;
}
}
}
}

View file

@ -1,11 +1,11 @@
<template>
<main>
<main id="help">
<div class="blocks">
<div class="title-block">
<div class="title" v-translate>Help</div>
<p>Questions on PeerTube? Need help? You've come to the right place!</p>
<p v-translate>Questions on PeerTube? Need help? You've come to the right place!</p>
<div class="separator"></div>
</div>
@ -26,7 +26,7 @@
</router-link>
</div>
<p>Need a detailed guide?</p>
<p v-translate>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>
@ -38,7 +38,7 @@
<div class="block-with-image community">
<div class="text-block">
<div class="title">Ask questions to the community</div>
<div class="title" v-translate>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">
@ -59,7 +59,7 @@
</div>
<div class="text-block">
<div class="title">For PeerTube admins</div>
<div class="title" v-translate>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">
@ -86,7 +86,7 @@
<div class="block-with-image contribute">
<div class="text-block">
<div class="title">Contribute to PeerTube</div>
<div class="title" v-translate>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">
@ -105,74 +105,75 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
.blocks {
margin: 60px auto;
width: 500px;
}
.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;
}
}
@media screen and (max-width: $small-screen) {
#help {
.blocks {
width: auto;
margin: 60px auto;
width: 500px;
}
.block-with-image {
flex-direction: column;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 100px;
.text-block {
margin-left: 0 !important;
.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;
}
}
.image-block {
margin: 40px 0;
@media screen and (max-width: $small-screen) {
.blocks {
width: auto;
}
.block-with-image {
flex-direction: column;
.text-block {
margin-left: 0 !important;
}
.text-block {
text-align: left;
}
.image-block {
margin: 40px 0;
}
}
}
}
</style>
<script>

View file

@ -1,5 +1,5 @@
<template>
<main>
<main id="home">
<section class="presentation">
<div class="first-row">
@ -46,10 +46,11 @@
<section id="what-is-peertube">
<div class="section-title">
<div v-translate>
What is
<div>
<!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
<translate>What is</translate>
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
?
<translate>?</translate>
</div>
<div class="border-title"></div>
</div>
@ -114,7 +115,7 @@
<div class="citation">
<div class="left-bar"></div>
<div class="text v-translate">This is just how a <strong>federation</strong> works!</div>
<div class="text" v-translate>This is just how a <strong>federation</strong> works!</div>
</div>
<p v-translate>
@ -138,8 +139,8 @@
</div>
<div class="free-software">
<div class="subtitle" v-translate>
An open-source, free/libre licence code
<div class="subtitle">
<translate>An open-source, free/libre licence code</translate>
<div class="border-title"></div>
</div>
@ -186,8 +187,8 @@
</div>
<div id="you-are-a-video-maker">
<div class="subtitle" v-translate>
Are you a video maker?
<div class="subtitle">
<translate>Are you a video maker?</translate>
<div class="border-title"></div>
</div>
@ -231,8 +232,8 @@
</div>
<div class="p2p">
<div class="subtitle" v-translate>
About peer-to-peer broadcasting and watching
<div class="subtitle">
<translate>About peer-to-peer broadcasting and watching</translate>
<div class="border-title"></div>
</div>
@ -266,8 +267,8 @@
</div>
<div id="your-move">
<div class="subtitle" v-translate>
Your move!
<div class="subtitle">
<translate>Your move!</translate>
<div class="border-title"></div>
</div>
@ -295,10 +296,11 @@
<section id="behind-peertube">
<div class="section-title">
<div v-translate>
Who is behind
<div>
<!-- FIXME: add v-translate to the div, but it does not work with vue-gettext because of the bind src attribute -->
<translate>Who is behind</translate>
<img class="brand-title" :src="buildImgUrl('brand.png')" alt="PeerTube"/>
?
<translate>?</translate>
</div>
<div class="border-title"></div>
@ -342,137 +344,139 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
@import '../scss/_mixins.scss';
.buttons-row {
display: flex;
justify-content: space-between;
padding: 0 20px;
.jpt-button {
width: 330px;
min-height: 50px;
height: fit-content;
}
@media screen and (max-width: $responsive-screen) {
padding: 0;
#home {
.buttons-row {
display: flex;
justify-content: space-between;
padding: 0 20px;
.jpt-button {
margin: 0 3px 0 0;
width: 330px;
min-height: 50px;
height: fit-content;
}
&.explore-create-account {
flex-direction: column;
@media screen and (max-width: $responsive-screen) {
padding: 0;
.create-account-block {
margin-top: 50px;
.jpt-button {
margin: 0 3px 0 0;
}
&.explore-create-account {
flex-direction: column;
.create-account-block {
margin-top: 50px;
}
}
}
@media screen and (max-width: $small-screen) {
.jpt-button {
width: 100%;
}
}
}
@media screen and (max-width: $small-screen) {
.jpt-button {
width: 100%;
}
.jpt-button-legend {
margin-top: 5px;
max-width: 330px;
font-size: 13px;
text-align: center;
}
}
.jpt-button-legend {
margin-top: 5px;
max-width: 330px;
font-size: 13px;
text-align: center;
}
.presentation {
.first-row {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 70px;
margin: auto;
.brand {
height: 47px;
margin-bottom: 20px;
margin-left: -30px;
}
div {
flex-basis: 100%;
}
.description {
font-size: 24px;
font-weight: 600;
}
@media screen and (max-width: $small-screen) {
padding: 15px 0;
.presentation {
.first-row {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 70px;
margin: auto;
.brand {
height: 25px !important
height: 47px;
margin-bottom: 20px;
margin-left: -30px;
}
div {
flex-basis: 100%;
}
.description {
font-size: 20px;
margin-left: 20px;
font-size: 24px;
font-weight: 600;
}
@media screen and (max-width: $small-screen) {
padding: 15px 0;
.brand {
height: 25px !important
}
.description {
font-size: 20px;
margin-left: 20px;
}
}
}
.marketing {
font-size: 16px;
margin: 50px auto;
width: 500px;
text-align: center;
@media screen and (max-width: $small-screen) {
width: 100%;
}
}
}
.marketing {
font-size: 16px;
margin: 50px auto;
width: 500px;
text-align: center;
@media screen and (max-width: $small-screen) {
width: 100%;
}
}
}
#you-are-a-video-maker {
.discover-instances {
min-width: 420px;
width: fit-content;
height: 50px;
margin: 50px auto;
font-size: 20px;
}
}
#your-move {
.one-column {
margin-top: 50px;
}
.buttons-row {
margin-top: 60px;
.jpt-button {
#you-are-a-video-maker {
.discover-instances {
min-width: 420px;
width: fit-content;
height: 50px;
margin: 50px auto;
font-size: 20px;
}
}
}
#behind-peertube {
.framasoft-logo {
flex-basis: auto;
width: 264px;
height: 241px;
#your-move {
.one-column {
margin-top: 50px;
}
.buttons-row {
margin-top: 60px;
.jpt-button {
font-size: 20px;
}
}
}
.jpt-button {
height: 50px;
min-width: 420px;
width: fit-content;
margin: 60px auto;
font-size: 20px;
#behind-peertube {
.framasoft-logo {
flex-basis: auto;
width: 264px;
height: 241px;
}
.jpt-button {
height: 50px;
min-width: 420px;
width: fit-content;
margin: 60px auto;
font-size: 20px;
}
}
}
</style>

View file

@ -1,5 +1,5 @@
<template>
<main>
<main id="instances">
<div class="blocks">
<div class="title-block">
@ -49,60 +49,62 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
.blocks {
margin: 60px auto;
width: 770px;
}
.title-block {
.jpt-button {
margin-top: 25px;
border: 2px solid $orange;
min-width: 225px;
height: 35px;
#instances {
.blocks {
margin: 60px auto;
width: 770px;
}
}
.block-with-image {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 100px;
& > div {
flex-basis: 100%;
img {
width: 370px;
height: 210px;
.title-block {
.jpt-button {
margin-top: 25px;
border: 2px solid $orange;
min-width: 225px;
height: 35px;
}
}
& > * {
margin-right: 20px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
}
@media screen and (max-width: $small-screen) {
.blocks {
width: auto;
}
.block-with-image {
flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 100px;
img {
& > div {
flex-basis: 100%;
img {
width: 370px;
height: 210px;
}
}
& > * {
margin-right: 20px;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
}
@media screen and (max-width: $small-screen) {
.blocks {
width: auto;
}
.block-with-image {
flex-direction: column;
img {
margin-bottom: 20px;
}
}
}
}
</style>

View file

@ -1,10 +1,10 @@
<template>
<main>
<main id="news">
<div class="blocks">
<div class="title-block">
<div class="title" v-translate>PeerTube news!</div>
<p>Discover the latest PeerTube improvements</p>
<p v-translate>Discover the latest PeerTube improvements</p>
<div class="separator"></div>
</div>
@ -111,7 +111,11 @@
</a>.
</p>
<p v-translate>Thanks to all PeerTube contributors!<br />Framasoft</p>
<p>
<translate>Thanks to all PeerTube contributors!</translate>
<br />
Framasoft
</p>
</div>
</article>
@ -171,9 +175,11 @@
<a target="_blank" rel="noopener noreferrer" href="https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0">https://github.com/Chocobozzz/PeerTube/releases/tag/v1.3.0</a>.
</p>
<p v-translate>Thanks to all PeerTube contributors!</p>
<p v-translate>Framasoft.</p>
<p>
<translate>Thanks to all PeerTube contributors!</translate>
<br />
Framasoft
</p>
</div>
</article>
@ -191,9 +197,10 @@
<p v-translate>Here is a small retrospective of the end of 2018/beginning of 2019:</p>
<p v-translate>
In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.<br /> We
also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.
<p>
<translate>In December 2018, we released version 1.1 which contained some moderation tools requested by instance administrators.</translate>
<br />
<translate>We also took the opportunity to add a watched videos history feature and the automatic resuming of video playback.</translate>
</p>
<p v-translate>
@ -214,9 +221,12 @@
</p>
<p v-translate>
As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!<br />
For 2019, we plan to add a plugin and theme management system (even though basic at first), playlist management,
support for audio files upload and many other features.
<translate>As you can see, we have gone far beyond what the crowdfunding has funded. And we will continue!</translate>
<br />
<translate>
For 2019, we plan to add a plugin and theme management system (even though basic at first), playlist management,
support for audio files upload and many other features.
</translate>
</p>
<p v-translate>
@ -229,8 +239,9 @@
<a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/peertube">https://framacolibri.org/c/peertube</a>
</p>
<p v-translate>
Thank you and with our best regards,<br />
<p>
<translate>Thanks to all PeerTube contributors!</translate>
<br />
Framasoft
</p>
</div>
@ -303,8 +314,9 @@
can also contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org"> https://contact.framasoft.org</a>.
</p>
<p v-translate>
Cheers,<br />
<p>
<translate>Cheers,</translate>
<br />
Framasoft
</p>
</div>
@ -359,8 +371,9 @@
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
</p>
<p v-translate>
Cheers,<br />
<p>
<translate>Cheers,</translate>
<br />
Framasoft
</p>
</div>
@ -402,8 +415,9 @@
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
</p>
<p v-translate>
Cheers,<br />
<p>
<translate>Cheers,</translate>
<br />
Framasoft
</p>
</div>
@ -441,11 +455,13 @@
</p>
<p v-translate>
Moreover, you can ask questions on the PeerTube forum. You can also contact us directly on https://contact.framasoft.org.
Moreover, you can ask questions on <a target="_blank" rel="noopener noreferrer" href="https://framacolibri.org/c/qualite/peertube">the PeerTube forum</a>. You can also
contact us directly on <a target="_blank" rel="noopener noreferrer" href="https://contact.framasoft.org">https://contact.framasoft.org.</a>
</p>
<p v-translate>
Cheers,<br />
<p>
<translate>Cheers,</translate>
<br />
Framasoft
</p>
</div>
@ -461,118 +477,124 @@
</main>
</template>
<style scoped lang="scss">
<style lang="scss">
@import '../scss/_variables.scss';
p {
margin-bottom: 10px;
}
p + *:not(ul) {
margin-top: 1em;
}
.blocks {
margin: 60px auto;
}
.title-block {
margin-bottom: 60px;
}
.news {
max-width: 800px;
padding: 40px 50px;
border: solid 1px #d9d9d9;
border-left: 6px solid $orange;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
margin-bottom: 60px;
.title {
font-size: 24px;
#news {
p {
margin-bottom: 10px;
}
.date {
font-size: 16px;
p + *:not(ul) {
margin-top: 1em;
}
.body {
margin-top: 40px;
.blocks {
margin: 60px auto;
}
a {
word-break: break-word;
.title-block {
margin-bottom: 60px;
}
figure {
margin: 30px 0;
border: 10px solid #fff3ea;
border-bottom: 0;
.news {
max-width: 800px;
padding: 40px 50px;
border: solid 1px #d9d9d9;
border-left: 6px solid $orange;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.35);
margin-bottom: 60px;
.title {
font-size: 24px;
}
.date {
font-size: 16px;
}
.body {
margin-top: 40px;
}
a {
word-break: break-word;
}
figure {
margin: 30px 0;
border: 10px solid #fff3ea;
border-bottom: 0;
img {
cursor: pointer;
max-width: 100%;
height: auto;
margin-bottom: 5px;
}
figcaption {
font-size: 14px;
background: #fff3ea;
text-align: center;
padding: 10px 0;
}
}
@media screen and (max-width: $small-screen) {
padding: 10px;
}
}
#modal {
&.hide-modal {
display: none;
}
position: fixed;
z-index: 1;
padding-top: 5vh;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
img {
cursor: pointer;
max-width: 100%;
height: auto;
margin-bottom: 5px;
margin: auto;
display: block;
height: 90%;
width: auto;
}
figcaption {
font-size: 14px;
background: #fff3ea;
.caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
padding: 10px 0;
color: #ccc;
padding: 10px;
}
img,
.caption {
animation-name: zoom;
animation-duration: 0.6s;
}
}
@media screen and (max-width: $small-screen) {
padding: 10px;
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
}
#modal {
&.hide-modal {
display: none;
}
position: fixed;
z-index: 1;
padding-top: 5vh;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
img {
margin: auto;
display: block;
height: 90%;
width: auto;
}
.caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px;
}
img,
.caption {
animation-name: zoom;
animation-duration: 0.6s;
}
}
@keyframes zoom {
from { transform:scale(0) }
to { transform:scale(1) }
}
</style>
<script>