diff --git a/sites/all/modules/figli/edlp_agenda/edlp_agenda.module b/sites/all/modules/figli/edlp_agenda/edlp_agenda.module index 9fda04257..92b3ce541 100644 --- a/sites/all/modules/figli/edlp_agenda/edlp_agenda.module +++ b/sites/all/modules/figli/edlp_agenda/edlp_agenda.module @@ -7,3 +7,21 @@ # @Last modified by: bach # @Last modified time: 20-12-2017 # @License: GPL-V3 + +/** + * Implements hook_theme(). + */ +function edlp_agenda_theme($existing, $type, $theme, $path) { + // @see https://www.drupal.org/docs/8/theming/twig/create-custom-twig-templates-from-custom-module + return array( + 'edlp_agenda' => array( + // 'render element' => '', + 'file' => 'includes/edlp_agenda.inc', + 'variables' => array( + 'next_event_node' => NULL, + 'coming_events_nodes' => NULL, + 'past_events_nodes' => NULL + ), + ), + ); +} diff --git a/sites/all/modules/figli/edlp_agenda/includes/edlp_agenda.inc b/sites/all/modules/figli/edlp_agenda/includes/edlp_agenda.inc new file mode 100644 index 000000000..164c57d98 --- /dev/null +++ b/sites/all/modules/figli/edlp_agenda/includes/edlp_agenda.inc @@ -0,0 +1,67 @@ +getViewBuilder('node'); + + $vars['next_event'] = array( + "#markup"=>"

Prochaine Date

", + "event"=>$view_builder->view($vars['next_event_node'], 'default') + ); + + $future_list = array ( + '#theme' => 'item_list', + '#items' => [], + ); + foreach($vars['coming_events_nodes'] as $node){ + $future_list['#items'][] = $view_builder->view($node, 'teaser'); + } + + $vars['coming_events'] = array( + "#type"=>"container", + "#attributes"=>array( + "class"=>['future-events'] + ), + "#markup"=>"

Dates à venir

", + "future_events"=>$future_list + ); + + + $past_list = array ( + '#theme' => 'item_list', + '#items' => [], + ); + foreach($vars['past_events_nodes'] as $node){ + $past_list['#items'][] = $view_builder->view($node, 'teaser'); + } + + $vars['past_events'] = array( + "#type"=>"container", + "#attributes"=>array( + "class"=>['past-events'] + ), + "#markup"=>"

Dates passées

", + "past_events"=>$past_list + ); + + // return array( + // "#type" => "container", + // "#attributes"=>array( + // "id"=>['agenda'] + // ), + // "future_past"=>array( + // "#type"=>"container", + // "#attributes"=>array( + // "class"=>['future-past-events', 'column', 'os-scroll'] + // ), + // "future"=>, + // "past"=> + // ) + // ); + +} diff --git a/sites/all/modules/figli/edlp_agenda/src/Controller/AgendaController.php b/sites/all/modules/figli/edlp_agenda/src/Controller/AgendaController.php index 4ebec91da..14705933d 100644 --- a/sites/all/modules/figli/edlp_agenda/src/Controller/AgendaController.php +++ b/sites/all/modules/figli/edlp_agenda/src/Controller/AgendaController.php @@ -39,67 +39,13 @@ class AgendaController extends ControllerBase { private function toRenderable(){ $this->query(); - // // dpm($this->future_nodes); - // dpm($this->next_event); - /* - @see https://www.drupal8.ovh/index.php/en/tutoriels/339/render-a-node-or-an-entity - */ - - $view_builder = \Drupal::entityTypeManager()->getViewBuilder('node'); - - $future_list = array ( - '#theme' => 'item_list', - '#items' => [], - ); - foreach($this->future_nodes as $node){ - $future_list['#items'][] = $view_builder->view($node, 'teaser'); - } - - $past_list = array ( - '#theme' => 'item_list', - '#items' => [], - ); - foreach($this->past_nodes as $node){ - $past_list['#items'][] = $view_builder->view($node, 'teaser'); - } return array( - "#type" => "container", - "#attributes"=>array( - "id"=>['agenda'] - ), - // "#markup"=> "

Agenda

", - "next"=>array( - "#type"=>"container", - "#attributes"=>array( - "class"=>['next-event', 'column', 'os-scroll'] - ), - "#markup"=>"

Prochaine Date

", - "event"=>$view_builder->view($this->next_event, 'default') - ), - "future_past"=>array( - "#type"=>"container", - "#attributes"=>array( - "class"=>['future-past-events', 'column', 'os-scroll'] - ), - "future"=>array( - "#type"=>"container", - "#attributes"=>array( - "class"=>['future-events'] - ), - "#markup"=>"

Dates à venir

", - "future_events"=>$future_list - ), - "past"=>array( - "#type"=>"container", - "#attributes"=>array( - "class"=>['past-events'] - ), - "#markup"=>"

Dates passées

", - "past_events"=>$past_list - ) - ) + "#theme"=>'edlp_agenda', + '#next_event_node' => $this->next_event, + "#coming_events_nodes" => $this->future_nodes, + "#past_events_nodes" => $this->past_nodes, ); } diff --git a/sites/all/modules/figli/edlp_agenda/templates/edlp-agenda.html.twig b/sites/all/modules/figli/edlp_agenda/templates/edlp-agenda.html.twig new file mode 100644 index 000000000..4e92965c0 --- /dev/null +++ b/sites/all/modules/figli/edlp_agenda/templates/edlp-agenda.html.twig @@ -0,0 +1,3 @@ +{{ next_event }} +{{ coming_events }} +{{ past_events }} diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index b8d4792b4..8b381d2d2 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -11,7 +11,7 @@ a, a:focus, a:active { a:focus { -moz-outline-style: none; } -.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 { +.col-1, .small-col-1, .med-col-1, .large-col-1, .col-2, .small-col-2, .med-col-2, .large-col-2, .col-3, .small-col-3, .med-col-3, .large-col-3, .col-4, .small-col-4, .med-col-4, .large-col-4, .col-5, .small-col-5, .med-col-5, .large-col-5, .col-6, .small-col-6, .med-col-6, .large-col-6, .col-7, .small-col-7, .med-col-7, .large-col-7, .col-8, .small-col-8, .med-col-8, .large-col-8, .col-9, .small-col-9, .med-col-9, .large-col-9, .col-10, .small-col-10, .med-col-10, .large-col-10, .col-11, .small-col-11, .med-col-11, .large-col-11, .col-12, .small-col-12, .med-col-12, .large-col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 { width: 100%; display: inline-block; font-size: 16px; @@ -27,860 +27,1064 @@ a:focus { .col-1 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 8.33333%; + vertical-align: top; } .col-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1 { - width: 8.33333%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-1 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 8.33333%; + vertical-align: top; } + .small-col-1:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-1 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 8.33333%; + vertical-align: top; } + .med-col-1:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-1 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 8.33333%; + vertical-align: top; } + .large-col-1:last-child { + padding-right: 0; } } .col-2 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 16.66667%; + vertical-align: top; } .col-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2 { - width: 16.66667%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-2 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 16.66667%; + vertical-align: top; } + .small-col-2:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-2 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 16.66667%; + vertical-align: top; } + .med-col-2:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-2 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 16.66667%; + vertical-align: top; } + .large-col-2:last-child { + padding-right: 0; } } .col-3 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 25%; + vertical-align: top; } .col-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3 { - width: 25%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-3 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 25%; + vertical-align: top; } + .small-col-3:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-3 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 25%; + vertical-align: top; } + .med-col-3:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-3 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 25%; + vertical-align: top; } + .large-col-3:last-child { + padding-right: 0; } } .col-4 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 33.33333%; + vertical-align: top; } .col-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4 { - width: 33.33333%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-4 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 33.33333%; + vertical-align: top; } + .small-col-4:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-4 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 33.33333%; + vertical-align: top; } + .med-col-4:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-4 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 33.33333%; + vertical-align: top; } + .large-col-4:last-child { + padding-right: 0; } } .col-5 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 41.66667%; + vertical-align: top; } .col-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5 { - width: 41.66667%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-5 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 41.66667%; + vertical-align: top; } + .small-col-5:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-5 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 41.66667%; + vertical-align: top; } + .med-col-5:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-5 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 41.66667%; + vertical-align: top; } + .large-col-5:last-child { + padding-right: 0; } } .col-6 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 50%; + vertical-align: top; } .col-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6 { - width: 50%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-6 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 50%; + vertical-align: top; } + .small-col-6:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-6 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 50%; + vertical-align: top; } + .med-col-6:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-6 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 50%; + vertical-align: top; } + .large-col-6:last-child { + padding-right: 0; } } .col-7 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 58.33333%; + vertical-align: top; } .col-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7 { - width: 58.33333%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-7 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 58.33333%; + vertical-align: top; } + .small-col-7:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-7 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 58.33333%; + vertical-align: top; } + .med-col-7:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-7 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 58.33333%; + vertical-align: top; } + .large-col-7:last-child { + padding-right: 0; } } .col-8 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 66.66667%; + vertical-align: top; } .col-8:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-8 { - width: 66.66667%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-8 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 66.66667%; + vertical-align: top; } + .small-col-8:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-8 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 66.66667%; + vertical-align: top; } + .med-col-8:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-8 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 66.66667%; + vertical-align: top; } + .large-col-8:last-child { + padding-right: 0; } } .col-9 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 75%; + vertical-align: top; } .col-9:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-9 { - width: 75%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-9 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 75%; + vertical-align: top; } + .small-col-9:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-9 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 75%; + vertical-align: top; } + .med-col-9:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-9 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 75%; + vertical-align: top; } + .large-col-9:last-child { + padding-right: 0; } } .col-10 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 83.33333%; + vertical-align: top; } .col-10:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-10 { - width: 83.33333%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-10 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 83.33333%; + vertical-align: top; } + .small-col-10:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-10 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 83.33333%; + vertical-align: top; } + .med-col-10:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-10 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 83.33333%; + vertical-align: top; } + .large-col-10:last-child { + padding-right: 0; } } .col-11 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 91.66667%; + vertical-align: top; } .col-11:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-11 { - width: 91.66667%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-11 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 91.66667%; + vertical-align: top; } + .small-col-11:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-11 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 91.66667%; + vertical-align: top; } + .med-col-11:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-11 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 91.66667%; + vertical-align: top; } + .large-col-11:last-child { + padding-right: 0; } } .col-12 { padding-left: 0em; padding-right: 1em; - margin-left: 0%; } + margin-left: 0%; + width: 100%; + vertical-align: top; } .col-12:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-12 { - width: 100%; - vertical-align: top; } } + +@media only screen and (max-width: 768px) { + .small-col-12 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 100%; + vertical-align: top; } + .small-col-12:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 769px) and (max-width: 1080px) { + .med-col-12 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 100%; + vertical-align: top; } + .med-col-12:last-child { + padding-right: 0; } } + +@media only screen and (min-width: 1081px) and (max-width: 1900px) { + .large-col-12 { + padding-left: 0em; + padding-right: 1em; + margin-left: 0%; + width: 100%; + vertical-align: top; } + .large-col-12:last-child { + padding-right: 0; } } .col-1-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 8.33333%; } + margin-left: 8.33333%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-1 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 16.66667%; } + margin-left: 16.66667%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-2 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 25%; } + margin-left: 25%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-3 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 33.33333%; } + margin-left: 33.33333%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-4 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 41.66667%; } + margin-left: 41.66667%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-5 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 50%; } + margin-left: 50%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-6 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-7 { padding-left: 7em; padding-right: 1em; - margin-left: 58.33333%; } + margin-left: 58.33333%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-7 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-8 { padding-left: 8em; padding-right: 1em; - margin-left: 66.66667%; } + margin-left: 66.66667%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-8:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-8 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-9 { padding-left: 9em; padding-right: 1em; - margin-left: 75%; } + margin-left: 75%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-9:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-9 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-10 { padding-left: 10em; padding-right: 1em; - margin-left: 83.33333%; } + margin-left: 83.33333%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-10:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-10 { - width: 8.33333%; - vertical-align: top; } } .col-1-offset-11 { padding-left: 11em; padding-right: 1em; - margin-left: 91.66667%; } + margin-left: 91.66667%; + width: 8.33333%; + vertical-align: top; } .col-1-offset-11:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-1-offset-11 { - width: 8.33333%; - vertical-align: top; } } .col-2-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 16.66667%; } + margin-left: 16.66667%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-1 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 33.33333%; } + margin-left: 33.33333%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-2 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 50%; } + margin-left: 50%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-3 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 66.66667%; } + margin-left: 66.66667%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-4 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 83.33333%; } + margin-left: 83.33333%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-5 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 100%; } + margin-left: 100%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-6 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-7 { padding-left: 7em; padding-right: 1em; - margin-left: 116.66667%; } + margin-left: 116.66667%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-7 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-8 { padding-left: 8em; padding-right: 1em; - margin-left: 133.33333%; } + margin-left: 133.33333%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-8:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-8 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-9 { padding-left: 9em; padding-right: 1em; - margin-left: 150%; } + margin-left: 150%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-9:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-9 { - width: 16.66667%; - vertical-align: top; } } .col-2-offset-10 { padding-left: 10em; padding-right: 1em; - margin-left: 166.66667%; } + margin-left: 166.66667%; + width: 16.66667%; + vertical-align: top; } .col-2-offset-10:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-2-offset-10 { - width: 16.66667%; - vertical-align: top; } } .col-3-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 25%; } + margin-left: 25%; + width: 25%; + vertical-align: top; } .col-3-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-1 { - width: 25%; - vertical-align: top; } } .col-3-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 50%; } + margin-left: 50%; + width: 25%; + vertical-align: top; } .col-3-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-2 { - width: 25%; - vertical-align: top; } } .col-3-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 75%; } + margin-left: 75%; + width: 25%; + vertical-align: top; } .col-3-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-3 { - width: 25%; - vertical-align: top; } } .col-3-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 100%; } + margin-left: 100%; + width: 25%; + vertical-align: top; } .col-3-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-4 { - width: 25%; - vertical-align: top; } } .col-3-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 125%; } + margin-left: 125%; + width: 25%; + vertical-align: top; } .col-3-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-5 { - width: 25%; - vertical-align: top; } } .col-3-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 150%; } + margin-left: 150%; + width: 25%; + vertical-align: top; } .col-3-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-6 { - width: 25%; - vertical-align: top; } } .col-3-offset-7 { padding-left: 7em; padding-right: 1em; - margin-left: 175%; } + margin-left: 175%; + width: 25%; + vertical-align: top; } .col-3-offset-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-7 { - width: 25%; - vertical-align: top; } } .col-3-offset-8 { padding-left: 8em; padding-right: 1em; - margin-left: 200%; } + margin-left: 200%; + width: 25%; + vertical-align: top; } .col-3-offset-8:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-8 { - width: 25%; - vertical-align: top; } } .col-3-offset-9 { padding-left: 9em; padding-right: 1em; - margin-left: 225%; } + margin-left: 225%; + width: 25%; + vertical-align: top; } .col-3-offset-9:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-3-offset-9 { - width: 25%; - vertical-align: top; } } .col-4-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 33.33333%; } + margin-left: 33.33333%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-1 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 66.66667%; } + margin-left: 66.66667%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-2 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 100%; } + margin-left: 100%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-3 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 133.33333%; } + margin-left: 133.33333%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-4 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 166.66667%; } + margin-left: 166.66667%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-5 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 200%; } + margin-left: 200%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-6 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-7 { padding-left: 7em; padding-right: 1em; - margin-left: 233.33333%; } + margin-left: 233.33333%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-7 { - width: 33.33333%; - vertical-align: top; } } .col-4-offset-8 { padding-left: 8em; padding-right: 1em; - margin-left: 266.66667%; } + margin-left: 266.66667%; + width: 33.33333%; + vertical-align: top; } .col-4-offset-8:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-4-offset-8 { - width: 33.33333%; - vertical-align: top; } } .col-5-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 41.66667%; } + margin-left: 41.66667%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-1 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 83.33333%; } + margin-left: 83.33333%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-2 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 125%; } + margin-left: 125%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-3 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 166.66667%; } + margin-left: 166.66667%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-4 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 208.33333%; } + margin-left: 208.33333%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-5 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 250%; } + margin-left: 250%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-6 { - width: 41.66667%; - vertical-align: top; } } .col-5-offset-7 { padding-left: 7em; padding-right: 1em; - margin-left: 291.66667%; } + margin-left: 291.66667%; + width: 41.66667%; + vertical-align: top; } .col-5-offset-7:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-5-offset-7 { - width: 41.66667%; - vertical-align: top; } } .col-6-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 50%; } + margin-left: 50%; + width: 50%; + vertical-align: top; } .col-6-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-1 { - width: 50%; - vertical-align: top; } } .col-6-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 100%; } + margin-left: 100%; + width: 50%; + vertical-align: top; } .col-6-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-2 { - width: 50%; - vertical-align: top; } } .col-6-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 150%; } + margin-left: 150%; + width: 50%; + vertical-align: top; } .col-6-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-3 { - width: 50%; - vertical-align: top; } } .col-6-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 200%; } + margin-left: 200%; + width: 50%; + vertical-align: top; } .col-6-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-4 { - width: 50%; - vertical-align: top; } } .col-6-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 250%; } + margin-left: 250%; + width: 50%; + vertical-align: top; } .col-6-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-5 { - width: 50%; - vertical-align: top; } } .col-6-offset-6 { padding-left: 6em; padding-right: 1em; - margin-left: 300%; } + margin-left: 300%; + width: 50%; + vertical-align: top; } .col-6-offset-6:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-6-offset-6 { - width: 50%; - vertical-align: top; } } .col-7-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 58.33333%; } + margin-left: 58.33333%; + width: 58.33333%; + vertical-align: top; } .col-7-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7-offset-1 { - width: 58.33333%; - vertical-align: top; } } .col-7-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 116.66667%; } + margin-left: 116.66667%; + width: 58.33333%; + vertical-align: top; } .col-7-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7-offset-2 { - width: 58.33333%; - vertical-align: top; } } .col-7-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 175%; } + margin-left: 175%; + width: 58.33333%; + vertical-align: top; } .col-7-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7-offset-3 { - width: 58.33333%; - vertical-align: top; } } .col-7-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 233.33333%; } + margin-left: 233.33333%; + width: 58.33333%; + vertical-align: top; } .col-7-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7-offset-4 { - width: 58.33333%; - vertical-align: top; } } .col-7-offset-5 { padding-left: 5em; padding-right: 1em; - margin-left: 291.66667%; } + margin-left: 291.66667%; + width: 58.33333%; + vertical-align: top; } .col-7-offset-5:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-7-offset-5 { - width: 58.33333%; - vertical-align: top; } } .col-8-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 66.66667%; } + margin-left: 66.66667%; + width: 66.66667%; + vertical-align: top; } .col-8-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-8-offset-1 { - width: 66.66667%; - vertical-align: top; } } .col-8-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 133.33333%; } + margin-left: 133.33333%; + width: 66.66667%; + vertical-align: top; } .col-8-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-8-offset-2 { - width: 66.66667%; - vertical-align: top; } } .col-8-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 200%; } + margin-left: 200%; + width: 66.66667%; + vertical-align: top; } .col-8-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-8-offset-3 { - width: 66.66667%; - vertical-align: top; } } .col-8-offset-4 { padding-left: 4em; padding-right: 1em; - margin-left: 266.66667%; } + margin-left: 266.66667%; + width: 66.66667%; + vertical-align: top; } .col-8-offset-4:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-8-offset-4 { - width: 66.66667%; - vertical-align: top; } } .col-9-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 75%; } + margin-left: 75%; + width: 75%; + vertical-align: top; } .col-9-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-9-offset-1 { - width: 75%; - vertical-align: top; } } .col-9-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 150%; } + margin-left: 150%; + width: 75%; + vertical-align: top; } .col-9-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-9-offset-2 { - width: 75%; - vertical-align: top; } } .col-9-offset-3 { padding-left: 3em; padding-right: 1em; - margin-left: 225%; } + margin-left: 225%; + width: 75%; + vertical-align: top; } .col-9-offset-3:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-9-offset-3 { - width: 75%; - vertical-align: top; } } .col-10-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 83.33333%; } + margin-left: 83.33333%; + width: 83.33333%; + vertical-align: top; } .col-10-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-10-offset-1 { - width: 83.33333%; - vertical-align: top; } } .col-10-offset-2 { padding-left: 2em; padding-right: 1em; - margin-left: 166.66667%; } + margin-left: 166.66667%; + width: 83.33333%; + vertical-align: top; } .col-10-offset-2:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-10-offset-2 { - width: 83.33333%; - vertical-align: top; } } .col-11-offset-1 { padding-left: 1em; padding-right: 1em; - margin-left: 91.66667%; } + margin-left: 91.66667%; + width: 91.66667%; + vertical-align: top; } .col-11-offset-1:last-child { padding-right: 0; } - @media only screen and (min-width: 768px) { - .col-11-offset-1 { - width: 91.66667%; - vertical-align: top; } } body, html { position: relative; @@ -1007,9 +1211,12 @@ main[role="main"] .layout-content { overflow: hidden; } main[role="main"] .layout-content .row .col { pointer-events: all; - max-height: 100%; + height: 100%; position: relative; } main[role="main"] .layout-content .row .col > .wrapper { + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; border-top: 1px solid red; border-bottom: 1px solid red; background-color: rgba(255, 255, 255, 0.95); @@ -1035,14 +1242,10 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first padding: 0; list-style: none; } +body.path-agenda main .col > .wrapper { + height: 100%; } + #agenda { - pointer-events: auto; - background-color: rgba(255, 255, 255, 0.95); - -webkit-box-sizing: border-box; - box-sizing: border-box; - border-top: 1px solid red; - border-bottom: 1px solid red; - padding: 1em; position: relative; white-space: nowrap; height: 100%; } @@ -1060,7 +1263,9 @@ main[role="main"] ul, main[role="main"] li, main[role="main"] ul.inline li:first padding: 0; list-style: none; } #agenda article.node--type-evenement h2 { - font-size: 1em; } + font-size: 0.9em; + font-weight: normal; + text-transform: uppercase; } footer { display: table; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index 8c110a38d..1ba4bee03 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -110,9 +110,11 @@ main[role="main"]{ overflow: hidden; .col{ pointer-events:all; - max-height: 100%; + height: 100%; position: relative; &>.wrapper{ + position: relative; + box-sizing: border-box; border-top: 1px solid red; border-bottom: 1px solid red; background-color: $transparent-bg; @@ -139,13 +141,10 @@ main[role="main"]{ list-style: none; } } +body.path-agenda main .col>.wrapper{ + height:100%; +} #agenda{ - pointer-events: auto; - background-color: $transparent-bg; - box-sizing: border-box; - border-top: 1px solid red; - border-bottom: 1px solid red; - padding: 1em; position: relative; white-space: nowrap; height: 100%; @@ -161,13 +160,12 @@ main[role="main"]{ div.future-past-events{ width:33%; } - ul,li{ margin:0; padding:0; list-style: none; } article.node--type-evenement{ - h2{font-size: 1em;} + h2{ @include content_titles; } } } diff --git a/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss b/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss index 530906ee7..f66dfbe46 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/base/_grid.scss @@ -3,6 +3,10 @@ $default_gap: 1em; $default_sum: 12; +$small-bp:768px; +$med-bp:1080px; +$large-bp:1900px; + @mixin row() { font-size: 0; white-space: nowrap; @@ -24,10 +28,10 @@ $default_sum: 12; &:last-child{padding-right: 0;} margin-left: percentage(($col/$sum)*$offset); - @media only screen and (min-width: 768px) { + // @media only screen and (min-width: 768px) { width: percentage($col/$sum); vertical-align: $align; - } + // } } .row{ @@ -38,6 +42,28 @@ $default_sum: 12; .col-#{$c} { @include col($c); } + + // small + .small-col-#{$c} { + @media only screen and (max-width: $small-bp) { + @include col($c); + } + } + + // medium + .med-col-#{$c} { + @media only screen and (min-width: $small-bp+1) and (max-width: $med-bp) { + @include col($c); + } + } + + // large + .large-col-#{$c} { + @media only screen and (min-width: $med-bp+1) and (max-width: $large-bp) { + @include col($c); + } + } + } @for $c from 1 through $default_sum - 1 { diff --git a/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig b/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig new file mode 100644 index 000000000..69372c57b --- /dev/null +++ b/sites/all/themes/custom/edlptheme/templates/content/edlp-agenda.html.twig @@ -0,0 +1,17 @@ +
+
+
+
+ +
+ {{ next_event }} +
+
+ {{ coming_events }} + {{ past_events }} +
+ +
+
+
+