improved footer elements display

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;

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; }

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;

sites/all/themes/custom/edlptheme/assets/styles/base/_reset.scss

@@ -1,3 +1,6 @@
 body {
 	background: white;
-}
+}
+
+a, a:focus, a:active { outline: none; }
+a:focus{ -moz-outline-style: none; }