better blabla/article display
This commit is contained in:
parent
b6c38341b4
commit
b32e609538
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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{
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue