Align with 2.5.2. Cleaned up themes and fixtures.

.github/workflows/playwright.yaml

@@ -22,6 +22,10 @@ jobs:
         run: |
           docker compose run --rm phpfpm composer install
 
+      - name: Copy fixture assets to public/fixtures
+        run: |
+          docker compose run --rm phpfpm cp -r fixtures/public/fixtures public/fixtures
+
       - name: Build assets
         run: |
           docker compose run --rm node npm install

.gitignore

@@ -1,6 +1,9 @@
 # Ignore custom templates folder.
 /assets/shared/custom-templates/*
 
+# Ignore the public/fixtures folder.
+/public/fixtures
+
 # Ignore release json file.
 /public/release.json
 

CHANGELOG.md

@@ -18,6 +18,8 @@ All notable changes to this project will be documented in this file.
 * Added update command.
 * Added (Client) online-check to public.
 * Updated developer documentation.
+* Aligned with v. 2.5.2.
+* Removed themes.
 
 ### NB! Prior to 3.x the project was split into separate repositories
 

README.md

@@ -577,6 +577,13 @@ For example:
   booking system you can implement a "FeedSource" that fetches booking data from your source and normalizes it to match
   the calendar output model.
 
+## Themes
+
+It is possible to create themes that can apply to select templates. See `/admin/themes` in the Admin.
+
+The theme css has to follow som rules. See [docs/themes/themes.md](docs/themes/themes.md) for instructions on writing
+custom themes.
+
 ## Custom Templates
 
 It is possible to include your own templates in your installation.

Taskfile.yml

@@ -30,6 +30,7 @@ tasks:
       - task compose-up
       - task composer-install
       - task db:migrate --yes
+      - task fixtures:copy-assets
       - task site-open
     silent: true
 
@@ -44,6 +45,7 @@ tasks:
       - task composer-install
       - task db:migrate --yes
       - task fixtures:load --yes
+      - task fixtures:copy-assets
       - task site-open
     silent: true
 
@@ -221,3 +223,8 @@ tasks:
     desc: "Migrate to latest database schema and update installed templates"
     cmds:
       - task compose -- exec phpfpm bin/console app:update --no-interaction
+
+  fixtures:copy-assets:
+    desc: "Copy the folder from fixtures/public/fixtures to public/fixtures. Rerun if fixtures are changed."
+    cmds:
+      - task compose -- exec phpfpm cp -r fixtures/public/fixtures public/fixtures

assets/shared/slide-utils/global-styles.css

@@ -47,63 +47,39 @@
   --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.2) 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-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-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

assets/shared/slide-utils/slide-util.jsx

@@ -63,6 +63,7 @@ function ThemeStyles({ id, css = null }) {
   const slideCss = css.replaceAll("#SLIDE_ID", `#${id}`);
 
   const ThemeComponent = createGlobalStyle`${slideCss}`;
+
   return <ThemeComponent />;
 }
 

assets/shared/templates/calendar.json

@@ -132,7 +132,7 @@
       "name": "resourceAvailableText",
       "type": "text",
       "label": "Tekst når resursen er ledig",
-      "helpText": "Her kan du skrive tekst, som vises når resursen er ledig.",
+      "helpText": "Her kan du skrive tekst, som vises når resursen er ledig. Dette gælder kun for \"Enkelt lokale\" layoutet",
       "formGroupClasses": "col-md-6"
     },
     {
@@ -163,7 +163,7 @@
     {
       "key": "calendar-form-has-date-and-time",
       "input": "checkbox",
-      "label": "Vis dato og tidspunkt",
+      "label": "Vis dato og tidspunkt. Gælder kun for \"Flere resurser\" layoutet.",
       "name": "hasDateAndTime",
       "formGroupClasses": "col-md-6 mb-3"
     },
@@ -214,6 +214,14 @@
       "name": "headerOrder",
       "formGroupClasses": "col-md-6 mb-3",
       "helpText": "Dette er kun relevant hvis \"Flere resurser\" er valgt under \"layout\". Standard er \"Hvornår, hvad, hvor.\""
+    },
+    {
+      "key": "calendar-form-enable-instant-booking",
+      "input": "checkbox",
+      "label": "Aktivér straksbooking",
+      "helpText": "Aktivér mulighed for straksbooking. Dette kræver at resursen er opsat og godkendt af systemadministrator.",
+      "name": "instantBookingEnabled",
+      "formGroupClasses": "mb-3"
     }
   ]
 }

assets/shared/templates/calendar/calendar-single-booking-helper.jsx

@@ -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`