hacklab/ENRE_WEB
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: calendario gancio-calendar + horarios semanales + mejoras CSS

Browse source 
- Integra gancio-calendar desde mad.convoca.la (place ID 42, CSO La Enredadera)
- Añade calendario semanal de colectivos debajo del gancio con pills de colores
- Corrige ID del lugar: 42 (no 286) confirmado via API
- Tema light + custom properties --calendar-* para colores blanco/negro/rosa
- Sidebar más compacto en móvil (65vw/220px), nav con fuente Impact uppercase
- Leyenda más grande y legible (0.75rem, puntos 16px)
- Márgenes 25px izquierda / 10px derecha en calendario semanal
- Añade context.txt con guía completa de despliegue y referencias técnicas
- Elimina botón "Calendario" redundante y espacio entre nav y calendario

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SITO 2026-04-09 00:09:34 +02:00
parent 976e45f156
commit f3823c4c53
3 changed files with 265 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

55
index.html
View file

@ -6,6 +6,8 @@
<title>La Enredadera de Tetuán</title>
<link rel="preload" href="/Code462WPink-Regular.ttf" as="font" type="font/ttf">
<link rel="stylesheet" href="/index.css">
<!-- Web component gancio-calendar (CSO La Rosa) https://framagit.org/rosa/gancio-calendar -->
<script type="module" src="https://rosa.frama.io/gancio-calendar/gancio-calendar.js"></script>
</head>
<body>
<input type="checkbox" id="nav-toggle" class="sr-only">
@ -63,25 +65,46 @@
</header>
<!-- CALENDARIO MENSUAL -->
<section id="agenda" class="panel" aria-label="Calendario mensual">
<h2>Calendario</h2>
<!-- CALENDARIO: gancio-calendar embebido desde mad.convoca.la -->
<section id="agenda" class="panel" aria-label="Calendario de eventos">
<div class="cal-controls" role="group" aria-label="Navegación de mes">
<button class="button cal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title" aria-live="polite"></div>
<button class="button cal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
<!--
places="286" = ID de CSO La Enredadera en mad.convoca.la
https://mad.convoca.la/place/CSO%20La%20Enredadera
-->
<gancio-calendar
baseurl="https://mad.convoca.la"
title="Agenda de La Enredadera de Tetuán"
instance_name="mad.convoca.la"
instance_description="Agenda activista y cultural de Tetuán"
locale="es-ES"
places="42"
accent_color="#ff00aa"
theme="light">
</gancio-calendar>
</section>
<!-- CALENDARIO SEMANAL DE COLECTIVOS -->
<section id="agenda-semanal" aria-label="Horarios semanales de colectivos">
<h2>Horarios Semanales</h2>
<div class="cal-controls" id="semanal-controls" role="group" aria-label="Navegación de mes">
<button class="button semanal-prev" type="button" aria-label="Mes anterior">&larr;</button>
<div class="cal-title semanal-title" aria-live="polite"></div>
<button class="button semanal-next" type="button" aria-label="Mes siguiente">&rarr;</button>
</div>
<div class="cal" id="cal-root"></div>
<div class="cal-legend" id="cal-legend-root"></div>
<div class="cal" id="semanal-root"></div>
<div class="cal-legend" id="semanal-legend-root"></div>
<script>
(function () {
const monthNames = ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
const weekdayNames = ['L','M','X','J','V','S','D'];
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/286/CSO%20La%20Enredadera';
const ENRE_EVENTS_URL = 'https://mad.convoca.la/place/42/CSO%20La%20Enredadera';
const COLORS = {
hacklab: { bg:'#39FF14', fg:'#000', label:'Hacklab' },
@ -138,11 +161,11 @@
cell.appendChild(wrap);
}
const root = document.getElementById('cal-root');
const legend = document.getElementById('cal-legend-root');
const title = document.querySelector('.cal-title');
const btnPrev = document.querySelector('.cal-prev');
const btnNext = document.querySelector('.cal-next');
const root = document.getElementById('semanal-root');
const legend = document.getElementById('semanal-legend-root');
const title = document.querySelector('.semanal-title');
const btnPrev = document.querySelector('.semanal-prev');
const btnNext = document.querySelector('.semanal-next');
const today = new Date();
let view = new Date();
@ -164,7 +187,6 @@
const secondFri = fridays[1];
const lastFri = fridays[fridays.length - 1];
// Cabecera
const head = document.createElement('div');
head.className = 'cal-row cal-head';
weekdayNames.forEach(w => {
@ -175,7 +197,6 @@
});
root.appendChild(head);
// Grid 6×7
let day = 1 - startIndex;
for (let r = 0; r < 6; r++) {
const row = document.createElement('div');