Compare commits
5 Commits
55fc23ec64
...
feat/add-s
| Author | SHA1 | Date | |
|---|---|---|---|
|
f5e16c44b3 | ||
| c5ca511ea7 | |||
|
|
42057ddb1c | ||
| 1a37afd16f | |||
|
|
f7b611bbbe |
@@ -2,6 +2,7 @@
|
|||||||
<html lang="ru">
|
<html lang="ru">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Календарь стартов</title>
|
<title>Календарь стартов</title>
|
||||||
</head>
|
</head>
|
||||||
|
|||||||
4
frontend/package-lock.json
generated
4
frontend/package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "calendar-run-frontend",
|
"name": "calendar-run-frontend",
|
||||||
"version": "0.5.0",
|
"version": "0.5.2",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "calendar-run-frontend",
|
"name": "calendar-run-frontend",
|
||||||
"version": "0.5.0",
|
"version": "0.5.2",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "calendar-run-frontend",
|
"name": "calendar-run-frontend",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.5.0",
|
"version": "0.5.2",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
|
|||||||
24
frontend/public/favicon.svg
Normal file
24
frontend/public/favicon.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Календарь стартов">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="bg" x1="12" y1="4" x2="52" y2="60" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop offset="0" stop-color="#1168d8" />
|
||||||
|
<stop offset="1" stop-color="#071927" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="64" height="64" rx="16" fill="url(#bg)" />
|
||||||
|
<path
|
||||||
|
d="M18 20h28a5 5 0 0 1 5 5v21a5 5 0 0 1-5 5H18a5 5 0 0 1-5-5V25a5 5 0 0 1 5-5Z"
|
||||||
|
fill="#ffffff"
|
||||||
|
/>
|
||||||
|
<path d="M13 29h38" stroke="#d6e1ea" stroke-width="4" />
|
||||||
|
<path d="M23 14v11M41 14v11" stroke="#b9f24a" stroke-width="5" stroke-linecap="round" />
|
||||||
|
<path
|
||||||
|
d="M22 41c5-8 13-8 18 0M22 41h18"
|
||||||
|
fill="none"
|
||||||
|
stroke="#1168d8"
|
||||||
|
stroke-width="5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
/>
|
||||||
|
<circle cx="44" cy="44" r="5" fill="#ff6f5e" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 890 B |
@@ -228,6 +228,25 @@ export function RacesPage(): JSX.Element {
|
|||||||
}),
|
}),
|
||||||
[races],
|
[races],
|
||||||
);
|
);
|
||||||
|
const statusMessage = useMemo(() => {
|
||||||
|
if (errorMessage && !isLoading) {
|
||||||
|
return errorMessage;
|
||||||
|
}
|
||||||
|
if (isLoading) {
|
||||||
|
return "Загружаем данные...";
|
||||||
|
}
|
||||||
|
if (viewMode === "calendar" && monthFilter === "") {
|
||||||
|
return "Выберите месяц, чтобы увидеть его крупным планом.";
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}, [errorMessage, isLoading, monthFilter, viewMode]);
|
||||||
|
const statusClassName = [
|
||||||
|
"races-status__message",
|
||||||
|
!statusMessage ? "races-status__message--empty" : "",
|
||||||
|
errorMessage && !isLoading ? "races-status__message--error" : "",
|
||||||
|
]
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(" ");
|
||||||
|
|
||||||
if (errorMessage && races.length === 0 && !isLoading) {
|
if (errorMessage && races.length === 0 && !isLoading) {
|
||||||
return (
|
return (
|
||||||
@@ -301,21 +320,16 @@ export function RacesPage(): JSX.Element {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{errorMessage && !isLoading ? (
|
<div className="races-status" aria-live="polite">
|
||||||
<p className="page__subtitle page__subtitle--error" role="alert" style={{ marginTop: "var(--space-4)" }}>
|
<p
|
||||||
{errorMessage}
|
className={statusClassName}
|
||||||
|
role={errorMessage && !isLoading ? "alert" : undefined}
|
||||||
|
aria-busy={isLoading || undefined}
|
||||||
|
aria-hidden={!statusMessage || undefined}
|
||||||
|
>
|
||||||
|
{statusMessage || "\u00a0"}
|
||||||
</p>
|
</p>
|
||||||
) : null}
|
</div>
|
||||||
|
|
||||||
{viewMode === "calendar" && monthFilter === "" ? (
|
|
||||||
<p className="page__subtitle races-cal__filter-hint">Выберите месяц, чтобы увидеть его крупным планом.</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{isLoading ? (
|
|
||||||
<p className="page__subtitle" aria-busy="true">
|
|
||||||
Загружаем данные...
|
|
||||||
</p>
|
|
||||||
) : null}
|
|
||||||
|
|
||||||
{viewMode === "list" ? (
|
{viewMode === "list" ? (
|
||||||
<div className="race-lists">
|
<div className="race-lists">
|
||||||
|
|||||||
@@ -967,6 +967,25 @@ a {
|
|||||||
margin-top: var(--space-6);
|
margin-top: var(--space-6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.races-status {
|
||||||
|
min-height: calc(var(--line-height-base) * var(--font-size-caption));
|
||||||
|
margin-top: var(--space-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.races-status__message {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-muted);
|
||||||
|
font-size: var(--font-size-caption);
|
||||||
|
}
|
||||||
|
|
||||||
|
.races-status__message--empty {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.races-status__message--error {
|
||||||
|
color: var(--color-danger);
|
||||||
|
}
|
||||||
|
|
||||||
.races-cal__filter-hint {
|
.races-cal__filter-hint {
|
||||||
margin-top: var(--space-3);
|
margin-top: var(--space-3);
|
||||||
color: var(--color-text-muted);
|
color: var(--color-text-muted);
|
||||||
|
|||||||
Reference in New Issue
Block a user