bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved footer elements display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-01-04 17:14:22 +01:00
parent 57a9bcd721
commit b0bbd54d57
4 changed files with 209 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/figli/edlp_corpus/src/Plugin/Block/BlockEntrees.php
+5 -1
View File
@@ -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
Vendored
+103 -65
View File
@@ -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
+97 -29
View File
@@ -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
+4 -1
View File
@@ -1,3 +1,6 @@
body {
background: white;
}
}
a, a:focus, a:active { outline: none; }
a:focus{ -moz-outline-style: none; }