torbjorn/antigravity-claude-proxy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add filter control styles for time range dropdown

Browse Source 
Introduce new CSS classes for filter controls and apply them to the time range dropdown in the dashboard view, improving consistency and hover effects.
This commit is contained in:
jgor20
2026-01-11 15:06:20 +00:00
parent 5993456620
commit fc35b71c2b
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
public/css/src/input.css
View File

@@ -366,6 +366,25 @@
/* Refactored UI Components (Phase 1.2) */ /* Refactored UI Components (Phase 1.2) */
/* -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- */
/* Phase 1.2 additions ... */
/* Filter Controls */
.filter-control {
@apply flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2
text-[10px] lg:text-xs font-mono font-medium text-gray-400
bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent
rounded lg:rounded-md hover:text-white lg:hover:bg-space-800
transition-all duration-200 whitespace-nowrap w-full sm:w-auto;
}
.filter-control:hover {
@apply border-neon-cyan/50 lg:border-neon-cyan/30 lg:shadow-lg lg:shadow-neon-cyan/10;
}
.filter-control-item {
@apply w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors;
}
/* Action Buttons */ /* Action Buttons */
.btn-action-ghost { .btn-action-ghost {
@apply btn btn-xs btn-ghost text-gray-400 hover:text-white transition-colors; @apply btn btn-xs btn-ghost text-gray-400 hover:text-white transition-colors;

2
public/css/style.css generated
View File

File diff suppressed because one or more lines are too long

12
public/views/dashboard.html
View File

@@ -241,7 +241,7 @@
<!-- Time Range Dropdown --> <!-- Time Range Dropdown -->
<div class="relative flex-1 sm:flex-none"> <div class="relative flex-1 sm:flex-none">
<button @click="showTimeRangeDropdown = !showTimeRangeDropdown; showDisplayModeDropdown = false; showModelFilter = false" <button @click="showTimeRangeDropdown = !showTimeRangeDropdown; showDisplayModeDropdown = false; showModelFilter = false"
class="flex items-center justify-center gap-2 px-3 py-1.5 lg:px-4 lg:py-2 text-[10px] lg:text-xs font-mono font-medium text-gray-400 bg-space-800 lg:bg-transparent border border-space-border/50 lg:border-transparent rounded lg:rounded-md hover:text-white lg:hover:bg-space-800 hover:border-neon-cyan/50 lg:hover:border-neon-cyan/30 lg:hover:shadow-lg lg:hover:shadow-neon-cyan/10 transition-all duration-200 whitespace-nowrap w-full sm:w-auto"> class="filter-control">
<svg class="w-3.5 h-3.5 lg:w-4 lg:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <svg class="w-3.5 h-3.5 lg:w-4 lg:h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /> d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -259,19 +259,19 @@
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
class="absolute right-0 mt-1 w-36 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden py-1" class="absolute right-0 mt-1 w-36 bg-space-900 border border-space-border rounded-lg shadow-xl z-50 overflow-hidden py-1"
style="display: none;"> style="display: none;">
<button @click="setTimeRange('1h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors" <button @click="setTimeRange('1h')" class="filter-control-item"
:class="timeRange === '1h' ? 'text-neon-cyan' : 'text-gray-400'" :class="timeRange === '1h' ? 'text-neon-cyan' : 'text-gray-400'"
x-text="$store.global.t('last1Hour')"></button> x-text="$store.global.t('last1Hour')"></button>
<button @click="setTimeRange('6h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors" <button @click="setTimeRange('6h')" class="filter-control-item"
:class="timeRange === '6h' ? 'text-neon-cyan' : 'text-gray-400'" :class="timeRange === '6h' ? 'text-neon-cyan' : 'text-gray-400'"
x-text="$store.global.t('last6Hours')"></button> x-text="$store.global.t('last6Hours')"></button>
<button @click="setTimeRange('24h')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors" <button @click="setTimeRange('24h')" class="filter-control-item"
:class="timeRange === '24h' ? 'text-neon-cyan' : 'text-gray-400'" :class="timeRange === '24h' ? 'text-neon-cyan' : 'text-gray-400'"
x-text="$store.global.t('last24Hours')"></button> x-text="$store.global.t('last24Hours')"></button>
<button @click="setTimeRange('7d')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors" <button @click="setTimeRange('7d')" class="filter-control-item"
:class="timeRange === '7d' ? 'text-neon-cyan' : 'text-gray-400'" :class="timeRange === '7d' ? 'text-neon-cyan' : 'text-gray-400'"
x-text="$store.global.t('last7Days')"></button> x-text="$store.global.t('last7Days')"></button>
<button @click="setTimeRange('all')" class="w-full px-3 py-1.5 text-left text-[10px] font-mono hover:bg-white/5 transition-colors" <button @click="setTimeRange('all')" class="filter-control-item"
:class="timeRange === 'all' ? 'text-neon-cyan' : 'text-gray-400'" :class="timeRange === 'all' ? 'text-neon-cyan' : 'text-gray-400'"
x-text="$store.global.t('allTime')"></button> x-text="$store.global.t('allTime')"></button>
</div> </div>