Styling fix and scraper bug fix
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { ReactNode } from 'react'
|
||||
import './footer.css'
|
||||
|
||||
export function Footer(): ReactNode {
|
||||
const currentYear = new Date().getFullYear()
|
||||
|
||||
@@ -4,6 +4,7 @@ import { useAuth } from '@/context/AuthContext'
|
||||
import { useWorkspace } from '@/context/WorkspaceContext'
|
||||
import { Header, HeaderProps } from './Header'
|
||||
import { Footer } from './Footer'
|
||||
import './layout.css'
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
footer {
|
||||
margin-top: var(--sp-8);
|
||||
padding: var(--sp-5);
|
||||
border-top: 1px solid var(--c-border);
|
||||
background-color: var(--c-bg);
|
||||
text-align: center;
|
||||
color: var(--c-text-muted);
|
||||
}
|
||||
|
||||
footer p {
|
||||
margin: 0;
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
@@ -1,83 +1,113 @@
|
||||
.header {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
padding: 16px 20px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--c-surface);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
padding: var(--sp-4) var(--sp-5);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.header__top {
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto var(--sp-4);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.header__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: 700;
|
||||
color: var(--c-text);
|
||||
}
|
||||
|
||||
.header__identity {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
|
||||
.header__parent-name {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header__child-select {
|
||||
padding: 6px 10px;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius);
|
||||
font-size: var(--fs-sm);
|
||||
background-color: var(--c-surface);
|
||||
color: var(--c-text);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.header__child-select:focus {
|
||||
outline: none;
|
||||
border-color: var(--c-accent);
|
||||
box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.1);
|
||||
}
|
||||
|
||||
.header__child-name {
|
||||
font-size: 14px;
|
||||
color: #0066cc;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-accent);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.header__nav {
|
||||
max-width: var(--maxw);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: var(--sp-3);
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header__nav-link {
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
padding: var(--sp-2) var(--sp-4);
|
||||
font-size: var(--fs-sm);
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s;
|
||||
color: var(--c-text);
|
||||
border-radius: var(--radius);
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.header__nav-link:hover {
|
||||
background-color: #e8e8e8;
|
||||
background-color: var(--c-bg);
|
||||
}
|
||||
|
||||
.header__nav-link:focus-visible {
|
||||
outline: 2px solid var(--c-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.header__nav-link--active {
|
||||
background-color: #0066cc;
|
||||
color: #fff;
|
||||
background-color: var(--c-accent);
|
||||
color: var(--c-surface);
|
||||
border-bottom-color: var(--c-accent);
|
||||
}
|
||||
|
||||
.header__logout-button {
|
||||
padding: 8px 14px;
|
||||
font-size: 14px;
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #d0d0d0;
|
||||
border-radius: 4px;
|
||||
padding: var(--sp-2) var(--sp-4);
|
||||
font-size: var(--fs-sm);
|
||||
background-color: transparent;
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius);
|
||||
color: var(--c-text);
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
transition: background-color 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.header__logout-button:hover {
|
||||
background-color: #e8e8e8;
|
||||
background-color: var(--c-bg);
|
||||
border-color: var(--c-accent);
|
||||
}
|
||||
|
||||
.header__logout-button:focus-visible {
|
||||
outline: 2px solid var(--c-accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
/* Layout container */
|
||||
[data-testid='layout'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
background-color: var(--c-bg);
|
||||
}
|
||||
|
||||
[data-testid='layout-main'] {
|
||||
flex: 1;
|
||||
max-width: var(--maxw);
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: var(--sp-5);
|
||||
}
|
||||
|
||||
/* Dashboard & Pages */
|
||||
.dashboard,
|
||||
.calendar,
|
||||
.settings-page,
|
||||
.tips-page,
|
||||
.auth-page {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard__section,
|
||||
.settings-page__section,
|
||||
.calendar__section,
|
||||
.tips-page__section {
|
||||
background-color: var(--c-surface);
|
||||
border: 1px solid var(--c-border);
|
||||
border-radius: var(--radius);
|
||||
padding: var(--sp-5);
|
||||
margin-bottom: var(--sp-5);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.dashboard__section:last-child,
|
||||
.settings-page__section:last-child,
|
||||
.calendar__section:last-child,
|
||||
.tips-page__section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.dashboard__section h2,
|
||||
.settings-page__section h2,
|
||||
.calendar__section h2,
|
||||
.tips-page__section h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.dashboard__error {
|
||||
padding: var(--sp-4);
|
||||
background-color: var(--c-danger-weak);
|
||||
color: var(--c-danger);
|
||||
border-left: 4px solid var(--c-danger);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--sp-5);
|
||||
}
|
||||
|
||||
.dashboard__break-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dashboard__break-item {
|
||||
padding: var(--sp-3) var(--sp-4);
|
||||
border-bottom: 1px solid var(--c-border);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard__break-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dashboard__break-item strong {
|
||||
display: block;
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
||||
.dashboard__break-item small {
|
||||
color: var(--c-text-muted);
|
||||
font-size: var(--fs-sm);
|
||||
}
|
||||
|
||||
/* Status & Freshness Info */
|
||||
.status-info,
|
||||
.freshness-info {
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--c-text-muted);
|
||||
margin-top: var(--sp-3);
|
||||
padding-top: var(--sp-3);
|
||||
border-top: 1px solid var(--c-border);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
[data-testid='layout-main'] {
|
||||
padding: var(--sp-4);
|
||||
}
|
||||
|
||||
.dashboard__section,
|
||||
.settings-page__section,
|
||||
.calendar__section,
|
||||
.tips-page__section {
|
||||
padding: var(--sp-4);
|
||||
margin-bottom: var(--sp-4);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user