From 6e56bf1799243695825b2490d71dd64fc8603d1b Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Wed, 18 Apr 2018 17:40:08 +0200 Subject: [PATCH] fixed entrees menu : translation and order --- .../assets/dist/scripts/corpus.min.js | 8 +- .../edlp_corpus/assets/scripts/corpus.js | 8 +- .../src/Plugin/Block/BlockEntrees.php | 29 +++-- .../edlptheme/assets/dist/scripts/main.min.js | 5 +- .../edlptheme/assets/dist/styles/app.min.css | 119 +++++++++++------- .../custom/edlptheme/assets/scripts/main.js | 5 +- .../custom/edlptheme/assets/styles/app.scss | 38 ++++-- 7 files changed, 146 insertions(+), 66 deletions(-) diff --git a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js index b39220478..c9e4ea0c8 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js +++ b/sites/all/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js @@ -27,9 +27,11 @@ var _ctx = _canvas.getContext('2d'); var _canvas_props = { // 'margin_top':90, // with red border on head - 'margin_top':75, // without red border on head + // 'margin_top':75, // without red border on head + 'margin_top':0, 'margin_right':0, - 'margin_bottom':65, + // 'margin_bottom':65, + 'margin_bottom':0, 'margin_left':0 }; var _physics = new Physics(); @@ -93,7 +95,7 @@ onResizeCanvas(); }; function onResizeCanvas() { - + // https://medium.com/wdstack/fixing-html5-2d-canvas-blur-8ebe27db07da _canvas.width = window.innerWidth*_dpi; _canvas.height = window.innerHeight*_dpi; diff --git a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js index b39220478..c9e4ea0c8 100644 --- a/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js +++ b/sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js @@ -27,9 +27,11 @@ var _ctx = _canvas.getContext('2d'); var _canvas_props = { // 'margin_top':90, // with red border on head - 'margin_top':75, // without red border on head + // 'margin_top':75, // without red border on head + 'margin_top':0, 'margin_right':0, - 'margin_bottom':65, + // 'margin_bottom':65, + 'margin_bottom':0, 'margin_left':0 }; var _physics = new Physics(); @@ -93,7 +95,7 @@ onResizeCanvas(); }; function onResizeCanvas() { - + // https://medium.com/wdstack/fixing-html5-2d-canvas-blur-8ebe27db07da _canvas.width = window.innerWidth*_dpi; _canvas.height = window.innerHeight*_dpi; diff --git a/sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php b/sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php index 1f4ea9afb..c41142a15 100644 --- a/sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php +++ b/sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php @@ -8,6 +8,7 @@ namespace Drupal\edlp_corpus\Plugin\Block; use Drupal\Core\Block\BlockBase; use Drupal\Core\Link; use Drupal\Core\Url; +use Drupal\taxonomy\Entity\Term; use Drupal\workflow\Entity\WorkflowManager; /** @@ -24,26 +25,40 @@ class BlockEntrees extends BlockBase { */ public function build() { + $language = \Drupal::languageManager()->getCurrentLanguage()->getId(); + $query = \Drupal::entityQuery('taxonomy_term') + // ->sort('weight', 'DESC') + // ->sort('name', 'DESC') ->condition('vid', 'entrees'); $tids = $query->execute(); - $terms = entity_load_multiple('taxonomy_term', $tids); - // dsm($terms); - foreach ($terms as $term) { - // dpm($term->toArray()); - $tid = $term->id(); - $name = $term->getName(); + // $terms = entity_load_multiple('taxonomy_term', $tids); + // $terms = \Drupal::entityManager()->getStorage('taxonomy_term')->loadMultiple($t‌​erms); + $terms = Term::loadMultiple($tids); + $ordered_terms = []; + foreach ($terms as $term) { // remove masqué $sid = WorkflowManager::getCurrentStateId($term, 'field_workflow'); if($sid == 'generique_masque') continue; + // translate the term + $term = \Drupal::service('entity.repository')->getTranslationFromContext($term, $language); + $name = $term->getName(); + $ordered_trans_terms[$name] = $term; + } + + ksort($ordered_trans_terms); + + // dsm($terms); + foreach ($ordered_trans_terms as $name => $term) { + $tid = $term->id(); $entree = array( 'tid'=>$tid ); - // term name + // term link $url = Url::fromRoute('entity.taxonomy_term.canonical', ['taxonomy_term'=>$tid]); $url->setOptions(array( 'attributes' => array( 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 1b943e68e..4f9082395 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 @@ -728,8 +728,9 @@ }; AudioPlayer.prototype = { init(){ + this.$container_parent = $('header[role="banner"] .region-header'); // append ui to document - this.$container.appendTo('header[role="banner"] .region-header'); + this.$container.appendTo(this.$container_parent); // record timeline width this.timeline_w = parseInt(this.$timeline.width()); // init audio events @@ -939,6 +940,7 @@ }, // global show(){ + this.$container_parent.addClass('audio-player-visible'); this.$container.addClass('visible'); }, showHidePreviousBtn(){ @@ -969,6 +971,7 @@ }, hide(){ // console.log('AudioPlayer hide()'); + this.$container_parent.removeClass('audio-player-visible'); this.$container.removeClass('visible'); // trigger highlighted node remove on corpus map try { 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 ae67bdccb..d0d623db2 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 @@ -1049,7 +1049,10 @@ header[role="banner"] { pointer-events: all; } #block-edlptheme-branding { - display: inline-block; } + display: inline-block; + opacity: 1; + -webkit-transition: opacity 0.7s ease-in-out; + transition: opacity 0.7s ease-in-out; } #block-edlptheme-branding h1 { margin: 0; display: inline-block; } @@ -1059,12 +1062,13 @@ header[role="banner"] { height: 57.2px; margin-top: 0.15em; background-image: url(../img/logo.svg); - background-color: white; background-repeat: no-repeat; background-size: contain; white-space: nowrap; text-indent: 500px; overflow: hidden; } + .audio-player-visible #block-edlptheme-branding { + opacity: 0; } #block-mainnavigation { float: right; @@ -1082,7 +1086,10 @@ header[role="banner"] { color: inherit; text-decoration: none; text-transform: uppercase; - margin-left: 1em; } + margin-left: 1em; + padding: 3px; + background-color: white; + border-radius: 3px; } #block-mainnavigation ul li a:before { content: ""; display: inline-block; @@ -1128,7 +1135,10 @@ header[role="banner"] { color: inherit; text-decoration: none; text-transform: capitalize; - margin-left: 0.8em; } + margin-left: 0.8em; + padding: 3px; + background-color: white; + border-radius: 3px; } .block-language ul li a:before { content: ""; display: inline-block; @@ -1385,8 +1395,7 @@ main[role="main"] span.close-col-btn { position: absolute; top: 0; left: 0; - padding-left: 1.2em; - background-color: white; + padding-left: 0.7em; height: 100%; min-width: 300px; z-index: 20; @@ -1403,7 +1412,10 @@ main[role="main"] span.close-col-btn { vertical-align: middle; padding: 0; max-height: 100%; - white-space: normal; } + white-space: normal; + padding: 3px; + background-color: white; + border-radius: 3px; } #audio-player .btns > * { display: inline-block; vertical-align: middle; @@ -1429,27 +1441,29 @@ main[role="main"] span.close-col-btn { background-image: url(../img/audio-player-previous.svg); } #audio-player .btns .next { background-image: url(../img/audio-player-next.svg); } - #audio-player .time-line-container .time-line { - position: relative; - width: 70px; - height: 1px; - background-color: #000; - overflow: visible; - -webkit-transform: rotateZ(-46deg); - transform: rotateZ(-46deg); } - #audio-player .time-line-container .time-line .loader { - width: 0; - height: 100%; - background-color: red; - top: 0; - left: 0; } - #audio-player .time-line-container .time-line .cursor { - height: 10px; - width: 0; - border-left: 2px solid red; - position: absolute; - left: 0; - top: -5px; } + #audio-player .time-line-container { + background: transparent; } + #audio-player .time-line-container .time-line { + position: relative; + width: 70px; + height: 1px; + background-color: #000; + overflow: visible; + -webkit-transform: rotateZ(-46deg); + transform: rotateZ(-46deg); } + #audio-player .time-line-container .time-line .loader { + width: 0; + height: 100%; + background-color: red; + top: 0; + left: 0; } + #audio-player .time-line-container .time-line .cursor { + height: 10px; + width: 0; + border-left: 2px solid red; + position: absolute; + left: 0; + top: -5px; } #audio-player .time > * { width: 70px; text-align: right; } @@ -2284,7 +2298,10 @@ footer { footer #block-footer ul li:first-of-type { margin-left: 1em; } footer #block-footer ul li a { - font-size: 0.756em; } + font-size: 0.756em; + padding: 3px; + background-color: white; + border-radius: 3px; } footer #block-footer ul li a:before { content: ""; display: inline-block; @@ -2331,18 +2348,22 @@ footer { white-space: nowrap; } footer nav#block-productions.block-menu ul li:first-of-type { margin-left: 1em; } - footer nav#block-productions.block-menu ul li a:before { - content: ""; - display: inline-block; - width: 7px; - height: 7px; - border: 1px solid black; - margin-right: 0.5em; } - footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before { - background-color: black; } - footer nav#block-productions.block-menu ul li a.ajax-loading:before { - -webkit-animation: rotation 2s infinite linear; - animation: rotation 2s infinite linear; } + footer nav#block-productions.block-menu ul li a { + padding: 3px; + background-color: white; + border-radius: 3px; } + footer nav#block-productions.block-menu ul li a:before { + content: ""; + display: inline-block; + width: 7px; + height: 7px; + border: 1px solid black; + margin-right: 0.5em; } + footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before { + background-color: black; } + footer nav#block-productions.block-menu ul li a.ajax-loading:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; } @keyframes rotation { from { @@ -2364,7 +2385,9 @@ footer { height: 200px; } footer nav#block-productions.block-menu ul li a { pointer-events: all; - background-color: #fff; + padding: 3px; + background-color: white; + border-radius: 3px; padding-right: 0.4em; } footer nav#block-productions.block-menu ul li a:before { content: ""; @@ -2425,7 +2448,9 @@ footer { width: 1.5em; } footer .block-block-edlp-entrees div.item-list ul li a.term-link, footer .block-block-edlp-entrees div.item-list ul li a.articles-link { pointer-events: all; - background-color: rgba(255, 255, 255, 0.6); + padding: 3px; + background-color: white; + border-radius: 3px; padding-right: 0.4em; color: black; -webkit-transition: color 0.3s ease-in-out; @@ -2571,6 +2596,8 @@ footer { pointer-events: all; margin-left: 0.5em; } footer .block.random-player a { + -webkit-box-sizing: border-box; + box-sizing: border-box; display: block; width: 20px; height: 20px; @@ -2593,6 +2620,8 @@ footer { pointer-events: all; margin-left: 0.5em; } footer #block-studiolinkblock a { + -webkit-box-sizing: border-box; + box-sizing: border-box; display: block; width: 20px; height: 20px; @@ -2617,6 +2646,8 @@ footer { width: 20px; height: 20px; } footer #block-userlogin h2 { + -webkit-box-sizing: content-box; + box-sizing: content-box; position: relative; width: 20px; height: 20px; @@ -2669,6 +2700,8 @@ footer { margin-left: 0.5em; margin-left: 0.2em; } footer #block-edlpsearchlinkblock a { + -webkit-box-sizing: border-box; + box-sizing: border-box; display: block; width: 20px; height: 20px; diff --git a/sites/all/themes/custom/edlptheme/assets/scripts/main.js b/sites/all/themes/custom/edlptheme/assets/scripts/main.js index 1b943e68e..4f9082395 100644 --- a/sites/all/themes/custom/edlptheme/assets/scripts/main.js +++ b/sites/all/themes/custom/edlptheme/assets/scripts/main.js @@ -728,8 +728,9 @@ }; AudioPlayer.prototype = { init(){ + this.$container_parent = $('header[role="banner"] .region-header'); // append ui to document - this.$container.appendTo('header[role="banner"] .region-header'); + this.$container.appendTo(this.$container_parent); // record timeline width this.timeline_w = parseInt(this.$timeline.width()); // init audio events @@ -939,6 +940,7 @@ }, // global show(){ + this.$container_parent.addClass('audio-player-visible'); this.$container.addClass('visible'); }, showHidePreviousBtn(){ @@ -969,6 +971,7 @@ }, hide(){ // console.log('AudioPlayer hide()'); + this.$container_parent.removeClass('audio-player-visible'); this.$container.removeClass('visible'); // trigger highlighted node remove on corpus map try { diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index e55db9cb7..841af0b97 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -54,7 +54,11 @@ } } - +@mixin btn { + padding: 3px; + background-color: white; + border-radius: 3px; +} // .layout-container{ // pointer-events: none; // } @@ -79,7 +83,7 @@ header[role="banner"]{ width:$w; height:$w * 0.22; margin-top: 0.15em; background-image: url(../img/logo.svg); - background-color: white; + // background-color: white; background-repeat:no-repeat; background-size: contain; white-space: nowrap; @@ -87,6 +91,12 @@ header[role="banner"]{ overflow: hidden; } } + opacity: 1; + transition: opacity 0.7s ease-in-out; + + .audio-player-visible &{ + opacity: 0; + } } #block-mainnavigation{ @@ -104,6 +114,7 @@ header[role="banner"]{ text-decoration: none; text-transform: uppercase; margin-left: 1em; + @include btn; &:before{ content: ""; display:inline-block; @@ -141,6 +152,7 @@ header[role="banner"]{ text-decoration: none; text-transform: capitalize; margin-left: 0.8em; + @include btn; &:before{ content: ""; display:inline-block; @@ -497,8 +509,8 @@ main[role="main"]{ #audio-player{ position: absolute; top:0; left:0; - padding-left:1.2em; - background-color: white; + padding-left:0.7em; + // background-color: white; height:100%; min-width:300px; z-index: 20; opacity: 0; @@ -518,11 +530,14 @@ main[role="main"]{ max-height: 100%; // outline: 1px solid green; white-space: normal; + @include btn; } .btns{ @include audio_controls; } .time-line-container{ + // height:50%; + background:transparent; .time-line{ position: relative; width:70px; height:1px; @@ -1408,6 +1423,7 @@ footer{ } a{ font-size: 0.756em; + @include btn; &:before{ content: ""; display:inline-block; @@ -1442,6 +1458,7 @@ footer{ margin-left: 1em; } a{ + @include btn; &:before{ content: ""; display:inline-block; @@ -1511,7 +1528,7 @@ footer{ a{ // outline: 1px solid blue; pointer-events: all; - background-color: #fff; + @include btn; padding-right: 0.4em; &:before{ content: ""; @@ -1563,7 +1580,8 @@ footer{ // outline: 1px solid blue; pointer-events: all; // background-color: #fff; - background-color: rgba(255,255,255, 0.6); + // background-color: rgba(255,255,255, 0.6); + @include btn; padding-right: 0.4em; color:black; transition: color 0.3s ease-in-out; @@ -1739,7 +1757,9 @@ footer{ @mixin iconlinkblock($bgimgurl) { pointer-events: all; margin-left: 0.5em; + // @include btn; a{ + box-sizing: border-box; $wh:$icons_w; display: block; width:$wh; height:$wh; @@ -1772,12 +1792,14 @@ footer{ margin-bottom: 1em; pointer-events: all; margin-left: 0.2em; - // outline: 1px solid blue; $wh:$icons_w; position: relative; + // box-sizing: border-box; width:$wh; height: $wh; - // background-color: blue; h2{ + box-sizing: content-box; + // @include btn; + // padding:0; position: relative; width:$wh; height:$wh; background-image: url(../img/studio.svg);