bachir/performance-art.fr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

all interface is now responsive

Browse Source
This commit is contained in:
bachir
2021-12-07 17:10:59 +01:00
parent 62a9afcc33
commit c634eb80f3
7 changed files with 477 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/modules/gui/perfart/perfart.pages.inc
+15 -3
View File
@@ -258,8 +258,6 @@ function perfart_get_performances(){
$count = $count_query->count()->execute(); $count = $count_query->count()->execute();
pager_default_initialize($count, $limit); pager_default_initialize($count, $limit);
$data = array();
foreach ($result['node'] as $eff) { foreach ($result['node'] as $eff) {
$eff = node_load($eff->nid); $eff = node_load($eff->nid);
//$eff = entity_load('node', array($eff->nid), NULL, FALSE); //$eff = entity_load('node', array($eff->nid), NULL, FALSE);
@@ -324,6 +322,8 @@ function perfart_get_performances(){
if(in_array($perf['target_id'], $perfadded)) if(in_array($perf['target_id'], $perfadded))
continue; continue;
$item_classes = array();
$perfadded[] = $perf['target_id']; $perfadded[] = $perf['target_id'];
$perf = node_load($perf['target_id']); $perf = node_load($perf['target_id']);
@@ -386,6 +386,9 @@ function perfart_get_performances(){
// dsm($image, 'image'); // dsm($image, 'image');
$date['thumb'] = l($image, $node_path, array('html'=>true)); $date['thumb'] = l($image, $node_path, array('html'=>true));
$content .= $date['thumb']; $content .= $date['thumb'];
$item_classes[] = "with-image";
}else{
$item_classes[] = "without-image";
} }
// $content .= '</div>'; // $content .= '</div>';
@@ -445,11 +448,20 @@ function perfart_get_performances(){
pager_default_initialize($count, $limit); pager_default_initialize($count, $limit);
// $data[] = $date; // $data[] = $date;
$list['items'][] = $content;
$item = array(
'data' => $content,
// 'attributes' => array(
'class' => $item_classes,
// ),
);
$list['items'][] = $item;
} }
} }
$list['attributes']['id'] = "home-performances-list";
// dsm($data, '$data'); // dsm($data, '$data');
return theme('item_list', $list) . theme('pager'); return theme('item_list', $list) . theme('pager');
} }
sites/all/themes/gui/perfarttimeline/css/styles.css
+195 -106
View File
@@ -458,6 +458,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* background-color: red;*/ /* background-color: red;*/
overflow-y: hidden;
} }
#container { #container {
width: 100%; width: 100%;
@@ -517,7 +518,7 @@ html.oldie #header #header-blocks {
margin: 0; margin: 0;
} }
#header ul.language-switcher-locale-url li { #header ul.language-switcher-locale-url li {
padding-right: 10px; padding-right: 0;
} }
#header ul.language-switcher-locale-url li.active { #header ul.language-switcher-locale-url li.active {
display: none; display: none;
@@ -621,10 +622,10 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** RESPONSIVE */ /** RESPONSIVE */
@media (min-width: 799px) { @media (min-width: 799px) {
#header .logo { #header .logo {
width: 35%; width: 340px;
} }
#header-blocks { #header-blocks {
width: 63%; width: calc(100% - 340px);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
@@ -644,7 +645,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
display: inline; display: inline;
} }
#header-blocks .region:not(:first-child) { #header-blocks .region:not(:first-child) {
margin-left: 1.1em; margin-left: 0.5em;
} }
html.oldie #header-blocks .region { html.oldie #header-blocks .region {
float: left; float: left;
@@ -741,7 +742,7 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
html.oldie #header-blocks ul li a { html.oldie #header-blocks ul li a {
font-size: 9px; font-size: 9px;
} }
body.burger-shown #header-blocks { body.burger-header-shown #header-blocks {
transform: translateX(0); transform: translateX(0);
} }
.burger-icon { .burger-icon {
@@ -755,6 +756,9 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
z-index: 20; z-index: 20;
cursor: pointer; cursor: pointer;
} }
.burger-icon.sidebar-first {
background-color: #A5A5A5;
}
.burger-icon span { .burger-icon span {
display: block; display: block;
background: #000; background: #000;
@@ -786,14 +790,17 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
bottom: 2px; bottom: 2px;
margin-bottom: -2px; margin-bottom: -2px;
} }
body.burger-shown .burger-icon span { body.burger-header-shown .burger-icon.header span,
body.burger-sidebar-first-shown .burger-icon.sidebar-first span {
background: transparent; background: transparent;
} }
body.burger-shown .burger-icon:before { body.burger-header-shown .burger-icon.header:before,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:before {
top: 55%; top: 55%;
transform: rotate(45deg); transform: rotate(45deg);
} }
body.burger-shown .burger-icon:after { body.burger-header-shown .burger-icon.header:after,
body.burger-sidebar-first-shown .burger-icon.sidebar-first:after {
bottom: 55%; bottom: 55%;
transform: rotate(-45deg); transform: rotate(-45deg);
} }
@@ -869,22 +876,78 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
/** MAIN */ /** MAIN */
#main { #main {
height: 97%; height: 97%;
position: relative;
/** SIDEBAR FIRST */ /** SIDEBAR FIRST */
/** CENTER */ /** CENTER */
/** SIDEBAR SECOND */ /** SIDEBAR SECOND */
} }
#main #sidebar-first { #main #sidebar-first {
display: moz-inline-stack; height: 99%;
display: inline-block; overflow-x: hidden;
vertical-align: top; overflow-y: auto;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 29%;
} }
.ie7 #main #sidebar-first, #main #sidebar-first .block-menu-block,
.ie8 #main #sidebar-first { #main #sidebar-first .block-menu-block > .content {
display: inline; height: 100%;
}
#main #sidebar-first #myList-nav {
max-height: 100%;
display: flex;
flex-flow: row nowrap;
}
#main #sidebar-first #myList-nav > div {
flex: 0 0 auto;
width: 1em;
}
#main #sidebar-first #myList-nav > div .ln-letters {
margin: 0;
}
#main #sidebar-first #myList-nav > ul {
flex: 0 0 auto;
box-sizing: border-box;
width: calc(100% - 1em);
max-height: 100%;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
margin-top: 2em;
}
@media (min-width: 799px) {
#main #sidebar-first {
display: moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
width: 300px;
}
.ie7 #main #sidebar-first,
.ie8 #main #sidebar-first {
display: inline;
}
}
@media (max-width: 799px) {
#main #sidebar-first {
position: absolute;
top: 0;
left: 0;
width: 70%;
background-color: #A5A5A5;
z-index: 10;
transition: transform 0.5s ease-in-out;
transform: translateX(calc(-100% + 2em));
}
#main #sidebar-first #myList-nav ul {
overflow-y: hidden;
}
body.burger-sidebar-first-shown #main #sidebar-first {
transform: translateX(0);
}
body.burger-sidebar-first-shown #main #sidebar-first #myList-nav ul {
overflow-y: auto;
}
} }
#main ul li.leaf { #main ul li.leaf {
list-style-image: none; list-style-image: none;
@@ -978,9 +1041,25 @@ html.oldie #header #search-block-form #edit-actions input.form-submit {
.not-front.node-type-temoignage #main #center, .not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center, .not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center { .not-front.node-type-biographie #main #center {
margin-left: 75px; box-sizing: border-box;
width: 550px; }
padding-top: 20px; @media (min-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: calc(99% - 300px);
padding: 20px;
}
}
@media (max-width: 799px) {
.not-front.node-type-page #main #center,
.not-front.node-type-temoignage #main #center,
.not-front.node-type-document-video #main #center,
.not-front.node-type-biographie #main #center {
width: 100%;
padding: 0.5em 3em;
}
} }
.not-front.node-type-page #main #center #content p, .not-front.node-type-page #main #center #content p,
.not-front.node-type-temoignage #main #center #content p, .not-front.node-type-temoignage #main #center #content p,
@@ -1876,7 +1955,7 @@ html.no-js body.front .item-list .pager li,
html.classic-nav body.front .item-list .pager li { html.classic-nav body.front .item-list .pager li {
background-color: transparent; background-color: transparent;
color: #000; color: #000;
border-left: 1px solid #000; padding: 0 0.25em;
} }
html.no-js body.front .item-list .pager li a, html.no-js body.front .item-list .pager li a,
html.classic-nav body.front .item-list .pager li a, html.classic-nav body.front .item-list .pager li a,
@@ -1896,7 +1975,6 @@ html.classic-nav body.front .item-list ul li {
margin-bottom: 1em; margin-bottom: 1em;
padding-right: 1em; padding-right: 1em;
padding-left: 0.5em; padding-left: 0.5em;
border-left: 3px solid #A5A5A5;
} }
html.no-js body.front .item-list li a, html.no-js body.front .item-list li a,
html.classic-nav body.front .item-list li a, html.classic-nav body.front .item-list li a,
@@ -1908,6 +1986,71 @@ html.no-js body.front .item-list ul li a:visited,
html.classic-nav body.front .item-list ul li a:visited { html.classic-nav body.front .item-list ul li a:visited {
color: #A5A5A5; color: #A5A5A5;
} }
html.no-js body.front #home-performances-list,
html.classic-nav body.front #home-performances-list {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: space-between;
}
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
padding: 0 0.5em 0.5em;
margin: 0.5em;
}
html.no-js body.front #home-performances-list > li.with-image,
html.classic-nav body.front #home-performances-list > li.with-image {
flex: 0 1 auto;
}
html.no-js body.front #home-performances-list > li.without-image,
html.classic-nav body.front #home-performances-list > li.without-image {
flex: 1 1 auto;
}
html.no-js body.front #home-performances-list > li h4,
html.classic-nav body.front #home-performances-list > li h4,
html.no-js body.front #home-performances-list > li h5,
html.classic-nav body.front #home-performances-list > li h5 {
max-width: 200px;
margin: 0.5em 0;
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li h4 a,
html.classic-nav body.front #home-performances-list > li h4 a,
html.no-js body.front #home-performances-list > li h5 a,
html.classic-nav body.front #home-performances-list > li h5 a {
line-height: 1.1;
}
html.no-js body.front #home-performances-list > li .date > a,
html.classic-nav body.front #home-performances-list > li .date > a {
display: block;
}
html.no-js body.front #home-performances-list > li figure,
html.classic-nav body.front #home-performances-list > li figure {
display: inline-block;
position: relative;
}
html.no-js body.front #home-performances-list > li figure img.image,
html.classic-nav body.front #home-performances-list > li figure img.image {
max-width: 100%;
}
html.no-js body.front #home-performances-list > li figure img.blank,
html.classic-nav body.front #home-performances-list > li figure img.blank {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
html.no-js body.front #home-performances-list > li figure figcaption,
html.classic-nav body.front #home-performances-list > li figure figcaption {
display: none;
}
@media (max-width: 799px) {
html.no-js body.front #home-performances-list > li,
html.classic-nav body.front #home-performances-list > li {
flex: 0 0 auto;
}
}
html.no-js body.node-type-performance #main, html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main { html.classic-nav body.node-type-performance #main {
background-color: #D3D3D3; background-color: #D3D3D3;
@@ -1944,6 +2087,24 @@ html.no-js body.node-type-performance #main,
html.classic-nav body.node-type-performance #main { html.classic-nav body.node-type-performance #main {
background-color: #F2F2F2; background-color: #F2F2F2;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field {
flex: 0 0 auto;
max-width: 45%;
margin: 0.5em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > section.field.field-name-field-images {
flex: 1 1 100%;
max-width: 100%;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content h1.node-title {
margin: 0; margin: 0;
@@ -1951,9 +2112,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 900; font-weight: 900;
font-size: 24px; font-size: 24px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-label, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-label,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-label { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-label {
@@ -1966,28 +2124,16 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-personne, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-personne,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-personne { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-personne {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
text-transform: uppercase; text-transform: uppercase;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item, html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-textauthor .field-item,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-type-text-long .field-item {
max-height: 300px;
overflow: auto; overflow: auto;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
@@ -2006,25 +2152,17 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
width: 300px; }
/* background-color:rgba(255,0,0,0.1);*/ html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items,
padding: 0; html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images > .field-items {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: moz-inline-stack; flex: 1 0 auto;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
/* margin-right:-.25em;*/
margin: 0 1em 1em 0;
}
.ie7 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie7 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item,
.ie8 html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-images .field-item {
display: inline;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-type-de-performance {
@@ -2032,9 +2170,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 16px;
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-tags-libre {
@@ -2042,15 +2177,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
font-size: 12px; font-size: 12px;
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation {
width: 200px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1 { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-effectuation h1 {
@@ -2065,9 +2191,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document-video {
width: 400px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
@@ -2075,9 +2198,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-document,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-document {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
@@ -2085,9 +2205,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-objet, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .node-objet,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-objet { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .node-objet {
width: 300px;
/* background-color:rgba(255,0,0,0.1);*/
padding: 0;
font-family: "MuseoSans", Arial, sans-serif; font-family: "MuseoSans", Arial, sans-serif;
-moz-font-feature-settings: "calt=0,liga=0"; -moz-font-feature-settings: "calt=0,liga=0";
font-weight: 500; font-weight: 500;
@@ -2096,25 +2213,15 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure {
position: relative; position: relative;
height: auto!important;
margin: 0.5em;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure figcaption {
position: absolute;
right: 0;
bottom: 0;
width: 96%;
padding: 2%;
background-color: rgba(255, 255, 255, 0.8); background-color: rgba(255, 255, 255, 0.8);
-moz-opacity: 0;
-khtml-opacity: 0;
-webkit-opacity: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
color: #000; color: #000;
font-size: 10px; font-size: 10px;
max-width: 100%;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure .blank, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure .blank,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure .blank { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure .blank {
@@ -2124,13 +2231,6 @@ html.classic-nav body.node-type-performance #main #center #content .node.type-pe
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content figure:hover figcaption {
-moz-opacity: 1;
-khtml-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > .field, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content > .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > .field { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content > .field {
display: inline-block; display: inline-block;
@@ -2145,17 +2245,6 @@ html.no-js body.node-type-performance #main #center #content .node.type-performa
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor, html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents, html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents { html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents {
display: block;
border: none;
border-top: 2px solid #e4e4e4;
margin-top: 1em;
}
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-effectuations .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents-sonor .field-item .field,
html.no-js body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field,
html.classic-nav body.node-type-performance #main #center #content .node.type-performance > .content .field-name-field-documents .field-item .field {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
padding-left: 0.5em; padding-left: 0.5em;
sites/all/themes/gui/perfarttimeline/js/script.js
+9 -5
View File
@@ -24,14 +24,18 @@ Drupal.behaviors.init_theme.attach = function (context) {
} }
}); });
if(!$('body').is('.front') && !$('body').is('.node-type-performance')){ // DON'T USE JSCROLLPANE FOR NORMAL PAGES ANYMORE
$('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true}); // if(!$('body').is('.front') && !$('body').is('.node-type-performance')){
} // $('#main').jScrollPane({autoReinitialise:true, hijackInternalLinks:true});
// }
$('#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(){ $('.burger-icon.header').click(function(){
$('body').toggleClass('burger-shown'); $('body').toggleClass('burger-header-shown');
});
$('.burger-icon.sidebar-first').click(function(){
$('body').toggleClass('burger-sidebar-first-shown');
}); });
}; };
sites/all/themes/gui/perfarttimeline/less/layout.less
+1
View File
@@ -106,3 +106,4 @@ body>img{display: none;}
} }
} }
} }
sites/all/themes/gui/perfarttimeline/less/styles.less
+219 -72
View File
@@ -15,6 +15,7 @@ html, body{
position:relative; position:relative;
width:100%; height:100%; width:100%; height:100%;
/* background-color: red;*/ /* background-color: red;*/
overflow-y: hidden;
} }
@@ -51,7 +52,7 @@ html, body{
ul.language-switcher-locale-url{ ul.language-switcher-locale-url{
padding:0; margin:0; padding:0; margin:0;
li{padding-right:10px;} li{padding-right:0;}
li.active{display:none;} li.active{display:none;}
a{.fs-header;} a{.fs-header;}
} }
@@ -82,14 +83,14 @@ html, body{
/** RESPONSIVE */ /** RESPONSIVE */
@media (min-width:799px) { @media (min-width:799px) {
#header .logo { #header .logo {
width:35%; width:340px;
} }
#header-blocks{ #header-blocks{
// background-color: blue; // background-color: blue;
width:63%; position:absolute; bottom:0; right:0; text-align: right; height:27px; width:calc(100% - 340px); position:absolute; bottom:0; right:0; text-align: right; height:27px;
.region{ .region{
.inlineblock; .inlineblock;
&:not(:first-child){ margin-left:1.1em; } &:not(:first-child){ margin-left:0.5em; }
// don't know why but here display:inline; deosn't work on ie8 … // don't know why but here display:inline; deosn't work on ie8 …
html.oldie &{float:left; margin-left:10px;} html.oldie &{float:left; margin-left:10px;}
} }
@@ -139,7 +140,7 @@ html, body{
transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out;
transform: translateX(150%); transform: translateX(150%);
body.burger-shown &{ body.burger-header-shown &{
transform: translateX(0); transform: translateX(0);
} }
} }
@@ -155,6 +156,10 @@ html, body{
vertical-align: middle; vertical-align: middle;
z-index: 20; z-index: 20;
cursor: pointer; cursor: pointer;
&.sidebar-first{
background-color: @timeline-lighten-color;
// top:0; right: 0;
}
span { span {
display: block; display: block;
background: #000; background: #000;
@@ -189,7 +194,8 @@ html, body{
margin-bottom: -2px; margin-bottom: -2px;
} }
body.burger-shown & { body.burger-header-shown &.header,
body.burger-sidebar-first-shown &.sidebar-first {
span { span {
background: transparent; background: transparent;
} }
@@ -231,16 +237,79 @@ html, body{
/** MAIN */ /** MAIN */
#main{ #main{
height:97%; height:97%;
position: relative;
// overflow-x: hidden;
// overflow-y: auto;
// display: flex;
// flex-flow: column nowrap;
/** SIDEBAR FIRST */ /** SIDEBAR FIRST */
#sidebar-first{ #sidebar-first{
.inlineblock; width: 29%; height: 99%;
// min-height: 75%;
overflow-x: hidden;
overflow-y: auto;
.block-menu-block{
&, &>.content{
height: 100%; // this is not working, why ?
}
}
#myList-nav{
max-height: 100%;
display: flex;
flex-flow: row nowrap;
>div{
flex:0 0 auto;
width: 1em;
.ln-letters{
margin: 0;
}
}
>ul{
flex:0 0 auto;
box-sizing: border-box;
width:calc(100% - 1em);
max-height: 100%;
padding-left: 2em;
padding-right: 2em;
overflow-x: hidden;
overflow-y: auto;
margin-top: 2em;
}
}
@media (min-width:799px) {
.inlineblock; width: 300px;
}
@media (max-width:799px) {
position: absolute;
top:0;
left: 0;
width:70%;
background-color: @timeline-lighten-color;
z-index: 10;
transition: transform 0.5s ease-in-out;
transform: translateX(calc(-100% + 2em));
#myList-nav ul{
overflow-y: hidden;
}
body.burger-sidebar-first-shown &{
transform: translateX(0);
#myList-nav ul{
overflow-y: auto;
}
}
}
} }
ul li.leaf{ ul li.leaf{
list-style-image:none; list-style-image:none;
list-style-type: none; list-style-type: none;
font-size: 12px; font-size: 12px;
@@ -308,20 +377,23 @@ html, body{
.not-front.node-type-temoignage &, .not-front.node-type-temoignage &,
.not-front.node-type-document-video &, .not-front.node-type-document-video &,
.not-front.node-type-biographie &{ .not-front.node-type-biographie &{
margin-left:75px; box-sizing: border-box;
width:550px; @media (min-width:799px) {
padding-top:20px; // margin-left:75px;
#content{ width:calc(99% - 300px);
p {font-size:12px; color:#000; line-height:1.4;} padding:20px;
a{text-decoration:none; font-size:12px;} }
a:visited{font-weight:700} @media (max-width:799px) {
a:hover{font-weight:700} width: 100%;
a:active{font-weight:700} padding:0.5em 3em;
}
#content{
p {font-size:12px; color:#000; line-height:1.4;}
a{text-decoration:none; font-size:12px;}
a:visited{font-weight:700}
a:hover{font-weight:700}
a:active{font-weight:700}
} }
} }
} }
@@ -752,13 +824,13 @@ html.no-js, html.classic-nav{
body.front{ body.front{
.generale-design; .generale-design;
.item-list { .item-list {
.pager li{ .pager li{
background-color:transparent; background-color:transparent;
a,a:visited{color:#000;} a,a:visited{color:#000;}
color:#000; color:#000;
border-left:1px solid #000; // border-left:1px solid #000;
padding: 0 0.25em;
} }
li, ul li { li, ul li {
a,a:visited{color:#A5A5A5;} a,a:visited{color:#A5A5A5;}
@@ -770,11 +842,59 @@ html.no-js, html.classic-nav{
margin-bottom:1em; margin-bottom:1em;
padding-right:1em; padding-right:1em;
padding-left:0.5em; padding-left:0.5em;
border-left:3px solid #A5A5A5; // border-left:3px solid #A5A5A5;
} }
} }
#home-performances-list{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: space-between;
>li{
&.with-image{
flex: 0 1 auto;
}
&.without-image{
flex: 1 1 auto;
}
padding:0 0.5em 0.5em;
margin: 0.5em;
h4, h5{
max-width: 200px;
margin: 0.5em 0; line-height: 1.1;
a{line-height: 1.1;}
}
.date > a{
display: block;
}
figure{
display: inline-block;
position: relative;
img.image{
max-width: 100%;
}
img.blank{
position: absolute;
top:0; left:0;
width:100%; height:100%;
}
figcaption{
display: none;
}
}
}
@media (max-width:799px) {
>li{
flex: 0 0 auto;
}
}
}
} }
//FICHES PERFORMANCE// //FICHES PERFORMANCE//
@@ -786,6 +906,20 @@ html.no-js, html.classic-nav{
#center #content { #center #content {
.node.type-performance>.content{ .node.type-performance>.content{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
>section.field{
// outline: 1px solid #036;
flex:0 0 auto;
max-width: 45%;
margin:0.5em;
&.field-name-field-images{
flex: 1 1 100%;
max-width: 100%;
}
}
.bordered-block(){ .bordered-block(){
display: inline-block; display: inline-block;
@@ -800,32 +934,32 @@ html.no-js, html.classic-nav{
display:block; border:none; display:block; border:none;
} }
@cel:100px; // @cel:100px;
@padd:0; // @padd:0;
.cel(@n){ // .cel(@n){
width:(@cel* @n) - @padd*2; // width:(@cel* @n) - @padd*2;
/* background-color:rgba(255,0,0,0.1);*/ // /* background-color:rgba(255,0,0,0.1);*/
padding:@padd; // padding:@padd;
//.bl(1px, rgba(255,0,0,0.1)); // //.bl(1px, rgba(255,0,0,0.1));
} // }
h1.node-title{ h1.node-title{
.m(0); .m(0);
.fs-perfnode-title; .fs-perfnode-title;
.cel(3); // .cel(3);
} }
.field-label{.fs-perfnode-label; color:@timeline-lighten-color;} .field-label{.fs-perfnode-label; color:@timeline-lighten-color;}
.field-personne{ .field-personne{
.cel(2); // .cel(2);
.fs-perfnode-personne; .fs-perfnode-personne;
} }
.field-type-textauthor, .field-type-text-long{ .field-type-textauthor, .field-type-text-long{
.cel(4); // .cel(4);
.field-item{ .field-item{
max-height:@cel*3; // max-height:@cel*3;
overflow:auto; overflow:auto;
// article, address, p{ // article, address, p{
.fs-personne-texte; .fs-personne-texte;
@@ -836,57 +970,70 @@ html.no-js, html.classic-nav{
} }
.field-name-field-serie{ .field-name-field-serie{
.fs-perfnode-serie; .fs-perfnode-serie;
.cel(3); // .cel(3);
} }
.field-name-field-images{ .field-name-field-images{
>.field-items{
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: stretch;
}
.field-item{ .field-item{
.inlineblock; margin:0 1em 1em 0; // .inlineblock; margin:0 1em 1em 0;
flex:1 0 auto;
// max-width: 33%;
} }
} }
.field-name-field-type-de-performance{ .field-name-field-type-de-performance{
.fs-perfnode-serie; .fs-perfnode-serie;
.cel(3); // .cel(3);
} }
.field-name-field-tags-libre{ .field-name-field-tags-libre{
.fs-personne-texte; .fs-personne-texte;
.cel(2); // .cel(2);
} }
.node-effectuation{ .node-effectuation{
.cel(2); // .cel(2);
h1{.m(0);} h1{.m(0);}
.field-item{.fs-perfnode-serie;} .field-item{.fs-perfnode-serie;}
} }
.node-document-video{ .node-document-video{
.cel(4); // .cel(4);
.fs-personne-texte; .fs-personne-texte;
} }
.node-document{ .node-document{
.cel(3); // .cel(3);
.fs-personne-texte; .fs-personne-texte;
} }
.node-objet{ .node-objet{
.cel(3); // .cel(3);
.fs-personne-texte; .fs-personne-texte;
} }
figure{ figure{
position: relative; position: relative;
// width:auto!important;
height: auto!important;
margin: 0.5em;
figcaption{ figcaption{
position:absolute; right:0; bottom:0; // position:absolute; right:0; bottom:0;
width:96%; padding:2%; // width:96%; padding:2%;
background-color: rgba(255,255,255,0.8); background-color: rgba(255,255,255,0.8);
.opacity(0); .transition(opacity, 0.5s, ease-out); // .opacity(0); .transition(opacity, 0.5s, ease-out);
color:#000; .10; color:#000;
.10;
max-width: 100%;
} }
.blank{ position:absolute; top:0; left:0; width:100%; height:100%;} .blank{ position:absolute; top:0; left:0; width:100%; height:100%;}
&:hover{figcaption{.opacity(1);}} // &:hover{figcaption{.opacity(1);}}
} }
>.field{ >.field{
@@ -896,14 +1043,15 @@ html.no-js, html.classic-nav{
.field-name-field-effectuations, .field-name-field-effectuations,
.field-name-field-documents-sonor, .field-name-field-documents-sonor,
.field-name-field-documents{ .field-name-field-documents{
.non-bordered; .bordered-block;
border-top: 2px solid #e4e4e4; // .non-bordered;
margin-top:1em; // border-top: 2px solid #e4e4e4;
.field-item{ // margin-top:1em;
.field{ // .field-item{
.bordered-block; // .field{
} // .bordered-block;
} // }
// }
} }
.field-name-field-effectuations{ .field-name-field-effectuations{
@@ -927,16 +1075,15 @@ html.no-js, html.classic-nav{
} }
//EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.// //EFFECTUATIONS, DOCUMENTS, OBJETS, ETC.//
body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term { body.node-type-document, .node-type-document-sonor, .node-type-object, .page-taxonomy-term {
.generale-design; .generale-design;
#center #content { #center #content {
width: 720px; width: 720px;
img {margin:1em 0 1em 0;} img {margin:1em 0 1em 0;}
figure {position:relative;} figure {position:relative;}
img.blank{position:absolute; top:0; left:0;} img.blank{position:absolute; top:0; left:0;}
figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; } figcaption {font-weight: 300; font-size:11px; width:250px; margin-bottom:1em; }
font-size:12px; font-size:12px;
} }
} }
sites/all/themes/gui/perfarttimeline/templates/page.tpl.php
+1 -1
View File
@@ -76,7 +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 class="burger-icon header"><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']); ?>
sites/all/themes/gui/perfarttimeline/templates/region--sidebar-first.tpl.php
+34
View File
@@ -0,0 +1,34 @@
<?php
/**
* @file
* Default theme implementation to display a region.
*
* Available variables:
* - $content: The content for this region, typically blocks.
* - $classes: String of classes that can be used to style contextually through
* CSS. It can be manipulated through the variable $classes_array from
* preprocess functions. The default values can be one or more of the following:
* - region: The current template type, i.e., "theming hook".
* - region-[name]: The name of the region with underscores replaced with
* dashes. For example, the page_top region would have a region-page-top class.
* - $region: The name of the region variable as defined in the theme's .info file.
*
* Helper variables:
* - $classes_array: Array of html class attribute values. It is flattened
* into a string within the variable $classes.
* - $is_admin: Flags true when the current user is an administrator.
* - $is_front: Flags true when presented in the front page.
* - $logged_in: Flags true when the current user is a logged-in member.
*
* @see template_preprocess()
* @see template_preprocess_region()
* @see template_process()
*/
?>
<?php if ($content): ?>
<section class="<?php print $classes; ?>"<?php print $attributes; ?>>
<div class="burger-icon sidebar-first"><span/></div>
<?php print $content; ?>
</section>
<?php endif; ?>