responsive: base ok
This commit is contained in:
5
package-lock.json
generated
5
package-lock.json
generated
@@ -12020,6 +12020,11 @@
|
||||
"resolved": "https://registry.npmjs.org/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
|
||||
"integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw=="
|
||||
},
|
||||
"vue2-touch-events": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/vue2-touch-events/-/vue2-touch-events-3.2.1.tgz",
|
||||
"integrity": "sha512-6aQz9tofO1yLSudW7ltISC5lTFKEu0rcBuYNLrega1AApYUosPuRZ8iinzJQ4k5nUncDIVB2JPcz9qJDoSyQVw=="
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.6.0",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
"vue-router": "^3.4.9",
|
||||
"vue-vimeo-player": "^0.1.0",
|
||||
"vue-youtube-embed": "^2.2.2",
|
||||
"vue2-touch-events": "^3.2.1",
|
||||
"vuex": "^3.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
@@ -81,6 +81,7 @@ fieldset[data-v-340aa566] {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.vsa-item__heading{width:100%;height:100%}.vsa-item__heading,.vsa-item__trigger{display:flex;justify-content:flex-start;align-items:center}.vsa-item__trigger{margin:0;padding:0;color:inherit;font-family:inherit;font-size:100%;line-height:1.15;border-width:0;background-color:transparent;background-image:none;overflow:visible;text-transform:none;flex:1 1 auto;color:var(--vsa-text-color);transition:all .2s linear;padding:var(--vsa-heading-padding)}.vsa-item__trigger[role=button]{cursor:pointer}.vsa-item__trigger[type=button],.vsa-item__trigger[type=reset],.vsa-item__trigger[type=submit]{-webkit-appearance:button}.vsa-item__trigger:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.vsa-item__trigger::-moz-focus-inner,.vsa-item__trigger[type=button]::-moz-focus-inner,.vsa-item__trigger[type=reset]::-moz-focus-inner,.vsa-item__trigger[type=submit]::-moz-focus-inner{border-style:none;padding:0}.vsa-item__trigger:-moz-focusring,.vsa-item__trigger[type=button]:-moz-focusring,.vsa-item__trigger[type=reset]:-moz-focusring,.vsa-item__trigger[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.vsa-item__trigger:focus,.vsa-item__trigger:hover{outline:none;background-color:var(--vsa-highlight-color);color:var(--vsa-bg-color)}.vsa-item__trigger__icon--is-default{width:40px;height:40px;transform:scale(var(--vsa-default-icon-size))}.vsa-item__trigger__icon--is-default:after,.vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-text-color);content:"";height:3px;position:absolute;top:10px;transition:all .13333s ease-in-out;width:30px}.vsa-item__trigger__icon--is-default:before{left:0;transform:rotate(45deg) translate3d(8px,22px,0);transform-origin:100%}.vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-8px,22px,0);right:0;transform-origin:0}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:before{transform:rotate(45deg) translate3d(14px,14px,0)}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-14px,14px,0)}.vsa-item__trigger__icon{display:block;margin-left:auto;position:relative;transition:all .2s ease-in-out}.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-bg-color)}.vsa-item__trigger__content{font-weight:700;font-size:1.25rem}.vsa-item__content{margin:0;padding:var(--vsa-content-padding)}.vsa-item--is-active .vsa-item__heading,.vsa-item:not(:last-of-type){border-bottom:var(--vsa-border)}.vsa-collapse-enter-active,.vsa-collapse-leave-active{transition-property:opacity,height,padding-top,padding-bottom;transition-duration:.3s;transition-timing-function:ease-in-out}.vsa-collapse-enter,.vsa-collapse-leave-active{opacity:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden}.vsa-list{--vsa-max-width:720px;--vsa-min-width:300px;--vsa-heading-padding:1rem 1rem;--vsa-text-color:#373737;--vsa-highlight-color:#57a;--vsa-bg-color:#fff;--vsa-border-color:rgba(0,0,0,0.2);--vsa-border-width:1px;--vsa-border-style:solid;--vsa-border:var(--vsa-border-width) var(--vsa-border-style) var(--vsa-border-color);--vsa-content-padding:1rem 1rem;--vsa-default-icon-size:1;display:block;max-width:var(--vsa-max-width);min-width:var(--vsa-min-width);width:100%;padding:0;margin:0;list-style:none;border:var(--vsa-border);color:var(--vsa-text-color);background-color:var(--vsa-bg-color)}.vsa-list [hidden]{display:none}
|
||||
|
||||
|
||||
#user-tools[data-v-4e9a834e]{
|
||||
@@ -19449,6 +19450,12 @@ header[role="banner"] {
|
||||
max-height: 20em;
|
||||
padding: 1em 1em;
|
||||
box-shadow: 0 0 10px #ccc; } }
|
||||
@media (min-width: 655px) {
|
||||
header[role="banner"] #block-userlogin.tapped > section {
|
||||
transition-delay: 0s;
|
||||
max-height: 20em;
|
||||
padding: 1em 1em;
|
||||
box-shadow: 0 0 10px #ccc; } }
|
||||
header[role="banner"] #block-userlogin .form-item {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
@@ -19534,6 +19541,12 @@ header[role="banner"] {
|
||||
max-height: 50em;
|
||||
padding: 1em 1em;
|
||||
box-shadow: 0 0 10px #ccc; } }
|
||||
@media (min-width: 655px) {
|
||||
header[role="banner"] #user-flags.tapped ul {
|
||||
transition-delay: 0s;
|
||||
max-height: 50em;
|
||||
padding: 1em 1em;
|
||||
box-shadow: 0 0 10px #ccc; } }
|
||||
header[role="banner"] #user-flags li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -19564,6 +19577,9 @@ header[role="banner"] {
|
||||
/* solves sticky problem */ }
|
||||
header[role="banner"] #user-flags li:hover div.actions {
|
||||
opacity: 1; } }
|
||||
@media (min-width: 655px) {
|
||||
header[role="banner"] #user-flags li.tapped div.actions {
|
||||
opacity: 1; } }
|
||||
@media (max-width: 654px) {
|
||||
header[role="banner"] #user-flags li {
|
||||
flex-direction: row-reverse; }
|
||||
@@ -19655,6 +19671,11 @@ header[role="banner"] {
|
||||
transition-delay: 0s;
|
||||
height: 2em;
|
||||
padding: 0.3em 0; } }
|
||||
@media (min-width: 655px) {
|
||||
header[role="banner"] #block-languageswitcher.tapped > ul.links {
|
||||
transition-delay: 0s;
|
||||
height: 2em;
|
||||
padding: 0.3em 0; } }
|
||||
@media (max-width: 654px) {
|
||||
header[role="banner"] #block-languageswitcher h2 {
|
||||
display: none; } }
|
||||
@@ -19695,7 +19716,9 @@ header[role="banner"] {
|
||||
header[role="banner"] #block-pagetitle {
|
||||
padding: 1em 0 0; }
|
||||
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle {
|
||||
display: none; } }
|
||||
display: none; }
|
||||
header[role="banner"] #block-pagetitle h2 {
|
||||
padding: 0.5em 1em 0 !important; } }
|
||||
header[role="banner"] #block-pagetitle h2 {
|
||||
margin: 0;
|
||||
font-size: 1.512em;
|
||||
@@ -20146,10 +20169,12 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
|
||||
width: 100%; }
|
||||
.cards-list > ul > li {
|
||||
flex: 0 1 48%;
|
||||
margin: 0 0 0.5em 0; }
|
||||
margin: 0 0 0.5em 0;
|
||||
filter: drop-shadow(0 0 3px #aaa); }
|
||||
.cards-list > ul > li > article {
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
height: auto;
|
||||
box-shadow: none; }
|
||||
.cards-list > ul > li > article > section.images {
|
||||
height: auto; }
|
||||
.cards-list > ul > li > article > section.images > figure {
|
||||
@@ -20202,6 +20227,8 @@ article.card {
|
||||
/* solves sticky problem */ }
|
||||
article.card.minicard > nav.tools .tool.samples:hover .tool-content {
|
||||
max-width: 140px; } }
|
||||
article.card.minicard > nav.tools .tool.samples.tapped .tool-content {
|
||||
max-width: 140px; }
|
||||
article.card.linkedmaterialcard {
|
||||
width: 190px;
|
||||
height: 110px; }
|
||||
@@ -20293,6 +20320,17 @@ article.card {
|
||||
padding: 0.3em;
|
||||
max-height: 195px;
|
||||
max-width: 200px; } }
|
||||
article.card nav.tools > *.tapped .tool-content {
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 1;
|
||||
padding: 0.3em;
|
||||
max-height: 195px;
|
||||
max-width: 200px; }
|
||||
@media (max-width: 654px) {
|
||||
article.card nav.tools {
|
||||
width: 23px; }
|
||||
article.card nav.tools > * > span.btn, article.card nav.tools > * > a {
|
||||
font-size: 1.2em; } }
|
||||
article.card nav.tools .tool.flags .tool-content ul {
|
||||
display: flex;
|
||||
flex-flow: row wrap; }
|
||||
@@ -20308,6 +20346,8 @@ article.card {
|
||||
/* solves sticky problem */ }
|
||||
article.card nav.tools .tool.flags span.flag:hover {
|
||||
color: #1a1a1a; } }
|
||||
article.card nav.tools .tool.flags span.flag.tapped {
|
||||
color: #1a1a1a; }
|
||||
article.card nav.tools .tool.flags span.flag.isActive {
|
||||
color: #1a1a1a; }
|
||||
article.card nav.tools .tool.flags li.create-flag {
|
||||
@@ -20340,6 +20380,8 @@ article.card {
|
||||
/* solves sticky problem */ }
|
||||
article.card:hover nav.tools {
|
||||
opacity: 1; } }
|
||||
article.card.tapped nav.tools {
|
||||
opacity: 1; }
|
||||
article.card section.images {
|
||||
position: relative; }
|
||||
article.card section.images, article.card section.images * {
|
||||
@@ -20373,6 +20415,16 @@ article.card {
|
||||
height: 610px; }
|
||||
article.card.modal-card > .col {
|
||||
flex-basis: 50%; }
|
||||
@media (max-width: 654px) {
|
||||
article.card.modal-card {
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto; }
|
||||
article.card.modal-card > .col-right {
|
||||
flex: 0 0 auto; }
|
||||
article.card.modal-card > .col-left {
|
||||
flex: 0 0 100%; } }
|
||||
article.card.modal-card section.col-right > *:not(nav.tools) {
|
||||
position: relative;
|
||||
padding: 0.3em 20px 0 0.5em;
|
||||
@@ -20421,6 +20473,9 @@ article.card {
|
||||
cursor: pointer; }
|
||||
article.card.modal-card section.col-right nav.tools div.tool-content {
|
||||
min-width: 385px; }
|
||||
@media (max-width: 654px) {
|
||||
article.card.modal-card section.col-right nav.tools div.tool-content {
|
||||
min-width: 80vw; } }
|
||||
article.card.modal-card section.col-right section.tool.samples div.tool-content ul {
|
||||
font-size: 0.756em;
|
||||
font-weight: 300; }
|
||||
@@ -20433,6 +20488,8 @@ article.card {
|
||||
/* solves sticky problem */ }
|
||||
article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
|
||||
max-height: 370px; } }
|
||||
article.card.modal-card section.col-right section.tool.note.tapped div.tool-content {
|
||||
max-height: 370px; }
|
||||
article.card.modal-card section.col-right section.tool.note div.tool-content textarea,
|
||||
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus,
|
||||
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible,
|
||||
@@ -20470,6 +20527,17 @@ article.card {
|
||||
margin: 0;
|
||||
font-size: 0.882em; }
|
||||
|
||||
@media (min-width: 655px) {
|
||||
.vm--modale-card {
|
||||
max-width: 850px;
|
||||
max-height: 610px;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important; } }
|
||||
|
||||
.vm--overlay {
|
||||
background: rgba(0, 0, 0, 0.5) !important; }
|
||||
|
||||
#main-content > article.thematique div.cols {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@@ -20995,4 +21063,3 @@ body {
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
|
||||
.vsa-item__heading{width:100%;height:100%}.vsa-item__heading,.vsa-item__trigger{display:flex;justify-content:flex-start;align-items:center}.vsa-item__trigger{margin:0;padding:0;color:inherit;font-family:inherit;font-size:100%;line-height:1.15;border-width:0;background-color:transparent;background-image:none;overflow:visible;text-transform:none;flex:1 1 auto;color:var(--vsa-text-color);transition:all .2s linear;padding:var(--vsa-heading-padding)}.vsa-item__trigger[role=button]{cursor:pointer}.vsa-item__trigger[type=button],.vsa-item__trigger[type=reset],.vsa-item__trigger[type=submit]{-webkit-appearance:button}.vsa-item__trigger:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.vsa-item__trigger::-moz-focus-inner,.vsa-item__trigger[type=button]::-moz-focus-inner,.vsa-item__trigger[type=reset]::-moz-focus-inner,.vsa-item__trigger[type=submit]::-moz-focus-inner{border-style:none;padding:0}.vsa-item__trigger:-moz-focusring,.vsa-item__trigger[type=button]:-moz-focusring,.vsa-item__trigger[type=reset]:-moz-focusring,.vsa-item__trigger[type=submit]:-moz-focusring{outline:1px dotted ButtonText}.vsa-item__trigger:focus,.vsa-item__trigger:hover{outline:none;background-color:var(--vsa-highlight-color);color:var(--vsa-bg-color)}.vsa-item__trigger__icon--is-default{width:40px;height:40px;transform:scale(var(--vsa-default-icon-size))}.vsa-item__trigger__icon--is-default:after,.vsa-item__trigger__icon--is-default:before{background-color:var(--vsa-text-color);content:"";height:3px;position:absolute;top:10px;transition:all .13333s ease-in-out;width:30px}.vsa-item__trigger__icon--is-default:before{left:0;transform:rotate(45deg) translate3d(8px,22px,0);transform-origin:100%}.vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-8px,22px,0);right:0;transform-origin:0}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:before{transform:rotate(45deg) translate3d(14px,14px,0)}.vsa-item__trigger[aria-expanded=true] .vsa-item__trigger__icon--is-default:after{transform:rotate(-45deg) translate3d(-14px,14px,0)}.vsa-item__trigger__icon{display:block;margin-left:auto;position:relative;transition:all .2s ease-in-out}.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-bg-color)}.vsa-item__trigger__content{font-weight:700;font-size:1.25rem}.vsa-item__content{margin:0;padding:var(--vsa-content-padding)}.vsa-item--is-active .vsa-item__heading,.vsa-item:not(:last-of-type){border-bottom:var(--vsa-border)}.vsa-collapse-enter-active,.vsa-collapse-leave-active{transition-property:opacity,height,padding-top,padding-bottom;transition-duration:.3s;transition-timing-function:ease-in-out}.vsa-collapse-enter,.vsa-collapse-leave-active{opacity:0;height:0;padding-top:0;padding-bottom:0;overflow:hidden}.vsa-list{--vsa-max-width:720px;--vsa-min-width:300px;--vsa-heading-padding:1rem 1rem;--vsa-text-color:#373737;--vsa-highlight-color:#57a;--vsa-bg-color:#fff;--vsa-border-color:rgba(0,0,0,0.2);--vsa-border-width:1px;--vsa-border-style:solid;--vsa-border:var(--vsa-border-width) var(--vsa-border-style) var(--vsa-border-color);--vsa-content-padding:1rem 1rem;--vsa-default-icon-size:1;display:block;max-width:var(--vsa-max-width);min-width:var(--vsa-min-width);width:100%;padding:0;margin:0;list-style:none;border:var(--vsa-border);color:var(--vsa-text-color);background-color:var(--vsa-bg-color)}.vsa-list [hidden]{display:none}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -34,6 +34,15 @@ import { i18n, loadLanguageAsync } from 'vuejs/i18n'
|
||||
import VueMeta from 'vue-meta'
|
||||
Vue.use(VueMeta)
|
||||
|
||||
import VueSimpleAccordion from 'vue-simple-accordion'
|
||||
Vue.use(VueSimpleAccordion, {
|
||||
// ... Options go here
|
||||
})
|
||||
import 'vue-simple-accordion/dist/vue-simple-accordion.css'
|
||||
|
||||
import Vue2TouchEvents from 'vue2-touch-events'
|
||||
Vue.use(Vue2TouchEvents)
|
||||
|
||||
import VUserBlock from 'vuejs/components/Block/UserBlock'
|
||||
import VMainContent from 'vuejs/components/Content/MainContent'
|
||||
import VSearchBlock from 'vuejs/components/Block/SearchBlock'
|
||||
@@ -47,13 +56,6 @@ import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
|
||||
import 'theme/assets/styles/main.scss'
|
||||
import 'theme/assets/styles/print.scss'
|
||||
|
||||
import VueSimpleAccordion from 'vue-simple-accordion';
|
||||
import 'vue-simple-accordion/dist/vue-simple-accordion.css';
|
||||
|
||||
Vue.use(VueSimpleAccordion, {
|
||||
// ... Options go here
|
||||
});
|
||||
|
||||
import { MA } from 'vuejs/api/ma-axios'
|
||||
|
||||
(function (Drupal, drupalSettings, drupalDecoupled) {
|
||||
|
||||
@@ -34,6 +34,9 @@ $mdi-font-path: './mdi/fonts/';
|
||||
@content;
|
||||
}
|
||||
}
|
||||
&.tapped{
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
aside.messages{
|
||||
@@ -524,6 +527,9 @@ header[role="banner"]{
|
||||
display: none;
|
||||
}
|
||||
padding: 1em 0 0;
|
||||
h2{
|
||||
padding: 0.5em 1em 0!important;
|
||||
}
|
||||
}
|
||||
h2{
|
||||
margin:0;
|
||||
@@ -1228,9 +1234,11 @@ article.node--type-frontpage{
|
||||
>li{
|
||||
flex: 0 1 48%;
|
||||
margin:0 0 0.5em 0;
|
||||
filter: drop-shadow(0 0 3px #aaa);
|
||||
>article{
|
||||
width:100%;
|
||||
height:auto;
|
||||
box-shadow: none;
|
||||
>section.images{
|
||||
height: auto;
|
||||
>figure{
|
||||
@@ -1417,6 +1425,16 @@ article.card{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include col-mediaquery-max(3){
|
||||
width:23px;
|
||||
>*{
|
||||
>span.btn, >a{
|
||||
font-size:1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool.flags{
|
||||
.tool-content{
|
||||
ul{
|
||||
@@ -1526,6 +1544,18 @@ article.card{
|
||||
>.col{
|
||||
flex-basis: 50%;
|
||||
}
|
||||
@include col-mediaquery-max(3){
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
>.col-right{
|
||||
flex:0 0 auto;
|
||||
}
|
||||
>.col-left{
|
||||
flex:0 0 100%;
|
||||
}
|
||||
}
|
||||
section.col-right{
|
||||
>*:not(nav.tools){
|
||||
position: relative;
|
||||
@@ -1610,7 +1640,11 @@ article.card{
|
||||
}
|
||||
div.tool-content{
|
||||
min-width: $column_width *2 - $navtool_width - 10px;
|
||||
@include col-mediaquery-max(3){
|
||||
min-width: 80vw;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
section.tool.samples{
|
||||
div.tool-content{
|
||||
@@ -1708,6 +1742,20 @@ article.card{
|
||||
}
|
||||
}
|
||||
|
||||
// vuejs-modale hack as maxWidth and maxHeight does not work :(
|
||||
@include col-mediaquery-min(3){
|
||||
.vm--modale-card{
|
||||
max-width: 850px;
|
||||
max-height: 610px;
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
}
|
||||
}
|
||||
.vm--overlay{
|
||||
background: rgba(0, 0, 0, 0.5)!important;
|
||||
}
|
||||
|
||||
// _____ _ _ _
|
||||
// |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
|
||||
// | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)
|
||||
|
||||
@@ -205,9 +205,14 @@ export default {
|
||||
},
|
||||
{
|
||||
name: `modal-${this.item.id}`,
|
||||
draggable: true,
|
||||
width: '850px',
|
||||
height: '610px'
|
||||
draggable: false,
|
||||
classes: "vm--modale-card",
|
||||
// this does not work
|
||||
// adaptative: true,
|
||||
// maxWidth: 850,
|
||||
// maxHeight: 610,
|
||||
width: '95%',
|
||||
height: '95%'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -67,8 +67,10 @@ export default {
|
||||
{
|
||||
name: `modal-${this.item.id}`,
|
||||
draggable: false,
|
||||
width: '850px',
|
||||
height: '610px'
|
||||
maxWidth: 850,
|
||||
maxHeight: 610,
|
||||
width: '95%',
|
||||
height: '95%'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,14 +2,19 @@
|
||||
<div class="loading" v-if="!material || loading">
|
||||
<span>Loading ...</span>
|
||||
</div>
|
||||
<article v-else class="card modal-card">
|
||||
<article
|
||||
v-else
|
||||
class="card modal-card"
|
||||
v-touch="onTapCard"
|
||||
v-touch:swipe="onSwipeCard"
|
||||
>
|
||||
<section class="col col-right">
|
||||
<header>
|
||||
<h1>{{ material.title }}</h1>
|
||||
<h4>{{ material.short_description }}</h4>
|
||||
<span class="ref">{{ material.reference }}</span>
|
||||
</header>
|
||||
<nav class="tools">
|
||||
<nav ref="tools" class="tools">
|
||||
<section class="tool close">
|
||||
<span
|
||||
class="btn mdi mdi-close"
|
||||
@@ -17,7 +22,10 @@
|
||||
/>
|
||||
</section>
|
||||
<section class="tool flags">
|
||||
<span class="btn mdi mdi-folder-outline"/>
|
||||
<span
|
||||
class="btn mdi mdi-folder-outline"
|
||||
v-touch.prevent.stop="onTapTool"
|
||||
/>
|
||||
<div class="tool-content">
|
||||
<span class="label">{{ $t("materio.My folders") }}</span>
|
||||
<ul>
|
||||
@@ -49,7 +57,10 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="tool samples" v-if="item.samples && item.samples.length">
|
||||
<span class="btn mdi mdi-beaker-outline"/>
|
||||
<span
|
||||
class="btn mdi mdi-beaker-outline"
|
||||
v-touch.prevent.stop="onTapTool"
|
||||
/>
|
||||
<div class="tool-content">
|
||||
<span class="label">{{ $t("materio.Samples") }}</span>
|
||||
<ul>
|
||||
@@ -63,8 +74,16 @@
|
||||
</div>
|
||||
</section>
|
||||
<section class="tool note">
|
||||
<span v-if="note_nid" class="btn mdi mdi-note"/>
|
||||
<span v-else class="btn mdi mdi-note-outline"/>
|
||||
<span
|
||||
v-if="note_nid"
|
||||
class="btn mdi mdi-note"
|
||||
v-touch.prevent.stop="onTapTool"
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="btn mdi mdi-note-outline"
|
||||
v-touch.prevent.stop="onTapTool"
|
||||
/>
|
||||
<div class="tool-content">
|
||||
<textarea spellcheck="false" v-model="note" name="note"/>
|
||||
</div>
|
||||
@@ -418,6 +437,10 @@ export default {
|
||||
// this.$modal.hideAll()
|
||||
this.$modal.hide(`modal-${this.item.id}`)
|
||||
},
|
||||
onSwipeCard (e) {
|
||||
console.log('onSwipeCard', e)
|
||||
this.$modal.hide(`modal-${this.item.id}`)
|
||||
},
|
||||
prettyFileSize(bytes){
|
||||
return prettyBytes(parseInt(bytes))
|
||||
},
|
||||
@@ -476,6 +499,23 @@ export default {
|
||||
.catch(error => {
|
||||
console.warn('Issue with createNote', error)
|
||||
})
|
||||
},
|
||||
onTapTool (e) {
|
||||
console.log('ontapTool', e)
|
||||
let tools = e.target.parentNode.parentNode.querySelectorAll('section.tool')
|
||||
tools.forEach((item, i) => {
|
||||
item.classList.remove('tapped')
|
||||
})
|
||||
e.target.parentNode.classList.add('tapped')
|
||||
},
|
||||
onTapCard (e) {
|
||||
console.log('ontapCard', e)
|
||||
let tools = this.$refs['tools'].querySelectorAll('section.tool')
|
||||
// console.log();
|
||||
tools.forEach((item, i) => {
|
||||
console.log('item', item)
|
||||
item.classList.remove('tapped')
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,6 +14,7 @@ export default {
|
||||
template: null,
|
||||
typed: null,
|
||||
autocomplete: null,
|
||||
$input: null
|
||||
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
|
||||
}
|
||||
},
|
||||
@@ -25,7 +26,9 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
console.log("search submited", this.typed, this.autocomplete);
|
||||
console.log("search submited", this.typed, this.autocomplete)
|
||||
// unfocus the text input to hide the keyboard on mobile device
|
||||
this.$input.blur()
|
||||
// New search is triggered by Base.vue with router (which will also fill the store)
|
||||
this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
|
||||
// this.$router.push({
|
||||
@@ -52,7 +55,8 @@ export default {
|
||||
focus: {
|
||||
// directive definition
|
||||
inserted: function (el) {
|
||||
el.focus()
|
||||
// do not focus the input as it popup the keyboard on mobile device
|
||||
// el.focus()
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -90,11 +94,11 @@ export default {
|
||||
// console.log('SearchForm mounted');
|
||||
Drupal.attachBehaviors(this.$el);
|
||||
// get the search input
|
||||
let $input = this.$el.querySelector('#edit-search')
|
||||
this.$input = this.$el.querySelector('#edit-search')
|
||||
// // focus on input
|
||||
// $input.focus()
|
||||
// Catch the jquery ui events for autocmplete widget
|
||||
jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
|
||||
jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
|
||||
},
|
||||
render(h) {
|
||||
// console.log('searchForm render');
|
||||
|
||||
Reference in New Issue
Block a user