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

responsive: base ok

This commit is contained in:
Bachir Soussi Chiadmi 2021-03-30 15:42:40 +02:00
parent 2f1636dfd4
commit d72e102cc5
10 changed files with 218 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package-lock.json generated
View File

@ -12020,6 +12020,11 @@
"resolved": "https://registry.npmjs.org/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz", "resolved": "https://registry.npmjs.org/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
"integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw==" "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": { "vuex": {
"version": "3.6.0", "version": "3.6.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",

1
package.json
View File

@ -28,6 +28,7 @@
"vue-router": "^3.4.9", "vue-router": "^3.4.9",
"vue-vimeo-player": "^0.1.0", "vue-vimeo-player": "^0.1.0",
"vue-youtube-embed": "^2.2.2", "vue-youtube-embed": "^2.2.2",
"vue2-touch-events": "^3.2.1",
"vuex": "^3.6.0" "vuex": "^3.6.0"
}, },
"devDependencies": { "devDependencies": {

75
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@ -81,6 +81,7 @@ fieldset[data-v-340aa566] {
border: none; 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]{ #user-tools[data-v-4e9a834e]{
@ -19449,6 +19450,12 @@ header[role="banner"] {
max-height: 20em; max-height: 20em;
padding: 1em 1em; padding: 1em 1em;
box-shadow: 0 0 10px #ccc; } } 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 { header[role="banner"] #block-userlogin .form-item {
margin: 0; margin: 0;
position: relative; position: relative;
@ -19534,6 +19541,12 @@ header[role="banner"] {
max-height: 50em; max-height: 50em;
padding: 1em 1em; padding: 1em 1em;
box-shadow: 0 0 10px #ccc; } } 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 { header[role="banner"] #user-flags li {
width: 100%; width: 100%;
display: flex; display: flex;
@ -19564,6 +19577,9 @@ header[role="banner"] {
/* solves sticky problem */ } /* solves sticky problem */ }
header[role="banner"] #user-flags li:hover div.actions { header[role="banner"] #user-flags li:hover div.actions {
opacity: 1; } } opacity: 1; } }
@media (min-width: 655px) {
header[role="banner"] #user-flags li.tapped div.actions {
opacity: 1; } }
@media (max-width: 654px) { @media (max-width: 654px) {
header[role="banner"] #user-flags li { header[role="banner"] #user-flags li {
flex-direction: row-reverse; } flex-direction: row-reverse; }
@ -19655,6 +19671,11 @@ header[role="banner"] {
transition-delay: 0s; transition-delay: 0s;
height: 2em; height: 2em;
padding: 0.3em 0; } } 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) { @media (max-width: 654px) {
header[role="banner"] #block-languageswitcher h2 { header[role="banner"] #block-languageswitcher h2 {
display: none; } } display: none; } }
@ -19695,7 +19716,9 @@ header[role="banner"] {
header[role="banner"] #block-pagetitle { header[role="banner"] #block-pagetitle {
padding: 1em 0 0; } padding: 1em 0 0; }
body.path-frontpage header[role="banner"] #block-pagetitle, body.path-home header[role="banner"] #block-pagetitle { 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 { header[role="banner"] #block-pagetitle h2 {
margin: 0; margin: 0;
font-size: 1.512em; font-size: 1.512em;
@ -20146,10 +20169,12 @@ article.node--type-frontpage .node__content > section.home-pricing .field--name-
width: 100%; } width: 100%; }
.cards-list > ul > li { .cards-list > ul > li {
flex: 0 1 48%; 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 { .cards-list > ul > li > article {
width: 100%; width: 100%;
height: auto; } height: auto;
box-shadow: none; }
.cards-list > ul > li > article > section.images { .cards-list > ul > li > article > section.images {
height: auto; } height: auto; }
.cards-list > ul > li > article > section.images > figure { .cards-list > ul > li > article > section.images > figure {
@ -20202,6 +20227,8 @@ article.card {
/* solves sticky problem */ } /* solves sticky problem */ }
article.card.minicard > nav.tools .tool.samples:hover .tool-content { article.card.minicard > nav.tools .tool.samples:hover .tool-content {
max-width: 140px; } } max-width: 140px; } }
article.card.minicard > nav.tools .tool.samples.tapped .tool-content {
max-width: 140px; }
article.card.linkedmaterialcard { article.card.linkedmaterialcard {
width: 190px; width: 190px;
height: 110px; } height: 110px; }
@ -20293,6 +20320,17 @@ article.card {
padding: 0.3em; padding: 0.3em;
max-height: 195px; max-height: 195px;
max-width: 200px; } } 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 { article.card nav.tools .tool.flags .tool-content ul {
display: flex; display: flex;
flex-flow: row wrap; } flex-flow: row wrap; }
@ -20308,6 +20346,8 @@ article.card {
/* solves sticky problem */ } /* solves sticky problem */ }
article.card nav.tools .tool.flags span.flag:hover { article.card nav.tools .tool.flags span.flag:hover {
color: #1a1a1a; } } color: #1a1a1a; } }
article.card nav.tools .tool.flags span.flag.tapped {
color: #1a1a1a; }
article.card nav.tools .tool.flags span.flag.isActive { article.card nav.tools .tool.flags span.flag.isActive {
color: #1a1a1a; } color: #1a1a1a; }
article.card nav.tools .tool.flags li.create-flag { article.card nav.tools .tool.flags li.create-flag {
@ -20340,6 +20380,8 @@ article.card {
/* solves sticky problem */ } /* solves sticky problem */ }
article.card:hover nav.tools { article.card:hover nav.tools {
opacity: 1; } } opacity: 1; } }
article.card.tapped nav.tools {
opacity: 1; }
article.card section.images { article.card section.images {
position: relative; } position: relative; }
article.card section.images, article.card section.images * { article.card section.images, article.card section.images * {
@ -20373,6 +20415,16 @@ article.card {
height: 610px; } height: 610px; }
article.card.modal-card > .col { article.card.modal-card > .col {
flex-basis: 50%; } 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) { article.card.modal-card section.col-right > *:not(nav.tools) {
position: relative; position: relative;
padding: 0.3em 20px 0 0.5em; padding: 0.3em 20px 0 0.5em;
@ -20421,6 +20473,9 @@ article.card {
cursor: pointer; } cursor: pointer; }
article.card.modal-card section.col-right nav.tools div.tool-content { article.card.modal-card section.col-right nav.tools div.tool-content {
min-width: 385px; } 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 { article.card.modal-card section.col-right section.tool.samples div.tool-content ul {
font-size: 0.756em; font-size: 0.756em;
font-weight: 300; } font-weight: 300; }
@ -20433,6 +20488,8 @@ article.card {
/* solves sticky problem */ } /* solves sticky problem */ }
article.card.modal-card section.col-right section.tool.note:hover div.tool-content { article.card.modal-card section.col-right section.tool.note:hover div.tool-content {
max-height: 370px; } } 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,
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,
article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible, article.card.modal-card section.col-right section.tool.note div.tool-content textarea:focus-visible,
@ -20470,6 +20527,17 @@ article.card {
margin: 0; margin: 0;
font-size: 0.882em; } 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 { #main-content > article.thematique div.cols {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -20995,4 +21063,3 @@ body {
width: 100%; width: 100%;
height: auto; } 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}

80
web/themes/custom/materiotheme/assets/dist/main.js vendored
View File

File diff suppressed because one or more lines are too long

16
web/themes/custom/materiotheme/assets/scripts/main.js
View File

@ -34,6 +34,15 @@ import { i18n, loadLanguageAsync } from 'vuejs/i18n'
import VueMeta from 'vue-meta' import VueMeta from 'vue-meta'
Vue.use(VueMeta) 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 VUserBlock from 'vuejs/components/Block/UserBlock'
import VMainContent from 'vuejs/components/Content/MainContent' import VMainContent from 'vuejs/components/Content/MainContent'
import VSearchBlock from 'vuejs/components/Block/SearchBlock' 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/main.scss'
import 'theme/assets/styles/print.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' import { MA } from 'vuejs/api/ma-axios'
(function (Drupal, drupalSettings, drupalDecoupled) { (function (Drupal, drupalSettings, drupalDecoupled) {

48
web/themes/custom/materiotheme/assets/styles/main.scss
View File

@ -34,6 +34,9 @@ $mdi-font-path: './mdi/fonts/';
@content; @content;
} }
} }
&.tapped{
@content;
}
} }
aside.messages{ aside.messages{
@ -524,6 +527,9 @@ header[role="banner"]{
display: none; display: none;
} }
padding: 1em 0 0; padding: 1em 0 0;
h2{
padding: 0.5em 1em 0!important;
}
} }
h2{ h2{
margin:0; margin:0;
@ -1228,9 +1234,11 @@ article.node--type-frontpage{
>li{ >li{
flex: 0 1 48%; flex: 0 1 48%;
margin:0 0 0.5em 0; margin:0 0 0.5em 0;
filter: drop-shadow(0 0 3px #aaa);
>article{ >article{
width:100%; width:100%;
height:auto; height:auto;
box-shadow: none;
>section.images{ >section.images{
height: auto; height: auto;
>figure{ >figure{
@ -1417,6 +1425,16 @@ article.card{
} }
} }
@include col-mediaquery-max(3){
width:23px;
>*{
>span.btn, >a{
font-size:1.2em;
}
}
}
.tool.flags{ .tool.flags{
.tool-content{ .tool-content{
ul{ ul{
@ -1526,6 +1544,18 @@ article.card{
>.col{ >.col{
flex-basis: 50%; 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{ section.col-right{
>*:not(nav.tools){ >*:not(nav.tools){
position: relative; position: relative;
@ -1610,8 +1640,12 @@ article.card{
} }
div.tool-content{ div.tool-content{
min-width: $column_width *2 - $navtool_width - 10px; min-width: $column_width *2 - $navtool_width - 10px;
@include col-mediaquery-max(3){
min-width: 80vw;
} }
} }
}
section.tool.samples{ section.tool.samples{
div.tool-content{ div.tool-content{
ul{ ul{
@ -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;
}
// _____ _ _ _ // _____ _ _ _
// |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___ // |_ _| |_ ___ _ __ __ _| |_(_)__ _ _ _ ___
// | | | ' \/ -_) ' \/ _` | _| / _` | || / -_) // | | | ' \/ -_) ' \/ _` | _| / _` | || / -_)

11
web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
View File

@ -205,9 +205,14 @@ export default {
}, },
{ {
name: `modal-${this.item.id}`, name: `modal-${this.item.id}`,
draggable: true, draggable: false,
width: '850px', classes: "vm--modale-card",
height: '610px' // this does not work
// adaptative: true,
// maxWidth: 850,
// maxHeight: 610,
width: '95%',
height: '95%'
} }
) )
} }

6
web/themes/custom/materiotheme/vuejs/components/Content/LinkedMaterialCard.vue
View File

@ -67,8 +67,10 @@ export default {
{ {
name: `modal-${this.item.id}`, name: `modal-${this.item.id}`,
draggable: false, draggable: false,
width: '850px', maxWidth: 850,
height: '610px' maxHeight: 610,
width: '95%',
height: '95%'
} }
) )
} }

52
web/themes/custom/materiotheme/vuejs/components/Content/ModalCard.vue
View File

@ -2,14 +2,19 @@
<div class="loading" v-if="!material || loading"> <div class="loading" v-if="!material || loading">
<span>Loading ...</span> <span>Loading ...</span>
</div> </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"> <section class="col col-right">
<header> <header>
<h1>{{ material.title }}</h1> <h1>{{ material.title }}</h1>
<h4>{{ material.short_description }}</h4> <h4>{{ material.short_description }}</h4>
<span class="ref">{{ material.reference }}</span> <span class="ref">{{ material.reference }}</span>
</header> </header>
<nav class="tools"> <nav ref="tools" class="tools">
<section class="tool close"> <section class="tool close">
<span <span
class="btn mdi mdi-close" class="btn mdi mdi-close"
@ -17,7 +22,10 @@
/> />
</section> </section>
<section class="tool flags"> <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"> <div class="tool-content">
<span class="label">{{ $t("materio.My folders") }}</span> <span class="label">{{ $t("materio.My folders") }}</span>
<ul> <ul>
@ -49,7 +57,10 @@
</div> </div>
</section> </section>
<section class="tool samples" v-if="item.samples && item.samples.length"> <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"> <div class="tool-content">
<span class="label">{{ $t("materio.Samples") }}</span> <span class="label">{{ $t("materio.Samples") }}</span>
<ul> <ul>
@ -63,8 +74,16 @@
</div> </div>
</section> </section>
<section class="tool note"> <section class="tool note">
<span v-if="note_nid" class="btn mdi mdi-note"/> <span
<span v-else class="btn mdi mdi-note-outline"/> 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"> <div class="tool-content">
<textarea spellcheck="false" v-model="note" name="note"/> <textarea spellcheck="false" v-model="note" name="note"/>
</div> </div>
@ -418,6 +437,10 @@ export default {
// this.$modal.hideAll() // this.$modal.hideAll()
this.$modal.hide(`modal-${this.item.id}`) this.$modal.hide(`modal-${this.item.id}`)
}, },
onSwipeCard (e) {
console.log('onSwipeCard', e)
this.$modal.hide(`modal-${this.item.id}`)
},
prettyFileSize(bytes){ prettyFileSize(bytes){
return prettyBytes(parseInt(bytes)) return prettyBytes(parseInt(bytes))
}, },
@ -476,6 +499,23 @@ export default {
.catch(error => { .catch(error => {
console.warn('Issue with createNote', 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')
})
} }
} }
} }

12
web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue
View File

@ -14,6 +14,7 @@ export default {
template: null, template: null,
typed: null, typed: null,
autocomplete: null, autocomplete: null,
$input: null
// basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
} }
}, },
@ -25,7 +26,9 @@ export default {
}, },
methods: { methods: {
submit() { 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) // 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({name:'base', query:{keys:this.typed,term:this.autocomplete}})
// this.$router.push({ // this.$router.push({
@ -52,7 +55,8 @@ export default {
focus: { focus: {
// directive definition // directive definition
inserted: function (el) { 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'); // console.log('SearchForm mounted');
Drupal.attachBehaviors(this.$el); Drupal.attachBehaviors(this.$el);
// get the search input // get the search input
let $input = this.$el.querySelector('#edit-search') this.$input = this.$el.querySelector('#edit-search')
// // focus on input // // focus on input
// $input.focus() // $input.focus()
// Catch the jquery ui events for autocmplete widget // Catch the jquery ui events for autocmplete widget
jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect); jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
}, },
render(h) { render(h) {
// console.log('searchForm render'); // console.log('searchForm render');