better blabla/article display

This commit is contained in:
Bachir Soussi Chiadmi 2020-02-20 10:36:49 +01:00
parent b6c38341b4
commit b32e609538
5 changed files with 89 additions and 54 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,5 @@
$transparent-bg: rgba(255,255,255, 0.95);
$transparent-bg-blk: rgba(0,0,0, 0.75);
$color-base:#69cdcf;
$color-showrooms:#50aa3c;

View File

@ -619,6 +619,18 @@ article.card{
}
#main-content > article.article{
div.cols{
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(6, 1fr);
grid-gap: 1em;
div.col-left{
grid-column: 1;
}
div.col-right{
grid-column: 2/6;
}
}
section.accroche{
figure{
width:$column_width*2 + $column_goutiere;
@ -637,9 +649,20 @@ article.card{
padding:0 0.5em 0 0;
}
}
section.videos{
ul{
margin:0; padding:0;
li{
margin:0; padding:0;
display: inline-block;
width:100%; overflow: hidden;
}
}
}
section.visuels{
width:calc(100% + #{$column_goutiere});
figure{
position: relative;
display: inline-block;
vertical-align: top;
width:$column_width*2 + $column_goutiere;
@ -647,6 +670,11 @@ article.card{
img{
width:100%;
}
caption{
position: absolute; bottom: 0; left:0;
box-sizing: border-box; width: 100%; padding:0.5em;
background-color: $transparent-bg-blk; color: #fff;
}
}
}
aside.linked-materials{

View File

@ -23,59 +23,65 @@
</li>
</ul>
</nav>
<section class="accroche">
<figure>
<img
:src="content.image_accroche.src"
:alt="content.image_accroche.alt"
:title="content.image_accroche.title"
/>
</figure>
</section>
<section class="taxonomy">
<div class="thesaurus">
<ul>
<li
v-for="term in content.field_thesaurus" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
<div class="tags">
<ul>
<li
v-for="term in content.field_tags" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
</section>
<section class="body" v-html="content.body"></section>
<section class="video">
<ul>
<li v-for="video in content.videos" v-bind:key="video.id">
<vimeo-player
v-if="video.provider == 'vimeo'"
ref="player"
:video-id="video.id"
<div class="cols">
<div class="col col-left">
<section class="accroche">
<figure>
<img
:src="content.image_accroche.src"
:alt="content.image_accroche.alt"
:title="content.image_accroche.title"
/>
<youtube
v-if="video.provider == 'youtube'"
:video-id="video.id"
/>
</li>
</ul>
</section>
<section class="visuels">
<figure
v-for="visuel in content.field_visuel" v-bind:key="visuel.id"
>
<img
:src="visuel.src"
:alt="visuel.alt"
:title="visuel.title"
/>
<caption></caption>
</figure>
</section>
</figure>
</section>
<section class="taxonomy">
<div class="thesaurus">
<ul>
<li
v-for="term in content.field_thesaurus" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
<div class="tags">
<ul>
<li
v-for="term in content.field_tags" v-bind:key="term.id"
>{{ term.name }}</li>
</ul>
</div>
</section>
<section class="body" v-html="content.body"></section>
<section v-if="content.videos" class="videos">
<ul>
<li v-for="video in content.videos" v-bind:key="video.id">
<vimeo-player
v-if="video.provider == 'vimeo'"
ref="player"
:video-id="video.id"
:player-width="480"
/>
<youtube
v-if="video.provider == 'youtube'"
:video-id="video.id"
:player-width="480"
/>
</li>
</ul>
</section>
</div> <!-- //col-left -->
<div class="col col-right">
<section class="visuels">
<figure v-for="visuel in content.field_visuel" v-bind:key="visuel.id">
<img
:src="visuel.src"
:alt="visuel.alt"
:title="visuel.title"
/>
<caption v-if="visuel.title">{{ visuel.title }}</caption>
</figure>
</section>
</div> <!-- // col-right -->
</div> <!-- // cols -->
<aside class="linked-materials">
<h3 class="field__label">Linked Materials</h3>
<div class="card-list">