From 202a1469b85a283b01783e52f3dd0cd60fa8b801 Mon Sep 17 00:00:00 2001 From: MrRaph_ Date: Fri, 23 May 2025 15:59:44 +0000 Subject: [PATCH] feat: styling --- category-grid-widget-for-elementor.php | 6 +- css/style.css | 101 +++++++++++++++---------- readme.txt | 5 +- 3 files changed, 67 insertions(+), 45 deletions(-) diff --git a/category-grid-widget-for-elementor.php b/category-grid-widget-for-elementor.php index 89ce20d..ecef7f9 100644 --- a/category-grid-widget-for-elementor.php +++ b/category-grid-widget-for-elementor.php @@ -3,7 +3,7 @@ * Plugin Name: Category Grid Widget for Elementor * Plugin URI: https://git.mrraph.fr/WordPress/elementor-category-grid-widget-for-elementor * Description: Responsive article category grid with image for Elementor. - * Version: 1.3.0 + * Version: 1.3.1 * Author: MrRaph_ * Author URI: https://mrraph.photo * Requires at least: 5.8 @@ -45,7 +45,7 @@ function ccgw_enqueue_media_uploader($hook_suffix) 'ccgw-category-image', plugin_dir_url(__FILE__) . 'admin/js/category-image.js', ['jquery'], - '1.3.0', + '1.3.1', true ); @@ -223,7 +223,7 @@ function ccgw_enqueue_front_styles() 'ccgw-category-grid-style', plugin_dir_url(__FILE__) . 'css/style.css', [], - '1.3.0' + '1.3.1' ); } } diff --git a/css/style.css b/css/style.css index 0ebbd55..e8ffd20 100644 --- a/css/style.css +++ b/css/style.css @@ -1,63 +1,45 @@ /* css/style.css */ + +/* —————————————————————————————————————————— */ +/* ZONES GLOBALES (overlay, cartes, images…) */ +/* —————————————————————————————————————————— */ + +/* 0) Cartes en conteneur relatif */ .elementor-category-grid .category-card { position: relative; overflow: hidden; + height: 0; + padding-bottom: 40%; /* ratio 5:2 */ } -/* pseudo-élément overlay */ +/* overlay via pseudo-élément */ .elementor-category-grid .category-card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: transparent; transition: opacity .3s ease; - pointer-events: none; /* laisse passer le clic */ + pointer-events: none; } -/* 1) Mise en place de la grille */ -.elementor-category-grid { - display: grid; - gap: 1rem; -} - -/* Nombre de colonnes dynamiques */ -.elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); } -.elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); } -.elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); } -.elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); } -.elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); } -.elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); } - -/* 2) Chaque carte = conteneur relatif */ -.elementor-category-grid .category-card { - position: relative; - overflow: hidden; - height: 0; - padding-bottom: 40%; /* ratio 5:2 – ajustez selon vos images */ - /* border-radius: 8px; */ -} - -/* 3) Image pleine carte */ +/* images pleines cartes */ .elementor-category-grid .category-card img { position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + top: 0; left: 0; + width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } -/* 4) Effet hover : léger zoom */ +/* zoom au hover */ .elementor-category-grid .category-card:hover img { transform: scale(1.05); } -/* 5) Titre centré en overlay */ +/* titre centré */ .elementor-category-grid .category-card-name { position: absolute; - top: 50%; - left: 50%; + top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: .5em 1em; @@ -65,12 +47,49 @@ line-height: 1.2; text-align: center; color: #ffffff; - /* background: rgba(0, 0, 0, 0.4); */ - /* border-radius: 4px; */ - transition: background .3s ease; + white-space: pre-wrap; + word-break: break-word; + transition: font-size .3s ease, padding .3s ease; } -/* 6) Hover sur titre : fond un peu plus opaque */ -/* .elementor-category-grid .category-card:hover .category-card-name { - background: rgba(0, 0, 0, 0.6); -} */ +/* —————————————————————————————————————————— */ +/* DISPOSITION DE LA GRILLE */ +/* —————————————————————————————————————————— */ + +/* 1) Par défaut : auto-fit (desktop) */ +.elementor-category-grid { + display: grid; + gap: 1rem; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +/* 2) Mobile (≤ 480px) → 1 colonne forcée */ +@media screen and (max-width: 480px) { + .elementor-category-grid { + grid-template-columns: repeat(1, 1fr) !important; + } + .elementor-category-grid .category-card-name { + font-size: 1rem; + padding: .4em .8em; + } +} + +/* 3) Tablette (481px–768px) → 2 colonnes */ +@media screen and (min-width: 481px) and (max-width: 768px) { + .elementor-category-grid { + grid-template-columns: repeat(2, 1fr) !important; + } + .elementor-category-grid .category-card-name { + font-size: 1.2rem; + } +} + +/* 4) Desktop (≥ 769px) → respect des classes columns-X */ +@media screen and (min-width: 769px) { + .elementor-category-grid.columns-1 { grid-template-columns: repeat(1, 1fr); } + .elementor-category-grid.columns-2 { grid-template-columns: repeat(2, 1fr); } + .elementor-category-grid.columns-3 { grid-template-columns: repeat(3, 1fr); } + .elementor-category-grid.columns-4 { grid-template-columns: repeat(4, 1fr); } + .elementor-category-grid.columns-5 { grid-template-columns: repeat(5, 1fr); } + .elementor-category-grid.columns-6 { grid-template-columns: repeat(6, 1fr); } +} diff --git a/readme.txt b/readme.txt index dd6f848..47eb0c2 100644 --- a/readme.txt +++ b/readme.txt @@ -5,7 +5,7 @@ Tags: elementor, category, grid, widget, posts Requires at least: 5.8 Tested up to: 6.8 Requires PHP: 7.0 -Stable tag: 1.3.0 +Stable tag: 1.3.1 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Responsive grid of post categories with images for Elementor. @@ -46,6 +46,9 @@ Yes, enable the **“Hide categories without image”** option in the widget’s Open the **Style » Hover** tab: choose the overlay color & opacity, and the title color on hover. == Changelog == += 1.3.1 = +* Make style responsive + = 1.3.0 = * Added more option to handle subcategories