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

entrees block is displaying well and interact with map on mouse hover, map nodes are well drawn centered, map performance improvements, added domain contrib module and configured domain for mobile display

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-01-04 11:55:52 +01:00
parent 7b9de31a42
commit 57a9bcd721
270 changed files with 24298 additions and 1127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+154 -31
View File
@@ -24,7 +24,6 @@ body, html{
padding:0;
}
div.layout-container{
position: relative;
width:100%; height:100%;
@@ -40,18 +39,19 @@ header[role="banner"]{
main[role="main"]{
outline:1px solid green;
background-color: rgba(255,255,255, 0.9);
background-color: $transparent-bg;
// display: none;
}
footer[role="contentinfo"]{
outline: 1px solid pink;
// outline: 1px solid pink;
position: fixed;
bottom:0;
width:100%;
}
canvas#edlp-map{
outline: 1px solid grey;
// outline: 1px solid grey;
}
@mixin oblique-list {
@@ -63,6 +63,7 @@ canvas#edlp-map{
padding: 0;
a{
position: absolute;
// display:inline-block;
transform-origin: left bottom;
transform: rotateZ(-45deg);
color: #000;
@@ -74,23 +75,23 @@ canvas#edlp-map{
}
footer{
text-align: center;
// text-align: center;
display: table;
padding: 0 0 0.5em 0;
>.region{
outline: 1px dotted pink;
display: table-cell;
// outline: 1px dotted purple;
// position: relative;
}
.region-footer-left{
float: left;
text-align: left;
}
.region-footer-center{
display: inline-block;
margin: 0 auto;
text-align: center;
}
.region-footer-right{
float: right;
text-align: right;
padding-right: 5em;
min-width: 30px;
}
nav.block-menu{
@@ -112,6 +113,7 @@ footer{
padding:0 0 0 0.5em;
transform-origin: left bottom;
transform: rotateZ(-45deg);
white-space: nowrap;
li{
margin:0; padding:0;
list-style: none;
@@ -133,10 +135,25 @@ footer{
.block-block-edlp-entrees{
display: inline-block;
// vertical-align: top;
ul{
li{
@include oblique-list;
a{
margin:0;
white-space: nowrap;
pointer-events: none;
span.oblique-wrapper{
display: inline-block;
position: relative;
width:1.5em;
a{
text-transform: none;
}
}
a.term-link{
pointer-events: all;
// bottom: 0;
&:before{
content: "";
display:inline-block;
@@ -145,26 +162,132 @@ footer{
border: 1px solid #000;
margin-right: 0.5em;
}
&.term-134:before{border-color: $entree-color-134;}
&.term-121:before{border-color: $entree-color-121;}
&.term-125:before{border-color: $entree-color-125;}
&.term-119:before{border-color: $entree-color-119;}
&.term-132:before{border-color: $entree-color-132;}
&.term-122:before{border-color: $entree-color-122;}
&.term-129:before{border-color: $entree-color-129;}
&.term-120:before{border-color: $entree-color-120;}
&.term-130:before{border-color: $entree-color-130;}
&.term-118:before{border-color: $entree-color-118;}
&.term-127:before{border-color: $entree-color-127;}
&.term-133:before{border-color: $entree-color-133;}
&.term-128:before{border-color: $entree-color-128;}
&.term-124:before{border-color: $entree-color-124;}
&.term-116:before{border-color: $entree-color-116;}
&.term-117:before{border-color: $entree-color-117;}
&.term-131:before{border-color: $entree-color-131;}
&.term-126:before{border-color: $entree-color-126;}
&.term-123:before{border-color: $entree-color-123;}
&[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{
display: inline-block;
// outline: 1px solid green;
width:0;
overflow: hidden;
opacity: 0;
transition: all 300ms ease-in-out;
transition-property: width,opacity;
.term-description{
display: inline-block;
margin-left: 2em;
text-align: left;
width:250px;
white-space: normal;
background-color: $transparent-bg;
padding:0.5em;
p{
font-size: 0.65em;
}
}
}
// &.highlighted{
// a.term_link{
// color: red;
// }
// }
&:not(.opened){
a.term-link:not(:hover):not(.highlighted):before{
background-color: #fff!important;
}
}
&.opened{
.entree-content{
width:350px;
opacity: 1;
}
}
// &:not(:first-of-type) .entree-content{display: none;}
}
}
}
#block-userlogin{
// outline: 1px solid blue;
$wh:20px;
position: relative;
width:$wh; height: $wh;
// background-color: blue;
h2{
position: relative;
width:$wh; height:$wh;
background-image: url(../../img/user.svg);
// background-color: red;
background-size: contain;
text-indent: $wh*2;
margin: 0;
overflow: hidden;
z-index: 1;
cursor: pointer;
}
.block-content{
z-index: 0;
position:absolute;
right:0;bottom:$wh;
padding:0.5em;
padding-bottom: 20px;
background-color: $transparent-bg;
overflow: hidden;
box-sizing:border-box;
height: 0px;
opacity:0;
pointer-events:none;
transition: all 0.5s ease-in-out;
transition-property: height,opacity;
// &:hover{
// height:200px;
// opacity:1;
// pointer-events: auto;
// }
form{
font-size: 0.75em;
}
.item-list{
ul{margin:0;}
li{
margin:0;
list-style: none;
a{
color: inherit;
text-decoration: none;
font-size: 0.75em;
white-space:nowrap;
}
}
}
}
&:hover{
.block-content{
height:200px;
opacity: 1;
pointer-events:auto;
}
}
}
sites/all/themes/custom/edlptheme/assets/styles/base/_colors.scss
+23 -21
View File
@@ -1,21 +1,23 @@
$entree-color-130: rgb(75, 143, 126);
$entree-color-121: rgb(134, 142, 36);
$entree-color-134: rgb(43, 143, 47);
$entree-color-121: rgb(58, 51, 182);
$entree-color-125: rgb(44, 159, 87);
$entree-color-119: rgb(196, 137, 120);
$entree-color-132: rgb(82, 112, 187);
$entree-color-122: rgb(251, 84, 211);
$entree-color-129: rgb(224, 116, 131);
$entree-color-120: rgb(101, 88, 69);
$entree-color-130: rgb(126, 8, 104);
$entree-color-118: rgb(14, 113, 33);
$entree-color-127: rgb(218, 189, 66);
$entree-color-133: rgb(3, 153, 187);
$entree-color-128: rgb(57, 154, 28);
$entree-color-124: rgb(112, 133, 64);
$entree-color-116: rgb(25, 27, 255);
$entree-color-117: rgb(39, 157, 132);
$entree-color-131: rgb(82, 25, 171);
$entree-color-126: rgb(212, 156, 182);
$entree-color-123: rgb(73, 119, 21);
$transparent-bg: rgba(255,255,255, 0.9);
$e-col-130: rgb(75, 143, 126);
$e-col-121: rgb(134, 142, 36);
$e-col-134: rgb(43, 143, 47);
$e-col-121: rgb(58, 51, 182);
$e-col-125: rgb(44, 159, 87);
$e-col-119: rgb(196, 137, 120);
$e-col-132: rgb(82, 112, 187);
$e-col-122: rgb(251, 84, 211);
$e-col-129: rgb(224, 116, 131);
$e-col-120: rgb(101, 88, 69);
$e-col-130: rgb(126, 8, 104);
$e-col-118: rgb(14, 113, 33);
$e-col-127: rgb(218, 189, 66);
$e-col-133: rgb(3, 153, 187);
$e-col-128: rgb(57, 154, 28);
$e-col-124: rgb(112, 133, 64);
$e-col-116: rgb(25, 27, 255);
$e-col-117: rgb(39, 157, 132);
$e-col-131: rgb(82, 25, 171);
$e-col-126: rgb(212, 156, 182);
$e-col-123: rgb(73, 119, 21);