From fceba2166bf9d1404fc7d597329e79b4115321ab Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Wed, 2 May 2018 20:59:29 +0200 Subject: [PATCH] collection in mobile is ok --- .../edlptheme/assets/dist/scripts/main.min.js | 51 ++++++++++++++++--- .../edlptheme/assets/dist/styles/app.min.css | 31 +++++++++-- .../custom/edlptheme/assets/scripts/main.js | 51 ++++++++++++++++--- .../custom/edlptheme/assets/styles/app.scss | 35 +++++++++++-- 4 files changed, 144 insertions(+), 24 deletions(-) diff --git a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js index 6ecc0093d..04b871627 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js +++ b/sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js @@ -16,6 +16,7 @@ end:0 }; var _corpus_promise; + var _is_mobile = edlp_mobile.device_is_mobile; // ___ _ _ // |_ _|_ _ (_) |_ @@ -24,19 +25,29 @@ function init(){ console.log("EdlpTheme init()"); + // if(!drupalSettings.path.isFront) // return; - initEvents(); + if(!_is_mobile){ + initEvents(); - _audioPlayer = new AudioPlayer(); - _compoPlayer = new CompoPlayer(); + _audioPlayer = new AudioPlayer(); + _compoPlayer = new CompoPlayer(); - checkLayout(); - initAjaxLinks(); + checkLayout(); - initHistory(); + initAjaxLinks(); + + initHistory(); + }else{ + if(drupalSettings.path.isFront){ + initHomeMobile(); + + } + _$body.attr('booted', 'booted'); + } // if(!drupalSettings.path.isFront) @@ -45,6 +56,32 @@ // initEvents(); }; + function initHomeMobile(){ + $('.field--name-field-notice, .index', '.entrees .taxonomy-term.vocabulary-entrees') + .addClass('closed'); + $('.field--name-field-notice>.field__label', '.entrees .taxonomy-term.vocabulary-entrees') + .on('click', onClickHomeMobileNotice); + $('.index>.field__label', '.entrees .taxonomy-term.vocabulary-entrees') + .on('click', onClickHomeMobileIndex); + }; + + function onClickHomeMobileNotice(e){ + // console.log('onClickHomeMobileNotice'); + // var $part = $(this).parent();//parents('.taxonomy-term'); + toggleEntreeOpening($(this).parent(), 'notice'); + }; + + function onClickHomeMobileIndex(e){ + // console.log('onClickHomeMobileIndex'); + // var $part = $(this).parent();//parents('.taxonomy-term'); + toggleEntreeOpening($(this).parent(), 'index'); + }; + + function toggleEntreeOpening($e, part){ + $e.toggleClass('closed') + .parents('.taxonomy-term.vocabulary-entrees.home_mobile').toggleClass(part+'-opened'); + } + // ___ _ // | __|_ _____ _ _| |_ ___ // | _|\ V / -_) ' \ _(_-< @@ -1750,7 +1787,7 @@ } // end EdlpTheme() $(document).ready(function($) { - if(drupalSettings.path.isFront && !edlp_mobile.device_is_mobile){ + if(drupalSettings.path.isFront){ var edlptheme = new EdlpTheme(); }else{ $('body').attr('booted', 'booted'); diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 53073c242..49d60953a 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -1375,8 +1375,8 @@ main[role="main"] div.taxonomy-term { display: none; } main[role="main"] div.taxonomy-term.home_mobile h2 { margin: 0; - font-size: 1.3em; - font-weight: 500; + font-size: 0.9em; + font-weight: normal; text-transform: uppercase; } main[role="main"] div.taxonomy-term:not(.home_mobile).field__label { display: none; } @@ -1384,9 +1384,10 @@ main[role="main"] div.taxonomy-term { margin-bottom: 1em; } main[role="main"] div.taxonomy-term.home_mobile .field__label { margin: 0; - font-size: 0.9em; - font-weight: normal; - text-transform: uppercase; } + font-size: 0.82em; + font-weight: 600; + line-height: 1.6; + text-transform: none; } main[role="main"] div.taxonomy-term article.node--type-enregistrement h2.node-title { font-size: 0.82em; font-weight: 600; @@ -1395,8 +1396,20 @@ main[role="main"] div.taxonomy-term { margin: 0.9em 0 0 0; } main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile { + padding-bottom: 1em; border-bottom: 1px solid red; } + main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .field--name-field-notice > .field__label, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .index > .field__label { + cursor: pointer; } main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .field--name-field-notice .field__item, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .field--name-field-notice .item-list, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .index .field__item, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .index .item-list { + height: auto; + -webkit-transition: height 0.3s ease-in-out; + transition: height 0.3s ease-in-out; } + main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .field--name-field-notice.closed .field__item, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .field--name-field-notice.closed .item-list, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .index.closed .field__item, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile .index.closed .item-list { + overflow: hidden; + height: 1px; + -webkit-transition: height 0.01s ease-in-out; + transition: height 0.01s ease-in-out; } + main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile.notice-opened .field--name-description, main[role="main"] div.taxonomy-term.vocabulary-entrees.home_mobile.index-opened .field--name-description { overflow: hidden; height: 1px; } @@ -1494,6 +1507,14 @@ main[role="main"] span.close-col-btn { background-position: center; background-size: contain; } +html.is-mobile main[role="main"] .node--type-enregistrement.node--view-mode-full h2.node-title { + font-size: 0.9em; + font-weight: normal; + text-transform: uppercase; } + +html.is-mobile main[role="main"] .node--type-enregistrement.node--view-mode-full .audiofield label { + display: none; } + #audio-player { position: absolute; -webkit-box-sizing: border-box; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index 6ecc0093d..04b871627 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -16,6 +16,7 @@ end:0 }; var _corpus_promise; + var _is_mobile = edlp_mobile.device_is_mobile; // ___ _ _ // |_ _|_ _ (_) |_ @@ -24,19 +25,29 @@ function init(){ console.log("EdlpTheme init()"); + // if(!drupalSettings.path.isFront) // return; - initEvents(); + if(!_is_mobile){ + initEvents(); - _audioPlayer = new AudioPlayer(); - _compoPlayer = new CompoPlayer(); + _audioPlayer = new AudioPlayer(); + _compoPlayer = new CompoPlayer(); - checkLayout(); - initAjaxLinks(); + checkLayout(); - initHistory(); + initAjaxLinks(); + + initHistory(); + }else{ + if(drupalSettings.path.isFront){ + initHomeMobile(); + + } + _$body.attr('booted', 'booted'); + } // if(!drupalSettings.path.isFront) @@ -45,6 +56,32 @@ // initEvents(); }; + function initHomeMobile(){ + $('.field--name-field-notice, .index', '.entrees .taxonomy-term.vocabulary-entrees') + .addClass('closed'); + $('.field--name-field-notice>.field__label', '.entrees .taxonomy-term.vocabulary-entrees') + .on('click', onClickHomeMobileNotice); + $('.index>.field__label', '.entrees .taxonomy-term.vocabulary-entrees') + .on('click', onClickHomeMobileIndex); + }; + + function onClickHomeMobileNotice(e){ + // console.log('onClickHomeMobileNotice'); + // var $part = $(this).parent();//parents('.taxonomy-term'); + toggleEntreeOpening($(this).parent(), 'notice'); + }; + + function onClickHomeMobileIndex(e){ + // console.log('onClickHomeMobileIndex'); + // var $part = $(this).parent();//parents('.taxonomy-term'); + toggleEntreeOpening($(this).parent(), 'index'); + }; + + function toggleEntreeOpening($e, part){ + $e.toggleClass('closed') + .parents('.taxonomy-term.vocabulary-entrees.home_mobile').toggleClass(part+'-opened'); + } + // ___ _ // | __|_ _____ _ _| |_ ___ // | _|\ V / -_) ' \ _(_-< @@ -1750,7 +1787,7 @@ } // end EdlpTheme() $(document).ready(function($) { - if(drupalSettings.path.isFront && !edlp_mobile.device_is_mobile){ + if(drupalSettings.path.isFront){ var edlptheme = new EdlpTheme(); }else{ $('body').attr('booted', 'booted'); diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 194b136e6..1f42b044f 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -434,7 +434,7 @@ main[role="main"]{ } &.home_mobile h2{ margin:0; - @include content_big_titles; + @include content_titles; } >.content{ } @@ -449,7 +449,7 @@ main[role="main"]{ } &.home_mobile .field__label{ margin: 0; - @include content_titles; + @include content_subtitles; } article.node--type-enregistrement{ h2.node-title{ @@ -457,17 +457,34 @@ main[role="main"]{ margin:0.9em 0 0 0; } } - } div.taxonomy-term.vocabulary-entrees.home_mobile{ // &:not(:first-of-type){ - border-bottom: 1px solid red; + padding-bottom: 1em; + border-bottom: 1px solid red; // } .field--name-field-notice, .index{ + >.field__label{ + cursor: pointer; + } .field__item, .item-list{ + height: auto; + transition: height 0.3s ease-in-out; + } + &.closed{ + + .field__item, .item-list{ + overflow: hidden; + height:1px; + transition: height 0.01s ease-in-out; + } + } + } + &.notice-opened, &.index-opened{ + .field--name-description{ overflow: hidden; - height:1px; + height: 1px; } } } @@ -569,6 +586,14 @@ main[role="main"]{ background-position: center; background-size: contain; } + + html.is-mobile & .node--type-enregistrement.node--view-mode-full{ + h2.node-title{ + @include content_titles; + } + .audiofield label{display: none;} + + } }