little UI changes

This commit is contained in:
Radek Davidek 2025-11-16 11:16:20 +01:00
parent a8bfa70837
commit d3e68fda22

View File

@ -109,7 +109,8 @@ button.active {
background: #2a2a2a; background: #2a2a2a;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.5); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
overflow: hidden; overflow-x: auto;
overflow-y: hidden;
margin: 0 auto; margin: 0 auto;
max-width: 1400px; max-width: 1400px;
width: 100%; width: 100%;
@ -235,10 +236,6 @@ tbody tr:last-child td {
h1 { h1 {
font-size: 1.5rem; font-size: 1.5rem;
} }
th:nth-child(4), td:nth-child(4) {
display: none;
}
} }
</style> </style>
</head> </head>
@ -328,7 +325,8 @@ function populateSports() {
// Tlačítka pro jednotlivé sporty // Tlačítka pro jednotlivé sporty
for (const s of sports) { for (const s of sports) {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.textContent = s; const icon = getSportIcon(s);
btn.textContent = `${icon} ${s}`;
btn.className = selectedSport === s ? 'active' : ''; btn.className = selectedSport === s ? 'active' : '';
btn.addEventListener('click', () => { btn.addEventListener('click', () => {
selectedSport = s; selectedSport = s;
@ -340,7 +338,7 @@ function populateSports() {
// Tlačítko "Všechny sporty" jako poslední // Tlačítko "Všechny sporty" jako poslední
const allBtn = document.createElement('button'); const allBtn = document.createElement('button');
allBtn.textContent = 'Všechny sporty'; allBtn.textContent = '🏆 Všechny sporty';
allBtn.className = selectedSport === '' ? 'active' : ''; allBtn.className = selectedSport === '' ? 'active' : '';
allBtn.addEventListener('click', () => { allBtn.addEventListener('click', () => {
selectedSport = ''; selectedSport = '';
@ -354,10 +352,12 @@ function populateSports() {
function updateSportButtons() { function updateSportButtons() {
const buttons = sportButtonsEl.querySelectorAll('button'); const buttons = sportButtonsEl.querySelectorAll('button');
buttons.forEach(btn => { buttons.forEach(btn => {
if (btn.textContent === 'Všechny sporty') { if (btn.textContent.includes('Všechny sporty')) {
btn.className = selectedSport === '' ? 'active' : ''; btn.className = selectedSport === '' ? 'active' : '';
} else { } else {
btn.className = selectedSport === btn.textContent ? 'active' : ''; // Extrahuj jméno sportu z textu tlačítka (odstraň ikonu)
const sportName = btn.textContent.split(' ').slice(1).join(' ');
btn.className = selectedSport === sportName ? 'active' : '';
} }
}); });
} }
@ -374,19 +374,16 @@ function applyFilters() {
// === formátování data a času === // === formátování data a času ===
function formatDateTime(dateStr, timeStr) { function formatDateTime(dateStr, timeStr) {
if (!dateStr || !timeStr) return '—'; if (!timeStr) return '—';
try { try {
// Normalizuj čas na formát HH:MM (přidej vedoucí nulu, pokud chybí) // Normalizuj čas na formát HH:MM (přidej vedoucí nulu, pokud chybí)
const timeParts = timeStr.split(':'); const timeParts = timeStr.split(':');
if (timeParts.length === 2) { if (timeParts.length === 2) {
const hours = timeParts[0].padStart(2, '0'); const hours = timeParts[0].padStart(2, '0');
const minutes = timeParts[1].padStart(2, '0'); const minutes = timeParts[1].padStart(2, '0');
timeStr = `${hours}:${minutes}`; return `${hours}:${minutes}`;
} }
return timeStr;
const dt = new Date(dateStr + 'T' + timeStr);
if (isNaN(dt.getTime())) return '—';
return dt.toLocaleString('cs-CZ', { dateStyle: 'short', timeStyle: 'short' });
} catch (e) { } catch (e) {
return '—'; return '—';
} }
@ -422,9 +419,8 @@ function renderList(items) {
<table> <table>
<thead> <thead>
<tr> <tr>
<th></th>
<th>Název</th>
<th>Čas</th> <th>Čas</th>
<th>Název</th>
<th>Sport</th> <th>Sport</th>
<th>Liga</th> <th>Liga</th>
</tr> </tr>
@ -437,13 +433,11 @@ function renderList(items) {
const league = t.league || ''; const league = t.league || '';
const leaguePart = t.leaguePart || ''; const leaguePart = t.leaguePart || '';
const fullLeague = `${league} ${leaguePart}`.trim(); const fullLeague = `${league} ${leaguePart}`.trim();
const sportIcon = getSportIcon(t.sport);
tableHTML += ` tableHTML += `
<tr> <tr>
<td class="sport-icon">${sportIcon}</td>
<td class="title-cell"><a href="${t.link}" target="_blank">${t.title}</a></td>
<td class="time-cell">${dateTimeStr}</td> <td class="time-cell">${dateTimeStr}</td>
<td class="title-cell"><a href="${t.link}" target="_blank">${t.title}</a></td>
<td class="sport-cell">${t.sport || ''}</td> <td class="sport-cell">${t.sport || ''}</td>
<td class="league-cell">${fullLeague}</td> <td class="league-cell">${fullLeague}</td>
</tr> </tr>