filtros UI/UX mejorado
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="filters-container glass light">
|
||||
<div class="filters-container" :class="{ compact }">
|
||||
<div class="filter-group">
|
||||
<label class="filter-label">Ronda:</label>
|
||||
<div class="filter-buttons">
|
||||
@@ -70,9 +70,10 @@ interface Props {
|
||||
gameFilter: GameFilterMulti;
|
||||
hasActiveFilters: boolean;
|
||||
filterSummary: string;
|
||||
compact?: boolean;
|
||||
}
|
||||
|
||||
defineProps<Props>();
|
||||
withDefaults(defineProps<Props>(), { compact: false });
|
||||
|
||||
defineEmits<{
|
||||
'update:roundFilter': [value: RoundFilterMulti];
|
||||
@@ -82,36 +83,26 @@ defineEmits<{
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.glass.light {
|
||||
background: rgba(255, 255, 255, 0.78);
|
||||
border: 1px solid rgba(229, 231, 235, 0.9);
|
||||
box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
|
||||
backdrop-filter: blur(18px) saturate(120%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 14px;
|
||||
gap: 12px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filters-container.compact {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #334155;
|
||||
min-width: 60px;
|
||||
}
|
||||
.filter-label { font-size: 13px; font-weight: 700; color: #334155; min-width: 52px; }
|
||||
|
||||
.filter-buttons {
|
||||
display: flex;
|
||||
@@ -120,13 +111,13 @@ defineEmits<{
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 8px 14px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: rgba(255,255,255,0.6);
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
@@ -151,18 +142,7 @@ defineEmits<{
|
||||
box-shadow: 0 6px 20px rgba(102,126,234,0.4);
|
||||
}
|
||||
|
||||
.filter-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
|
||||
border: 1px solid #0ea5e9;
|
||||
border-radius: 999px;
|
||||
color: #0c4a6e;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.filter-summary { display: none; }
|
||||
|
||||
.summary-icon {
|
||||
font-size: 14px;
|
||||
@@ -172,26 +152,7 @@ defineEmits<{
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: rgba(239,68,68,0.1);
|
||||
color: #dc2626;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background: rgba(239,68,68,0.2);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.reset-btn { display: none; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.filters-container {
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div class="leaderboard light">
|
||||
<div class="header glass light">
|
||||
<div class="header-left">
|
||||
<div class="header-row">
|
||||
<div class="header-left">
|
||||
<button class="btn-back" @click="goHome" title="Volver al inicio">
|
||||
← <span class="label">Inicio</span>
|
||||
</button>
|
||||
<h1><GameLogo size="medium" /> Estadísticas</h1>
|
||||
</div>
|
||||
<div class="actions">
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn-collapse" @click="filtersCollapsed = !filtersCollapsed" :title="filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros'">
|
||||
<span class="collapse-icon" :class="{ rotated: filtersCollapsed }">▼</span>
|
||||
<span class="collapse-text">{{ filtersCollapsed ? 'Mostrar filtros' : 'Ocultar filtros' }}</span>
|
||||
@@ -15,20 +16,39 @@
|
||||
<button class="btn" @click="downloadJSON" :disabled="loading" title="Descargar datos actuales como JSON">
|
||||
📊 <span class="label">JSON</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-markers filters-indicators">
|
||||
<span class="marker-chip">
|
||||
<span class="key time"></span>
|
||||
{{ periodLabel }}
|
||||
<button class="chip-x" v-if="timeMode == 'range'" @click="clearTimeFilter" title="Borrar filtro de tiempo">×</button>
|
||||
</span>
|
||||
<span class="marker-chip" v-if="roundActive">
|
||||
<span class="key round"></span>
|
||||
{{ roundLabel }}
|
||||
<button class="chip-x" @click="eventFilters.roundFilter.value = []; onRoundGameChange()">×</button>
|
||||
</span>
|
||||
<span class="marker-chip" v-if="gameActive">
|
||||
<span class="key game"></span>
|
||||
{{ gameLabel }}
|
||||
<button class="chip-x" @click="eventFilters.gameFilter.value = []; onRoundGameChange()">×</button>
|
||||
</span>
|
||||
<span class="marker-chip" v-if="selectedUuids.length" >
|
||||
<span class="key player"></span>
|
||||
Jugadores: {{ selectedUuids.length }}
|
||||
<button class="chip-x" @click="clearPlayers(); onRoundGameChange()" title="Quitar selección de jugadores">×</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="filters-section" :class="{ collapsed: filtersCollapsed }">
|
||||
|
||||
<Transition name="filters-slide">
|
||||
<div v-if="!filtersCollapsed" class="filters-content"></div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
<Transition name="filters-slide">
|
||||
<div v-if="!filtersCollapsed" class="controls glass light">
|
||||
<!-- Selector de periodo: Salas activas vs Rango de tiempo -->
|
||||
<div class="time-selector glass light">
|
||||
<div class="time-selector">
|
||||
<div class="mode-buttons">
|
||||
<button
|
||||
class="mode-btn"
|
||||
@@ -56,42 +76,32 @@
|
||||
Hasta
|
||||
<input type="datetime-local" v-model="rangeToStr" :disabled="timeMode !== 'range' || liveEnd" @change="applyTimeMode" />
|
||||
</label>
|
||||
<button class="live-btn" :class="{ active: liveEnd }" :disabled="timeMode !== 'range'" @click="toggleLiveEnd">
|
||||
⏱ Hasta ahora
|
||||
</button>
|
||||
<div class="quick">
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(5)">5m</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(10)">10m</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(30)">30m</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="quickRange(60)">1h</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="quick">
|
||||
<button class="qs-btn live-btn" :class="{ active: liveEnd }" :disabled="timeMode !== 'range'" @click="toggleLiveEnd" title="Hasta ahora">⏱</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(10,'m')">10m</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'h')">1h</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'d')">1D</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'mo')">1M</button>
|
||||
<button class="qs-btn" :disabled="timeMode !== 'range'" @click="incrementFrom(1,'y')">1Y</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="legend">
|
||||
<span class="key global"></span> Global
|
||||
<span class="sep">·</span>
|
||||
<span class="key round"></span> Ronda
|
||||
<span class="sep">·</span>
|
||||
<span class="key game"></span> Juego
|
||||
<span class="sep" v-if="selectedUuids.length">·</span>
|
||||
<span class="key player" v-if="selectedUuids.length"></span> Jugadores
|
||||
<span class="sep" v-if="selectedRoomIds.length">·</span>
|
||||
<span class="key room" v-if="selectedRoomIds.length"></span> Salas
|
||||
</div>
|
||||
|
||||
<!-- Round/Game filters colocated with player filter -->
|
||||
<div class="secondary-filters">
|
||||
<EventFilters
|
||||
:round-filter="eventFilters.roundFilter.value"
|
||||
:game-filter="eventFilters.gameFilter.value"
|
||||
:has-active-filters="eventFilters.hasActiveFilters.value"
|
||||
:filter-summary="eventFilters.filterSummary.value"
|
||||
@update:round-filter="eventFilters.roundFilter.value = $event"
|
||||
@update:game-filter="eventFilters.gameFilter.value = $event"
|
||||
@reset-filters="eventFilters.resetFilters"
|
||||
/>
|
||||
</div>
|
||||
<div class="player-chips">
|
||||
<hr class="divider" />
|
||||
|
||||
<!-- Ronda / Juego -->
|
||||
<EventFilters
|
||||
:round-filter="eventFilters.roundFilter.value"
|
||||
:game-filter="eventFilters.gameFilter.value"
|
||||
:has-active-filters="false"
|
||||
:filter-summary="''"
|
||||
:compact="true"
|
||||
@update:round-filter="eventFilters.roundFilter.value = $event; onRoundGameChange()"
|
||||
@update:game-filter="eventFilters.gameFilter.value = $event; onRoundGameChange()"
|
||||
@reset-filters="eventFilters.resetFilters"
|
||||
/>
|
||||
<hr class="divider" />
|
||||
|
||||
<div class="player-chips compact">
|
||||
<div class="search-controls">
|
||||
<input class="search" v-model="search" placeholder="Buscar jugador…" />
|
||||
<div class="pagination compact" v-if="pageCount > 1">
|
||||
@@ -108,18 +118,19 @@
|
||||
:class="{ active: selectedUuids.includes(p.uuid) }"
|
||||
@click="togglePlayer(p.uuid)"
|
||||
:title="p.uuid"
|
||||
:style="{ '--primary': p.color || '#667eea' } as any"
|
||||
:style="({ '--primary': p.color || '#667eea' } as any)"
|
||||
>
|
||||
<span class="avatar">{{ initials(p.name) }}</span>
|
||||
<span class="label">{{ p.name || 'Jugador' }}</span>
|
||||
</button>
|
||||
<button v-if="selectedUuids.length" class="chip clear" @click="clearPlayers">Quitar selección</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Room slice UI removida: reemplazada por rango de tiempo/activas -->
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
|
||||
<EventChart
|
||||
:event-types="ALL_CHART_TYPES"
|
||||
@@ -246,6 +257,17 @@ function applyTimeMode() {
|
||||
eventFilters.applyFilters(EVENTS);
|
||||
}
|
||||
|
||||
function clearTimeFilter() {
|
||||
// Switch to active rooms and set a 1-minute window ending now for consistency
|
||||
timeMode.value = 'active';
|
||||
const now = new Date();
|
||||
rangeToStr.value = fmtLocal(now);
|
||||
const from = new Date(now.getTime() - 60 * 1000);
|
||||
rangeFromStr.value = fmtLocal(from);
|
||||
liveEnd.value = true;
|
||||
applyTimeMode();
|
||||
}
|
||||
|
||||
function toggleLiveEnd() {
|
||||
liveEnd.value = !liveEnd.value;
|
||||
if (liveEnd.value) {
|
||||
@@ -674,11 +696,57 @@ function copyRaw() {
|
||||
} catch {}
|
||||
}
|
||||
|
||||
function quickRange(minutes: number) {
|
||||
const now = new Date();
|
||||
const from = new Date(now.getTime() - minutes * 60 * 1000);
|
||||
// Indicator labels
|
||||
const periodLabel = computed(() => {
|
||||
if (timeMode.value === 'active') return 'Salas activas';
|
||||
const from = (rangeFromStr.value || '').replace('T', ' ');
|
||||
const to = (rangeToStr.value || '').replace('T', ' ');
|
||||
return `${from} → ${to}${liveEnd.value ? ' (ahora)' : ''}`;
|
||||
});
|
||||
const roundActive = computed(() => eventFilters.roundFilter.value.length > 0);
|
||||
const gameActive = computed(() => eventFilters.gameFilter.value.length > 0);
|
||||
const roundLabel = computed(() => `Ronda: ${eventFilters.roundFilter.value.join(',')}`);
|
||||
const gameLabel = computed(() => `Juego: ${eventFilters.gameFilter.value.join(',')}`);
|
||||
|
||||
function onRoundGameChange() {
|
||||
eventFilters.applyFilters(EVENTS);
|
||||
computeMetricsFromScores();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function incrementFrom(n: number, unit: 'm'|'h'|'d'|'mo'|'y') {
|
||||
// Ensure we are in range mode to apply manual adjustments
|
||||
if (timeMode.value !== 'range') {
|
||||
timeMode.value = 'range';
|
||||
}
|
||||
// Determine current 'to' reference (now when liveEnd is enabled)
|
||||
const to = liveEnd.value ? new Date() : new Date(Date.parse(rangeToStr.value || ''));
|
||||
if (Number.isNaN(to.getTime())) {
|
||||
// Initialize to now if empty/invalid
|
||||
to.setTime(Date.now());
|
||||
}
|
||||
// Parse current 'from' or initialize to a sensible default window
|
||||
let from = new Date(Date.parse(rangeFromStr.value || ''));
|
||||
if (Number.isNaN(from.getTime())) {
|
||||
from = new Date(to.getTime());
|
||||
}
|
||||
// Apply incremental increase to 'from'
|
||||
// Move 'Desde' backwards in time by the chosen amount (expand window)
|
||||
if (unit === 'm') from.setMinutes(from.getMinutes() - n);
|
||||
else if (unit === 'h') from.setHours(from.getHours() - n);
|
||||
else if (unit === 'd') from.setDate(from.getDate() - n);
|
||||
else if (unit === 'mo') from.setMonth(from.getMonth() - n);
|
||||
else if (unit === 'y') from.setFullYear(from.getFullYear() - n);
|
||||
|
||||
// Clamp to keep at least 1 minute window and never exceed 'to'
|
||||
const minWindowMs = 60 * 1000;
|
||||
if (to.getTime() - from.getTime() < minWindowMs) {
|
||||
from = new Date(to.getTime() - minWindowMs);
|
||||
}
|
||||
|
||||
rangeFromStr.value = fmtLocal(from);
|
||||
rangeToStr.value = fmtLocal(now);
|
||||
rangeToStr.value = fmtLocal(to);
|
||||
applyTimeMode();
|
||||
}
|
||||
|
||||
@@ -956,17 +1024,19 @@ function downloadJSON() {
|
||||
|
||||
.glass.light { background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(229, 231, 235, 0.95); box-shadow: 0 18px 50px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.75); backdrop-filter: blur(18px) saturate(120%); -webkit-backdrop-filter: blur(18px) saturate(120%); border-radius: 16px; }
|
||||
|
||||
.header { display:flex; align-items:center; justify-content:space-between; gap: 8px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; }
|
||||
.header { display:flex; flex-direction: column; gap: 6px; padding: 8px 10px; margin-bottom: 10px; }
|
||||
.header-row { display:flex; align-items:center; justify-content:space-between; gap: 8px; flex-wrap: nowrap; }
|
||||
.header h1 { margin: 0; font-size: 18px; line-height: 1.2; flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 8px; }
|
||||
.header-left { display:flex; align-items:center; gap: 10px; flex: 1 1 auto; min-width: 200px; }
|
||||
.header-left { display:flex; align-items:center; gap: 10px; flex: 1 1 auto; min-width: 0; }
|
||||
.btn-back { background:#667eea; color:#fff; border:none; border-radius:6px; padding:6px 10px; font-weight:600; cursor:pointer; transition: all 0.3s ease; font-size: 12px; }
|
||||
.btn-back:hover { background:#5b6bda; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); }
|
||||
.actions { display:flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 1 1 280px; }
|
||||
.actions { display:flex; gap: 6px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
|
||||
.actions .btn { background:#667eea; color:#fff; border:none; border-radius:6px; padding:4px 8px; font-weight:800; font-size: 11px; cursor:pointer; }
|
||||
.actions .btn.toggle { background:#eef2ff; color:#3949ab; border:1px solid #c7d2fe; }
|
||||
.actions .btn.toggle.active { background:#3949ab; color:#fff; border-color:#2e3f9a; }
|
||||
|
||||
.controls { display:grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; margin-bottom: 14px; }
|
||||
.divider { border: 0; border-top: 1px solid rgba(203,213,225,0.6); margin: 6px 0; }
|
||||
.legend { font-size: 13px; color:#334155; display:flex; align-items:center; gap:10px; }
|
||||
.key { width: 12px; height: 12px; border-radius: 999px; display:inline-block; }
|
||||
.key.global { background: linear-gradient(90deg, #34d399, #10b981); box-shadow: 0 0 8px rgba(16,185,129,0.35); }
|
||||
@@ -1021,7 +1091,8 @@ function downloadJSON() {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
justify-content: space-between;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search {
|
||||
@@ -1046,6 +1117,11 @@ function downloadJSON() {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.player-chips.compact .search { padding: 6px 8px; min-width: 180px; font-size: 12px; }
|
||||
.player-chips.compact .chip { padding: 6px 10px; font-size: 12px; }
|
||||
.player-chips.compact .avatar { width: 20px; height: 20px; font-size: 12px; }
|
||||
.player-chips.compact .pagination.compact { padding: 3px 6px; }
|
||||
.filters-indicators .chip-x { background: transparent; border: none; color: #64748b; margin-left: 6px; cursor: pointer; font-weight: 900; }
|
||||
.secondary-filters { margin: 6px 0 4px; }
|
||||
.chip { display:flex; align-items:center; gap:8px; background: color-mix(in srgb, var(--primary) 6%, white); border:1px solid color-mix(in srgb, var(--primary) 24%, #e5e7eb); padding:8px 12px; border-radius: 999px; color:#111827; cursor:pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
|
||||
.chip:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 10%, white); box-shadow: 0 6px 18px rgba(102,126,234,0.18); }
|
||||
@@ -1134,6 +1210,11 @@ function downloadJSON() {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Compact filter indicators */
|
||||
.filters-indicators { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 4px 0; margin: 6px 0 0; }
|
||||
.marker-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 999px; border: none; background: transparent; color: #334155; font-size: 12px; font-weight: 700; }
|
||||
.marker-chip.clickable { cursor: pointer; }
|
||||
|
||||
/* Raw payload styles */
|
||||
.raw-viewer { margin-top: 14px; padding: 12px; border-radius: 14px; }
|
||||
.raw-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
@@ -1142,16 +1223,17 @@ function downloadJSON() {
|
||||
.raw-pre { max-height: 420px; overflow: auto; background: #0b1020; color: #e5e7eb; padding: 12px; border-radius: 10px; font-size: 12px; line-height: 1.4; border: 1px solid #1f2937; }
|
||||
|
||||
/* Time selector styles */
|
||||
.time-selector { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px; margin-bottom: 12px; align-items: center; }
|
||||
.mode-buttons { display: flex; gap: 6px; }
|
||||
.time-selector { align-items: center; }
|
||||
.mode-buttons { display: flex; gap: 6px; margin-bottom: 10px; }
|
||||
.mode-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 800; font-size: 12px; cursor: pointer; }
|
||||
.mode-btn.active { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; border-color: #667eea; }
|
||||
.range-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||
.range-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
|
||||
.range-inputs.disabled { opacity: 0.6; filter: grayscale(0.1); }
|
||||
.range-inputs label { display: flex; gap: 6px; align-items: center; font-weight: 700; color: #334155; }
|
||||
.range-inputs input[type="datetime-local"] { padding: 6px 8px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 12px; }
|
||||
.live-btn { padding: 6px 10px; border-radius: 8px; border: 1px solid #cbd5e1; background: #fff; color: #334155; font-weight: 800; font-size: 12px; cursor: pointer; }
|
||||
.live-btn.active { background: linear-gradient(135deg, #06b6d4 0%, #8b5cf6 100%); color: #fff; border-color: #06b6d4; }
|
||||
.key.time { background: linear-gradient(90deg, #f59e0b, #d97706); box-shadow: 0 0 8px rgba(245,158,11,0.35); }
|
||||
|
||||
|
||||
/* Filters section styles */
|
||||
@@ -1219,13 +1301,10 @@ function downloadJSON() {
|
||||
.header { padding: 6px 8px; margin-bottom: 8px; }
|
||||
.header h1 { font-size: 16px; }
|
||||
.btn-back { padding: 5px 8px; font-size: 11px; border-radius: 6px; }
|
||||
.actions { gap: 6px; }
|
||||
.actions { gap: 6px; flex-wrap: nowrap; }
|
||||
.actions .btn { padding: 4px 6px; font-size: 10px; border-radius: 5px; }
|
||||
.search-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
.header-row { flex-wrap: nowrap; }
|
||||
|
||||
|
||||
.search {
|
||||
min-width: auto;
|
||||
@@ -1238,9 +1317,10 @@ function downloadJSON() {
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.header { gap: 6px; }
|
||||
.header-left { min-width: 140px; }
|
||||
.actions { justify-content: flex-start; }
|
||||
.header { gap: 4px; }
|
||||
.header-row { flex-wrap: nowrap; }
|
||||
.header-left { min-width: 120px; }
|
||||
.actions { justify-content: flex-start; flex-wrap: nowrap; }
|
||||
.btn-collapse .collapse-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user