display imporovement (fonts) + agenda nav + prod linked events nav

This commit is contained in:
2018-04-15 21:45:13 +02:00
parent 4967111a0e
commit c5ae3d6b00
15 changed files with 505 additions and 331 deletions
@@ -93,8 +93,9 @@ function edlp_ajax_theme($existing, $type, $theme, $path) {
'edlp_ajax' => array(
'file' => 'includes/edlp_ajax.inc',
'variables' => array(
'entity_type' => 'node',
'entity' => NULL,
'entity_type' => null,
'bundle' => null,
'entity' => null,
'view_mode' => 'default',
'aside' => array(),
),
@@ -110,6 +111,7 @@ function edlp_ajax_theme_suggestions_edlp_ajax(array $vars) {
$suggestions = [];
// $node = $variables['elements']['#node'];
$sanitized_view_mode = strtr($vars['view_mode'], '.', '_');
// $entity = $vars['entity'];
//
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'];
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $sanitized_view_mode;
@@ -117,5 +119,8 @@ function edlp_ajax_theme_suggestions_edlp_ajax(array $vars) {
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['entity']->id();
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['entity']->id() . '__' . $sanitized_view_mode;
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['bundle'];
$suggestions[] = 'edlp_ajax__' . $vars['entity_type'] . '__' . $vars['bundle'] . '__' . $sanitized_view_mode;
return $suggestions;
}
@@ -59,7 +59,10 @@ class EdlpAjaxController extends ControllerBase {
if(count($future_nids) || count($past_nids)){
$aside = array(
'#type'=>'container'
'#type'=>'container',
"#attributes"=>array(
"class"=>['agenda']
)
);
$node_view_builder = \Drupal::entityTypeManager()->getViewBuilder('node');
@@ -71,7 +74,7 @@ class EdlpAjaxController extends ControllerBase {
'#items' => [],
);
foreach($future_nodes as $node){
$future_list['#items'][] = $node_view_builder->view($node, 'teaser');
$future_list['#items'][] = $node_view_builder->view($node, 'aside');
}
$aside['future_events'] = array(
"#type"=>"container",
@@ -90,12 +93,12 @@ class EdlpAjaxController extends ControllerBase {
'#items' => [],
);
foreach($past_nodes as $node){
$past_list['#items'][] = $node_view_builder->view($node, 'teaser');
$past_list['#items'][] = $node_view_builder->view($node, 'aside');
}
$aside['past_events'] = array(
"#type"=>"container",
"#attributes"=>array(
"class"=>['future-events']
"class"=>['past-events']
),
"#markup"=>"<h3>" . t("Past events") . "</h3>",
"past_events"=>$past_list
@@ -130,6 +133,7 @@ class EdlpAjaxController extends ControllerBase {
'#entity' => $this->entity,
'#view_mode' => $this->viewmode,
'#aside' => $this->getAside(),
'#bundle' => $this->bundle,
);
}else{
return array(
@@ -14,7 +14,6 @@ if(edlp.redirect){
window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
// redirect to home
// debugger;
window.location.replace(window.location.origin+'/'+edlp.lang_code);
}else{
console.log('history do not redirect');
@@ -169,7 +169,17 @@
// reset all style may been added by other pages (like masonry for productions)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
if(data.entity_type == "node" && data.bundle == "evenement"){
if(_$row.find('.col.event').length){
_$row.find('.col.event').replaceWith(data.rendered);
}else if(_$row.find('.col.aside').length){
_$row.find('.col.aside').replaceWith(data.rendered);
}else{
_$row.append(data.rendered);
}
}else{
_$row.removeAttr('style').html(data.rendered);
}
// add body class for currently loaded content
var body_classes = [
File diff suppressed because it is too large Load Diff
@@ -14,7 +14,6 @@ if(edlp.redirect){
window.localStorage.setItem('edlp_origin', JSON.stringify(edlp));
// redirect to home
// debugger;
window.location.replace(window.location.origin+'/'+edlp.lang_code);
}else{
console.log('history do not redirect');
@@ -169,7 +169,17 @@
// reset all style may been added by other pages (like masonry for productions)
// and replace all content with newly loaded
// TODO: build a system to replace or append contents (like studio + search)
_$row.removeAttr('style').html(data.rendered);
if(data.entity_type == "node" && data.bundle == "evenement"){
if(_$row.find('.col.event').length){
_$row.find('.col.event').replaceWith(data.rendered);
}else if(_$row.find('.col.aside').length){
_$row.find('.col.aside').replaceWith(data.rendered);
}else{
_$row.append(data.rendered);
}
}else{
_$row.removeAttr('style').html(data.rendered);
}
// add body class for currently loaded content
var body_classes = [
@@ -248,11 +248,6 @@ main[role="main"]{
}
}
}
.field.text-formatted{
a.audio-link{
border-bottom: 1px dotted red;
}
}
}
h3.sur-title{
@include content_titles;
@@ -311,9 +306,123 @@ main[role="main"]{
}
}
}
article.node p{
@include content_courant;
article.node--type-page.node--view-mode-default{
>h2.node-title{
@include content_big_titles;
margin:0.3em 0;
}
.field--name-field-visuel{
margin-bottom: 1em;
}
}
.agenda{
.past-events{
border-top: 1px solid red;
margin-top: 1em;
}
text-align: center;
h3{
@include content_titles;
}
article.node > h2.node-title{
@include content_subtitles;
margin-bottom: 0;
}
.field--name-field-date{
time{
@include content_courant;
}
}
}
div.taxonomy-term{
>h2{display:none;}
>.content{
margin-top: 1em;
}
.field__label{
@include content_titles;
}
.field--name-field-notice{
.field__label{
margin-bottom: 1em;
}
}
article.node--type-enregistrement{
h2.node-title{
@include content_subtitles;
margin:0.9em 0 0 0;
}
}
}
article.node p, div.taxonomy-term p{
@include content_courant;
margin:0 0 1em 0;
}
.field.text-formatted{
a{
display: inline-block;
position: relative;
&:after{
content:'';
position: absolute;
// z-index: -1;
width:100%;
left:0; bottom:0.2em;
border-bottom: 1px dotted #1A1A1A;
}
&.audio-link{
&:after{
border-color: red;
}
}
}
}
.productions-subtree{
a{
@include nav_link;
&:before{
content: "";
display:inline-block;
$sq:7px;
width: $sq; height:$sq;
border: 1px solid black;
margin-right: 0.5em;
}
&:hover:before,
&.is-active:before{
background-color: black;
}
&.ajax-loading:before{
@include spining-loader-square;
}
}
}
.productions-parent{
margin-top: 1em;
margin-bottom: 0.5em;
a{
@include nav_link;
&:before{
content:'\2039';
// font-weight: bold;
font-size: 1.7em;
line-height: 0.95;
margin-right:0.1em;
margin-left: -0.4em;
display: inline-block;
vertical-align:bottom;
}
}
}
img{
max-width: 100%;
height: auto;
@@ -1118,29 +1227,28 @@ body.path-agenda main .col{
height:100%;
}
}
#agenda{
position: relative;
white-space: nowrap;
height: 100%;
div.column{
white-space: normal;
display: inline-block;
vertical-align: top;
height:100%;
}
div.next-event{
width:65%;
}
div.future-past-events{
width:33%;
}
.agenda{
// position: relative;
// white-space: nowrap;
// height: 100%;
// >*{
// white-space: normal;
// }
// div.column{
// display: inline-block;
// vertical-align: top;
// height:100%;
// }
// div.next-event{
// width:65%;
// }
// div.future-past-events{
// width:33%;
// }
ul,li{
margin:0; padding:0;
list-style: none;
}
article.node--type-evenement{
h2{ @include content_titles; }
}
}
@@ -1183,8 +1291,7 @@ body.path-frontpage, body.path-productions{
padding:0.5em 1em;
h2.node-title{
margin:0;
font-size: 0.8em;
text-transform: lowercase;
@include content_titles;
}
// p{margin: 0;}
}
@@ -1194,21 +1301,21 @@ body.path-frontpage, body.path-productions{
position: absolute;
bottom: 0; left:0;
h2.node-title{
font-size: 1.2em;
font-weight: 500;
@include content_big_titles;
}
}
}
&.node--view-mode-image-1-columns{
h2.node-title{
font-size: 1em;
font-weight: 500;
}
}
// &.node--view-mode-image-1-columns{
// h2.node-title{
// // font-size: 1em;
// // font-weight: 500;
// }
// }
&.node--view-mode-text-1-column{
padding:0 1em;
}
}
}
}
}
@@ -1,3 +1,9 @@
@mixin content_big_titles {
font-size: 1.3em;
font-weight: 500;
text-transform: uppercase;
}
@mixin content_titles {
font-size: 0.9em;
font-weight: normal;
@@ -7,16 +13,24 @@
@mixin document_titles_teaser {
font-size: 0.82em;
font-weight: 500;
text-transform: none;
}
@mixin content_subtitles {
font-size: 0.82em;
font-weight: 600;
line-height: 1.6;
text-transform: none;
}
@mixin content_courant {
font-size: 0.82em;
font-weight: normal;
line-height: 1.6;
line-height: 1.4;
}
@mixin nav_link {
font-size: 0.82em;
font-weight: normal;
text-transform: uppercase;
}
@@ -8,8 +8,8 @@ $med-bp:1080px;
// $large-bp:1900px;
@mixin row() {
font-size: 0;
white-space: nowrap;
// font-size: 0;
// white-space: nowrap;
position: relative;
>*{
font-size: 16px;
@@ -18,10 +18,11 @@ $med-bp:1080px;
%col-reset {
width: 100%;
display: inline-block;
font-size: 16px;
// display: inline-block;
// white-space:normal;
// font-size: 16px;
float:left;
box-sizing: border-box;
white-space:normal;
}
@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
@@ -33,7 +34,7 @@ $med-bp:1080px;
// @media only screen and (min-width: 768px) {
width: percentage($col/$sum);
vertical-align: $align;
// vertical-align: $align;
// }
}
@@ -1,15 +1,15 @@
<div class="col small-col-12 med-col-12 large-col-8 ">
<div class="col small-col-12 med-col-4 large-col-3 ">
<div class="wrapper">
<div id="agenda">
<div class="column next-event">
{{ next_event }}
</div>
<div class="column future-past-events os-scroll">
<div class="agenda">
{{ coming_events }}
{{ past_events }}
</div>
</div>
</div>
</div>
<div class="col small-col-12 med-col-8 large-col-5 event float-right">
<div class="wrapper">
<div class="agenda">
{{ next_event }}
</div>
</div>
</div>
@@ -1,4 +1,4 @@
<div class="col small-col-12 med-col-6 large-col-6">
<div class="col small-col-12 med-col-6 large-col-5">
<div class="wrapper">
{#<div class="os-scroll">#}
{{ content }}
@@ -6,7 +6,7 @@
</div>
</div>
{% if aside %}
<div class="col small-col-12 med-col-6 large-col-6 aside">
<div class="col small-col-12 med-col-4 large-col-3 aside float-right">
<div class="wrapper">
{#<div class="os-scroll">#}
{{ aside }}
@@ -0,0 +1,7 @@
<div class="col small-col-12 med-col-6 large-col-4 event float-right">
<div class="wrapper">
<div class="agenda">
{{ content }}
</div>
</div>
</div>
@@ -0,0 +1,39 @@
uuid: f5c1b1ab-e59e-4d7c-9b30-adc390450b46
langcode: fr
status: true
dependencies:
config:
- core.entity_view_mode.node.aside
- field.field.node.evenement.body
- field.field.node.evenement.field_date
- field.field.node.evenement.field_page_liee
- field.field.node.evenement.field_workflow_generic
- node.type.evenement
module:
- datetime_range
- user
id: node.evenement.aside
targetEntityType: node
bundle: evenement
mode: aside
content:
field_date:
weight: 1
label: hidden
settings:
timezone_override: ''
format_type: long
separator: '-'
third_party_settings: { }
type: daterange_default
region: content
links:
weight: 0
region: content
settings: { }
third_party_settings: { }
hidden:
body: true
field_page_liee: true
field_workflow_generic: true
langcode: true
@@ -0,0 +1,10 @@
uuid: f634def2-a5a8-4b28-a71e-be46cf1edbd4
langcode: fr
status: true
dependencies:
module:
- node
id: node.aside
label: Aside
targetEntityType: node
cache: true