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

player display first part of cartel

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-07 18:08:28 +01:00
parent efac93e50d
commit 608e9f6ae2
14 changed files with 343 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+73 -41
View File
@@ -13,6 +13,43 @@
@import 'base/layout';
@import 'base/fonts';
@mixin spining-loader-square{
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
animation: rotation 2s infinite linear;
}
@mixin entrie-micro-square {
display:inline-block;
$s:8px;
width:$s; height:$s;
background-color: black;
margin-right: 3px;
&[tid='134']{background-color: $e_col_134;}
&[tid='121']{background-color: $e_col_121;}
&[tid='125']{background-color: $e_col_125;}
&[tid='119']{background-color: $e_col_119;}
&[tid='132']{background-color: $e_col_132;}
&[tid='122']{background-color: $e_col_122;}
&[tid='129']{background-color: $e_col_129;}
&[tid='120']{background-color: $e_col_120;}
&[tid='130']{background-color: $e_col_130;}
&[tid='118']{background-color: $e_col_118;}
&[tid='127']{background-color: $e_col_127;}
&[tid='133']{background-color: $e_col_133;}
&[tid='128']{background-color: $e_col_128;}
&[tid='124']{background-color: $e_col_124;}
&[tid='116']{background-color: $e_col_116;}
&[tid='117']{background-color: $e_col_117;}
&[tid='131']{background-color: $e_col_131;}
&[tid='126']{background-color: $e_col_126;}
&[tid='123']{background-color: $e_col_123;}
}
// header
.layout-container{
@@ -21,17 +58,11 @@
header[role="banner"]{
position: relative;
padding:0 0 1em 0;
padding:0 0 0.5em 0;
border-bottom: 1px solid red;
pointer-events: all;
}
@mixin spining-loader-square{
@keyframes rotation {
from {transform: rotate(0deg);}
to {transform: rotate(359deg);}
}
animation: rotation 2s infinite linear;
// TODO: what header height to fit well with player ??
height:70px;
}
#block-edlptheme-branding{
@@ -192,19 +223,22 @@ main[role="main"]{
position: absolute;
top:0; left:0;
background-color: white;
height:100%; width:300px;
height:100%; min-width:300px;
z-index: 20;
opacity: 0;
// outline: 1px solid blue;
pointer-events: none;
transition: opacity 0.7s ease-in-out;
&.visible{
opacity: 1;
pointer-events:all;
}
.btns, .time-line-container, .time{
&>*{
display: inline-block;
vertical-align: middle;
padding:0 1em 0 0;
padding:0;
max-height: 100%;
// outline: 1px solid green;
}
.btns{
// outline: 1px dotted orange;
@@ -227,13 +261,11 @@ main[role="main"]{
opacity: 0.3;}
}
.time-line-container{
// outline: 1px dotted purple;
.time-line{
position: relative;
width:70px; height:1px;
background-color: #000;
overflow: visible;
// border-top: 1px solid #000;
transform: rotateZ(-45deg);
.loader{
width:0; height:100%;
@@ -249,11 +281,9 @@ main[role="main"]{
}
}
.time{
// outline: 1px dotted brown;
&>*{
width:70px;
text-align: right;
// outline: 1px dotted red;
}
.current-time{
font-size: 1.4em;
@@ -264,7 +294,33 @@ main[role="main"]{
font-weight: 400;
}
}
.favoris{
height:100%;
}
.cartel{
// TODO: set max-width regarding responsive
max-width: 400px;
margin-left: 1em;
background-color: white;
opacity: 1;
transition: opacity 0.5s ease-in-out;
&.loading{opacity: 0;}
.entrees{
line-height: 0;
span{
@include entrie-micro-square;
}
}
h2.node-title{
margin:0.2em 0 0;
font-size: 1em;
}
p{
margin:0;
font-size: 0.75em;
}
}
&.is-playing{
.btns .play-pause{background-image: url(../img/audio-player-pause.svg);}
}
@@ -726,7 +782,6 @@ footer{
}
// _ _ _ ___
// | \| |___ __| |___ | _ \___ _ __ _ _ _ __
// | .` / _ \/ _` / -_) | _/ _ \ '_ \ || | '_ \
@@ -736,30 +791,7 @@ footer{
.inner{
.entrees{
span{
display:inline-block;
$s:8px;
width:$s; height:$s;
background-color: black;
margin-right: 3px;
&[tid='134']{background-color: $e_col_134;}
&[tid='121']{background-color: $e_col_121;}
&[tid='125']{background-color: $e_col_125;}
&[tid='119']{background-color: $e_col_119;}
&[tid='132']{background-color: $e_col_132;}
&[tid='122']{background-color: $e_col_122;}
&[tid='129']{background-color: $e_col_129;}
&[tid='120']{background-color: $e_col_120;}
&[tid='130']{background-color: $e_col_130;}
&[tid='118']{background-color: $e_col_118;}
&[tid='127']{background-color: $e_col_127;}
&[tid='133']{background-color: $e_col_133;}
&[tid='128']{background-color: $e_col_128;}
&[tid='124']{background-color: $e_col_124;}
&[tid='116']{background-color: $e_col_116;}
&[tid='117']{background-color: $e_col_117;}
&[tid='131']{background-color: $e_col_131;}
&[tid='126']{background-color: $e_col_126;}
&[tid='123']{background-color: $e_col_123;}
@include entrie-micro-square;
}
}
.title{
sites/all/themes/custom/edlptheme/assets/styles/base/_layout.scss
+1 -1
View File
@@ -13,7 +13,7 @@ body, html{
div.layout-container{
position: relative;
width:100%; height:100%;
padding:1em;
padding:0.5em 1em;
box-sizing: border-box;
z-index: 1;
}