refactor: improve naming of classes

Author: MoritzWeber0

assets/js/dialog.js

@@ -11,7 +11,7 @@ function openDialog(dialogId) {
   dialog.show();
   openOverlay("dialog");
 
-  const closeButton = dialog.querySelector(".dialog__header > .a-button");
+  const closeButton = dialog.querySelector(".o-dialog__header > .a-button");
   if (closeButton) {
     closeButton.addEventListener("click", () => closeDialog(dialog));
   }
@@ -23,7 +23,7 @@ function closeDialog(dialog) {
 }
 
 function closeAllDialogs() {
-  document.querySelectorAll("dialog.dialog[open]").forEach((dialog) => {
+  document.querySelectorAll("dialog[open]").forEach((dialog) => {
     closeDialog(dialog);
   });
 }

assets/sass/dialog.scss

@@ -1,15 +1,5 @@
-.dialog {
-  position: fixed;
-  top: 7rem;
-  border: none;
-  padding: 0;
-  background-color: var(--bg-default);
-  color: var(--color-body);
-  border-radius: var(--border-radius-m);
-  max-width: 80vw;
-  max-height: 80vh;
-  overflow: auto;
-  z-index: 12;
+.o-dialog {
+  max-height: calc(100vh - 14rem);
 
   .a-anchorlink {
     margin-bottom: 0;
@@ -23,6 +13,20 @@
     max-width: 60rem;
   }
 
+  &__wrapper {
+    width: fit-content;
+    position: fixed;
+    top: 7rem;
+    border: none;
+    padding: 0;
+    background-color: var(--bg-default);
+    color: var(--color-body);
+    border-radius: var(--border-radius-m);
+    z-index: 12;
+    border: var(--border);
+    overflow: auto;
+  }
+
   &__header {
     display: flex;
     column-gap: 1rem;

layouts/partials/booking.html

@@ -85,7 +85,6 @@
     {{- $content := partial "increase-headings" (dict "content" .page.Content "offset" 2) -}}
     {{- $content := partial "prefix-footnotes" (dict "content" $content "prefix" .page.File.ContentBaseName) -}}
     {{- $content := partial "prefix-heading-ids" (dict "content" $content "prefix" .page.File.ContentBaseName) -}}
-    {{- $content := partial "remove-newlines" $content -}}
     {{- $content | safeHTML -}}
   </div>
 

layouts/partials/dialog.html

@@ -1,16 +1,15 @@
-{{ if .ButtonText }}
-  <button type="button" data-dialog-trigger="{{ .ID }}">
-    {{ .ButtonText }}
-  </button>
-{{ end }}
-
-
-<dialog id="{{ .ID }}" class="dialog" aria-labelledby="{{ .ID }}-title">
-  <div class="dialog__header">
-    <h2 id="{{ .ID }}-title" class="dialog__title">{{ .Title }}</h2>
-    {{ partial "button-internal" (dict "Text" (partial "icon" "close")) }}
-  </div>
-  <div class="dialog__body">
-    {{ .Content }}
+<dialog
+  id="{{ .ID }}"
+  class="o-dialog__wrapper o-container"
+  aria-labelledby="{{ .ID }}-title"
+>
+  <div class="o-dialog">
+    <div class="o-dialog__header">
+      <h2 id="{{ .ID }}-title" class="o-dialog__title">{{ .Title }}</h2>
+      {{- partial "button-internal" (dict "Text" (partial "icon" "close")) -}}
+    </div>
+    <div class="o-dialog__body">
+      {{- .Content -}}
+    </div>
   </div>
 </dialog>