page ressources v0

web/sites/development.services.yml

@@ -44,7 +44,6 @@ parameters:
     # Not recommended in production environments
     # @default true
     cache: false
-
 services:
   cache.backend.null:
     class: Drupal\Core\Cache\NullBackendFactory

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

@@ -1167,7 +1167,8 @@ iframe {
 
 /*pages*/
 #header-top {
-  height: 3rem; }
+  height: 3rem;
+  background: white; }
 
 .header_top_left_container {
   height: 100%; }
@@ -1273,6 +1274,9 @@ iframe {
   #header-top-right .header_top_right_container #block-views-block-programmes-block-2 .views-row {
     width: 100%; }
 
+footer {
+  background: white; }
+
 #footer-bottom {
   padding: 2rem 0; }
   #footer-bottom * {
@@ -1334,6 +1338,59 @@ iframe {
   background: lightblue;
   text-align: center; }
 
+.path-centre-de-ressources {
+  background-color: #f2f6fc; }
+  .path-centre-de-ressources .content_container > div > h2:first-child {
+    text-align: center; }
+  .path-centre-de-ressources form {
+    display: grid;
+    grid-template-columns: 10% repeat(4, 20%); }
+    .path-centre-de-ressources form > div:first-child {
+      grid-column-start: 2; }
+    .path-centre-de-ressources form select {
+      display: inline-block;
+      width: auto;
+      width: 100%;
+      font-size: 0.6rem;
+      padding: .3rem .1rem;
+      height: auto; }
+    .path-centre-de-ressources form div {
+      display: inline-block;
+      width: auto;
+      padding: .5rem 1rem; }
+  .path-centre-de-ressources .views-view-grid .views-row {
+    display: grid;
+    grid-template-columns: 10% 20% 20% 20% 20% 10%; }
+    .path-centre-de-ressources .views-view-grid .views-row .views-col:first-child {
+      grid-column-start: 2; }
+  .path-centre-de-ressources .views-view-grid .views-col {
+    background-color: white;
+    background-clip: content-box;
+    width: 100% !important;
+    padding: .3rem; }
+    .path-centre-de-ressources .views-view-grid .views-col a {
+      text-decoration: none; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field:not(:first-child) {
+      padding: 0 0 0 .4rem; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-programme {
+      font-weight: 600;
+      display: inline-block;
+      width: auto;
+      color: white;
+      background: red;
+      padding: .15rem .3rem;
+      margin-bottom: 1rem; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-type-de-ressource {
+      text-transform: uppercase;
+      font-size: 500;
+      margin-bottom: .5rem; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field-title {
+      font-style: italic; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-sous-titre {
+      margin-bottom: 1rem; }
+    .path-centre-de-ressources .views-view-grid .views-col .views-field-field-theme {
+      font-size: 0.45rem; }
+
 article h2 {
   font-family: "trueno";
   font-weight: 600;

web/themes/custom/popsu/popsu.theme

@@ -80,6 +80,7 @@ function popsu_preprocess_views_view_field(&$variables){
   if (isset($settings['link_to_entity']) && $settings['link_to_entity']) {
     // get the entity and build the classes
     $entity = $variables['row']->_entity;
+    // $target_id = $entity;
     // build new classes
     $new_classes = array(
       $entity->getEntityTypeId(),

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

@@ -1,5 +1,4 @@
 article{
-
     h2{
         font-family: "trueno";
         font-weight: 600;

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

@@ -0,0 +1,77 @@
+.path-centre-de-ressources{
+	background-color: rgb(242, 246, 252);
+	.content_container{
+		&>div>h2:first-child{
+			text-align: center;
+		}
+	}
+	
+	form{
+		display: grid;
+		grid-template-columns: 10% repeat(4, 20%);
+		&>div:first-child{
+			grid-column-start: 2;
+		}
+		select{
+			display: inline-block;
+			width: auto;
+			width: 100%;
+			font-size: $font-normal;
+			padding: .3rem .1rem;
+			height: auto;
+		}
+		div{
+			display: inline-block;
+			width: auto;
+			padding: .5rem 1rem;
+		}
+	}
+	.views-view-grid{
+		.views-row{
+			display: grid;
+			grid-template-columns: 10% 20% 20% 20% 20% 10%;
+			.views-col:first-child{
+				grid-column-start: 2;
+			}
+		}
+		.views-col{
+			a{
+				text-decoration: none;	
+			}
+			background-color: rgb(255, 255, 255);
+			background-clip: content-box;
+			width: 100% !important;
+			padding: .3rem;
+			.views-field:not(:first-child){
+				padding: 0 0 0 .4rem;
+			}
+			.views-field-field-programme{
+				font-weight: 600;
+				display: inline-block;
+				width: auto;
+				color: white;
+				background: red;
+				padding: .15rem .3rem;
+				margin-bottom: 1rem;
+			}
+			.views-field-field-type-de-ressource{
+				text-transform: uppercase;
+				font-size: 500;
+				margin-bottom: .5rem;
+			}
+			.views-field-title{
+				font-style: italic;
+				
+			}
+			.views-field-field-sous-titre{
+				margin-bottom: 1rem;
+			}
+			.views-field-field-theme{
+				font-size: $font-small;
+			}
+		}
+
+	}
+	
+}
+

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

@@ -1,6 +1,7 @@
 //header
 #header-top{
 	height: 3rem;
+    background: white;
 }
 .header_top_left_container{
 	height: 100%;
@@ -153,6 +154,10 @@
 	}
 }
 
+
+footer{
+    background: white;
+}
 #footer-bottom{
     padding: 2rem 0;
 	*{

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

@@ -0,0 +1,4 @@
+// .layout--threecol-25-50-25{
+// 	display: grid;
+// 	grid-template-columns: 25% 50% 25%;
+// }

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

@@ -2,6 +2,7 @@ $font-extra: 2.3rem;
 $font-big: 1rem;
 $font-medium: .8rem;
 $font-normal: .6rem;
+$font-small: .45rem;
 
 $col-met: red; 
 $col-eur: blue;

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

@@ -18,12 +18,14 @@
 @import "../node_modules/slick-carousel/slick/slick.scss";
 //import "../node_modules/slick-carousel/slick/slick-theme.scss";
 //@import "foundation";
-//@import "mixins";
+
 @import "setup/variables";
 @import "setup/fonts";
 @import "setup/globals";
+@import "setup/layouts";
 
 /*pages*/
 @import "pages/partials/header_footer";
 @import "pages/home";
+@import "pages/ressources";
 @import "pages/default";

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

@@ -39,22 +39,20 @@
     <a id="main-content" tabindex="-1"></a>
     {# link is in html.html.twig #}
     
-    {% if page.sidebar_first == null %}
-      {% set offset = 'small-offset-3' %}
-    {% endif %}
-    <div class="layout-content small-6 {{offset}}">
+
+    <div class="layout-content">
       {{ page.content }}
     </div>
     {# /.layout-content #}
 
     {% if page.sidebar_first %}
-      <aside class="layout-sidebar-first small-3" role="complementary">
+      <aside class="layout-sidebar-first" role="complementary">
         {{ page.sidebar_first }}
       </aside>
     {% endif %}
 
     {% if page.sidebar_second %}
-      <aside class="layout-sidebar-second small-3" role="complementary">
+      <aside class="layout-sidebar-second" role="complementary">
         {{ page.sidebar_second }}
       </aside>
     {% endif %}

web/themes/custom/popsu/templates/layout/page.html.twig

@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a single page.
+ *
+ * The doctype, html, head and body tags are not in this template. Instead they
+ * can be found in the html.html.twig template in this directory.
+ *
+ * Available variables:
+ *
+ * General utility variables:
+ * - base_path: The base URL path of the Drupal installation. Will usually be
+ *   "/" unless you have installed Drupal in a sub-directory.
+ * - is_front: A flag indicating if the current page is the front page.
+ * - logged_in: A flag indicating if the user is registered and signed in.
+ * - is_admin: A flag indicating if the user has permission to access
+ *   administration pages.
+ *
+ * Site identity:
+ * - front_page: The URL of the front page. Use this instead of base_path when
+ *   linking to the front page. This includes the language domain or prefix.
+ *
+ * Page content (in order of occurrence in the default page.html.twig):
+ * - messages: Status and error messages. Should be displayed prominently.
+ * - node: Fully loaded node, if there is an automatically-loaded node
+ *   associated with the page and the node ID is the second argument in the
+ *   page's path (e.g. node/12345 and node/12345/revisions, but not
+ *   comment/reply/12345).
+ *
+ * Regions:
+ * - page.header: Items for the header region.
+ * - page.primary_menu: Items for the primary menu region.
+ * - page.secondary_menu: Items for the secondary menu region.
+ * - page.highlighted: Items for the highlighted content region.
+ * - page.help: Dynamic help text, mostly for admin pages.
+ * - page.content: The main content of the current page.
+ * - page.sidebar_first: Items for the first sidebar.
+ * - page.sidebar_second: Items for the second sidebar.
+ * - page.footer: Items for the footer region.
+ * - page.breadcrumb: Items for the breadcrumb region.
+ *
+ * @see template_preprocess_page()
+ * @see html.html.twig
+ *
+ * @ingroup themeable
+ */
+#}
+<div class="layout-container row">
+
+ {% include directory ~ '\/partials/header.html.twig' %}
+
+  {{ page.primary_menu }}
+  {{ page.secondary_menu }}
+
+  {{ page.breadcrumb }}
+
+  {{ page.highlighted }}
+
+  {{ page.help }}
+
+  <main role="main">
+    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
+
+    <div class="layout-content">
+      {{ page.content }}
+    </div>{# /.layout-content #}
+
+    {% if page.sidebar_first %}
+      <aside class="layout-sidebar-first" role="complementary">
+        {{ page.sidebar_first }}
+      </aside>
+    {% endif %}
+
+    {% if page.sidebar_second %}
+      <aside class="layout-sidebar-second" role="complementary">
+        {{ page.sidebar_second }}
+      </aside>
+    {% endif %}
+
+  </main>
+
+{% include directory ~ '\/partials/footer.html.twig' %}
+
+</div>{# /.layout-container #}