mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
fix(docs): dates and responsive design in milestone page (#4606)
* fix: dates and responsive design * fix: overflow * add tags for birthday * use cake for birthday icon * use uppercase for enum
This commit is contained in:
parent
c6b4bc883b
commit
64e4ae7e4b
@ -10,6 +10,12 @@ export interface Item {
|
||||
release: string;
|
||||
tag?: string;
|
||||
date: Date;
|
||||
dateType: DateType;
|
||||
}
|
||||
|
||||
export enum DateType {
|
||||
RELEASE = 'Release Date',
|
||||
DATE = 'Date',
|
||||
}
|
||||
|
||||
interface Props {
|
||||
@ -50,7 +56,7 @@ export default function Timeline({ items }: Props): JSX.Element {
|
||||
<div className="z-10 flex items-center bg-immich-primary dark:bg-immich-dark-primary border-2 border-solid rounded-full dark:text-black text-white relative top-[50%] left-[-3px] translate-y-[-50%] translate-x-[-50%] w-8 h-8 shadow-lg ">
|
||||
<Icon path={mdiCheckboxMarkedCircleOutline} size={1.25} />
|
||||
</div>
|
||||
<section className=" dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl flex flex-col w-full gap-2 p-4 ml-4 my-2 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 transition-all">
|
||||
<section className=" dark:bg-immich-dark-gray bg-immich-gray dark:border-0 border-gray-200 border border-solid rounded-2xl flex flex-col w-full gap-2 p-4 md:ml-4 my-2 hover:bg-immich-primary/10 dark:hover:bg-immich-dark-primary/10 transition-all">
|
||||
<div className="m-0 text-lg flex w-full items-center justify-between gap-2">
|
||||
<p className="m-0 items-start flex gap-2">
|
||||
<Icon path={item.icon} size={1} />
|
||||
@ -67,14 +73,12 @@ export default function Timeline({ items }: Props): JSX.Element {
|
||||
[{item.release}]{' '}
|
||||
</a>
|
||||
) : (
|
||||
<span>
|
||||
[{item.release} {isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}]
|
||||
</span>
|
||||
<span>[{item.release}]</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="md:hidden text-xs">
|
||||
Release Date - {isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}
|
||||
{`${item.dateType} - ${isBrowser ? item.date.toLocaleDateString(navigator.language) : ''}`}
|
||||
</div>
|
||||
<p className="m-0 text-sm text-gray-600 dark:text-gray-300">{item.description}</p>
|
||||
</section>
|
||||
|
@ -4,6 +4,7 @@ import {
|
||||
mdiAppleIos,
|
||||
mdiArchiveOutline,
|
||||
mdiBookSearchOutline,
|
||||
mdiCakeVariant,
|
||||
mdiCheckAll,
|
||||
mdiCheckboxMarked,
|
||||
mdiCollage,
|
||||
@ -43,7 +44,7 @@ import {
|
||||
} from '@mdi/js';
|
||||
import Layout from '@theme/Layout';
|
||||
import React from 'react';
|
||||
import Timeline, { Item } from '../components/timeline';
|
||||
import Timeline, { DateType, Item } from '../components/timeline';
|
||||
|
||||
const items: Item[] = [
|
||||
{
|
||||
@ -53,6 +54,7 @@ const items: Item[] = [
|
||||
release: 'v1.82.0',
|
||||
tag: 'v1.82.0',
|
||||
date: new Date(2023, 9, 17),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiBookSearchOutline,
|
||||
@ -61,6 +63,7 @@ const items: Item[] = [
|
||||
release: 'v1.79.0',
|
||||
tag: 'v1.79.0',
|
||||
date: new Date(2023, 8, 21),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMap,
|
||||
@ -69,6 +72,7 @@ const items: Item[] = [
|
||||
release: 'v1.76.0',
|
||||
tag: 'v1.76.0',
|
||||
date: new Date(2023, 7, 29),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFile,
|
||||
@ -77,6 +81,7 @@ const items: Item[] = [
|
||||
release: 'v1.75.0',
|
||||
tag: 'v1.75.0',
|
||||
date: new Date(2023, 7, 26),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMonitor,
|
||||
@ -85,6 +90,7 @@ const items: Item[] = [
|
||||
release: 'v1.75.0',
|
||||
tag: 'v1.75.0',
|
||||
date: new Date(2023, 7, 26),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiServer,
|
||||
@ -93,6 +99,7 @@ const items: Item[] = [
|
||||
release: 'v1.72.0',
|
||||
tag: 'v1.72.0',
|
||||
date: new Date(2023, 7, 6),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImageAlbum,
|
||||
@ -101,6 +108,7 @@ const items: Item[] = [
|
||||
release: 'v1.72.0',
|
||||
tag: 'v1.72.0',
|
||||
date: new Date(2023, 7, 6),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImageAlbum,
|
||||
@ -109,6 +117,7 @@ const items: Item[] = [
|
||||
release: 'v1.72.0',
|
||||
tag: 'v1.72.0',
|
||||
date: new Date(2023, 7, 6),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiRotate360,
|
||||
@ -117,6 +126,7 @@ const items: Item[] = [
|
||||
release: 'v1.71.0',
|
||||
tag: 'v1.71.0',
|
||||
date: new Date(2023, 6, 29),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMotionPlayOutline,
|
||||
@ -125,6 +135,7 @@ const items: Item[] = [
|
||||
release: 'v1.69.0',
|
||||
tag: 'v1.69.0',
|
||||
date: new Date(2023, 6, 23),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFaceManOutline,
|
||||
@ -133,6 +144,7 @@ const items: Item[] = [
|
||||
release: 'v1.68.0',
|
||||
tag: 'v1.68.0',
|
||||
date: new Date(2023, 6, 20),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMerge,
|
||||
@ -141,6 +153,7 @@ const items: Item[] = [
|
||||
release: 'v1.67.0',
|
||||
tag: 'v1.67.0',
|
||||
date: new Date(2023, 6, 14),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImage,
|
||||
@ -149,6 +162,7 @@ const items: Item[] = [
|
||||
release: 'v1.66.0',
|
||||
tag: 'v1.66.0',
|
||||
date: new Date(2023, 6, 4),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiKeyboardSettingsOutline,
|
||||
@ -157,6 +171,7 @@ const items: Item[] = [
|
||||
release: 'v1.66.0',
|
||||
tag: 'v1.66.0',
|
||||
date: new Date(2023, 6, 4),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImageMultipleOutline,
|
||||
@ -165,6 +180,7 @@ const items: Item[] = [
|
||||
release: 'v1.65.0',
|
||||
tag: 'v1.65.0',
|
||||
date: new Date(2023, 5, 30),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFaceMan,
|
||||
@ -173,6 +189,7 @@ const items: Item[] = [
|
||||
release: 'v1.63.0',
|
||||
tag: 'v1.63.0',
|
||||
date: new Date(2023, 5, 24),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImageMultipleOutline,
|
||||
@ -181,6 +198,7 @@ const items: Item[] = [
|
||||
release: 'v1.61.0',
|
||||
tag: 'v1.61.0',
|
||||
date: new Date(2023, 5, 16),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiCollage,
|
||||
@ -189,6 +207,7 @@ const items: Item[] = [
|
||||
release: 'v1.61.0',
|
||||
tag: 'v1.61.0',
|
||||
date: new Date(2023, 5, 16),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiRaw,
|
||||
@ -197,6 +216,7 @@ const items: Item[] = [
|
||||
release: 'v1.61.0',
|
||||
tag: 'v1.61.0',
|
||||
date: new Date(2023, 5, 16),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiShareAll,
|
||||
@ -205,6 +225,7 @@ const items: Item[] = [
|
||||
release: 'v1.58.0',
|
||||
tag: 'v1.58.0',
|
||||
date: new Date(2023, 4, 28),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFile,
|
||||
@ -213,6 +234,7 @@ const items: Item[] = [
|
||||
release: 'v1.58.0',
|
||||
tag: 'v1.58.0',
|
||||
date: new Date(2023, 4, 28),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFolder,
|
||||
@ -221,6 +243,7 @@ const items: Item[] = [
|
||||
release: 'v1.57.0',
|
||||
tag: 'v1.57.0',
|
||||
date: new Date(2023, 4, 23),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiShareCircle,
|
||||
@ -229,6 +252,7 @@ const items: Item[] = [
|
||||
release: 'v1.56.0',
|
||||
tag: 'v1.56.0',
|
||||
date: new Date(2023, 4, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFaceMan,
|
||||
@ -237,6 +261,7 @@ const items: Item[] = [
|
||||
release: 'v1.56.0',
|
||||
tag: 'v1.56.0',
|
||||
date: new Date(2023, 4, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMap,
|
||||
@ -245,6 +270,7 @@ const items: Item[] = [
|
||||
release: 'v1.55.0',
|
||||
tag: 'v1.55.0',
|
||||
date: new Date(2023, 4, 9),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiDevices,
|
||||
@ -253,6 +279,7 @@ const items: Item[] = [
|
||||
release: 'v1.55.0',
|
||||
tag: 'v1.55.0',
|
||||
date: new Date(2023, 4, 9),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiStar,
|
||||
@ -261,6 +288,7 @@ const items: Item[] = [
|
||||
release: 'v1.54.0',
|
||||
tag: 'v1.54.0',
|
||||
date: new Date(2023, 3, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiText,
|
||||
@ -269,6 +297,7 @@ const items: Item[] = [
|
||||
release: 'v1.54.0',
|
||||
tag: 'v1.54.0',
|
||||
date: new Date(2023, 3, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiArchiveOutline,
|
||||
@ -277,6 +306,7 @@ const items: Item[] = [
|
||||
release: 'v1.54.0',
|
||||
tag: 'v1.54.0',
|
||||
date: new Date(2023, 3, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiDevices,
|
||||
@ -285,6 +315,7 @@ const items: Item[] = [
|
||||
release: 'v1.54.0',
|
||||
tag: 'v1.54.0',
|
||||
date: new Date(2023, 3, 18),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFileSearch,
|
||||
@ -293,6 +324,7 @@ const items: Item[] = [
|
||||
release: 'v1.52.0',
|
||||
tag: 'v1.52.0',
|
||||
date: new Date(2023, 2, 29),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImageSearch,
|
||||
@ -301,6 +333,7 @@ const items: Item[] = [
|
||||
release: 'v1.51.0',
|
||||
tag: 'v1.51.0',
|
||||
date: new Date(2023, 2, 20),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMagnify,
|
||||
@ -309,6 +342,7 @@ const items: Item[] = [
|
||||
release: 'v1.51.0',
|
||||
tag: 'v1.51.0',
|
||||
date: new Date(2023, 2, 20),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiAppleIos,
|
||||
@ -317,6 +351,7 @@ const items: Item[] = [
|
||||
release: 'v1.48.0',
|
||||
tag: 'v1.48.0',
|
||||
date: new Date(2023, 1, 21),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMotionPlayOutline,
|
||||
@ -325,6 +360,7 @@ const items: Item[] = [
|
||||
release: 'v1.48.0',
|
||||
tag: 'v1.48.0',
|
||||
date: new Date(2023, 2, 21),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMaterialDesign,
|
||||
@ -333,6 +369,7 @@ const items: Item[] = [
|
||||
release: 'v1.47.0',
|
||||
tag: 'v1.47.0',
|
||||
date: new Date(2023, 1, 13),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiHeart,
|
||||
@ -341,14 +378,16 @@ const items: Item[] = [
|
||||
release: 'v1.46.0',
|
||||
tag: 'v1.46.0',
|
||||
date: new Date(2023, 1, 9),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiPartyPopper,
|
||||
icon: mdiCakeVariant,
|
||||
title: 'Immich Turns 1',
|
||||
description: 'Immich is officially one year old.',
|
||||
release: 'v1.43.0',
|
||||
tag: 'v1.43.0',
|
||||
date: new Date(2023, 0, 27),
|
||||
date: new Date(2023, 1, 3),
|
||||
dateType: DateType.DATE,
|
||||
},
|
||||
{
|
||||
icon: mdiHeart,
|
||||
@ -357,6 +396,7 @@ const items: Item[] = [
|
||||
release: 'v1.43.0',
|
||||
tag: 'v1.43.0',
|
||||
date: new Date(2023, 0, 27),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiShareCircle,
|
||||
@ -365,6 +405,7 @@ const items: Item[] = [
|
||||
release: 'v1.41.0',
|
||||
tag: 'v1.41.1_64-dev',
|
||||
date: new Date(2023, 0, 10),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiFolder,
|
||||
@ -373,6 +414,7 @@ const items: Item[] = [
|
||||
release: 'v1.39.0',
|
||||
tag: 'v1.39.0_61-dev',
|
||||
date: new Date(2022, 11, 19),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiMotionPlayOutline,
|
||||
@ -381,6 +423,7 @@ const items: Item[] = [
|
||||
release: 'v1.36.0',
|
||||
tag: 'v1.36.0_55-dev',
|
||||
date: new Date(2022, 10, 20),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiSecurity,
|
||||
@ -389,6 +432,7 @@ const items: Item[] = [
|
||||
release: 'v1.36.0',
|
||||
tag: 'v1.36.0_55-dev',
|
||||
date: new Date(2022, 10, 20),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiWeb,
|
||||
@ -397,6 +441,7 @@ const items: Item[] = [
|
||||
release: 'v1.33.1',
|
||||
tag: 'v1.33.0_52-dev',
|
||||
date: new Date(2022, 9, 26),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiThemeLightDark,
|
||||
@ -405,6 +450,7 @@ const items: Item[] = [
|
||||
release: 'v1.32.0',
|
||||
tag: ' v1.32.0_50-dev',
|
||||
date: new Date(2022, 9, 14),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiPanVertical,
|
||||
@ -413,6 +459,7 @@ const items: Item[] = [
|
||||
release: 'v1.27.0',
|
||||
tag: 'v1.27.0_37-dev',
|
||||
date: new Date(2022, 8, 6),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiCheckAll,
|
||||
@ -421,6 +468,7 @@ const items: Item[] = [
|
||||
release: 'v1.27.0',
|
||||
tag: 'v1.27.0_37-dev',
|
||||
date: new Date(2022, 8, 6),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiAndroid,
|
||||
@ -429,6 +477,7 @@ const items: Item[] = [
|
||||
release: 'v1.24.0',
|
||||
tag: 'v1.24.0_34-dev',
|
||||
date: new Date(2022, 7, 19),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiAccountGroup,
|
||||
@ -437,6 +486,7 @@ const items: Item[] = [
|
||||
release: 'v1.10.0',
|
||||
tag: 'v1.10.0_15-dev',
|
||||
date: new Date(2022, 4, 29),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiShareCircle,
|
||||
@ -445,6 +495,7 @@ const items: Item[] = [
|
||||
release: 'v1.7.0',
|
||||
tag: 'v1.7.0_11-dev ',
|
||||
date: new Date(2022, 3, 24),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiTag,
|
||||
@ -453,6 +504,7 @@ const items: Item[] = [
|
||||
release: 'v1.7.0',
|
||||
tag: 'v1.7.0_11-dev ',
|
||||
date: new Date(2022, 3, 24),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiImage,
|
||||
@ -461,6 +513,7 @@ const items: Item[] = [
|
||||
release: 'v1.3.0',
|
||||
tag: 'V1.3.0-dev ',
|
||||
date: new Date(2022, 2, 22),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiCheckboxMarked,
|
||||
@ -469,6 +522,7 @@ const items: Item[] = [
|
||||
release: 'v1.2.0',
|
||||
tag: 'V0.2-dev ',
|
||||
date: new Date(2022, 1, 8),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiVideo,
|
||||
@ -477,13 +531,15 @@ const items: Item[] = [
|
||||
release: 'v1.2.0',
|
||||
tag: 'v0.2-dev ',
|
||||
date: new Date(2022, 1, 8),
|
||||
dateType: DateType.RELEASE,
|
||||
},
|
||||
{
|
||||
icon: mdiPartyPopper,
|
||||
title: 'First Commit',
|
||||
description: 'First commit on GitHub, Immich is born.',
|
||||
release: 'v1.0.0',
|
||||
date: new Date(2022, 2, 3),
|
||||
date: new Date(2022, 1, 3),
|
||||
dateType: DateType.DATE,
|
||||
},
|
||||
];
|
||||
|
||||
@ -491,17 +547,15 @@ export default function MilestonePage(): JSX.Element {
|
||||
return (
|
||||
<Layout title="Milestones" description="History of Immich">
|
||||
<section className="my-8">
|
||||
<h1 className="md:text-6xl text-center mb-10 text-immich-primary dark:text-immich-dark-primary">
|
||||
<h1 className="md:text-6xl text-center mb-10 text-immich-primary dark:text-immich-dark-primary px-2">
|
||||
Major Milestones
|
||||
</h1>
|
||||
<p className="text-center text-xl">
|
||||
<p className="text-center text-xl px-2">
|
||||
A list of project achievements and milestones, <br />
|
||||
by release date.
|
||||
</p>
|
||||
<div className="flex row justify-around mt-8">
|
||||
<div className="flex max-w-full ">
|
||||
<Timeline items={items} />
|
||||
</div>
|
||||
<div className="flex justify-around mt-8 w-full max-w-full">
|
||||
<Timeline items={items} />
|
||||
</div>
|
||||
</section>
|
||||
</Layout>
|
||||
|
Loading…
Reference in New Issue
Block a user