refactored modale : accordion
This commit is contained in:
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -45,15 +45,12 @@ import { mapState } from 'vuex'
|
||||
import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
|
||||
import 'theme/assets/styles/main.scss'
|
||||
|
||||
// import prettyBytes from 'vuejs/plugins/prettyBytes'
|
||||
// Vue.use(prettyBytes)
|
||||
|
||||
// Vue.filter('prettyBytes', function (value) {
|
||||
// if (!value) return ''
|
||||
// value = value.toString()
|
||||
// return value + 'Mb'
|
||||
// })
|
||||
import VueSimpleAccordion from 'vue-simple-accordion';
|
||||
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
|
||||
|
||||
Vue.use(VueSimpleAccordion, {
|
||||
// ... Options go here
|
||||
});
|
||||
|
||||
(function (Drupal, drupalSettings, drupalDecoupled) {
|
||||
const MaterioTheme = function () {
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
$transparent-bg: rgba(255,255,255, 0.95);
|
||||
$transparent-bg-blk: rgba(0,0,0, 0.75);
|
||||
|
||||
$color-main-text: #1A1A1A;
|
||||
|
||||
$color-base:#69cdcf;
|
||||
$color-showrooms:#50aa3c;
|
||||
$color-blabla:#9458aa;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
body {
|
||||
background: white;
|
||||
color:$color-main-text;
|
||||
}
|
||||
|
||||
a{
|
||||
|
||||
@@ -1180,6 +1180,35 @@ article.card{
|
||||
}
|
||||
|
||||
}
|
||||
.vsa-list{
|
||||
padding:0;
|
||||
border: none;
|
||||
--vsa-heading-padding: 0 0;
|
||||
--vsa-content-padding: 0 0 0.5em;
|
||||
--vsa-default-icon-size: 0.2;
|
||||
--vsa-border-width: 0;
|
||||
--vsa-text-color: #{$color-main-text};
|
||||
--vsa-highlight-color: #fff;
|
||||
--vsa-bg-color: #fff;
|
||||
|
||||
.vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::before, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::before {
|
||||
background-color: var(--vsa-text-color);
|
||||
}
|
||||
.vsa-item{
|
||||
.vsa-item__heading{
|
||||
button.vsa-item__trigger{
|
||||
height:2em;
|
||||
&:hover,
|
||||
&:focus{
|
||||
color: var(--vsa-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.vsa-item__content{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
section.linked-materials{
|
||||
>ul{
|
||||
display: flex;
|
||||
@@ -1220,8 +1249,25 @@ article.card{
|
||||
}
|
||||
}
|
||||
}
|
||||
section.tool.industriels{
|
||||
div.tool-content{
|
||||
// section.tool.industriels{
|
||||
// div.tool-content{
|
||||
// display: flex;
|
||||
// flex-flow: row;
|
||||
// >section{
|
||||
// flex: 0 0 50%;
|
||||
// h2{
|
||||
// margin:0;
|
||||
// font-size: 1em;
|
||||
// line-height: 0.6;
|
||||
// }
|
||||
// p{
|
||||
// margin: 0;
|
||||
// font-size: 0.882em;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
section.industriels{
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
>section{
|
||||
@@ -1236,7 +1282,6 @@ article.card{
|
||||
font-size: 0.882em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section.attachments{
|
||||
a{
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="tool industriels" v-if="material.manufacturer || material.distributor">
|
||||
<!-- <section class="tool industriels" v-if="material.manufacturer || material.distributor">
|
||||
<span class="btn mdi mdi-factory"/>
|
||||
<div class="tool-content">
|
||||
<section v-if="material.distributor">
|
||||
@@ -78,28 +78,77 @@
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
</nav>
|
||||
<section class="body" v-html="material.body"/>
|
||||
<section v-if="material.attachments" class="attachments">
|
||||
<span class="label">{{ $t("materio.Attachments") }}</span>
|
||||
<ul>
|
||||
<li
|
||||
v-for="attachmt in material.attachments" :key="attachmt.file.fid"
|
||||
>
|
||||
<a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
|
||||
<p v-if="attachmt.description" class="description" v-html="attachmt.description" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="material.linked_materials" class="linked-materials">
|
||||
<span class="label">{{ $t("materio.Linked materials") }}</span>
|
||||
<ul>
|
||||
<li v-for="m in material.linked_materials" v-bind:key="m.id">
|
||||
<LinkedMaterialCard :item="m"/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<vsa-list>
|
||||
<vsa-item v-if="material.linked_materials">
|
||||
<vsa-heading>
|
||||
<span class="label">{{ $t("materio.Linked materials") }}</span>
|
||||
</vsa-heading>
|
||||
<vsa-content>
|
||||
<section class="linked-materials">
|
||||
<ul>
|
||||
<li v-for="m in material.linked_materials" v-bind:key="m.id">
|
||||
<LinkedMaterialCard :item="m"/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</vsa-content>
|
||||
</vsa-item>
|
||||
|
||||
<vsa-item v-if="material.manufacturer || material.distributor">
|
||||
<vsa-heading>
|
||||
<span class="label">{{ $t("default.Contact") }}</span>
|
||||
</vsa-heading>
|
||||
<vsa-content>
|
||||
<section class="industriels">
|
||||
<section v-if="material.distributor">
|
||||
<span class="label">{{ $t("materio.Distributor") }}</span>
|
||||
<ul>
|
||||
<li v-for="distrib in material.distributor" v-bind:key="distrib.id">
|
||||
<h2>{{ distrib.name }}</h2>
|
||||
<p v-if="distrib.website">
|
||||
<a target="_blank" :href="distrib.website.url">distrib.website.url</a>
|
||||
</p>
|
||||
<p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="material.manufacturer">
|
||||
<span class="label">{{ $t("materio.Manufacturer") }}</span>
|
||||
<ul>
|
||||
<li v-for="manu in material.manufacturer" v-bind:key="manu.id">
|
||||
<h2>{{ manu.name }}</h2>
|
||||
<p v-if="manu.website">
|
||||
<a target="_blank" :href="manu.website.url">manu.website.url</a>
|
||||
</p>
|
||||
<p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</section>
|
||||
</vsa-content>
|
||||
</vsa-item>
|
||||
|
||||
<vsa-item v-if="material.attachments && material.attachments.length">
|
||||
<vsa-heading>
|
||||
<span class="label">{{ $t("materio.Attachments") }}</span>
|
||||
</vsa-heading>
|
||||
<vsa-content>
|
||||
<section class="attachments">
|
||||
<ul>
|
||||
<li
|
||||
v-for="attachmt in material.attachments" :key="attachmt.file.fid"
|
||||
>
|
||||
<a target="_blank" :href="attachmt.file.url">{{ attachmt.file.filename}} <span>({{ prettyFileSize(attachmt.file.filesize) }})</span></a>
|
||||
<p v-if="attachmt.description" class="description" v-html="attachmt.description" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</vsa-content>
|
||||
</vsa-item>
|
||||
</vsa-list>
|
||||
</section>
|
||||
<section class="col col-left images" v-switcher>
|
||||
<figure
|
||||
|
||||
Reference in New Issue
Block a user