Merge branch 'master' of gogs-figureslibres.io:bachir/popsu-d9

web/themes/custom/popsu/css/setup/variables.css

@@ -0,0 +1,11 @@
+@media (min-width: 48rem) {
+  :root {
+    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+    /* .48rem = viewportWidthMinimum /100 */
+    /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }
+
+@media (min-width: 120em) {
+  :root {
+    font-size: 2rem; } }
+
+/*# sourceMappingURL=variables.css.map */

web/themes/custom/popsu/css/styles.css

@@ -999,6 +999,16 @@ table {
 .slick-arrow.slick-hidden {
   display: none; }
 
+@media (min-width: 48rem) {
+  :root {
+    font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+    /* .48rem = viewportWidthMinimum /100 */
+    /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */ } }
+
+@media (min-width: 120em) {
+  :root {
+    font-size: 2rem; } }
+
 @font-face {
   font-family: 'duke';
   src: url("../fonts/Duke_Fill.otf") format("opentype");
@@ -1140,17 +1150,199 @@ table {
 
 body {
   font-family: "trueno";
+  font-size: 0.6rem;
   font-weight: 300;
   line-height: 1.5; }
 
+main h2 {
+  text-transform: uppercase;
+  font-family: 'duke';
+  font-size: 2.3rem; }
+
+a {
+  color: inherit; }
+
+iframe {
+  display: none; }
+
 /*pages*/
-#header-top-right {
-  background: yellow; }
-  #header-top-right .views-row {
+#header-top {
+  height: 3rem; }
+
+.header_top_left_container {
+  height: 100%; }
+  .header_top_left_container > div:first-child {
+    height: 100%; }
+  .header_top_left_container a[rel~='home'] {
+    height: 100%;
+    display: block;
+    font-size: 0;
+    color: transparent;
+    background: left/contain no-repeat url(../images/popsu-home-logo.png); }
+
+.header_top_middle_container {
+  height: 100%; }
+  .header_top_middle_container .views-element-container {
+    height: 100%; }
+    .header_top_middle_container .views-element-container > div:first-child {
+      height: 100%; }
+      .header_top_middle_container .views-element-container > div:first-child > div:first-child {
+        height: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        align-items: center; }
+  .header_top_middle_container .views-row {
+    text-align: center;
+    display: inline-block;
+    width: auto; }
+    .header_top_middle_container .views-row a {
+      text-transform: uppercase;
+      text-decoration: none;
+      font-weight: 600; }
+    .header_top_middle_container .views-row .views-field-title {
+      display: inline-block;
+      width: auto;
+      padding: .2rem .5rem; }
+  .header_top_middle_container .popsu-node-3 .views-field-title {
+    color: blue; }
+    .header_top_middle_container .popsu-node-3 .views-field-title:hover {
+      background: blue;
+      color: white; }
+  .header_top_middle_container .popsu-node-5 .views-field-title {
+    color: wheat; }
+    .header_top_middle_container .popsu-node-5 .views-field-title:hover {
+      background: wheat;
+      color: white; }
+  .header_top_middle_container .popsu-node-7 .views-field-title {
+    color: red; }
+    .header_top_middle_container .popsu-node-7 .views-field-title:hover {
+      background: red;
+      color: white; }
+
+.close-block, .open-block {
+  cursor: pointer; }
+  .close-block span, .open-block span {
+    display: block;
+    width: 33px;
+    height: 2px;
+    position: relative;
+    background: black;
+    border-radius: 3px;
+    z-index: 1; }
+
+.close-block {
+  padding-top: 1rem; }
+  .close-block span {
+    transform-origin: center; }
+  .close-block > div > span:first-child {
+    transform: translateY(57%) rotate(45deg); }
+  .close-block > div > span:nth-child(2) {
+    transform: rotate(-45deg); }
+
+.open-block {
+  height: 100%;
+  display: grid;
+  align-items: center; }
+  .open-block span {
+    margin-bottom: 5px;
+    transform-origin: 4px 0px; }
+
+#header-top-right .header_top_right_container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+  display: none;
+  grid-template-columns: 10% 25% 25% 30% 10%;
+  padding: 1rem 0;
+  z-index: 100;
+  line-height: 2; }
+  #header-top-right .header_top_right_container nav {
+    grid-column-start: 2; }
+  #header-top-right .header_top_right_container a {
+    text-decoration: none;
+    font-weight: 400; }
+    #header-top-right .header_top_right_container a:hover {
+      text-decoration: underline; }
+  #header-top-right .header_top_right_container h2 {
+    font-weight: 100;
+    margin-bottom: .3rem; }
+  #header-top-right .header_top_right_container .is-active {
+    font-weight: 800; }
+  #header-top-right .header_top_right_container #block-views-block-programmes-block-2 .views-row {
+    width: 100%; }
+
+#footer-bottom {
+  padding: 2rem 0; }
+  #footer-bottom * {
+    word-wrap: break-word; }
+  #footer-bottom h2 {
+    font-weight: 500; }
+  #footer-bottom .footer_bottom_left_container {
+    height: 100%; }
+    #footer-bottom .footer_bottom_left_container div {
+      height: 100%; }
+    #footer-bottom .footer_bottom_left_container p {
+      height: 100%;
+      display: grid; }
+  #footer-bottom .logo-gouv {
+    height: 100%;
+    display: block;
+    color: transparent;
+    font-size: 0;
+    background: left/contain no-repeat url(../images/gouv.svg); }
+  #footer-bottom .logo-puca {
+    height: 100%;
+    display: block;
+    color: transparent;
+    font-size: 0;
+    background: left/contain no-repeat url(../images/puca.svg); }
+  #footer-bottom #block-pieddepage ul {
+    line-height: 2; }
+    #footer-bottom #block-pieddepage ul li a {
+      text-transform: uppercase;
+      text-decoration: none;
+      font-weight: 400; }
+      #footer-bottom #block-pieddepage ul li a:hover {
+        text-decoration: underline; }
+  #footer-bottom .footer_bottom_right_container > div > div p {
     display: inline-block; }
+    #footer-bottom .footer_bottom_right_container > div > div p a {
+      min-width: 2rem;
+      min-height: 2rem; }
+    #footer-bottom .footer_bottom_right_container > div > div p a[href*='twitter'] {
+      height: 100%;
+      display: block;
+      font-size: 0;
+      color: transparent;
+      background: left/contain no-repeat url(../images/tw.svg); }
+    #footer-bottom .footer_bottom_right_container > div > div p a[href*='linkedin'] {
+      height: 100%;
+      display: block;
+      font-size: 0;
+      color: transparent;
+      background: left/contain no-repeat url(../images/ln.svg); }
+    #footer-bottom .footer_bottom_right_container > div > div p a[href*='youtube'] {
+      height: 100%;
+      display: block;
+      font-size: 0;
+      color: transparent;
+      background: left/contain no-repeat url(../images/yt.svg); }
 
 .about {
   background: lightblue;
   text-align: center; }
 
+article h2 {
+  font-family: "trueno";
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: inherit; }
+
+article h3, article h4, article h5, article h6 {
+  font-family: "trueno";
+  font-weight: 600;
+  font-size: 0.8rem; }
+
 /*# sourceMappingURL=styles.css.map */

web/themes/custom/popsu/gulpfile.js

@@ -77,7 +77,7 @@ gulp.task('packing', function () {
 gulp.task('watch', function(){
     livereload.listen();
 
-    gulp.watch('./sass/**/*.scss', ['sass']);
+    gulp.watch('./sass/**/**/*.scss', ['sass']);
     gulp.watch('./lib/*.js', ['packing']);
     gulp.watch(['./css/style.css', './**/*.twig', './js/*.js'], function (files){
         livereload.changed(files)

web/themes/custom/popsu/lib/script.js

@@ -1,8 +1,17 @@
 import 'slick-carousel';
 
-$(document).ready(function(){
+$(function(){
 	console.log("$ ready !!");
-	//$('.last-news').slick();
-	//$('.last-ressources').slick();
+	$('.last-news').slick();
+	$('.last-ressources').slick();
+
+	$('.close-block').click(function(){
+		$(this).parent().fadeOut();
+	});
+	$('.open-block').click(function(){
+		$(this).prev().css("display","grid");
+	});
+
 	
-});
+});
+

web/themes/custom/popsu/partials/footer.html.twig

@@ -3,13 +3,13 @@
       {{ page.footer_top }}
     </section>
     <section id="footer-bottom" class="row">
-      <div id="footer-left" class="columns small-1">
+      <div id="footer-left" class="columns small-3 small-offset-1">
         {{ page.footer_bottom_left }}
       </div>
-      <div id="footer-middle" class="columns small-10">
+      <div id="footer-middle" class="columns small-2 small-offset-0">
         {{ page.footer_bottom_middle }}
       </div>
-      <div id="footer-right" class="columns small-1">
+      <div id="footer-right" class="columns small-4 small-offset-1">
         {{ page.footer_bottom_right }}
       </div>
     </section>

web/themes/custom/popsu/partials/header.html.twig

@@ -1,5 +1,5 @@
 <header role="banner" class="columns small-12">
-    <section id="header-top" class="row">
+    <section id="header-top" class="row align-middle">
       <div id="header-top-left" class="columns small-2">
         {{ page.header_top_left }}
       </div>

web/themes/custom/popsu/popsu.theme

@@ -6,16 +6,22 @@
 
 use Drupal\Core\Template\Attribute;
 
+/* implements template_preprocess_views_view() */
+
+// function popsu_preprocess_views_view(&$vars) {
+//   $view = $vars['view'];
+//   kint($view);die();
+// }
+
 
 /* implements template_preprocess_views_view_unformatted() */
 
 function popsu_preprocess_views_view_unformatted(&$variables) {
 
-  $view = $variables['view'];
+  $view = $variables['view'];  
   if($view->id() == "programmes"){
     $rows = $variables['rows'];
         foreach ($rows as $id => $row) {
-            
             $variables['rows'][$id]['attributes'] = new Attribute();
             $c = $variables['rows'][$id]['content']["#row"]->nid;
             $variables['rows'][$id]['attributes']->addClass("popsu-node-".$c);
@@ -34,28 +40,33 @@ function popsu_preprocess_views_view_unformatted(&$variables) {
     }
 
   }
+};
 
-  /*
-  $rows = $variables['rows'];
-  $style = $view->style_plugin;
-  $options = $style->options;
-  $variables['default_row_class'] = !empty($options['default_row_class']);
-  */
-  /*  
-  foreach ($rows as $id => $row) {
-    $variables['rows'][$id] = array();
-    $variables['rows'][$id]['content'] = $row;
-    $variables['rows'][$id]['attributes'] = new Attribute();
-    if ($row_class = $view->style_plugin
-      ->getRowClass($id)) {
-      $variables['rows'][$id]['attributes']
-        ->addClass($row_class);
-    }
+/* implements template_preprocess_region() */
+
+function popsu_preprocess_region(&$variables) {
+
+  if (isset($variables['region'])) {
+    $variables['attributes']['class'][] = $variables['region'].'_container'; 
   }
-  */
-};
+  // if ($variables['region'] == 'footer_bottom_right') {
+  //   if ($node = \Drupal::routeMatch()->getParameter('node')) {
+  //     $t = $node->getType();
+  //   }
+  // }
+}
+
+// function popsu_preprocess_field(&$variables){
+//   $v = $variables;
+// }
 
 
+
+// function popsu_theme_suggestions_views_view_alter(array &$suggestions, array $variables) {
+//   $v = $variables;
+//   $suggestions[] = 'views_view__headerView';
+// }
+
 /**
  * Implements hook_preprocess_block().
  */
@@ -104,4 +115,4 @@ function popsu_preprocess_views_view_field(&$variables){
     // overwrite the output
     $variables['output'] = $link->toRenderable();
   } 
-}
+}

web/themes/custom/popsu/sass/pages/_default.scss

@@ -0,0 +1,14 @@
+article{
+
+    h2{
+        font-family: "trueno";
+        font-weight: 600;
+        font-size: $font-medium;
+        text-transform: inherit;
+    }
+    h3,h4,h5,h6{
+        font-family: "trueno";
+        font-weight: 600;
+        font-size: $font-medium;
+    }
+}

web/themes/custom/popsu/sass/pages/_header.scss

@@ -1,7 +0,0 @@
-#header-top-right{
-	background: yellow;
-	.views-row{
-		display: inline-block;
-	}
-}
-

web/themes/custom/popsu/sass/pages/partials/_header_footer.scss

@@ -0,0 +1,239 @@
+//header
+#header-top{
+	height: 3rem;
+}
+.header_top_left_container{
+	height: 100%;
+	&>div:first-child{
+		height: 100%;
+	}
+	a[rel~='home']{
+		height: 100%;
+		display: block;
+        font-size: 0;
+		color: transparent;
+		background: left / contain no-repeat url(../images/popsu-home-logo.png);
+	}
+}
+
+.header_top_middle_container{
+	height: 100%;
+	// solution to access views container
+	.views-element-container{
+		height: 100%;
+		&>div:first-child{
+			height: 100%;
+			&>div:first-child{
+				height: 100%;
+				display: grid;
+				grid-template-columns: repeat(3, 1fr);
+				align-items: center;
+			}
+			
+		}
+	}
+
+	.views-row{
+		text-align: center;
+		display: inline-block;
+		width: auto;
+        a{
+            text-transform: uppercase;
+            text-decoration: none;
+            font-weight: 600;
+        }
+        .views-field-title{
+            display: inline-block;
+            width: auto;
+            padding: .2rem .5rem;
+        }
+        
+	}
+    .popsu-node-3{
+        .views-field-title{
+            color: $col-eur;
+            &:hover{
+                background: $col-eur;
+                color:white;
+            }
+        }
+    }
+    .popsu-node-5{
+        .views-field-title{
+            color: $col-mond;
+            &:hover{
+                background: $col-mond;
+                color:white;
+            }
+        }
+    }
+    .popsu-node-7{
+        .views-field-title{
+            color: $col-met;
+            &:hover{
+                background: $col-met;
+                color:white;
+            }
+        }
+    }
+}
+.close-block, .open-block{
+	// background: red;
+	cursor:pointer;
+    span{
+		display: block;
+		width: 33px;
+		height: 2px;
+		position: relative;
+		background: black;
+		border-radius: 3px;
+		z-index: 1;
+	}
+}
+.close-block{
+    padding-top: 1rem;
+    span{
+        transform-origin: center;
+    }
+    &>div>span:first-child{
+        
+        transform: translateY(57%)rotate(45deg);
+    }
+    &>div>span:nth-child(2){
+        transform: rotate(-45deg);
+    }
+}
+.open-block{
+    height: 100%;
+    display: grid;
+    align-items: center;
+	span{
+		margin-bottom: 5px;	
+		transform-origin: 4px 0px;
+	}
+}
+
+#header-top-right{
+	.header_top_right_container{
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: white;
+		display: none;
+		grid-template-columns: 10% 25% 25% 30% 10%;
+		padding: 1rem 0;
+		z-index: 100;
+		line-height: 2;
+		nav{
+			grid-column-start: 2;
+		}
+		// padding: 1rem .5rem 1rem .5rem;
+		a{
+			text-decoration: none;
+			font-weight: 400;
+			&:hover{
+				text-decoration: underline;
+			}
+		}
+		h2{
+			font-weight: 100;
+			margin-bottom: .3rem;
+		}
+		.is-active{
+			font-weight: 800;
+		}
+		#block-views-block-programmes-block-2{
+			.views-row{
+				width: 100%;
+                
+			}
+            
+		}
+	}
+}
+
+#footer-bottom{
+    padding: 2rem 0;
+	*{
+		word-wrap: break-word;
+	}
+    h2{
+        font-weight: 500;
+    }
+    .footer_bottom_left_container{
+        height: 100%;
+        div{
+            height: 100%;
+        }
+        p{
+            height: 100%;
+            display: grid;
+        }
+    }
+    .logo-gouv{
+        height: 100%;
+		display: block;
+		color: transparent;
+        font-size: 0;
+		background: left / contain no-repeat url(../images/gouv.svg);
+    }
+    .logo-puca{
+        height: 100%;
+		display: block;
+		color: transparent;
+        font-size: 0;
+		background: left / contain no-repeat url(../images/puca.svg);
+    }
+
+    #block-pieddepage{
+        ul{
+            line-height: 2;
+            li{
+                a{
+                    text-transform: uppercase;
+                    text-decoration: none;
+                    font-weight: 400;
+                    &:hover{
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+    }
+    .footer_bottom_right_container{
+        &>div>div{
+            // display: grid;
+            // grid-template-columns: repeat(3,1fr);
+            p{
+                display: inline-block;
+                a{
+                    min-width: 2rem;
+                    min-height: 2rem;
+
+                }
+                a[href*='twitter']{
+                    height: 100%;
+                    display: block;
+                    font-size: 0;
+                    color: transparent;
+                    background: left / contain no-repeat url(../images/tw.svg);
+                }
+                a[href*='linkedin']{
+                    height: 100%;
+                    display: block;
+                    font-size: 0;
+                    color: transparent;
+                    background: left / contain no-repeat url(../images/ln.svg);
+                }
+                a[href*='youtube']{
+                    height: 100%;
+                    display: block;
+                    font-size: 0;
+                    color: transparent;
+                    background: left / contain no-repeat url(../images/yt.svg);
+                }
+            }
+        }
+    }
+}

web/themes/custom/popsu/sass/setup/_globals.scss

@@ -1,5 +1,21 @@
 body{
 	font-family: "trueno";
+	font-size: $font-normal ;
 	font-weight: 300;
 	line-height: 1.5;
+}
+main{
+	h2{
+		text-transform: uppercase;
+		font-family: 'duke';
+		font-size: $font-extra;
+	}
+}
+a{
+	color:inherit;
+}
+
+//TEMP
+iframe{
+	display: none;
 }

web/themes/custom/popsu/sass/setup/_variables.scss

@@ -0,0 +1,21 @@
+$font-extra: 2.3rem;
+$font-big: 1rem;
+$font-medium: .8rem;
+$font-normal: .6rem;
+
+$col-met: red; 
+$col-eur: blue;
+$col-mond: wheat; 
+@media (min-width: 48rem) {
+	:root {
+	  font-size: calc(1rem + ((1vw - .48rem) * 1.389));
+	  /* .48rem = viewportWidthMinimum /100 */
+	  /* 1.389rem = 100 * fontSizeDifference / viewportWidthDifference */
+	}
+  }
+  
+  @media (min-width: 120em) {
+	:root {
+	  font-size: 2rem;
+	}
+  }

web/themes/custom/popsu/sass/styles.scss

@@ -19,11 +19,11 @@
 //import "../node_modules/slick-carousel/slick/slick-theme.scss";
 //@import "foundation";
 //@import "mixins";
-//@import "variables";
+@import "setup/variables";
 @import "setup/fonts";
 @import "setup/globals";
 
 /*pages*/
-@import "pages/header";
+@import "pages/partials/header_footer";
 @import "pages/home";
-@import "pages/default";
+@import "pages/default";

web/themes/custom/popsu/templates/blocks/block--menu-block.html.twig

@@ -0,0 +1,51 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a menu block.
+ *
+ * Available variables:
+ * - plugin_id: The ID of the block implementation.
+ * - label: The configured label of the block if visible.
+ * - configuration: A list of the block's configuration values.
+ *   - label: The configured label for the block.
+ *   - label_display: The display settings for the label.
+ *   - provider: The module or other provider that provided this block plugin.
+ *   - Block plugin specific settings will also be stored here.
+ * - content: The content of this block.
+ * - attributes: HTML attributes for the containing element.
+ *   - id: A valid HTML ID and guaranteed unique.
+ * - title_attributes: HTML attributes for the title element.
+ * - content_attributes: HTML attributes for the content element.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ *
+ * Headings should be used on navigation menus that consistently appear on
+ * multiple pages. When this menu block's label is configured to not be
+ * displayed, it is automatically made invisible using the 'visually-hidden' CSS
+ * class, which still keeps it visible for screen-readers and assistive
+ * technology. Headings allow screen-reader and keyboard only users to navigate
+ * to or skip the links.
+ * See http://juicystudio.com/article/screen-readers-display-none.php and
+ * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information.
+ *
+ * @ingroup themeable
+ */
+#}
+{% set heading_id = attributes.id ~ '-menu'|clean_id %}
+
+<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes|without('role', 'aria-labelledby') }}>
+  {# Label. If not displayed, we still provide it for screen readers. #}
+  {% if not configuration.label_display %}
+    {% set title_attributes = title_attributes.addClass('visually-hidden') %}
+  {% endif %}
+  {{ title_prefix }}
+  <h2{{ title_attributes.setAttribute('id', heading_id) }}>{{ configuration.label }}</h2>
+  {{ title_suffix }}
+
+  {# Menu. #}
+  {% block content %}
+    {{ content }}
+  {% endblock %}
+</nav>

web/themes/custom/popsu/templates/layout/page.html.twig → web/themes/custom/popsu/templates/layout/page--node.html.twig

@@ -35,22 +35,26 @@
   {% include directory ~ '\/partials/header.html.twig' %}
   {{ page.help }}
 
-  <main role="main"  class="columns small-12">
+  <main role="main"  class="columns ">
     <a id="main-content" tabindex="-1"></a>
     {# link is in html.html.twig #}
-    <div class="layout-content">
+    
+    {% if page.sidebar_first == null %}
+      {% set offset = 'small-offset-3' %}
+    {% endif %}
+    <div class="layout-content small-6 {{offset}}">
       {{ page.content }}
     </div>
     {# /.layout-content #}
 
     {% if page.sidebar_first %}
-      <aside class="layout-sidebar-first" role="complementary">
+      <aside class="layout-sidebar-first small-3" role="complementary">
         {{ page.sidebar_first }}
       </aside>
     {% endif %}
 
     {% if page.sidebar_second %}
-      <aside class="layout-sidebar-second" role="complementary">
+      <aside class="layout-sidebar-second small-3" role="complementary">
         {{ page.sidebar_second }}
       </aside>
     {% endif %}

web/themes/custom/popsu/templates/regions/region--header-top-middle.html.twig

@@ -0,0 +1,21 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+  </div>
+{% endif %}

web/themes/custom/popsu/templates/regions/region--header-top-right.html.twig

@@ -0,0 +1,35 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a region.
+ *
+ * Available variables:
+ * - content: The content for this region, typically blocks.
+ * - attributes: HTML attributes for the region <div>.
+ * - region: The name of the region variable as defined in the theme's
+ *   .info.yml file.
+ *
+ * @see template_preprocess_region()
+ *
+ * @ingroup themeable
+ */
+#}
+{% if content %}
+  <div{{ attributes }}>
+    {{ content }}
+    <div class="close-block" >
+      <div>
+        <span></span>
+        <span></span>
+      </div>
+    </div>
+  </div>
+  <div class="open-block" >
+    <div>
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </div>
+    
+{% endif %}