Add an aside « latest articles » section
Remove day of week, add a calendar icon and fix styles (thx @josephk/JoinMobilizon for the inspiration) Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel
parent
0c08801d0d
commit
76ae9b1fc2
4 changed files with 49 additions and 26 deletions
|
|
@ -277,22 +277,23 @@ a.button {
|
|||
}
|
||||
}
|
||||
|
||||
.faq {
|
||||
.container .faq {
|
||||
h2 {
|
||||
margin: 40px 0 5px;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 40px 30px 0;
|
||||
|
||||
time {
|
||||
color: #757575;
|
||||
p {
|
||||
margin: auto auto 15px;
|
||||
|
||||
&.small {
|
||||
font-size: 80%;
|
||||
font-weight: 400;
|
||||
|
||||
time, i {
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
time, p {
|
||||
display: block;
|
||||
margin: auto auto 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,18 +3,38 @@
|
|||
<vue-headful
|
||||
:title="$t('meta.title') + ' - ' + $t('hof.title')"
|
||||
/>
|
||||
<section class="clearfix faq">
|
||||
<div class="container">
|
||||
<section class="col-lg-8 faq">
|
||||
<h1>{{ $t('news.title') }}</h1>
|
||||
<span>{{ $t('news.subtitle') }}</span>
|
||||
<div v-for="(bloc, key) in $t('news.blocs')" :id="key">
|
||||
<a :href="`#${key}`"><h2>{{ bloc.title }}</h2></a>
|
||||
<p class="small">
|
||||
<i aria-hidden="true" class="fa fa-calendar"></i>
|
||||
<time v-if="bloc.date" :datetime="bloc.date.data">{{ bloc.date.text }}</time>
|
||||
</p>
|
||||
<p v-for="p in bloc.text" v-html="p"></p>
|
||||
<hr />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="col-lg-4">
|
||||
<div class="sticky-top">
|
||||
<div class="bloc">
|
||||
<nav>
|
||||
<h3>{{ $t('news.latest-articles') }}</h3>
|
||||
<ul>
|
||||
<li v-for="(bloc, key) in $t('news.blocs')">
|
||||
<a :href="`#${key}`">{{ bloc.title }}</a>
|
||||
<time v-if="bloc.date" :datetime="bloc.date.data" class="text-muted small">
|
||||
{{ bloc.date.text }}
|
||||
</time>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -461,11 +461,12 @@ hof:
|
|||
news:
|
||||
title: What's up on PeerTube
|
||||
subtitle: Discover the tool's latest improvements
|
||||
latest-articles: Latest articles
|
||||
blocs:
|
||||
newsletter26-02-2019:
|
||||
title: 'PeerTube: retrospective, new features and more to come!'
|
||||
date:
|
||||
text: Tuesday 26 February 2019
|
||||
text: 26 February 2019
|
||||
data: 2019-02-26
|
||||
text:
|
||||
p1: Since version 1.0 has been released last November, we went on improving
|
||||
|
|
@ -503,7 +504,7 @@ news:
|
|||
newsletter16-10-2018:
|
||||
title: 'PeerTube crowdfunding newsletter #4'
|
||||
date:
|
||||
text: Tuesday 16 October 2018
|
||||
text: 16 October 2018
|
||||
data: 2018-10-16
|
||||
text:
|
||||
p1: Hello everyone!
|
||||
|
|
@ -551,7 +552,7 @@ news:
|
|||
newsletter12-09-2018:
|
||||
title: 'PeerTube crowdfunding newsletter #3'
|
||||
date:
|
||||
text: Wednesday, September 12, 2018
|
||||
text: September 12, 2018
|
||||
data: 2018-09-12
|
||||
text:
|
||||
p1: Hello everyone!
|
||||
|
|
@ -589,7 +590,7 @@ news:
|
|||
newsletter20-08-2018:
|
||||
title: 'PeerTube crowdfunding newsletter #2'
|
||||
date:
|
||||
text: Monday, August 20, 2018
|
||||
text: August 20, 2018
|
||||
data: 2018-08-20
|
||||
text:
|
||||
p1: Hello everyone!
|
||||
|
|
@ -617,9 +618,9 @@ news:
|
|||
<a href="https://contact.framasoft.org">https://contact.framasoft.org.</a>'
|
||||
p8: 'Cheers,<br>Framasoft'
|
||||
newsletter23-07-2018:
|
||||
title: Newsletter du crowdfunding de PeerTube n°1
|
||||
title: 'PeerTube crowdfunding newsletter #1'
|
||||
date:
|
||||
text: Monday 23 July 2018
|
||||
text: 23 July 2018
|
||||
data: 2018-07-23
|
||||
text:
|
||||
p1: Hello everyone!
|
||||
|
|
|
|||
|
|
@ -496,12 +496,13 @@ hof:
|
|||
news:
|
||||
title: Quoi de neuf sur PeerTube ?
|
||||
subtitle: Découvrez les dernières améliorations de l'outil
|
||||
latest-articles: Derniers articles
|
||||
blocs:
|
||||
newsletter26-02-2019:
|
||||
title: 'PeerTube : rétrospective et nouvelles fonctionnalités : l''actu de février
|
||||
2019'
|
||||
date:
|
||||
text: Mardi 26 Février 2019
|
||||
text: 26 Février 2019
|
||||
data: 2019-02-26
|
||||
text:
|
||||
p1: Depuis la version 1.0 sortie en novembre dernier, nous avons continué
|
||||
|
|
@ -543,7 +544,7 @@ news:
|
|||
newsletter16-10-2018:
|
||||
title: Newsletter du crowdfunding de PeerTube n°4
|
||||
date:
|
||||
text: Mardi 16 Octobre 2018
|
||||
text: 16 Octobre 2018
|
||||
data: 2018-10-16
|
||||
text:
|
||||
p1: Bonjour à toutes et à tous,
|
||||
|
|
@ -594,7 +595,7 @@ news:
|
|||
newsletter12-09-2018:
|
||||
title: Newsletter du crowdfunding de PeerTube n°3
|
||||
date:
|
||||
text: Mercredi 12 Septembre 2018
|
||||
text: 12 Septembre 2018
|
||||
data: 2018-09-12
|
||||
text:
|
||||
p1: Bonjour à toutes et à tous,
|
||||
|
|
@ -641,7 +642,7 @@ news:
|
|||
newsletter20-08-2018:
|
||||
title: Newsletter du crowdfunding de PeerTube n°2
|
||||
date:
|
||||
text: Lundi 20 Août 2018
|
||||
text: 20 Août 2018
|
||||
data: 2018-08-20
|
||||
text:
|
||||
p1: Bonjour à toutes et à tous,
|
||||
|
|
@ -675,7 +676,7 @@ news:
|
|||
newsletter23-07-2018:
|
||||
title: Newsletter du crowdfunding de PeerTube n°1
|
||||
date:
|
||||
text: Lundi 23 Juillet 2018
|
||||
text: 23 Juillet 2018
|
||||
data: 2018-07-23
|
||||
text:
|
||||
p1: Bonjour à toutes et à tous,
|
||||
|
|
|
|||
Loading…
Reference in a new issue