From b3af161cb103733af435af417a410dfb2bb19894 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 21 Jun 2023 00:20:44 +0200 Subject: [PATCH] tentative slideshow bandeau actu home --- web/themes/custom/eql/css-compiled/styles.css | 9 +- web/themes/custom/eql/package-lock.json | 29 ++++- web/themes/custom/eql/package.json | 3 +- web/themes/custom/eql/scripts/main.js | 22 ++++ .../custom/eql/scss/global/_buttons.scss | 3 + web/themes/custom/eql/scss/pages/_home.scss | 20 +++- .../eql/templates/layout/html.html.twig | 5 +- ...iew--actus-blocks-pages--block-1.html.twig | 109 ++++++++++++++++++ .../custom/eql/templates/views-view.html.twig | 8 ++ 9 files changed, 194 insertions(+), 14 deletions(-) create mode 100644 web/themes/custom/eql/scss/global/_buttons.scss create mode 100644 web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig diff --git a/web/themes/custom/eql/css-compiled/styles.css b/web/themes/custom/eql/css-compiled/styles.css index e3b3b05..50d9ecd 100644 --- a/web/themes/custom/eql/css-compiled/styles.css +++ b/web/themes/custom/eql/css-compiled/styles.css @@ -403,16 +403,15 @@ a { border-bottom: 5px solid #009ee3; background: rgba(0, 158, 227, 0.2); } .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { - display: grid; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; - margin: auto; - padding-top: 2rem; - padding-bottom: 4rem; } + display: flex; + flex-basis: auto; } @media (max-width: 479px) { .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content { display: flex; flex-direction: column; width: 80%; } } + .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row { + flex-basis: auto; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .views-row:nth-of-type(1) { grid-column: 2; } .path-frontpage .block-views-blockactus-blocks-pages-block-1 .view-actus-blocks-pages .view-content .node-type-actualite { diff --git a/web/themes/custom/eql/package-lock.json b/web/themes/custom/eql/package-lock.json index 98b469a..5dd2f32 100644 --- a/web/themes/custom/eql/package-lock.json +++ b/web/themes/custom/eql/package-lock.json @@ -9,7 +9,8 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "nodejs": "^0.0.0" + "nodejs": "^0.0.0", + "slick-carousel": "^1.8.1" }, "devDependencies": { "node-sass": "^6.0.1" @@ -928,6 +929,12 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "node_modules/js-base64": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", @@ -1714,6 +1721,14 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/source-map": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", @@ -2981,6 +2996,12 @@ "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=", "dev": true }, + "jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "js-base64": { "version": "2.6.4", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz", @@ -3597,6 +3618,12 @@ "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==", "dev": true }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "requires": {} + }, "source-map": { "version": "0.4.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz", diff --git a/web/themes/custom/eql/package.json b/web/themes/custom/eql/package.json index 472fb63..76560f8 100644 --- a/web/themes/custom/eql/package.json +++ b/web/themes/custom/eql/package.json @@ -18,6 +18,7 @@ }, "browserslist": "last 4 versions", "dependencies": { - "nodejs": "^0.0.0" + "nodejs": "^0.0.0", + "slick-carousel": "^1.8.1" } } diff --git a/web/themes/custom/eql/scripts/main.js b/web/themes/custom/eql/scripts/main.js index 499c0ba..23f1136 100644 --- a/web/themes/custom/eql/scripts/main.js +++ b/web/themes/custom/eql/scripts/main.js @@ -156,3 +156,25 @@ jQuery(function($) { // /////////////////////////////// + + +// slideshow home // work but does the same for all node-type-actualite, faut limiter à ceux dans la path-frontpage +var slideIndex = 1; +showDivs(slideIndex); + +function plusDivs(n) { + showDivs(slideIndex += n); +} + +function showDivs(n) { + var i; + var x = document.getElementsByPath("node-type-actualite"); + if (n > x.length) {slideIndex = 1} + if (n < 1) {slideIndex = x.length} ; + for (i = 0; i < x.length; i++) { + x[i].style.display = "none"; + } + x[slideIndex-1].style.display = "block"; +} + +///////////////////////////////////////////////// diff --git a/web/themes/custom/eql/scss/global/_buttons.scss b/web/themes/custom/eql/scss/global/_buttons.scss new file mode 100644 index 0000000..ec8e7e0 --- /dev/null +++ b/web/themes/custom/eql/scss/global/_buttons.scss @@ -0,0 +1,3 @@ +.w3-button{ + +} \ No newline at end of file diff --git a/web/themes/custom/eql/scss/pages/_home.scss b/web/themes/custom/eql/scss/pages/_home.scss index 7818d54..e976c7c 100644 --- a/web/themes/custom/eql/scss/pages/_home.scss +++ b/web/themes/custom/eql/scss/pages/_home.scss @@ -10,17 +10,25 @@ background: $background-actus; .view-actus-blocks-pages{ .view-content{ - - display: grid; - grid-template-columns: 1fr repeat(4, 2fr) 1fr; - margin: auto; - padding-top: 2rem; - padding-bottom: 4rem; + display: flex; + flex-basis: auto; + // display: grid; + // grid-template-columns: 1fr repeat(4, 2fr) 1fr; + // margin: auto; + // padding-top: 2rem; + // padding-bottom: 4rem; @media (max-width: 479px){ display: flex; flex-direction: column; // padding-left: 1rem; width: 80%; + } + .views-row{ + flex-basis: auto; + + } + .w3-button{ + } .views-row:nth-of-type(1) { grid-column: 2; } .node-type-actualite{ diff --git a/web/themes/custom/eql/templates/layout/html.html.twig b/web/themes/custom/eql/templates/layout/html.html.twig index ce96853..7c284a9 100644 --- a/web/themes/custom/eql/templates/layout/html.html.twig +++ b/web/themes/custom/eql/templates/layout/html.html.twig @@ -37,7 +37,9 @@ {{ head_title|safe_join(' | ') }} - + + + {# @@ -51,5 +53,6 @@ {{ page }} {{ page_bottom }} + \ No newline at end of file diff --git a/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig b/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig new file mode 100644 index 0000000..0afd7db --- /dev/null +++ b/web/themes/custom/eql/templates/node--view--actus-blocks-pages--block-1.html.twig @@ -0,0 +1,109 @@ +{# +/** + * @file + * Default theme implementation to display a node. + * + * Available variables: + * - node: The node entity with limited access to object properties and methods. + * Only method names starting with "get", "has", or "is" and a few common + * methods such as "id", "label", and "bundle" are available. For example: + * - node.getCreatedTime() will return the node creation timestamp. + * - node.hasField('field_example') returns TRUE if the node bundle includes + * field_example. (This does not indicate the presence of a value in this + * field.) + * - node.isPublished() will return whether the node is published or not. + * Calling other methods, such as node.delete(), will result in an exception. + * See \Drupal\node\Entity\Node for a full list of public properties and + * methods for the node object. + * - label: (optional) The title of the node. + * - content: All node items. Use {{ content }} to print them all, + * or print a subset such as {{ content.field_example }}. Use + * {{ content|without('field_example') }} to temporarily suppress the printing + * of a given child element. + * - author_picture: The node author user entity, rendered using the "compact" + * view mode. + * - metadata: Metadata for this node. + * - date: (optional) Themed creation date field. + * - author_name: (optional) Themed author name field. + * - url: Direct URL of the current node. + * - display_submitted: Whether submission information should be displayed. + * - attributes: HTML attributes for the containing element. + * The attributes.class element may contain one or more of the following + * classes: + * - node: The current template type (also known as a "theming hook"). + * - node--type-[type]: The current node type. For example, if the node is an + * "Article" it would result in "node--type-article". Note that the machine + * name will often be in a short form of the human readable label. + * - node--view-mode-[view_mode]: The View Mode of the node; for example, a + * teaser would result in: "node--view-mode-teaser", and + * full: "node--view-mode-full". + * The following are controlled through the node publishing options. + * - node--promoted: Appears on nodes promoted to the front page. + * - node--sticky: Appears on nodes ordered above other non-sticky nodes in + * teaser listings. + * - node--unpublished: Appears on unpublished nodes visible only to site + * admins. + * - title_attributes: Same as attributes, except applied to the main title + * tag that appears in the template. + * - content_attributes: Same as attributes, except applied to the main + * content tag that appears in the template. + * - author_attributes: Same as attributes, except applied to the author of + * the node tag that appears in the template. + * - 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. + * - view_mode: View mode; for example, "teaser" or "full". + * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'. + * - page: Flag for the full page state. Will be true if view_mode is 'full'. + * - readmore: Flag for more state. Will be true if the teaser content of the + * node cannot hold the main body content. + * - logged_in: Flag for authenticated user status. Will be true when the + * current user is a logged-in member. + * - is_admin: Flag for admin user status. Will be true when the current user + * is an administrator. + * + * @see template_preprocess_node() + * + * @todo Remove the id attribute (or make it a class), because if that gets + * rendered twice on a page this is invalid CSS for example: two lists + * in different view modes. + * + * @ingroup themeable + */ +#} + +{% + set classes = [ + 'mySlides', + ] +%} + {# #} + + + + {{ title_prefix }} + + {% if label and not page %} + + {{ label }} + + {% endif %} + {{ title_suffix }} + + {% if display_submitted %} +
+ {{ author_picture }} + + {% trans %}Submitted by {{ author_name }} on {{ date }}{% endtrans %} + {{ metadata }} + +
+ {% endif %} + + + {{ content }} + + + + {# #} diff --git a/web/themes/custom/eql/templates/views-view.html.twig b/web/themes/custom/eql/templates/views-view.html.twig index 251b061..9c8e6d2 100644 --- a/web/themes/custom/eql/templates/views-view.html.twig +++ b/web/themes/custom/eql/templates/views-view.html.twig @@ -63,7 +63,15 @@ {% if rows %}
+ {# {% if class="path-frontpage"%} #} + {# #} {{ rows }} + {# #} + + {# {% else %} #} + {# {{ rows }} #} + {# {% endif %} #} +
{% elseif empty %}