Updates for Single calendar booking template

CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this project will be documented in this file.
 
 ## Unreleased
 
+- [#185](https://github.com/os2display/display-templates/pull/185)
+  - Single Clanedar Booking: Fix color issues on older browsers. Add simple vertical view for portrait oriented devices.
+
 ## [2.5.1] - 2025-06-23
 
 - [#178](https://github.com/os2display/display-templates/pull/178)
@@ -18,8 +21,8 @@ All notable changes to this project will be documented in this file.
   - Fixed news feed issues.
 - [#174](https://github.com/os2display/display-templates/pull/174)
   - Fixed test issue with calendar dates.
-- [#161](https://github.com/os2display/display-templates/pull/161) 
-  - Added social news template. 
+- [#161](https://github.com/os2display/display-templates/pull/161)
+  - Added social news template.
 
 ## [2.4.0] - 2025-03-31
 

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

@@ -24,13 +24,20 @@ const Wrapper = styled.div`
 const Header = styled.div`
   /* Header styling */
   display: flex;
+  @media (max-width: 800px) {
+    flex-wrap: wrap;
+  }
 `;
 
 const RoomInfo = styled.div`
   /* RoomInfo styling */
   padding: calc(var(--padding-size-base) * 2);
   flex-grow: 2;
   color: var(--text-light);
+  @media (max-width: 800px) {
+    padding-top: var(--padding-size-base);
+    padding-bottom: var(--padding-size-base);
+  }
 `;
 
 const Title = styled.div`
@@ -45,6 +52,7 @@ const SubTitle = styled.div`
 const Status = styled.div`
   /* Status styling */
   padding: var(--padding-size-base);
+  padding-left: calc(var(--padding-size-base) * 2);
   padding-right: calc(var(--padding-size-base) * 3);
   display: flex;
   column-gap: var(--spacer);
@@ -70,6 +78,12 @@ const DateTime = styled.div`
   text-align: right;
   padding: var(--padding-size-base);
   color: var(--text-dark);
+  align-content: center;
+  @media (max-width: 800px) {
+    flex-basis: 100%;
+    padding-left: calc(var(--padding-size-base) * 2);
+    text-align: left;
+  }
 `;
 
 const Date = styled.div`

src/calendar/calendar-single-booking.js

@@ -244,15 +244,16 @@ function CalendarSingleBooking({
       style={templateRootStyle}
     >
       <Header
+        className="header"
         style={{
           backgroundColor: headerColor,
         }}
       >
-        <RoomInfo>
+        <RoomInfo className="room-info">
           {subTitle && <SubTitle className="subtitle">{subTitle}</SubTitle>}
           <Title className="title">{title}</Title>
         </RoomInfo>
-        <Status>
+        <Status className="status">
           <StatusIcon>
             {roomInUse ? (
               <IconExclamation style={{ color: "var(--color-red-600)" }} />
@@ -269,6 +270,7 @@ function CalendarSingleBooking({
           </StatusText>
         </Status>
         <DateTime
+          className="date-time"
           style={{
             backgroundColor: dateTimeColor,
           }}

src/global-styles.css

@@ -47,42 +47,45 @@
   --text-light: var(--color-light);
   --text-dark: var(--color-dark);
 
-  --color-red-oklch-ch: 0.25 29;
-  --color-red-oklch-l: 50%;
-  --color-red-oklch-c: 0.25;
-  --color-red-oklch-h: 29;
-  --color-red-50: oklch(95% calc(var(--color-red-oklch-c) - 0.20) var(--color-red-oklch-h));
-  --color-red-100: oklch(90% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-200: oklch(85% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-300: oklch(80% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-400: oklch(70% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-500: oklch(60% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-600: oklch(var(--color-red-oklch-l) var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-700: oklch(40% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-800: oklch(30% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-900: oklch(20% var(--color-red-oklch-c) var(--color-red-oklch-h));
-  --color-red-950: oklch(15% var(--color-red-oklch-c) var(--color-red-oklch-h));
+  --color-red-hsl-h: 0deg;
+  --color-red-hsl-s: 84%;
+  --color-red-hsl-l: 50%;
+  --color-red-50: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 95%);
+  --color-red-100: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 90%);
+  --color-red-200: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 85%);
+  --color-red-300: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 80%);
+  --color-red-400: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 70%);
+  --color-red-500: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 60%);
+  --color-red-600: hsl(
+    var(--color-red-hsl-h) var(--color-red-hsl-s) var(--color-red-hsl-l)
+  );
+  --color-red-700: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 40%);
+  --color-red-800: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 30%);
+  --color-red-900: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 20%);
+  --color-red-950: hsl(var(--color-red-hsl-h) var(--color-red-hsl-s) 15%);
 
-  --color-green-oklch-l: 50%;
-  --color-green-oklch-c: 0.17;
-  --color-green-oklch-h: 142;
-  --color-green-50: oklch(95% calc(var(--color-green-oklch-c) - 0.15) var(--color-green-oklch-h));
-  --color-green-100: oklch(90% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-200: oklch(85% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-300: oklch(80% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-400: oklch(70% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-500: oklch(60% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-600: oklch(var(--color-green-oklch-l) var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-700: oklch(40% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-800: oklch(30% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-900: oklch(20% var(--color-green-oklch-c) var(--color-green-oklch-h));
-  --color-green-950: oklch(15% var(--color-green-oklch-c) var(--color-green-oklch-h));
+  --color-green-hsl-h: 142deg;
+  --color-green-hsl-s: 76%;
+  --color-green-hsl-l: 50%;
+  --color-green-50: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 95%);
+  --color-green-100: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 90%);
+  --color-green-200: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 85%);
+  --color-green-300: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 80%);
+  --color-green-400: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 70%);
+  --color-green-500: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 60%);
+  --color-green-600: hsl(
+    var(--color-green-hsl-h) var(--color-green-hsl-s) var(--color-green-hsl-l)
+  );
+  --color-green-700: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 40%);
+  --color-green-800: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 30%);
+  --color-green-900: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 20%);
+  --color-green-950: hsl(var(--color-green-hsl-h) var(--color-green-hsl-s) 15%);
 
   /*
   * Fonts
   */
-  --font-family-base: system-ui, -apple-system, Roboto, "Helvetica Neue", Arial,
-    sans-serif;
+  --font-family-base:
+    system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-weight-light: 300;
   --font-weight-normal: 400;
   --font-weight-bold: 700;

src/themes/meetingroommonitor.css

@@ -0,0 +1,66 @@
+/*
+** TEMP FIX FOR MEETING ROOM MONITOR!!!!!
+*/
+
+#SLIDE_ID .template-calendar.calendar-single-booking {
+  /* Test HEX color values instead of oklch */
+  --color-red-50: #fef2f2;
+  --color-red-100: #fee2e2;
+  --color-red-200: #fecaca;
+  --color-red-300: #fca5a5;
+  --color-red-400: #f87171;
+  --color-red-500: #ef4444;
+  --color-red-600: #dc2626;
+  --color-red-700: #b91c1c;
+  --color-red-800: #991b1b;
+  --color-red-900: #7f1d1d;
+  --color-red-950: #450a0a;
+  --color-green-50: #f0fdf4;
+  --color-green-100: #dcfce7;
+  --color-green-200: #bbf7d0;
+  --color-green-300: #86efac;
+  --color-green-400: #4ade80;
+  --color-green-500: #22c55e;
+  --color-green-600: #16a34a;
+  --color-green-700: #15803d;
+  --color-green-800: #166534;
+  --color-green-900: #14532d;
+  --color-green-950: #052e16;
+
+  --padding-size-base: calc(var(--spacer) * 2);
+}
+
+/* Vertical */
+@media (max-width: 800px) {
+  #SLIDE_ID
+    .template-calendar.calendar-single-booking:nth-child(1)
+    > div:first-child {
+    flex-wrap: wrap;
+    /* flex-direction: column; */
+  }
+
+  #SLIDE_ID
+    .template-calendar.calendar-single-booking:nth-child(1)
+    > div:first-child
+    > div:nth-child(1) {
+    padding-top: var(--padding-size-base);
+    padding-bottom: var(--padding-size-base);
+  }
+
+  #SLIDE_ID
+    .template-calendar.calendar-single-booking:nth-child(1)
+    > div:first-child
+    > div:nth-child(2) {
+    /* padding-top: 0; */
+    padding-left: calc(var(--padding-size-base) * 2);
+  }
+
+  #SLIDE_ID
+    .template-calendar.calendar-single-booking:nth-child(1)
+    > div:first-child
+    > div:nth-child(3) {
+    flex-basis: 100%;
+    padding-left: calc(var(--padding-size-base) * 2);
+    text-align: left;
+  }
+}