Skip to content

Commit 22d2096

Browse files
AlenCarbajalAlenCarbajal
committed
Merge branch 'fix/filtros-mobile-y-facet-close'
2 parents 6920ab8 + 66e7af5 commit 22d2096

2 files changed

Lines changed: 73 additions & 28 deletions

File tree

‎ckanext/series_explorer/assets/css/series-explorer.css‎

Lines changed: 42 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -275,17 +275,49 @@ body.series-page .gobar-detail-usage-label { display: block; font-size: 0.72rem;
275275
body.series-page .gobar-detail-usage-stat { display: block; font-size: 1.5rem; font-weight: 700; color: var(--gobar-navy); margin-top: 2px; }
276276

277277
/* ══════════════════════ RESPONSIVE ══════════════════════
278-
Mobile: los filtros NO se anteponen a los resultados. En vez de columnas,
279-
apilamos y usamos `order` para que la lista de resultados vaya primero, luego
280-
comparación, y los filtros al final. */
278+
Mobile: filtros primero (colapsados por default, ver drawer más abajo),
279+
después la lista de resultados. Apilamos y usamos `order`. */
281280
@media (max-width: 900px) {
282281
body.series-page .gobar-results-layout,
283282
body.series-page .gobar-focus-layout { grid-template-columns: 1fr; }
284-
body.series-page .gobar-series-results { order: 1; }
285-
body.series-page .gobar-series-facets { order: 2; }
283+
body.series-page .gobar-series-facets { order: 1; margin-bottom: 16px; }
284+
body.series-page .gobar-series-results { order: 2; }
286285
body.series-page .gobar-compare-bar { flex-wrap: wrap; }
287286
}
288287

288+
/* ── Drawer "Filtros" (mobile) ── checkbox-hack: sin JS, y a diferencia de
289+
<details> un <div> sí se puede forzar visible por CSS en desktop
290+
(un <details> cerrado usa content-visibility interno en Chrome, que
291+
ignora display:block puesto en los hijos). */
292+
body.series-page .gobar-series-facets-toggle-input {
293+
position: absolute; opacity: 0; pointer-events: none;
294+
}
295+
body.series-page .gobar-series-facets-toggle {
296+
cursor: pointer; user-select: none;
297+
display: flex; align-items: center; gap: 0.5rem;
298+
padding: 0.6rem 0.75rem; margin-bottom: 0.5rem;
299+
background: var(--gobar-gris-bg, #f2f2f2); border-radius: 6px;
300+
font-family: var(--font-titulos); font-weight: 700; font-size: 0.95rem;
301+
color: var(--gobar-navy, #212D51);
302+
}
303+
body.series-page .gobar-series-facets-toggle-input:focus-visible + .gobar-series-facets-toggle {
304+
outline: 2px solid var(--gobar-primary, #393793); outline-offset: 2px;
305+
}
306+
body.series-page .gobar-series-facets-toggle::after {
307+
content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-left: auto;
308+
border-right: 2px solid var(--gobar-gris, #888); border-bottom: 2px solid var(--gobar-gris, #888);
309+
transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease;
310+
}
311+
body.series-page .gobar-series-facets-toggle-input:checked + .gobar-series-facets-toggle::after {
312+
transform: translateY(2px) rotate(225deg);
313+
}
314+
body.series-page .gobar-series-facets-content { display: none; }
315+
body.series-page .gobar-series-facets-toggle-input:checked ~ .gobar-series-facets-content { display: block; }
316+
@media (min-width: 901px) {
317+
body.series-page .gobar-series-facets-toggle { display: none; }
318+
body.series-page .gobar-series-facets-content { display: block; }
319+
}
320+
289321
/* ══════════════════════ FACETAS (sidebar de filtros) ══════════════════════
290322
Colapsables (<details>/<summary>), sin depender de otro theme. Usa
291323
var(--gobar-*, fallback) para degradar con gracia si por algún motivo
@@ -349,6 +381,11 @@ body.series-page .gobar-facet .nav-facet .nav-item.active .item-count.badge {
349381
color: rgba(255, 255, 255, 0.65); font-weight: 600; font-size: 0.8em;
350382
}
351383
body.series-page .gobar-facet .nav-facet .nav-item.active .facet-close {
384+
/* CKAN core la posiciona con float:right + left:10px pensado para el
385+
"banderín" viejo; en el chip flex chato eso la empuja justo al borde
386+
redondeado y queda tapada por la curva. La volvemos a la posición
387+
natural del flujo flex. */
388+
float: none; position: static; left: 0;
352389
color: rgba(255, 255, 255, 0.7); font-size: 0.85em;
353390
}
354391
body.series-page .gobar-facet .nav-facet .nav-item.active > a:hover .facet-close { color: #fff; }

‎ckanext/series_explorer/templates/series/index.html‎

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -138,30 +138,38 @@ <h2 class="gobar-series-empty-title">
138138
{% else %}
139139
<div class="gobar-results-layout">
140140

141-
{# ── Sidebar de filtros ── #}
141+
{# ── Sidebar de filtros ──
142+
En mobile va primero (order en CSS) y arranca colapsada. Checkbox-hack
143+
en vez de <details> anidado: forzar visible en desktop un <details>
144+
cerrado no anda (Chrome lo renderiza con content-visibility interno,
145+
no respeta display:block en los hijos), un <div> sí. #}
142146
<aside class="gobar-series-facets" aria-label="{{ _('Filtros') }}">
143-
{% for facet in facets %}
144-
<section class="module module-narrow module-shallow gobar-facet">
145-
<details class="gobar-facet-details" open>
146-
<summary class="gobar-facet-summary">
147-
<h2 class="module-heading">{{ facet.title }}</h2>
148-
</summary>
149-
<nav aria-label="{{ facet.title }}">
150-
<ul class="list-unstyled nav nav-simple nav-facet">
151-
{% for item in facet['items'] %}
152-
<li class="nav-item{% if item.active %} active{% endif %}">
153-
<a href="{{ item.href }}" title="{{ item.label }}">
154-
<span class="item-label">{{ item.label }}</span>
155-
<span class="item-count badge">{{ item.count }}</span>
156-
{% if item.active %}<span class="facet-close"> <i class="fa fa-solid fa-xmark" aria-hidden="true"></i></span>{% endif %}
157-
</a>
158-
</li>
159-
{% endfor %}
160-
</ul>
161-
</nav>
162-
</details>
163-
</section>
164-
{% endfor %}
147+
<input type="checkbox" id="series-facets-toggle" class="gobar-series-facets-toggle-input">
148+
<label for="series-facets-toggle" class="gobar-series-facets-toggle">{{ _('Filtros') }}</label>
149+
<div class="gobar-series-facets-content">
150+
{% for facet in facets %}
151+
<section class="module module-narrow module-shallow gobar-facet">
152+
<details class="gobar-facet-details" open>
153+
<summary class="gobar-facet-summary">
154+
<h2 class="module-heading">{{ facet.title }}</h2>
155+
</summary>
156+
<nav aria-label="{{ facet.title }}">
157+
<ul class="list-unstyled nav nav-simple nav-facet">
158+
{% for item in facet['items'] %}
159+
<li class="nav-item{% if item.active %} active{% endif %}">
160+
<a href="{{ item.href }}" title="{{ item.label }}">
161+
<span class="item-label">{{ item.label }}</span>
162+
<span class="item-count badge">{{ item.count }}</span>
163+
{% if item.active %}<span class="facet-close"> <i class="fa fa-solid fa-xmark" aria-hidden="true"></i></span>{% endif %}
164+
</a>
165+
</li>
166+
{% endfor %}
167+
</ul>
168+
</nav>
169+
</details>
170+
</section>
171+
{% endfor %}
172+
</div>
165173
</aside>
166174

167175
{# ── Lista de resultados ── #}

0 commit comments

Comments
 (0)