bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

better blabla/article display

Browse Source
This commit is contained in:
bachir
2020-02-20 10:36:49 +01:00
parent b6c38341b4
commit b32e609538
5 changed files with 89 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/materiotheme/assets/dist/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/materiotheme/assets/dist/main.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
web/themes/custom/materiotheme/assets/styles/base/_colors.scss
+1
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;
web/themes/custom/materiotheme/assets/styles/main.scss
+28
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{
web/themes/custom/materiotheme/vuejs/components/Pages/Article.vue
+58 -52
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">