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 daa2db5b0..fe03aeda9 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 @@ -86,7 +86,11 @@ class BlockEntrees extends BlockBase { ) ) ); -// + + // if (isset($entrees) && count($entrees) == count($terms)-3) { + // $entree['#wrapper_attributes']['class'][] = 'opened'; + // } + // dpm($entree); $entrees[] = $entree; 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 4ef79124f..8abd323f5 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 @@ -1,6 +1,12 @@ body { background: white; } +a, a:focus, a:active { + outline: none; } + +a:focus { + -moz-outline-style: none; } + .btn--hollow { background: red; display: inline-block; @@ -61,6 +67,7 @@ footer { padding: 0; } footer nav.block-menu ul li a { position: absolute; + bottom: 0; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotateZ(-45deg); @@ -71,11 +78,13 @@ footer { font-size: 0.756em; white-space: nowrap; } footer .block-language { - display: inline-block; } + display: inline-block; + position: relative; } footer .block-language ul { position: absolute; + bottom: 0; margin: 0; - padding: 0 0 0 0.5em; + padding: 0; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotateZ(-45deg); @@ -106,6 +115,7 @@ footer { pointer-events: none; } footer .block-block-edlp-entrees ul li a { position: absolute; + bottom: 0; -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotateZ(-45deg); @@ -117,12 +127,13 @@ footer { white-space: nowrap; } footer .block-block-edlp-entrees ul li span.oblique-wrapper { display: inline-block; + vertical-align: bottom; position: relative; width: 1.5em; } - footer .block-block-edlp-entrees ul li span.oblique-wrapper a { - text-transform: none; } footer .block-block-edlp-entrees ul li a.term-link { - pointer-events: all; } + pointer-events: all; + background-color: #fff; + padding-right: 0.4em; } footer .block-block-edlp-entrees ul li a.term-link:before { content: ""; display: inline-block; @@ -130,63 +141,6 @@ footer { height: 7px; border: 1px solid #000; margin-right: 0.5em; } - footer .block-block-edlp-entrees ul li a.term-link[tid='134']:before { - border-color: #2b8f2f; - background-color: #2b8f2f; } - footer .block-block-edlp-entrees ul li a.term-link[tid='121']:before { - border-color: #3a33b6; - background-color: #3a33b6; } - footer .block-block-edlp-entrees ul li a.term-link[tid='125']:before { - border-color: #2c9f57; - background-color: #2c9f57; } - footer .block-block-edlp-entrees ul li a.term-link[tid='119']:before { - border-color: #c48978; - background-color: #c48978; } - footer .block-block-edlp-entrees ul li a.term-link[tid='132']:before { - border-color: #5270bb; - background-color: #5270bb; } - footer .block-block-edlp-entrees ul li a.term-link[tid='122']:before { - border-color: #fb54d3; - background-color: #fb54d3; } - footer .block-block-edlp-entrees ul li a.term-link[tid='129']:before { - border-color: #e07483; - background-color: #e07483; } - footer .block-block-edlp-entrees ul li a.term-link[tid='120']:before { - border-color: #655845; - background-color: #655845; } - footer .block-block-edlp-entrees ul li a.term-link[tid='130']:before { - border-color: #7e0868; - background-color: #7e0868; } - footer .block-block-edlp-entrees ul li a.term-link[tid='118']:before { - border-color: #0e7121; - background-color: #0e7121; } - footer .block-block-edlp-entrees ul li a.term-link[tid='127']:before { - border-color: #dabd42; - background-color: #dabd42; } - footer .block-block-edlp-entrees ul li a.term-link[tid='133']:before { - border-color: #0399bb; - background-color: #0399bb; } - footer .block-block-edlp-entrees ul li a.term-link[tid='128']:before { - border-color: #399a1c; - background-color: #399a1c; } - footer .block-block-edlp-entrees ul li a.term-link[tid='124']:before { - border-color: #708540; - background-color: #708540; } - footer .block-block-edlp-entrees ul li a.term-link[tid='116']:before { - border-color: #191bff; - background-color: #191bff; } - footer .block-block-edlp-entrees ul li a.term-link[tid='117']:before { - border-color: #279d84; - background-color: #279d84; } - footer .block-block-edlp-entrees ul li a.term-link[tid='131']:before { - border-color: #5219ab; - background-color: #5219ab; } - footer .block-block-edlp-entrees ul li a.term-link[tid='126']:before { - border-color: #d49cb6; - background-color: #d49cb6; } - footer .block-block-edlp-entrees ul li a.term-link[tid='123']:before { - border-color: #497715; - background-color: #497715; } footer .block-block-edlp-entrees ul li .entree-content { display: inline-block; width: 0; @@ -196,18 +150,102 @@ footer { transition: all 300ms ease-in-out; -webkit-transition-property: width,opacity; transition-property: width,opacity; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper:first-of-type { + margin-left: 0.5em; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a { + text-transform: none; + pointer-events: auto; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:before { + content: ""; + display: inline-block; + width: 5px; + height: 5px; + border: 1px solid #000; + margin-right: 0.5em; } footer .block-block-edlp-entrees ul li .entree-content .term-description { display: inline-block; - margin-left: 2em; + margin-left: 1.5em; text-align: left; width: 250px; + word-wrap: break-word; + -webkit-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; white-space: normal; background-color: rgba(255, 255, 255, 0.9); - padding: 0.5em; } + padding: 0.5em; + padding-bottom: 0; } footer .block-block-edlp-entrees ul li .entree-content .term-description p { - font-size: 0.65em; } + font-size: 0.65em; + margin: 0; } + footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before { + border-color: #2b8f2f; + background-color: #2b8f2f; } + footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before { + border-color: #3a33b6; + background-color: #3a33b6; } + footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before { + border-color: #2c9f57; + background-color: #2c9f57; } + footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before { + border-color: #c48978; + background-color: #c48978; } + footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before { + border-color: #5270bb; + background-color: #5270bb; } + footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before { + border-color: #fb54d3; + background-color: #fb54d3; } + footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before { + border-color: #e07483; + background-color: #e07483; } + footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before { + border-color: #655845; + background-color: #655845; } + footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before { + border-color: #7e0868; + background-color: #7e0868; } + footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before { + border-color: #0e7121; + background-color: #0e7121; } + footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before { + border-color: #dabd42; + background-color: #dabd42; } + footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before { + border-color: #0399bb; + background-color: #0399bb; } + footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before { + border-color: #399a1c; + background-color: #399a1c; } + footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before { + border-color: #708540; + background-color: #708540; } + footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before { + border-color: #191bff; + background-color: #191bff; } + footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before { + border-color: #279d84; + background-color: #279d84; } + footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before { + border-color: #5219ab; + background-color: #5219ab; } + footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before { + border-color: #d49cb6; + background-color: #d49cb6; } + footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before { + border-color: #497715; + background-color: #497715; } + footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):before { + background-color: #fff !important; } footer .block-block-edlp-entrees ul li:not(.opened) a.term-link:not(:hover):not(.highlighted):before { background-color: #fff !important; } + footer .block-block-edlp-entrees ul li.opened a.term-link:after { + content: ''; + position: absolute; + left: 15px; + right: 0; + bottom: -3px; + border-bottom: 1px solid grey; } footer .block-block-edlp-entrees ul li.opened .entree-content { width: 350px; opacity: 1; } diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 9c750b4a2..b5731ffa2 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -63,7 +63,7 @@ canvas#edlp-map{ padding: 0; a{ position: absolute; - // display:inline-block; + bottom: 0; transform-origin: left bottom; transform: rotateZ(-45deg); color: #000; @@ -107,10 +107,12 @@ footer{ .block-language{ display: inline-block; + position: relative; ul{ position: absolute; + bottom:0; margin:0; - padding:0 0 0 0.5em; + padding:0; transform-origin: left bottom; transform: rotateZ(-45deg); white-space: nowrap; @@ -144,16 +146,16 @@ footer{ pointer-events: none; span.oblique-wrapper{ display: inline-block; + vertical-align: bottom; position: relative; width:1.5em; - a{ - text-transform: none; - } } a.term-link{ + // outline: 1px solid blue; pointer-events: all; - // bottom: 0; + background-color: #fff; + padding-right: 0.4em; &:before{ content: ""; display:inline-block; @@ -162,28 +164,6 @@ footer{ border: 1px solid #000; margin-right: 0.5em; } - &[tid='134']:before{border-color: $e-col-134;background-color: $e-col-134;} - &[tid='121']:before{border-color: $e-col-121;background-color: $e-col-121;} - &[tid='125']:before{border-color: $e-col-125;background-color: $e-col-125;} - &[tid='119']:before{border-color: $e-col-119;background-color: $e-col-119;} - &[tid='132']:before{border-color: $e-col-132;background-color: $e-col-132;} - &[tid='122']:before{border-color: $e-col-122;background-color: $e-col-122;} - &[tid='129']:before{border-color: $e-col-129;background-color: $e-col-129;} - &[tid='120']:before{border-color: $e-col-120;background-color: $e-col-120;} - &[tid='130']:before{border-color: $e-col-130;background-color: $e-col-130;} - &[tid='118']:before{border-color: $e-col-118;background-color: $e-col-118;} - &[tid='127']:before{border-color: $e-col-127;background-color: $e-col-127;} - &[tid='133']:before{border-color: $e-col-133;background-color: $e-col-133;} - &[tid='128']:before{border-color: $e-col-128;background-color: $e-col-128;} - &[tid='124']:before{border-color: $e-col-124;background-color: $e-col-124;} - &[tid='116']:before{border-color: $e-col-116;background-color: $e-col-116;} - &[tid='117']:before{border-color: $e-col-117;background-color: $e-col-117;} - &[tid='131']:before{border-color: $e-col-131;background-color: $e-col-131;} - &[tid='126']:before{border-color: $e-col-126;background-color: $e-col-126;} - &[tid='123']:before{border-color: $e-col-123;background-color: $e-col-123;} - // &.highlighted{ - // color:red; - // } } .entree-content{ @@ -194,31 +174,119 @@ footer{ opacity: 0; transition: all 300ms ease-in-out; transition-property: width,opacity; + span.oblique-wrapper:first-of-type{ + margin-left: 0.5em; + } + span.oblique-wrapper a{ + text-transform: none; + pointer-events: auto; + &:before{ + content: ""; + display:inline-block; + $sq:5px; + width: $sq; height:$sq; + border: 1px solid #000; + margin-right: 0.5em; + } + } .term-description{ display: inline-block; - margin-left: 2em; + margin-left: 1.5em; text-align: left; width:250px; + word-wrap:break-word; + // word-break:break-all; + hyphens: auto; white-space: normal; background-color: $transparent-bg; padding:0.5em; + padding-bottom:0; p{ font-size: 0.65em; + margin:0; } } } + &[tid='134']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-134;background-color: $e-col-134;}} + &[tid='121']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-121;background-color: $e-col-121;}} + &[tid='125']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-125;background-color: $e-col-125;}} + &[tid='119']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-119;background-color: $e-col-119;}} + &[tid='132']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-132;background-color: $e-col-132;}} + &[tid='122']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-122;background-color: $e-col-122;}} + &[tid='129']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-129;background-color: $e-col-129;}} + &[tid='120']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-120;background-color: $e-col-120;}} + &[tid='130']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-130;background-color: $e-col-130;}} + &[tid='118']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-118;background-color: $e-col-118;}} + &[tid='127']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-127;background-color: $e-col-127;}} + &[tid='133']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-133;background-color: $e-col-133;}} + &[tid='128']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-128;background-color: $e-col-128;}} + &[tid='124']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-124;background-color: $e-col-124;}} + &[tid='116']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-116;background-color: $e-col-116;}} + &[tid='117']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-117;background-color: $e-col-117;}} + &[tid='131']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-131;background-color: $e-col-131;}} + &[tid='126']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-126;background-color: $e-col-126;}} + &[tid='123']{ + a.term-link:before, .entree-content span.oblique-wrapper a:before{ + border-color: $e-col-123;background-color: $e-col-123;}} + // &.highlighted{ // a.term_link{ // color: red; // } // } + .entree-content span.oblique-wrapper a:not(:hover):before{background-color: #fff!important;} + &:not(.opened){ a.term-link:not(:hover):not(.highlighted):before{ background-color: #fff!important; } } &.opened{ + // outline: 1px solid purple; + a.term-link:after { + content: ''; + position: absolute; + left: 15px; right:0; + bottom: -3px; + border-bottom: 1px solid grey; + } .entree-content{ width:350px; opacity: 1; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss index dd412f413..1236f4ad8 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss @@ -1,3 +1,6 @@ body { background: white; -} \ No newline at end of file +} + +a, a:focus, a:active { outline: none; } +a:focus{ -moz-outline-style: none; }