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

responive header and footer ready (remains centering entree block

Browse Source
This commit is contained in:
bachir
2018-04-25 20:09:49 +02:00
parent 551ff35344
commit aa55ae2e35
10 changed files with 4865 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/history.min.js
Vendored
+19 -1
View File
@@ -1,2 +1,20 @@
console.log('EDLP THEME HISTORY.js');
// var edlp is provided by edlp_ajax.module file
if(edlp.redirect){
console.log('history redirect', edlp);
console.log('window.location', window.location);
// window.localStorage.setItem('edlp_origin_path', edlp.sys_path.replace(/^\//, ''));
edlp.sys_path = edlp.sys_path.replace(/^\//, '');
void 0;if(edlp.redirect){void 0;void 0;edlp.sys_path=edlp.sys_path.replace(/^\//,'');edlp.url=window.location.pathname;edlp.hash=window.location.hash;window.localStorage.setItem('edlp_origin',JSON.stringify(edlp));window.location.replace(window.location.origin+'/'+edlp.lang_code);}else{void 0;}
// window.localStorage.setItem('edlp_origin_url', window.location.pathname);
edlp.url = window.location.pathname;
// window.localStorage.setItem('edlp_origin_hash', window.location.hash);
edlp.hash = window.location.hash;
window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
// redirect to home
window.location.replace(window.location.origin+'/'+edlp.lang_code);
}else{
console.log('history do not redirect');
}
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+1622 -54
View File
File diff suppressed because it is too large Load Diff
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+140 -87
View File
@@ -1072,7 +1072,9 @@ header[role="banner"] {
#block-mainnavigation {
float: right;
margin-top: 25px; }
margin-top: 25px;
z-index: 21;
position: relative; }
#block-mainnavigation ul {
margin: 0;
padding: 0;
@@ -1118,6 +1120,17 @@ header[role="banner"] {
transform: rotate(359deg); } }
#block-mainnavigation ul li a.is-active:before, #block-mainnavigation ul li a.is-active-trail:before, #block-mainnavigation ul li a:hover:before {
background-color: red; }
@media only screen and (max-width: 1280px) {
#block-mainnavigation {
margin-top: 15px; }
#block-mainnavigation ul li {
display: block; }
#block-mainnavigation ul li a {
font-size: 0.756em;
font-weight: normal;
line-height: 1.4; }
#block-mainnavigation ul li:first-of-type {
display: none; } }
.block-language {
float: right;
@@ -1149,6 +1162,17 @@ header[role="banner"] {
.block-language ul li.is-active a:before, .block-language ul li:hover a:before {
border-color: red;
background-color: red; }
@media only screen and (max-width: 1280px) {
.block-language {
margin-top: 15px;
margin-left: 0.5em;
border-left: 1px solid red; }
.block-language ul li {
display: block; }
.block-language ul li a {
font-size: 0.756em;
font-weight: normal;
line-height: 1.4; } }
#corpus-map {
opacity: 0; }
@@ -1421,11 +1445,13 @@ main[role="main"] span.close-col-btn {
#audio-player {
position: absolute;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: 0;
left: 0;
padding-left: 0.7em;
height: 100%;
min-width: 300px;
min-width: 700px;
z-index: 20;
opacity: 0;
pointer-events: none;
@@ -1505,6 +1531,7 @@ main[role="main"] span.close-col-btn {
height: 100%; }
#audio-player .cartel {
position: relative;
width: calc(100% - 260px);
margin-left: 1em;
background-color: white;
opacity: 1;
@@ -1520,93 +1547,95 @@ main[role="main"] span.close-col-btn {
position: relative; }
#audio-player .cartel .actions {
width: 1.5em; }
#audio-player .cartel .cartels .first-cartel .entrees {
white-space: nowrap;
font-size: 0.5em;
line-height: 0;
letter-spacing: 0px; }
#audio-player .cartel .cartels .first-cartel .entrees span {
display: inline-block;
width: 6px;
height: 6px;
background-color: black;
margin-right: 2px; }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
background-color: var(--e-col-134); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
background-color: var(--e-col-121); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
background-color: var(--e-col-125); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
background-color: var(--e-col-119); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
background-color: var(--e-col-132); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
background-color: var(--e-col-122); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
background-color: var(--e-col-129); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
background-color: var(--e-col-120); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
background-color: var(--e-col-130); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
background-color: var(--e-col-118); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
background-color: var(--e-col-127); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
background-color: var(--e-col-133); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
background-color: var(--e-col-128); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
background-color: var(--e-col-124); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
background-color: var(--e-col-116); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
background-color: var(--e-col-117); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
background-color: var(--e-col-131); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
background-color: var(--e-col-126); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
background-color: var(--e-col-123); }
#audio-player .cartel .cartels .first-cartel h2.node-title {
margin: 0.2em 0 0;
font-size: 0.9em;
font-weight: 600; }
#audio-player .cartel .cartels .first-cartel p {
margin: 0;
font-size: 0.756em; }
#audio-player .cartel .cartels .second-cartel {
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
min-width: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
white-space: nowrap; }
#audio-player .cartel .cartels .second-cartel > * {
display: inline-block;
vertical-align: top;
white-space: normal; }
#audio-player .cartel .cartels .second-cartel .col-left a {
display: block;
font-size: 0.82em;
#audio-player .cartel .cartels {
width: calc(100% - 1.5em); }
#audio-player .cartel .cartels .first-cartel .entrees {
white-space: nowrap;
font-size: 0.5em;
line-height: 0;
letter-spacing: 0px; }
#audio-player .cartel .cartels .first-cartel .entrees span {
display: inline-block;
width: 6px;
height: 6px;
background-color: black;
margin-right: 2px; }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
background-color: var(--e-col-134); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
background-color: var(--e-col-121); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
background-color: var(--e-col-125); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
background-color: var(--e-col-119); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
background-color: var(--e-col-132); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
background-color: var(--e-col-122); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
background-color: var(--e-col-129); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
background-color: var(--e-col-120); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
background-color: var(--e-col-130); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
background-color: var(--e-col-118); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
background-color: var(--e-col-127); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
background-color: var(--e-col-133); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
background-color: var(--e-col-128); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
background-color: var(--e-col-124); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
background-color: var(--e-col-116); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
background-color: var(--e-col-117); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
background-color: var(--e-col-131); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
background-color: var(--e-col-126); }
#audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
background-color: var(--e-col-123); }
#audio-player .cartel .cartels .first-cartel h2.node-title {
margin: 0.2em 0 0;
font-size: 0.9em;
font-weight: 600; }
#audio-player .cartel .cartels .second-cartel .col-right {
border-left: 1px solid #1A1A1A;
margin-left: 5px;
padding-left: 5px; }
#audio-player .cartel .cartels .second-cartel .col-right h3 {
#audio-player .cartel .cartels .first-cartel p {
margin: 0;
font-size: 0.756em; }
#audio-player .cartel .cartels .second-cartel {
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
min-width: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
white-space: nowrap; }
#audio-player .cartel .cartels .second-cartel > * {
display: inline-block;
vertical-align: top;
white-space: normal; }
#audio-player .cartel .cartels .second-cartel .col-left a {
display: block;
font-size: 0.82em;
margin: 0; }
#audio-player .cartel .cartels .second-cartel .col-right p {
font-size: 0.756em;
margin: 0; }
#audio-player .cartel .cartels .second-cartel .col-right p span.cat {
font-weight: 600; }
font-weight: 600; }
#audio-player .cartel .cartels .second-cartel .col-right {
border-left: 1px solid #1A1A1A;
margin-left: 5px;
padding-left: 5px; }
#audio-player .cartel .cartels .second-cartel .col-right h3 {
font-size: 0.82em;
margin: 0; }
#audio-player .cartel .cartels .second-cartel .col-right p {
font-size: 0.756em;
margin: 0; }
#audio-player .cartel .cartels .second-cartel .col-right p span.cat {
font-weight: 600; }
#audio-player .cartel:hover .second-cartel {
opacity: 1; }
#audio-player .cartel article:not(.has-second-cartel) .second-cartel {
@@ -2322,6 +2351,17 @@ footer {
footer > .wrapper .region-footer-right {
min-width: 12%;
text-align: right; }
@media only screen and (max-width: 1280px) {
footer > .wrapper .region-footer-left {
width: 9%; }
footer > .wrapper .region-footer-center {
width: 80%;
overflow: hidden;
text-align: center; }
footer > .wrapper .region-footer-right {
-webkit-box-sizing: content-box;
box-sizing: content-box;
min-width: 5%; } }
footer #block-footer {
display: inline-block;
margin-bottom: 1em; }
@@ -2359,6 +2399,19 @@ footer {
to {
-webkit-transform: rotate(359deg);
transform: rotate(359deg); } }
@media only screen and (max-width: 1280px) {
footer #block-footer {
margin-top: 15px; }
footer #block-footer ul li {
display: block;
margin-left: 0 !important;
padding: 0;
line-height: 0.6; }
footer #block-footer ul li a {
font-size: 0.756em;
font-weight: normal;
line-height: 1.4;
padding: 0; } }
footer nav#block-productions.block-menu {
display: inline-block; }
footer nav#block-productions.block-menu ul {
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+28 -10
View File
@@ -27,11 +27,13 @@
if(!drupalSettings.path.isFront)
return;
_deferred = initEvents();
initEvents();
_audioPlayer = new AudioPlayer();
_compoPlayer = new CompoPlayer();
checkLayout();
initAjaxLinks();
initHistory();
@@ -76,7 +78,7 @@
.on('open_entree', function(e){
console.log('on_open_entree : e', e);
closeAllModals();
checkLayout();
// add body class for currently loaded content
// var body_classes = [
// 'path-'+sys_path.replace(/\//g, '-'),
@@ -88,11 +90,6 @@
// record new history state
if(typeof e.url != 'undefined'){
// var state = {
// ajax_path:null,
// sys_path:null,
// entree_tid:e.tid
// };
var state = getSysPathState(e.sys_path);
history.pushState(state, null, e.url);
@@ -103,17 +100,38 @@
_paq.push(['setCustomUrl', e.url]);
_paq.push(['setDocumentTitle', e.title]);
_paq.push(['trackPageView']);
// js event
// trackEvent(category, action, [name], [value])
// _paq.push(['trackEvent', 'AjaxNav', 'loaded', state.url]);
}
}
})
.on('close_entree', function(e){
backToFrontPage();
checkLayout();
});
window.addEventListener('resize', checkLayout, false);
}
// __ ___ _ ___ _
// \ \ / (_)_ _ __| |_____ __ __ | _ \___ __(_)______
// \ \/\/ /| | ' \/ _` / _ \ V V / | / -_|_-< |_ / -_)
// \_/\_/ |_|_||_\__,_\___/\_/\_/ |_|_\___/__/_/__\___|
function checkLayout(){
var $audioplayer = $("#audio-player");
if($audioplayer.length){
var navpos = $('#block-mainnavigation').position();
console.log('navpos', navpos);
$audioplayer.css({
'width':navpos.left+'px'
});
}
// entrees
// TODO: center the entrees menu
};
// ___ _ _ ___
// / __| __ _ _ ___| | | _ ) __ _ _ _ ___
// \__ \/ _| '_/ _ \ | | _ \/ _` | '_(_-<
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+71 -5
View File
@@ -102,6 +102,8 @@ header[role="banner"]{
#block-mainnavigation{
float:right;
margin-top: 25px;
z-index: 21;
position: relative;
ul{
margin:0; padding: 0;
white-space: nowrap;
@@ -135,6 +137,20 @@ header[role="banner"]{
}
}
}
@media only screen and (max-width: 1280px) {
margin-top: 15px;
ul{
li{
display: block;
a{
@include content_petit;
}
}
li:first-of-type{
display:none;
}
}
}
}
.block-language{
@@ -171,6 +187,20 @@ header[role="banner"]{
}
}
}
@media only screen and (max-width: 1280px) {
margin-top: 15px;
margin-left: 0.5em;
border-left: 1px solid red;
ul{
li{
display: block;
a{
@include content_petit;
}
}
}
}
}
@@ -530,14 +560,17 @@ main[role="main"]{
}
}
#audio-player{
// outline: 1px solid blue;
position: absolute;
box-sizing: border-box;
// overflow: hidden;
top:0; left:0;
padding-left:0.7em;
// background-color: white;
height:100%; min-width:300px;
height:100%;
min-width:700px;
z-index: 20;
opacity: 0;
// outline: 1px solid blue;
pointer-events: none;
transition: opacity 0.7s ease-in-out;
&.visible{
@@ -551,7 +584,6 @@ main[role="main"]{
// word-break:keep-all;
padding:0;
max-height: 100%;
// outline: 1px solid green;
white-space: normal;
@include btn;
}
@@ -598,9 +630,10 @@ main[role="main"]{
height:100%;
}
.cartel{
// TODO: set max-width regarding responsive
position: relative;
// max-width: 350px;
// min-width: 200px;
width: calc(100% - 260px);
// outline: 1px solid orange;
margin-left: 1em;
background-color: white;
opacity: 1;
@@ -617,6 +650,8 @@ main[role="main"]{
width:1.5em;
}
.cartels{
width:calc(100% - 1.5em);
// outline: 1px solid green;
.first-cartel{
// visibility: hidden;
.entrees{
@@ -1437,8 +1472,23 @@ footer{
// min-width: 50px;
text-align: right;
}
@media only screen and (max-width: 1280px) {
.region-footer-left{
width:9%;
}
.region-footer-center{
width: 80%;
overflow:hidden;
text-align: center;
}
.region-footer-right{
box-sizing: content-box;
min-width:5%;
}
}
}
#block-footer{
display: inline-block;
margin-bottom: 1em;
@@ -1474,6 +1524,22 @@ footer{
}
}
}
@media only screen and (max-width: 1280px) {
margin-top: 15px;
ul{
li{
display: block;
margin-left: 0!important;
padding:0;
line-height: 0.6;
a{
@include content_petit;
padding:0;
}
}
}
}
}
// remove #block-productions from selector