WebAuthn biometric + PWA widget + UI header fixes + mobile responsive
- WebAuthn: register/auth options, device management - PWA widget page + manifest shortcuts - Group schedule endpoint (timezones + locations) - UI #3-#6: compact headers on tasks/calendar/projects/goals - UI #9: mobile responsive top bars - webauthn_credentials table Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -254,20 +254,39 @@ main {
|
||||
}
|
||||
|
||||
/* ============================
|
||||
FullCalendar Mobile Layout Fix
|
||||
FullCalendar Compact Layout
|
||||
============================ */
|
||||
|
||||
/* Base toolbar styles - compact */
|
||||
/* Single-row toolbar: date + nav + view switcher all in one line */
|
||||
.fc .fc-toolbar {
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 8px;
|
||||
row-gap: 6px;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
/* Title: prevent vertical text wrapping */
|
||||
/* Each toolbar chunk inline */
|
||||
.fc .fc-toolbar-chunk {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Center chunk (title) takes remaining space, truncates */
|
||||
.fc .fc-toolbar-chunk:nth-child(2) {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Title: compact, truncates */
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 18px !important;
|
||||
font-size: 16px !important;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -275,56 +294,49 @@ main {
|
||||
|
||||
/* Compact buttons */
|
||||
.fc .fc-button {
|
||||
padding: 4px 10px !important;
|
||||
font-size: 13px !important;
|
||||
line-height: 1.4 !important;
|
||||
padding: 4px 8px !important;
|
||||
font-size: 12px !important;
|
||||
line-height: 1.3 !important;
|
||||
min-height: 32px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
/* Button group: no extra gaps */
|
||||
/* Button group: pill shape */
|
||||
.fc .fc-button-group {
|
||||
gap: 0;
|
||||
}
|
||||
.fc .fc-button-group .fc-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.fc .fc-button-group .fc-button:first-child {
|
||||
border-radius: 9999px 0 0 9999px !important;
|
||||
}
|
||||
.fc .fc-button-group .fc-button:last-child {
|
||||
border-radius: 0 9999px 9999px 0 !important;
|
||||
}
|
||||
|
||||
/* Mobile breakpoint: stack toolbar rows */
|
||||
/* Mobile: tighten further but keep single row */
|
||||
@media (max-width: 640px) {
|
||||
.fc .fc-toolbar {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.fc .fc-toolbar-chunk {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Title on its own row, centered, smaller */
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 15px !important;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
order: -1;
|
||||
font-size: 13px !important;
|
||||
}
|
||||
|
||||
/* Smaller buttons on mobile */
|
||||
.fc .fc-button {
|
||||
padding: 3px 8px !important;
|
||||
font-size: 12px !important;
|
||||
padding: 3px 6px !important;
|
||||
font-size: 11px !important;
|
||||
min-height: 32px !important;
|
||||
}
|
||||
|
||||
/* View switcher as pill buttons */
|
||||
.fc .fc-button-group .fc-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
.fc .fc-button-group .fc-button:first-child {
|
||||
border-radius: 9999px 0 0 9999px !important;
|
||||
}
|
||||
.fc .fc-button-group .fc-button:last-child {
|
||||
border-radius: 0 9999px 9999px 0 !important;
|
||||
/* Hide text labels on smallest screens - show abbreviated */
|
||||
.fc .fc-dayGridMonth-button,
|
||||
.fc .fc-timeGridWeek-button,
|
||||
.fc .fc-timeGridDay-button {
|
||||
font-size: 10px !important;
|
||||
padding: 3px 5px !important;
|
||||
}
|
||||
|
||||
/* Reduce page padding */
|
||||
@@ -339,22 +351,26 @@ main {
|
||||
|
||||
/* Day header smaller */
|
||||
.fc .fc-col-header-cell-cushion {
|
||||
font-size: 12px;
|
||||
padding: 4px 2px;
|
||||
font-size: 11px;
|
||||
padding: 3px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small mobile (< 400px) - even tighter */
|
||||
@media (max-width: 400px) {
|
||||
.fc .fc-toolbar-title {
|
||||
font-size: 13px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
.fc .fc-button {
|
||||
padding: 2px 6px !important;
|
||||
font-size: 11px !important;
|
||||
padding: 2px 4px !important;
|
||||
font-size: 10px !important;
|
||||
min-height: 28px !important;
|
||||
}
|
||||
|
||||
.fc .fc-today-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Status dot pulse animation for in_progress tasks */
|
||||
@@ -366,3 +382,41 @@ main {
|
||||
.status-dot-active {
|
||||
animation: statusPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ============================
|
||||
Mobile Responsive Compact Headers (#9)
|
||||
============================ */
|
||||
|
||||
/* Ensure no horizontal overflow on any page */
|
||||
@media (max-width: 640px) {
|
||||
main {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Page action bars: single row, no wrap */
|
||||
.flex.items-center.justify-between {
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Touch targets minimum 44px on mobile */
|
||||
button,
|
||||
a[role='button'],
|
||||
[role='button'] {
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
/* Exception: status pills and small inline elements */
|
||||
.scrollbar-hide button,
|
||||
.fc button {
|
||||
min-width: auto;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
/* Compact text on mobile */
|
||||
h1 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user