diff --git a/base.scss b/base.scss
index b11b536a1..61051826d 100644
--- a/base.scss
+++ b/base.scss
@@ -138,6 +138,7 @@
@import "./src/stories/Library/opening-hours/opening-hours";
@import "./src/stories/Library/opening-hours/opening-hours-skeleton";
@import "./src/stories/Library/filtered-event-list/filtered-event-list";
+@import "./src/stories/Library/event-list-stacked/event-list-stacked";
// Autosuggest block styling needs to be loaded before the rest of the scss for autosuggest
@import "./src/stories/Blocks/autosuggest/autosuggest";
diff --git a/public/icons/logo/reload_logo_black.svg b/public/icons/logo/reload_logo_black.svg
new file mode 100644
index 000000000..84d3a78c2
--- /dev/null
+++ b/public/icons/logo/reload_logo_black.svg
@@ -0,0 +1 @@
+
diff --git a/public/icons/logo/reload_logo_white.svg b/public/icons/logo/reload_logo_white.svg
new file mode 100644
index 000000000..027ca4ebc
--- /dev/null
+++ b/public/icons/logo/reload_logo_white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/src/stories/Library/event-list-stacked/EventListStacked.tsx b/src/stories/Library/event-list-stacked/EventListStacked.tsx
new file mode 100644
index 000000000..54bb5183c
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/EventListStacked.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { ContentListItem } from "../content-list-item/ContentListItem";
+import ContentListItemStacked from "../content-list-item/ContentListItemStacked";
+import contentListData from "../content-list/ContentListData";
+
+interface PromoteEventsListProps {
+ title: string;
+}
+
+const EventListStacked: React.FC = ({ title }) => {
+ return (
+
+ {title}
+
+ {contentListData.map((event) => (
+
+ ))}
+
+ );
+};
+export default EventListStacked;
diff --git a/src/stories/Library/event-list-stacked/event-list-stacked.scss b/src/stories/Library/event-list-stacked/event-list-stacked.scss
new file mode 100644
index 000000000..a783727fa
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/event-list-stacked.scss
@@ -0,0 +1,9 @@
+.event-list-stacked {
+ @include layout-container($layout__max-width--medium);
+ @include block-spacing();
+}
+
+.event-list-stacked__heading {
+ @include typography($typo__h2);
+ margin-bottom: $s-xl;
+}
diff --git a/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx
new file mode 100644
index 000000000..451af95b1
--- /dev/null
+++ b/src/stories/Library/event-list-stacked/eventListStacked.stories.tsx
@@ -0,0 +1,21 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import EventListStacked from "./EventListStacked";
+
+export default {
+ title: "Library/ Stacked Event List",
+
+ component: EventListStacked,
+ argTypes: {
+ title: {
+ defaultValue: "Kommende arrangementer",
+ control: "text",
+ description: "Title of the section",
+ },
+ },
+} as ComponentMeta;
+
+const Template: ComponentStory = (args) => (
+
+);
+
+export const FilteredList = Template.bind({});
diff --git a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
index 09c61ab63..e3fe5a5de 100644
--- a/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
+++ b/src/stories/Library/opening-hours-editor/opening-hours-editor.scss
@@ -6,7 +6,7 @@
display: grid;
background: #f8f8f8;
padding: 2.5rem;
- min-width: 300px;
+ width: 350px;
line-height: 1;
}
@@ -24,11 +24,43 @@
padding: 0.5rem;
color: #555;
background-color: #fff;
+
+ &:disabled {
+ background-color: transparent;
+ }
+}
+
+.opening-hours-editor-form__checkbox {
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+
+ input[type="checkbox"] {
+ width: 2rem;
+ height: 2rem;
+ }
+
+ label {
+ margin: 0;
+ font-size: 0.8rem;
+ line-height: 1.25;
+ }
+}
+
+.opening-hours-editor-form__table {
+ tr > td:last-child {
+ white-space: nowrap;
+ text-align: right;
+ }
}
.opening-hours-editor-form__submit,
-.opening-hours-editor-form__remove {
+.opening-hours-editor-form__remove,
+.opening-hours-editor-form__cancel {
cursor: pointer;
+ border: 0;
margin-top: 1rem;
color: #fff;
padding: 0.75rem 1.5rem;
@@ -37,7 +69,6 @@
}
.opening-hours-editor-form__submit {
- border: 0;
background-color: #22c55e;
&:hover {
@@ -46,7 +77,6 @@
}
.opening-hours-editor-form__remove {
- border: 0;
background-color: #ef4444;
&:hover {
@@ -54,9 +84,27 @@
}
}
+.opening-hours-editor-form__cancel {
+ background-color: #d1d5db;
+
+ &:hover {
+ background-color: #a1a1aa;
+ }
+}
+
.opening-hours-editor-event-content {
padding: 5px 10px;
cursor: pointer;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ background-color: rgba(255, 255, 255, 0.8);
+ color: black;
+}
+
+.opening-hours-editor-event-content__series-icon {
+ width: 2rem;
+ height: 2rem;
}
// Override Drupal's default margin for tables inside .fc to eliminate top and bottom spacing
@@ -64,3 +112,8 @@
.fc table {
margin: 0;
}
+
+// Override Drupal's default border for table rows inside .fc to keep the correct styling for when an hour starts
+.fc tr {
+ border-bottom: unset;
+}