refactored modale : accordion
This commit is contained in:
parent
8945034b21
commit
b675960e2a
|
|
@ -8401,6 +8401,12 @@
|
|||
"integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.merge": {
|
||||
"version": "4.6.2",
|
||||
"resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
|
||||
"integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.template": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
|
||||
|
|
@ -11901,6 +11907,15 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"vue-simple-accordion": {
|
||||
"version": "0.1.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-simple-accordion/-/vue-simple-accordion-0.1.0.tgz",
|
||||
"integrity": "sha512-y5oovH55smiNkEZ4lWLpE7H9t0TTYofN/zo4/NTap6Va/Ob+WlU7eRA2nzbFIaJUqk4cXHPJbLUblxU1jAL98g==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"lodash.merge": "^4.6.2"
|
||||
}
|
||||
},
|
||||
"vue-style-loader": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@
|
|||
"vue-loader": "^15.9.5",
|
||||
"vue-meta": "^2.4.0",
|
||||
"vue-server-renderer": "^2.6.12",
|
||||
"vue-simple-accordion": "^0.1.0",
|
||||
"vue-style-loader": "^4.1.2",
|
||||
"vue-template-compiler": "^2.6.12",
|
||||
"vuex-extensions": "^1.1.5",
|
||||
|
|
|
|||
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{
|
||||
|
|
@ -1237,7 +1283,6 @@ article.card{
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section.attachments{
|
||||
a{
|
||||
margin:0;
|
||||
|
|
|
|||
|
|
@ -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,11 +78,65 @@
|
|||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</section> -->
|
||||
</nav>
|
||||
<section class="body" v-html="material.body"/>
|
||||
<section v-if="material.attachments" class="attachments">
|
||||
<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"
|
||||
|
|
@ -92,14 +146,9 @@
|
|||
</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-content>
|
||||
</vsa-item>
|
||||
</vsa-list>
|
||||
</section>
|
||||
<section class="col col-left images" v-switcher>
|
||||
<figure
|
||||
|
|
|
|||
Loading…
Reference in New Issue