Skip to content

Commit 094dc29

Browse files
tujtuj
authored
Merge pull request #185 from os2display/feature/meeting-room-monitor-theme
Updates for Single calendar booking template
2 parents 215d8be + 70db4ce commit 094dc29

File tree

5 files changed

+120
-33
lines changed

5 files changed

+120
-33
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file.
44

55
## Unreleased
66

7+
- [#185](https://github.com/os2display/display-templates/pull/185)
8+
- Single Clanedar Booking: Fix color issues on older browsers. Add simple vertical view for portrait oriented devices.
79
- [#184](https://github.com/os2display/display-templates/pull/184)
810
- Update Dokk1 and Aakb themes. Add news feed. Adapt new identity for Aakb.
911

‎src/calendar/calendar-single-booking-helper.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,20 @@ const Wrapper = styled.div`
2424
const Header = styled.div`
2525
/* Header styling */
2626
display: flex;
27+
@media (max-width: 800px) {
28+
flex-wrap: wrap;
29+
}
2730
`;
2831

2932
const RoomInfo = styled.div`
3033
/* RoomInfo styling */
3134
padding: calc(var(--padding-size-base) * 2);
3235
flex-grow: 2;
3336
color: var(--text-light);
37+
@media (max-width: 800px) {
38+
padding-top: var(--padding-size-base);
39+
padding-bottom: var(--padding-size-base);
40+
}
3441
`;
3542

3643
const Title = styled.div`
@@ -45,6 +52,7 @@ const SubTitle = styled.div`
4552
const Status = styled.div`
4653
/* Status styling */
4754
padding: var(--padding-size-base);
55+
padding-left: calc(var(--padding-size-base) * 2);
4856
padding-right: calc(var(--padding-size-base) * 3);
4957
display: flex;
5058
column-gap: var(--spacer);
@@ -70,6 +78,12 @@ const DateTime = styled.div`
7078
text-align: right;
7179
padding: var(--padding-size-base);
7280
color: var(--text-dark);
81+
align-content: center;
82+
@media (max-width: 800px) {
83+
flex-basis: 100%;
84+
padding-left: calc(var(--padding-size-base) * 2);
85+
text-align: left;
86+
}
7387
`;
7488

7589
const Date = styled.div`

‎src/calendar/calendar-single-booking.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,15 +244,16 @@ function CalendarSingleBooking({
244244
style={templateRootStyle}
245245
>
246246
<Header
247+
className="header"
247248
style={{
248249
backgroundColor: headerColor,
249250
}}
250251
>
251-
<RoomInfo>
252+
<RoomInfo className="room-info">
252253
{subTitle && <SubTitle className="subtitle">{subTitle}</SubTitle>}
253254
<Title className="title">{title}</Title>
254255
</RoomInfo>
255-
<Status>
256+
<Status className="status">
256257
<StatusIcon>
257258
{roomInUse ? (
258259
<IconExclamation style={{ color: "var(--color-red-600)" }} />
@@ -269,6 +270,7 @@ function CalendarSingleBooking({
269270
</StatusText>
270271
</Status>
271272
<DateTime
273+
className="date-time"
272274
style={{
273275
backgroundColor: dateTimeColor,
274276
}}

‎src/global-styles.css‎

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -47,42 +47,45 @@
4747
--text-light: var(--color-light);
4848
--text-dark: var(--color-dark);
4949

50-
--color-red-oklch-ch: 0.25 29;
51-
--color-red-oklch-l: 50%;
52-
--color-red-oklch-c: 0.25;
53-
--color-red-oklch-h: 29;
54-
--color-red-50: oklch(95% calc(var(--color-red-oklch-c) - 0.20) var(--color-red-oklch-h));
55-
--color-red-100: oklch(90% var(--color-red-oklch-c) var(--color-red-oklch-h));
56-
--color-red-200: oklch(85% var(--color-red-oklch-c) var(--color-red-oklch-h));
57-
--color-red-300: oklch(80% var(--color-red-oklch-c) var(--color-red-oklch-h));
58-
--color-red-400: oklch(70% var(--color-red-oklch-c) var(--color-red-oklch-h));
59-
--color-red-500: oklch(60% var(--color-red-oklch-c) var(--color-red-oklch-h));
60-
--color-red-600: oklch(var(--color-red-oklch-l) var(--color-red-oklch-c) var(--color-red-oklch-h));
61-
--color-red-700: oklch(40% var(--color-red-oklch-c) var(--color-red-oklch-h));
62-
--color-red-800: oklch(30% var(--color-red-oklch-c) var(--color-red-oklch-h));
63-
--color-red-900: oklch(20% var(--color-red-oklch-c) var(--color-red-oklch-h));
64-
--color-red-950: oklch(15% var(--color-red-oklch-c) var(--color-red-oklch-h));
50+
--color-red-hsl-h: 0deg;
51+
--color-red-hsl-s: 84%;
52+
--color-red-hsl-l: 50%;
53+
--color-red-50: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 95%);
54+
--color-red-100: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 90%);
55+
--color-red-200: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 85%);
56+
--color-red-300: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 80%);
57+
--color-red-400: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 70%);
58+
--color-red-500: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 60%);
59+
--color-red-600: hsl(
60+
var(--color-red-hsl-h) var(--color-red-hsl-s) var(--color-red-hsl-l)
61+
);
62+
--color-red-700: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 40%);
63+
--color-red-800: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 30%);
64+
--color-red-900: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 20%);
65+
--color-red-950: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 15%);
6566

66-
--color-green-oklch-l: 50%;
67-
--color-green-oklch-c: 0.17;
68-
--color-green-oklch-h: 142;
69-
--color-green-50: oklch(95% calc(var(--color-green-oklch-c) - 0.15) var(--color-green-oklch-h));
70-
--color-green-100: oklch(90% var(--color-green-oklch-c) var(--color-green-oklch-h));
71-
--color-green-200: oklch(85% var(--color-green-oklch-c) var(--color-green-oklch-h));
72-
--color-green-300: oklch(80% var(--color-green-oklch-c) var(--color-green-oklch-h));
73-
--color-green-400: oklch(70% var(--color-green-oklch-c) var(--color-green-oklch-h));
74-
--color-green-500: oklch(60% var(--color-green-oklch-c) var(--color-green-oklch-h));
75-
--color-green-600: oklch(var(--color-green-oklch-l) var(--color-green-oklch-c) var(--color-green-oklch-h));
76-
--color-green-700: oklch(40% var(--color-green-oklch-c) var(--color-green-oklch-h));
77-
--color-green-800: oklch(30% var(--color-green-oklch-c) var(--color-green-oklch-h));
78-
--color-green-900: oklch(20% var(--color-green-oklch-c) var(--color-green-oklch-h));
79-
--color-green-950: oklch(15% var(--color-green-oklch-c) var(--color-green-oklch-h));
67+
--color-green-hsl-h: 142deg;
68+
--color-green-hsl-s: 76%;
69+
--color-green-hsl-l: 50%;
70+
--color-green-50: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 95%);
71+
--color-green-100: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 90%);
72+
--color-green-200: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 85%);
73+
--color-green-300: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 80%);
74+
--color-green-400: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 70%);
75+
--color-green-500: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 60%);
76+
--color-green-600: hsl(
77+
var(--color-green-hsl-h) var(--color-green-hsl-s) var(--color-green-hsl-l)
78+
);
79+
--color-green-700: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 40%);
80+
--color-green-800: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 30%);
81+
--color-green-900: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 20%);
82+
--color-green-950: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 15%);
8083

8184
/*
8285
* Fonts
8386
*/
84-
--font-family-base: system-ui, -apple-system, Roboto, "Helvetica Neue", Arial,
85-
sans-serif;
87+
--font-family-base:
88+
system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
8689
--font-weight-light: 300;
8790
--font-weight-normal: 400;
8891
--font-weight-bold: 700;

‎src/themes/meetingroommonitor.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
/*
2+
** TEMP FIX FOR MEETING ROOM MONITOR!!!!!
3+
*/
4+
5+
#SLIDE_ID .template-calendar.calendar-single-booking {
6+
/* Test HEX color values instead of oklch */
7+
--color-red-50: #fef2f2;
8+
--color-red-100: #fee2e2;
9+
--color-red-200: #fecaca;
10+
--color-red-300: #fca5a5;
11+
--color-red-400: #f87171;
12+
--color-red-500: #ef4444;
13+
--color-red-600: #dc2626;
14+
--color-red-700: #b91c1c;
15+
--color-red-800: #991b1b;
16+
--color-red-900: #7f1d1d;
17+
--color-red-950: #450a0a;
18+
--color-green-50: #f0fdf4;
19+
--color-green-100: #dcfce7;
20+
--color-green-200: #bbf7d0;
21+
--color-green-300: #86efac;
22+
--color-green-400: #4ade80;
23+
--color-green-500: #22c55e;
24+
--color-green-600: #16a34a;
25+
--color-green-700: #15803d;
26+
--color-green-800: #166534;
27+
--color-green-900: #14532d;
28+
--color-green-950: #052e16;
29+
30+
--padding-size-base: calc(var(--spacer) * 2);
31+
}
32+
33+
/* Vertical */
34+
@media (max-width: 800px) {
35+
#SLIDE_ID
36+
.template-calendar.calendar-single-booking:nth-child(1)
37+
> div:first-child {
38+
flex-wrap: wrap;
39+
/* flex-direction: column; */
40+
}
41+
42+
#SLIDE_ID
43+
.template-calendar.calendar-single-booking:nth-child(1)
44+
> div:first-child
45+
> div:nth-child(1) {
46+
padding-top: var(--padding-size-base);
47+
padding-bottom: var(--padding-size-base);
48+
}
49+
50+
#SLIDE_ID
51+
.template-calendar.calendar-single-booking:nth-child(1)
52+
> div:first-child
53+
> div:nth-child(2) {
54+
/* padding-top: 0; */
55+
padding-left: calc(var(--padding-size-base) * 2);
56+
}
57+
58+
#SLIDE_ID
59+
.template-calendar.calendar-single-booking:nth-child(1)
60+
> div:first-child
61+
> div:nth-child(3) {
62+
flex-basis: 100%;
63+
padding-left: calc(var(--padding-size-base) * 2);
64+
text-align: left;
65+
}
66+
}

0 commit comments

Comments
 (0)