12df6a9b06
Implements a fuzzy search filter system using Fuse.js to enhance event searching. This system allows users to quickly find events by typing partial matches of event titles or descriptions, providing visual feedback by dimming non-matching events. The filter persists during navigation and includes escape key support for quick clearing. It also includes performance optimizations like requestAnimationFrame debouncing.
237 lines
No EOL
4.3 KiB
CSS
237 lines
No EOL
4.3 KiB
CSS
/* styles/components/navigation.css */
|
|
|
|
/* Navigation groups */
|
|
swp-nav-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
/* Navigation buttons */
|
|
swp-nav-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-background);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
min-width: 40px;
|
|
height: 36px;
|
|
|
|
&:hover {
|
|
background: var(--color-surface);
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Icon buttons */
|
|
svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
stroke-width: 2;
|
|
}
|
|
|
|
/* Today button */
|
|
&[data-action="today"] {
|
|
min-width: 70px;
|
|
}
|
|
}
|
|
|
|
/* View selector */
|
|
swp-view-selector {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
swp-view-button {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
&:hover:not([disabled]) {
|
|
background: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
&[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
|
|
&:hover {
|
|
background: var(--color-primary);
|
|
}
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
/* Workweek Presets */
|
|
swp-workweek-presets {
|
|
display: flex;
|
|
background: var(--color-surface);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
margin-left: 16px;
|
|
}
|
|
|
|
swp-preset-button {
|
|
padding: 6px 12px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
transition: all var(--transition-fast);
|
|
position: relative;
|
|
color: var(--color-text-secondary);
|
|
|
|
&:not(:last-child) {
|
|
border-right: 1px solid var(--color-border);
|
|
}
|
|
|
|
|
|
&[data-active="true"] {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&[disabled] {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
|
|
/* Search container */
|
|
swp-search-container {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
swp-search-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
pointer-events: none;
|
|
color: var(--color-text-secondary);
|
|
|
|
svg {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
input[type="search"] {
|
|
padding: 8px 36px 8px 36px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 20px;
|
|
background: var(--color-surface);
|
|
font-size: 0.875rem;
|
|
width: 250px;
|
|
transition: all var(--transition-fast);
|
|
|
|
&::-webkit-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
background: var(--color-background);
|
|
width: 300px;
|
|
}
|
|
|
|
&::placeholder {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
}
|
|
|
|
swp-search-clear {
|
|
position: absolute;
|
|
right: 8px;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
transition: all var(--transition-fast);
|
|
|
|
&:hover {
|
|
background: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
stroke: var(--color-text-secondary);
|
|
}
|
|
|
|
&[hidden] {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Visual indication when filter is active */
|
|
swp-search-container.filter-active input {
|
|
border-color: var(--color-primary);
|
|
background: rgba(33, 150, 243, 0.05);
|
|
}
|
|
|
|
/* Calendar search active state */
|
|
swp-calendar[data-searching="true"] {
|
|
swp-event {
|
|
opacity: 0.15;
|
|
transition: opacity var(--transition-normal);
|
|
|
|
&[data-search-match="true"] {
|
|
opacity: 1;
|
|
box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.3);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Week info display */
|
|
swp-week-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 2px;
|
|
}
|
|
|
|
swp-week-number {
|
|
font-size: 1.125rem;
|
|
font-weight: 600;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
swp-date-range {
|
|
font-size: 0.875rem;
|
|
color: var(--color-text-secondary);
|
|
} |