responsive: burger menu ok, started generale layout

This commit is contained in:
2021-11-25 19:55:08 +01:00
parent 072ea7de50
commit 62a9afcc33
20 changed files with 2877 additions and 5137 deletions
+26
View File
@@ -0,0 +1,26 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"serverSourceRoot":"192.168.0.21",
"port": 9001,
"pathMappings": {
"/var/www/html/performance-art.fr/public_html": "${workspaceFolder}"
}
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9001
}
]
}
+27
View File
@@ -0,0 +1,27 @@
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "Listen for Xdebug",
"type": "php",
"request": "launch",
"serverSourceRoot":"192.168.0.21",
"port": 9001,
"pathMappings": {
"/var/www/html/d8.materio.com/public_html": "${workspaceFolder}"
},
},
{
"name": "Launch currently open script",
"type": "php",
"request": "launch",
"program": "${file}",
"cwd": "${fileDirname}",
"port": 9001
}
]
}
@@ -2,12 +2,36 @@
/** colors */ /** colors */
/** jscrollpane */ /** jscrollpane */
.jspScrollable .jspContainer .jspVerticalBar { .jspScrollable .jspContainer .jspVerticalBar {
width: 10px; width: 4px;
background-color: #f2f2f2; background-color: #F2F2F2;
} }
.jspScrollable .jspContainer .jspVerticalBar .jspTrack { .jspScrollable .jspContainer .jspHorizontalBar {
height: 4px;
background-color: #F2F2F2;
}
.jspScrollable .jspContainer .jspTrack {
background-color: transparent; background-color: transparent;
} }
.jspScrollable .jspContainer .jspVerticalBar .jspTrack .jspDrag { .jspScrollable .jspContainer .jspTrack .jspDrag {
background-color: #77787b; background-color: #77787B;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
-webkit-opacity: 0.6;
opacity: 0.6;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.jspScrollable .jspContainer .jspTrack:hover .jspDrag {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
} }
View File
@@ -1,12 +1,15 @@
/** COMMONS */ /** COMMONS */
.Museo { .Museo {
font-family: "Museo", Arial, sans-serif; font-family: "Museo", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
.MuseoSans { .MuseoSans {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
.MuseoSlab { .MuseoSlab {
font-family: "MuseoSlab", Arial, sans-serif; font-family: "MuseoSlab", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
a, a,
a:visited { a:visited {
@@ -15,6 +18,7 @@ a:visited {
/*a.active, li a.active{color:@main-blue;}*/ /*a.active, li a.active{color:@main-blue;}*/
body { body {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 16px; font-size: 16px;
} }
.8 { .8 {
@@ -3,6 +3,8 @@
* *
*/ */
/** COMMONS */ /** COMMONS */
#content,
#center .page-title,
#perfnode, #perfnode,
#filters, #filters,
#timeline, #timeline,
@@ -16,13 +18,12 @@
-o-transition: height, 5s, ease-out; -o-transition: height, 5s, ease-out;
transition: height, 5s, ease-out; transition: height, 5s, ease-out;
*/ */
} }
body.layout-intro #main { #main {
height: 97%; height: 97%;
} }
body.layout-intro #perfnode { body.layout-intro #perfnode {
height: 0%; height: 0%!important;
} }
body.layout-intro #filters { body.layout-intro #filters {
height: 0%; height: 0%;
@@ -31,16 +32,18 @@ body.layout-intro #timeline {
height: 65%; height: 65%;
} }
body.layout-intro #timeline #timeline-container { body.layout-intro #timeline #timeline-container {
height: 98%; height: 0%;
} }
body.layout-intro #timeline-loader { body.layout-intro #timeline-loader {
display: block; display: block;
margin: 0 auto 5px;
} }
body.layout-timeline #main { body.layout-timeline #main #content,
height: 97%; body.layout-timeline #main #center .page-title {
height: 0%;
} }
body.layout-timeline #perfnode { body.layout-timeline #perfnode {
height: 0%; height: 0%!important;
} }
body.layout-timeline #filters { body.layout-timeline #filters {
height: 30%; height: 30%;
@@ -54,11 +57,12 @@ body.layout-timeline #timeline #timeline-container {
body.layout-timeline #timeline-loader { body.layout-timeline #timeline-loader {
display: none; display: none;
} }
body.layout-perfnode #main { body.layout-perfnode #main #content,
height: 97%; body.layout-perfnode #main #center .page-title {
height: 0%;
} }
body.layout-perfnode #perfnode { body.layout-perfnode #perfnode {
height: 85%; height: 85%!important;
} }
body.layout-perfnode #filters { body.layout-perfnode #filters {
height: 0%; height: 0%;
@@ -72,3 +76,43 @@ body.layout-perfnode #timeline #timeline-container {
body.layout-perfnode #timeline-loader { body.layout-perfnode #timeline-loader {
display: none; display: none;
} }
body > img {
display: none;
}
@media (max-width: 799px) {
body {
overflow: hidden!important;
}
#container {
margin: 0!important;
width: 100vw!important;
height: 100vh!important;
overflow: hidden;
}
#container > .inner {
padding: 0!important;
width: 100%!important;
height: 100vh!important;
display: flex;
flex-direction: column;
overflow: hidden;
}
#container > .inner #header {
height: 3vh;
flex: 0 0 auto;
height: auto;
padding: 0.5em;
box-sizing: border-box;
}
#container > .inner #main {
flex: 0 0 auto;
overflow-x: hidden;
overflow-y: auto;
height: 96vh;
box-sizing: border-box;
}
#container > .inner #main #center {
display: block;
height: auto;
}
}
File diff suppressed because it is too large Load Diff
@@ -1,32 +1,51 @@
/** COMMONS */ /** COMMONS */
/** COMMONS */
/** colors */ /** colors */
/** jscrollpane */ /** jscrollpane */
.jspScrollable .jspContainer .jspVerticalBar { .jspScrollable .jspContainer .jspVerticalBar {
width: 10px; width: 4px;
background-color: #f2f2f2; background-color: #F2F2F2;
background-color: #f2f2f2;
background-color: #f2f2f2;
} }
.jspScrollable .jspContainer .jspVerticalBar .jspTrack { .jspScrollable .jspContainer .jspHorizontalBar {
background-color: transparent; height: 4px;
background-color: transparent; background-color: #F2F2F2;
}
.jspScrollable .jspContainer .jspTrack {
background-color: transparent; background-color: transparent;
} }
.jspScrollable .jspContainer .jspVerticalBar .jspTrack .jspDrag { .jspScrollable .jspContainer .jspTrack .jspDrag {
background-color: #77787b; background-color: #77787B;
background-color: #77787b; -webkit-border-radius: 2px;
background-color: #77787b; -moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-opacity: 0.6;
-khtml-opacity: 0.6;
-webkit-opacity: 0.6;
opacity: 0.6;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.jspScrollable .jspContainer .jspTrack:hover .jspDrag {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
} }
/** COMMONS */
.Museo { .Museo {
font-family: "Museo", Arial, sans-serif; font-family: "Museo", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
.MuseoSans { .MuseoSans {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
.MuseoSlab { .MuseoSlab {
font-family: "MuseoSlab", Arial, sans-serif; font-family: "MuseoSlab", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
} }
a, a,
a:visited { a:visited {
@@ -35,6 +54,7 @@ a:visited {
/*a.active, li a.active{color:@main-blue;}*/ /*a.active, li a.active{color:@main-blue;}*/
body { body {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 16px; font-size: 16px;
} }
.8 { .8 {
@@ -101,20 +121,15 @@ body {
#timeline-loader { #timeline-loader {
max-width: 700px; max-width: 700px;
margin: 0 auto; margin: 0 auto;
margin: 0 auto;
margin: 0 auto;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
border-bottom: 1px solid #000000;
} }
#timeline-loader .progress { #timeline-loader .progress {
border-top: 3px solid #999; border-top: 4px solid #999;
width: 0; width: 0;
/* .transition(width 4s linear);*/ /* .transition(width 4s linear);*/
transition: width 3s linear; transition: width 3s linear;
-moz-transition: width 3s linear; -moz-transition: width 3s linear;
-o-transition: width 3s linear; -o-transition: width 3s linear;
@@ -122,27 +137,24 @@ body {
} }
#timeline-loader .progress.complete { #timeline-loader .progress.complete {
/* .transition(width 0.1s linear);*/ /* .transition(width 0.1s linear);*/
transition: width 0.1s linear; transition: width 0.1s linear;
-moz-transition: width 0.1s linear; -moz-transition: width 0.1s linear;
-o-transition: width 0.1s linear; -o-transition: width 0.1s linear;
-webkit-transition: width 0.1s linear; -webkit-transition: width 0.1s linear;
} }
#timeline { #timeline {
margin-top: 25px; height: 65%;
margin-top: 25px;
margin-top: 25px; margin-top: 25px;
} }
#timeline h3.title { #timeline h3.title {
cursor: pointer; cursor: pointer;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 10px; font-size: 10px;
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
margin: 0; color: #A5A5A5;
margin: 0;
color: #a5a5a5;
} }
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {
#timeline h3.title { #timeline h3.title {
@@ -152,13 +164,9 @@ body {
#timeline-container { #timeline-container {
width: 100%; width: 100%;
height: 98%; height: 98%;
border-top: 2px solid #a5a5a5; border-top: 2px solid #A5A5A5;
border-top: 2px solid #a5a5a5;
border-top: 2px solid #a5a5a5;
overflow: hidden; overflow: hidden;
background-color: #f2f2f2; background-color: #F2F2F2;
background-color: #f2f2f2;
background-color: #f2f2f2;
} }
#timeline-container .timeline-frame { #timeline-container .timeline-frame {
border: 0 solid #999; border: 0 solid #999;
@@ -172,8 +180,6 @@ body {
} }
#timeline-container .timeline-navigation div { #timeline-container .timeline-navigation div {
padding: 2px 0 0 10px; padding: 2px 0 0 10px;
padding: 2px 0 0 10px;
padding: 2px 0 0 10px;
} }
#timeline-container .timeline-navigation div.timeline-navigation-zoom-in { #timeline-container .timeline-navigation div.timeline-navigation-zoom-in {
background-image: url('../images/btns_zoomin.png'); background-image: url('../images/btns_zoomin.png');
@@ -189,13 +195,12 @@ body {
} }
#timeline-container .timeline-axis-text { #timeline-container .timeline-axis-text {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 10px; font-size: 10px;
font-weight: 900; font-weight: 900;
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
margin: 0; color: #A5A5A5;
margin: 0;
color: #a5a5a5;
} }
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {
#timeline-container .timeline-axis-text { #timeline-container .timeline-axis-text {
@@ -203,18 +208,6 @@ body {
} }
} }
#timeline-container .timeline-event { #timeline-container .timeline-event {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-border-radius: 0; -webkit-border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
border-radius: 0; border-radius: 0;
@@ -225,15 +218,12 @@ body {
/* /*
TODO move events with css3 TODO move events with css3
*/ */
} }
#timeline-container .timeline-event.timeline-event-range { #timeline-container .timeline-event.timeline-event-range {
background-color: #fff; background-color: #fff;
} }
#timeline-container .timeline-event-content { #timeline-container .timeline-event-content {
margin: 0; margin: 0;
margin: 0;
margin: 0;
} }
#timeline-container .timeline-event-content div.date { #timeline-container .timeline-event-content div.date {
display: block; display: block;
@@ -241,47 +231,35 @@ body {
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
padding: 4px 0; padding: 4px 0;
padding: 4px 0;
padding: 4px 0;
} }
#timeline-container .timeline-event-content div.date .text-content { #timeline-container .timeline-event-content div.date .text-content {
padding: 0 5px;
padding: 0 5px;
padding: 0 5px; padding: 0 5px;
margin-bottom: 4px; margin-bottom: 4px;
margin-bottom: 4px; border-left: 3px solid #A5A5A5;
margin-bottom: 4px;
border-left: 3px solid #a5a5a5;
border-left: 3px solid #a5a5a5;
border-left: 3px solid #a5a5a5;
} }
#timeline-container .timeline-event-content div.date:hover .text-content { #timeline-container .timeline-event-content div.date:hover .text-content {
border-left: 3px solid #77787b; border-left: 3px solid #77787B;
border-left: 3px solid #77787b;
border-left: 3px solid #77787b;
} }
#timeline-container .timeline-event-content div.date h4, #timeline-container .timeline-event-content div.date h4,
#timeline-container .timeline-event-content div.date h5 { #timeline-container .timeline-event-content div.date h5 {
margin: 0; margin: 0;
margin: 0; color: #A5A5A5;
margin: 0;
color: #a5a5a5;
} }
#timeline-container .timeline-event-content div.date h4 { #timeline-container .timeline-event-content div.date h4 {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
font-style: italic; font-style: italic;
} }
#timeline-container .timeline-event-content div.date h5 { #timeline-container .timeline-event-content div.date h5 {
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
} }
body.view-mode-dot #timeline-container .timeline-event-content div.date { body.view-mode-dot #timeline-container .timeline-event-content div.date {
padding: 0; padding: 0;
padding: 0;
padding: 0;
} }
body.view-mode-dot #timeline-container .timeline-event-content div.date .text-content { body.view-mode-dot #timeline-container .timeline-event-content div.date .text-content {
min-height: 15px; min-height: 15px;
@@ -315,3 +293,40 @@ body.view-mode-images #timeline-container .timeline-event-content div.date h5,
body.view-mode-images #timeline-container .timeline-event-content div.date img { body.view-mode-images #timeline-container .timeline-event-content div.date img {
display: block; display: block;
} }
#timeline-container .timeline-event-selected {
background-color: transparent;
}
#timeline-container .timeline-event-selected .timeline-event-content div.date .text-content {
border-left: 3px solid #77787B;
}
#timeline-container .timeline-event-selected .timeline-event-content div.date h4,
#timeline-container .timeline-event-selected .timeline-event-content div.date h5 {
color: #77787B;
}
.timeline-modal {
width: 150px;
min-height: 30px;
padding: 5px;
background-color: #fff;
position: absolute;
z-index: 99999;
display: none;
}
.timeline-modal h4,
.timeline-modal h5 {
margin: 0;
color: #77787B;
}
.timeline-modal h4 {
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 12px;
font-weight: 500;
font-style: italic;
}
.timeline-modal h5 {
font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0";
font-size: 12px;
font-weight: 700;
}
@@ -1,39 +1,155 @@
.Museo{font-family:"Museo",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";} /* LISIBILITY */
.MuseoSans{font-family:"MuseoSans",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";} /** COMMONS */
.MuseoSlab{font-family:"MuseoSlab",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";} .Museo {
a,a:visited{color:#000;} font-family: "Museo", Arial, sans-serif;
body{font-family:"MuseoSans",Arial,sans-serif;-moz-font-feature-settings:"calt=0,liga=0";font-size:16px;} -moz-font-feature-settings: "calt=0,liga=0";
.8{font-size:8px;} }
.9{font-size:9px;} .MuseoSans {
.10{font-size:10px;} font-family: "MuseoSans", Arial, sans-serif;
.11{font-size:10px;} -moz-font-feature-settings: "calt=0,liga=0";
.12{font-size:12px;} }
.14{font-size:14px;} .MuseoSlab {
.16{font-size:16px;} font-family: "MuseoSlab", Arial, sans-serif;
.18{font-size:18px;} -moz-font-feature-settings: "calt=0,liga=0";
.24{font-size:24px;} }
.regular{font-weight:normal;} a,
.bold{font-weight:bold;} a:visited {
.100{font-weight:100;} color: #000;
.300{font-weight:300;} }
.500{font-weight:500;} /*a.active, li a.active{color:@main-blue;}*/
.700{font-weight:700;} body {
.900{font-weight:900;} font-family: "MuseoSans", Arial, sans-serif;
.upper{text-transform:uppercase;} -moz-font-feature-settings: "calt=0,liga=0";
.italic{font-style:italic;} font-size: 16px;
.normal{font-style:normal;} }
*{font-size:14px;} .8 {
div{border:1px dashed #D4D4D4;} font-size: 8px;
p:after,ul:after{content:"¬";color:red;} }
h1:before,h2:before,h3:before,h4:before,h5:before,h6:before{color:blue;font-weight:normal;font-size:10px;vertical-align:super;} .9 {
h1:before{content:"h1 ";} font-size: 9px;
h2:before{content:"h2 ";} }
h3:before{content:"h3 ";} .10 {
h4:before{content:"h4 ";} font-size: 10px;
h5:before{content:"h5 ";} }
h6:before{content:"h6 ";} .11 {
br:after{content:"·";color:red;border:1px solid #999;} font-size: 10px;
img{height:auto;margin:0.5em 0;} }
p{border:1px dashed #848484;} .12 {
div{border:1px solid #1A1A1A;} font-size: 12px;
img,p,div{position:relative;}img:before,p:before,div:before{font-size:10px;color:red;background-color:#1A1A1A;position:absolute;top:0;z-index:3000;} }
.14 {
font-size: 14px;
}
.16 {
font-size: 16px;
}
.18 {
font-size: 18px;
}
.24 {
font-size: 24px;
}
.regular {
font-weight: normal;
}
.bold {
font-weight: bold;
}
.100 {
font-weight: 100;
}
.300 {
font-weight: 300;
}
.500 {
font-weight: 500;
}
.700 {
font-weight: 700;
}
.900 {
font-weight: 900;
}
.upper {
text-transform: uppercase;
}
.italic {
font-style: italic;
}
.normal {
font-style: normal;
}
/** FEUILLES DE STYLES */
/** timeline */
/** filters */
* {
font-size: 14px;
}
div {
border: 1px dashed #D4D4D4;
}
p:after,
ul:after {
content: "¬";
color: red;
}
h1:before,
h2:before,
h3:before,
h4:before,
h5:before,
h6:before {
color: blue;
font-weight: normal;
font-size: 10px;
vertical-align: super;
}
h1:before {
content: "h1 ";
}
h2:before {
content: "h2 ";
}
h3:before {
content: "h3 ";
}
h4:before {
content: "h4 ";
}
h5:before {
content: "h5 ";
}
h6:before {
content: "h6 ";
}
br:after {
content: "·";
color: red;
border: 1px solid #999;
}
/* LAYOUT AND GRAPHICS */
img {
height: auto;
margin: 0.5em 0;
}
p {
border: 1px dashed #848484;
}
div {
border: 1px solid #1A1A1A;
}
img,
p,
div {
position: relative;
}
img:before,
p:before,
div:before {
font-size: 10px;
color: red;
background-color: #1A1A1A;
position: absolute;
top: 0;
z-index: 3000;
}
@@ -15,4 +15,20 @@ function perfarttimeline_form_alter(&$form, &$form_state, $form_id) {
'#value' => t('Search'), '#value' => t('Search'),
); );
} }
}
function perfarttimeline_html_head_alter(&$head_elements) {
unset($head_elements['system_meta_generator']);
foreach ($head_elements as $key => $element) {
if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'canonical') {
unset($head_elements[$key]);
}
if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'shortlink') {
unset($head_elements[$key]);
}
if (isset($element['#attributes']['rel']) && $element['#attributes']['rel'] == 'alternate') {
unset($head_elements[$key]);
}
}
} }
@@ -34,9 +34,9 @@ function perfarttimeline_links__locale_block(&$vars) {
* @ingroup themeable * @ingroup themeable
*/ */
function perfarttimeline_image_style($vars) { function perfarttimeline_image_style($vars) {
// dsm($vars); // dpm($vars);
$real_path = $vars['path']; $original_path = $vars['path'];
_perfarttimeline_getImageStyleDimensions($vars); _perfarttimeline_getImageStyleDimensions($vars);
$figure = '<figure style="width:'.$vars['width'].'px;height:'.$vars['height'].'px;">'; $figure = '<figure style="width:'.$vars['width'].'px;height:'.$vars['height'].'px;">';
@@ -46,20 +46,33 @@ function perfarttimeline_image_style($vars) {
foreach ($styles as $style) { foreach ($styles as $style) {
$vars['attributes']['class'] = 'image '.$style; $vars['attributes']['class'] = 'image '.$style;
if($style == $vars['style_name']){ if($style == $vars['style_name']){
$vars['path'] = image_style_url($vars['style_name'], $real_path); // $vars['path'] = image_style_url($vars['style_name'], $original_path);
// $vars['path'] = image_style_path($vars['style_name'], $original_path);
$url = image_style_url($style, $original_path);
$url = parse_url($url);
$vars['path'] = $url['path'];
$figure .= theme('image', $vars); $figure .= theme('image', $vars);
}else{ }else{
$hidden_vars = array_merge(array(), $vars); $hidden_vars = array_merge(array(), $vars);
$hidden_vars['style_name'] = $style; $hidden_vars['style_name'] = $style;
_perfarttimeline_getImageStyleDimensions($hidden_vars); _perfarttimeline_getImageStyleDimensions($hidden_vars);
$hidden_vars['attributes']['path'] = image_style_url($style, $real_path); // $hidden_vars['attributes']['path'] = image_style_url($style, $original_path);
// $hidden_vars['attributes']['path'] = image_style_path($style, $original_path);
$url = image_style_url($style, $original_path);
$url = parse_url($url);
$hidden_vars['attributes']['path'] = $url['path'];
$hidden_vars['path'] = ""; $hidden_vars['path'] = "";
$figure .= theme('image', $hidden_vars); $figure .= theme('image', $hidden_vars);
} }
} }
}else{ }else{
$vars['attributes']['class'] = 'image '.$vars['style_name']; $vars['attributes']['class'] = 'image '.$vars['style_name'];
$vars['path'] = image_style_url($vars['style_name'], $real_path); // $vars['path'] = image_style_url($vars['style_name'], $original_path);
// $style_path = image_style_path($vars['style_name'], $original_path);
// $url = file_create_url($style_path);
$url = image_style_url($vars['style_name'], $original_path);
$url = parse_url($url);
$vars['path'] = $url['path'];
$figure .= theme('image', $vars); $figure .= theme('image', $vars);
} }
@@ -29,6 +29,10 @@ Drupal.behaviors.init_theme.attach = function (context) {
} }
$('#block-menu-block-2 ul.menu').listnav({cookieName:'test', attribute:'nom'}); $('#block-menu-block-2 ul.menu').listnav({cookieName:'test', attribute:'nom'});
$('.burger-icon').click(function(){
$('body').toggleClass('burger-shown');
});
}; };
Drupal.behaviors.init_timeline = {}; Drupal.behaviors.init_timeline = {};
@@ -82,7 +82,7 @@ body{
.MuseoSans; .900; .11; .upper; .MuseoSans; .900; .11; .upper;
} }
.fs-perfnode-personne(){ .fs-perfnode-personne(){
.MuseoSans; .500; .16; .upper; .MuseoSans; .500; .12; .upper;
} }
.fs-personne-texte(){ .fs-personne-texte(){
.MuseoSans; .500; .12; .MuseoSans; .500; .12;
@@ -14,8 +14,10 @@ transition: height, 5s, ease-out;
*/ */
} }
#main{ height:97%; }
body.layout-intro{ body.layout-intro{
#main{ height:97%; } // #main{ height:97%; }
#perfnode{ height:0%!important; } #perfnode{ height:0%!important; }
@@ -31,7 +33,7 @@ body.layout-intro{
body.layout-timeline{ body.layout-timeline{
#main{ #main{
height:97%; // height:97%;
#content, #center .page-title{height:0%;} #content, #center .page-title{height:0%;}
} }
@@ -50,7 +52,7 @@ body.layout-timeline{
body.layout-perfnode{ body.layout-perfnode{
#main{ #main{
height:97%; // height:97%;
#content, #center .page-title{height:0%;} #content, #center .page-title{height:0%;}
} }
@@ -65,3 +67,42 @@ body.layout-perfnode{
#timeline-loader{ display:none; } #timeline-loader{ display:none; }
} }
body>img{display: none;}
@media (max-width:799px) {
body{
overflow: hidden!important;
}
#container{
margin: 0!important;
width: 100vw!important;
height: 100vh!important;
overflow: hidden;
&>.inner{
padding:0!important;
width:100%!important;
height: 100vh!important;
display: flex;
flex-direction: column;
overflow: hidden;
#header{
height: 3vh;
flex: 0 0 auto;
height: auto;
padding:0.5em;
box-sizing: border-box;
}
#main{
flex: 0 0 auto;
overflow-x: hidden;
overflow-y: auto;
height: 96vh;
box-sizing: border-box;
#center{
display: block;
height: auto;
}
}
}
}
}
@@ -21,7 +21,11 @@ html, body{
#container{ #container{
width:100%; height:100%; width:100%; height:100%;
//width:1000px; height:700px; //width:1000px; height:700px;
min-width:1020px; min-height:700px; // todo media query for mobile phone
// min-width:1020px;
min-width: none;
min-height:700px;
.m(0 auto); background-color: #FFF; .m(0 auto); background-color: #FFF;
&>.inner{width:96%; height:94%; .p(1.5%);} &>.inner{width:96%; height:94%; .p(1.5%);}
} }
@@ -32,7 +36,8 @@ html, body{
border-bottom:2px solid #000; //.pb(5px); border-bottom:2px solid #000; //.pb(5px);
.logo{ .logo{
width:35%; height:27px; position:relative; bottom:0; left:0; // width:35%;
height:27px; position:relative; bottom:0; left:0;
html.oldie &{width:49%;} html.oldie &{width:49%;}
h1{ h1{
.fs-header; .fs-header;
@@ -41,25 +46,7 @@ html, body{
} }
#header-blocks{ #header-blocks{
width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
html.oldie &{width:62%;} html.oldie &{width:62%;}
// >.wrapper{position:relative; width:100%; height:100%;}
.region{
.inlineblock;
&:not(:first-child){ margin-left:1.1em; }
// don't know why but here display:inline; deosn't work on ie8 …
html.oldie &{float:left; margin-left:10px;}
}
}
ul.menu{
padding:0; margin:0;
li{
.inlineblock; margin:0;
&:not(.last){.p(0 6px 0 0);}
&.last{.p(0);}
a{.fs-header;}
}
} }
ul.language-switcher-locale-url{ ul.language-switcher-locale-url{
@@ -92,6 +79,135 @@ html, body{
} }
} }
/** RESPONSIVE */
@media (min-width:799px) {
#header .logo {
width:35%;
}
#header-blocks{
// background-color: blue;
width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px;
.region{
.inlineblock;
&:not(:first-child){ margin-left:1.1em; }
// don't know why but here display:inline; deosn't work on ie8 …
html.oldie &{float:left; margin-left:10px;}
}
ul.menu{
padding:0; margin:0;
li{
.inlineblock; margin:0;
&:not(.last){.p(0 6px 0 0);}
&.last{.p(0);}
a{.fs-header;}
}
}
}
}
@media (max-width:799px) {
#header .logo {
width:auto;
z-index: 11;
}
#header-blocks{
background-color:white;
position:absolute;
z-index: 10;
bottom:0;
right:0;
// width:63%;
height:27px;
text-align: right;
.region{
background-color: white;
padding:0 1em 0 1em;
&:first-child{padding-top:2em;}
&:last-child{padding-bottom:1em;}
}
ul{
padding:0; margin:0;
text-align: right;
li{
list-style: none;
margin:0;
padding: 0!important;
// &:not(.last){.p(0 6px 0 0);}
// &.last{.p(0);}
a{.fs-header;}
}
}
transition: transform 0.5s ease-in-out;
transform: translateX(150%);
body.burger-shown &{
transform: translateX(0);
}
}
.burger-icon {
height: 15px;
width: 20px;
// margin: 3%;
position: absolute;
top: 0.5em;
right: 0.5em;
display: inline-block;
vertical-align: middle;
z-index: 20;
cursor: pointer;
span {
display: block;
background: #000;
width: 100%;
height: 2px;
margin-top: -2px;
position: absolute;
left: 0;
top: 50%;
}
&:before,
&:after {
content: "";
display: block;
background: #000;
width: 100%;
height: 2px;
position: absolute;
left: 0;
transform-origin: center center;
transform: rotate(0deg);
transition: all 0.3s ease;
}
&:before {
top: 2px;
margin-top: -2px;
}
&:after {
bottom: 2px;
margin-bottom: -2px;
}
body.burger-shown & {
span {
background: transparent;
}
&:before {
top: 55%;
transform: rotate(45deg);
}
&:after {
bottom: 55%;
transform: rotate(-45deg);
}
}
}
}
/** INTRO-MODAL */ /** INTRO-MODAL */
#intro-wrapper{ #intro-wrapper{
File diff suppressed because it is too large Load Diff
@@ -20,6 +20,8 @@ if(in_array($vars['element']['#field_name'], $personnes_fields)){
// dsm($vars, 'vars'); // dsm($vars, 'vars');
foreach ($vars['element']['#items'] as $index => $item) { foreach ($vars['element']['#items'] as $index => $item) {
$term = $item['taxonomy_term']; $term = $item['taxonomy_term'];
// remove links of title
$vars['items'][$index] = array("#markup" => $term->name);
// dsm($term, 'term'); // dsm($term, 'term');
$children = array(); $children = array();
foreach(taxonomy_get_children($term->tid, $term->vid) as $child){ foreach(taxonomy_get_children($term->tid, $term->vid) as $child){
@@ -86,9 +86,11 @@
</div> </div>
<!-- /container --> <!-- /container -->
<!-- Javascript at the bottom for fast page loading --> <img src="<?php print $theme_path ?>/images/blank.gif" alt="">
<?php print $scripts; ?>
<!-- Javascript at the bottom for fast page loading -->
<?php print $scripts; ?>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6. <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started --> chromium.org/developers/how-tos/chrome-frame-getting-started -->
@@ -2,7 +2,14 @@
<article id="node-<?php print $node->nid; ?>" class="node type-<?php print $node->type; ?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " unpublished"; } ?>"> <article id="node-<?php print $node->nid; ?>" class="node type-<?php print $node->type; ?><?php if ($sticky) { print " sticky"; } ?><?php if (!$status) { print " unpublished"; } ?>">
<?php if ($page == 0 && isset($title)): ?> <?php if ($page == 0 && isset($title)): ?>
<h1 class="nodetitle"><a href="<?php print $node_url?>"><?php print $title?></a></h1> <h1 class="nodetitle">
<?php $types = ['document', 'document_video', 'document_sonor', 'object']; // , 'effectuation' ?>
<?php if (!in_array($node->type, $types)) : ?>
<a href="<?php print $node_url?>"><?php print $title?></a>
<?php else: ?>
<?php print $title?>
<?php endif; ?>
</h1>
<?php endif; ?> <?php endif; ?>
<section class="content"> <section class="content">
@@ -76,6 +76,7 @@
</hgroup> </hgroup>
<?php if ($page['headerblock_left'] || $page['headerblock_middle'] || $page['headerblock_right']): ?> <?php if ($page['headerblock_left'] || $page['headerblock_middle'] || $page['headerblock_right']): ?>
<div class="burger-icon"><span/></div>
<div id="header-blocks"> <div id="header-blocks">
<?php print render($page['headerblock_left']); ?> <?php print render($page['headerblock_left']); ?>
<?php print render($page['headerblock_middle']); ?> <?php print render($page['headerblock_middle']); ?>