Skip to content

Commit 93866c5

Browse files
davidje13davidje13
committed
Include phone and dark mode images in gallery, tweak phone layouts
1 parent 36c0927 commit 93866c5

8 files changed

Lines changed: 245 additions & 196 deletions

File tree

‎frontend/src/components/global-styles/article.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,8 @@
4343
}
4444

4545
& figure {
46-
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
46+
border: 1px solid var(--shadow-2);
47+
box-shadow: 0 1px 4px var(--shadow-1);
4748
}
4849
}
4950

‎frontend/src/components/retro-formats/health/common/Examples.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22
position: relative;
33
display: grid;
44
grid-template-columns: 1fr 1fr;
5-
gap: 64px;
5+
gap: 16px;
6+
7+
@media (min-width: 600px) {
8+
gap: 64px;
9+
}
610

711
&::before {
812
content: '';

‎frontend/src/components/retro-formats/mood/MoodRetro.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@
133133

134134
&.active {
135135
margin-top: -2px;
136-
padding-bottom: calc(0.8em + 2px);
136+
padding-bottom: 14px;
137137
}
138138

139139
@media (prefers-contrast: more) {
@@ -145,6 +145,7 @@
145145
}
146146

147147
&.active {
148+
margin-top: -3px;
148149
border-bottom: none;
149150
}
150151
}

‎frontend/src/components/retro-formats/timeline/TimelineRetro.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454

5555
&.active {
5656
margin-top: -2px;
57-
padding-bottom: calc(0.8em + 2px);
57+
padding-bottom: 14px;
5858
}
5959

6060
@media (prefers-contrast: more) {
@@ -66,6 +66,7 @@
6666
}
6767

6868
&.active {
69+
margin-top: -3px;
6970
border-bottom: none;
7071
}
7172
}

‎frontend/src/components/retro-formats/timeline/mood-line/MoodLineEditor.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44

55
.drawing-area {
66
width: 100%;
7-
height: max(min(60lvw, calc(100dvh - 210px)), 300px);
7+
height: max(min(60lvw, calc(100dvh - 220px)), 300px);
88
font-size: 1rem;
99
background: var(--primary-back);
10-
padding: calc(24px + 3.5em) 96px calc(8px + 3.5em);
10+
padding: calc(40px + 3.5em) 96px calc(8px + 3.5em);
1111
box-sizing: border-box;
1212
--x-axis-pad-r: -32px;
1313
--y-label-size: 32px;
@@ -237,7 +237,7 @@
237237
@media (max-width: 800px) {
238238
.mood-line-editor .drawing-area {
239239
font-size: 0.8rem;
240-
padding: calc(24px + 3.5em) 40px calc(8px + 3.5em);
240+
padding: calc(40px + 3.5em) 40px calc(8px + 3.5em);
241241
--x-axis-pad-r: -24px;
242242
--y-label-size: 24px;
243243
}

‎frontend/src/gallery/Gallery.css‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
.page-gallery {
2-
color-scheme: light;
3-
4-
background: conic-gradient(
5-
#ffffff 25%,
6-
#cccccc 25%,
7-
#cccccc 50%,
8-
#ffffff 50%,
9-
#ffffff 75%,
10-
#cccccc 75%
11-
)
12-
0 / 32px 32px;
2+
.light {
3+
color-scheme: only light;
4+
}
5+
6+
.dark {
7+
color-scheme: only dark;
8+
}
139

1410
.gallery-item {
15-
display: inline-block;
11+
display: block;
12+
float: left;
1613
overflow: clip;
14+
margin: 5px;
15+
background: conic-gradient(
16+
#ffffff 25%,
17+
#cccccc 25%,
18+
#cccccc 50%,
19+
#ffffff 50%,
20+
#ffffff 75%,
21+
#cccccc 75%
22+
)
23+
0 / 32px 32px;
24+
border: 2px solid black;
1725
}
1826

1927
.docs {
@@ -55,7 +63,11 @@
5563
}
5664
}
5765

58-
.thumb {
66+
.desktop-thumb {
5967
width: 240px;
6068
}
69+
70+
.phone-thumb {
71+
width: 125px;
72+
}
6173
}

‎frontend/src/gallery/Gallery.tsx‎

Lines changed: 55 additions & 176 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,16 @@ import { createRoot } from 'react-dom/client';
22
import { Route, Switch } from 'wouter';
33
import type { ClientConfig } from '../shared/api-entities';
44
import { ConfigProvider } from '../hooks/data/useConfig';
5-
import {
6-
moodline,
7-
Preview,
8-
type PreviewContent,
9-
} from '../components/guidance/Preview';
5+
import { Preview, type PreviewContent } from '../components/guidance/Preview';
106
import { RetroPreviewPage } from '../components/retro-formats/RetroPreviewPage';
117
import { Footer } from '../components/Footer';
8+
import {
9+
HEALTH_PREVIEW,
10+
MOOD_PREVIEW,
11+
SAMPLE_RETRO,
12+
SAMPLE_RETRO_PHONE,
13+
TIMELINE_PREVIEW,
14+
} from './samples';
1215

1316
import '../index.css';
1417
import '../preload.css';
@@ -18,40 +21,9 @@ import './Gallery.css';
1821
// This code is not part of the build - run it with
1922
// MODE=GALLERY npm start
2023

21-
const now = Date.parse('2026-01-27T17:08:12Z');
22-
23-
const SAMPLE_RETRO: PreviewContent = {
24-
format: 'mood',
25-
simulatedTime: now,
26-
state: { focusedItemId: 'cur', focusedItemTimeout: now + 282000 },
27-
items: [
28-
{ category: 'happy', message: 'We can run retros remotely 😃' },
29-
{ category: 'meh', message: 'other retro formats', votes: 2 },
30-
{ category: 'happy', message: 'Everything is awesome!', votes: 7 },
31-
{ category: 'sad', message: 'It rained' },
32-
{
33-
id: 'cur',
34-
category: 'sad',
35-
message: 'That thing happened',
36-
attachment: {
37-
type: 'giphy',
38-
url: 'https://media3.giphy.com/media/Y4z9olnoVl5QI/200.gif',
39-
alt: '',
40-
},
41-
},
42-
{ category: 'happy', message: 'That TV show' },
43-
{ category: 'action', message: 'do a thing', doneTime: 1 },
44-
],
45-
};
46-
47-
const SAMPLE_RETRO_PHONE: PreviewContent = {
48-
...SAMPLE_RETRO,
49-
localState: { 'new-item-happy:value': 'I can add stuff from my phone' },
50-
};
51-
5224
const GalleryPage = () => (
5325
<div className="page-gallery">
54-
<div className="gallery-item">
26+
<div className="light gallery-item">
5527
<div className="docs">
5628
<Preview
5729
content={SAMPLE_RETRO}
@@ -69,52 +41,52 @@ const GalleryPage = () => (
6941
</div>
7042
</div>
7143
</div>
72-
<div className="gallery-item">
73-
<Preview
74-
content={{
75-
format: 'mood',
76-
name: '3 Column',
77-
simulatedTime: now,
78-
items: [
79-
{ category: 'happy', message: 'We can run retros remotely 😃' },
80-
{ category: 'meh', message: 'other retro formats', votes: 2 },
81-
{ category: 'happy', message: 'Everything is awesome!', votes: 7 },
82-
{ category: 'sad', message: 'It rained' },
83-
{ category: 'sad', message: 'That thing happened' },
84-
{ category: 'happy', message: 'That TV show' },
85-
{ category: 'action', message: 'do a thing', doneTime: 1 },
86-
],
87-
}}
88-
width={900}
89-
height={600}
90-
className="thumb"
91-
/>
92-
</div>
93-
<div className="gallery-item">
94-
<Preview
95-
content={{
96-
format: 'health',
97-
name: 'Health Check',
98-
simulatedTime: now,
99-
items: [],
100-
localState: {
101-
'health:own-state': { stage: 'answer', user: 'me' },
102-
'health-progress:me': 'learning',
103-
},
104-
}}
105-
width={900}
106-
height={600}
107-
className="thumb"
108-
/>
109-
</div>
110-
<div className="gallery-item">
111-
<Preview
112-
content={TIMELINE_PREVIEW}
113-
width={900}
114-
height={600}
115-
className="thumb"
116-
/>
117-
</div>
44+
<DesktopThumb theme="light" content={MOOD_PREVIEW} />
45+
<DesktopThumb theme="dark" content={MOOD_PREVIEW} />
46+
<DesktopThumb theme="light" content={HEALTH_PREVIEW} />
47+
<DesktopThumb theme="dark" content={HEALTH_PREVIEW} />
48+
<DesktopThumb theme="light" content={TIMELINE_PREVIEW} />
49+
<DesktopThumb theme="dark" content={TIMELINE_PREVIEW} />
50+
<PhoneThumb theme="light" content={MOOD_PREVIEW} />
51+
<PhoneThumb theme="dark" content={MOOD_PREVIEW} />
52+
<PhoneThumb theme="light" content={HEALTH_PREVIEW} />
53+
<PhoneThumb theme="dark" content={HEALTH_PREVIEW} />
54+
<PhoneThumb theme="light" content={TIMELINE_PREVIEW} />
55+
<PhoneThumb theme="dark" content={TIMELINE_PREVIEW} />
56+
</div>
57+
);
58+
59+
const DesktopThumb = ({
60+
theme,
61+
content,
62+
}: {
63+
theme: string;
64+
content: PreviewContent;
65+
}) => (
66+
<div className={`gallery-item ${theme}`}>
67+
<Preview
68+
content={content}
69+
width={960}
70+
height={640}
71+
className="desktop-thumb"
72+
/>
73+
</div>
74+
);
75+
76+
const PhoneThumb = ({
77+
theme,
78+
content,
79+
}: {
80+
theme: string;
81+
content: PreviewContent;
82+
}) => (
83+
<div className={`gallery-item ${theme}`}>
84+
<Preview
85+
content={content}
86+
width={375}
87+
height={667}
88+
className="phone-thumb"
89+
/>
11890
</div>
11991
);
12092

@@ -126,99 +98,6 @@ const MOCK_CONFIG: ClientConfig = {
12698
giphy: true,
12799
};
128100

129-
const DAY = 1000 * 60 * 60 * 24;
130-
const day = (n: number) => (Math.floor(now / DAY) + n) * DAY;
131-
132-
const TIMELINE_PREVIEW: PreviewContent = {
133-
format: 'timeline',
134-
name: 'Timeline',
135-
simulatedTime: now,
136-
localState: {
137-
'timeline:tab': 'draw',
138-
'timeline:id': '00000000-0000-0000-0000-000000000000',
139-
},
140-
state: { endTime: day(56) },
141-
items: [
142-
{ category: 'event', message: 'Kickoff session', doneTime: day(0) },
143-
{ category: 'event', message: 'Release', doneTime: day(18) },
144-
{ category: 'event', message: 'Angry customer', doneTime: day(34) },
145-
{ category: 'event', message: 'Got an office llama', doneTime: day(40) },
146-
{ category: 'event', message: 'Newspaper article', doneTime: day(54) },
147-
moodline(
148-
{ id: 'l0', colour: { h: 160 } },
149-
day(0),
150-
30,
151-
22,
152-
21,
153-
22,
154-
28,
155-
25,
156-
5,
157-
0,
158-
-1,
159-
-2,
160-
-2,
161-
5,
162-
80,
163-
50,
164-
35,
165-
26,
166-
20,
167-
14,
168-
8,
169-
6,
170-
),
171-
moodline(
172-
{ id: 'l1', colour: { h: 350 } },
173-
day(0),
174-
60,
175-
20,
176-
10,
177-
5,
178-
4,
179-
6,
180-
8,
181-
20,
182-
5,
183-
20,
184-
5,
185-
10,
186-
50,
187-
90,
188-
70,
189-
50,
190-
40,
191-
35,
192-
15,
193-
5,
194-
),
195-
moodline(
196-
{ id: 'l2', colour: { h: 240 } },
197-
day(0),
198-
40,
199-
41,
200-
42,
201-
42,
202-
40,
203-
40,
204-
39,
205-
38,
206-
38,
207-
39,
208-
40,
209-
44,
210-
45,
211-
5,
212-
10,
213-
40,
214-
51,
215-
52,
216-
46,
217-
41,
218-
),
219-
],
220-
};
221-
222101
const root = document.createElement('div');
223102
document.getElementById('pre-load')?.remove();
224103
document.body.append(root);

0 commit comments

Comments
 (0)