alchemy_cms 8.3.10 → 8.4.0

data/app/stylesheets/alchemy/admin/element-select.scss

@@ -23,7 +23,7 @@
   color: var(--text-color-muted);
   max-width: 270px;
 
-  .select2-highlighted & {
+  .ts-dropdown .option.active & {
     color: var(--select-hover-text-color);
   }
 }

data/app/stylesheets/alchemy/admin/elements.scss

@@ -73,7 +73,6 @@ alchemy-elements-window-handle {
 }
 
 .elements-window-toolbar {
-  @extend %gradiated-toolbar;
   padding: var(--spacing-2);
 
   .right {
@@ -468,16 +467,6 @@ button.element-toggle {
       font-size: var(--font-size_small);
       text-indent: 1px;
     }
-
-    .select2-container {
-      width: 100%;
-
-      .select2-choices {
-        width: 100%;
-        margin-bottom: 0;
-        margin-top: var(--spacing-2);
-      }
-    }
   }
 
   hr {
@@ -626,13 +615,13 @@ alchemy-publish-element-button {
   min-height: 100px;
 }
 
-alchemy-color-select {
+.color-select {
   display: flex;
   justify-content: space-between;
   align-items: center;
 
   > input[type="text"],
-  > .select2-container {
+  > .ts-wrapper {
     width: 100%;
   }
 
@@ -653,15 +642,14 @@ alchemy-color-select {
 
   &:has(input[type="color"]:not([disabled])) {
     input[type="text"],
-    .select2-container,
-    .select2-choice {
+    .ts-control {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
     }
   }
 
   input[type="text"] + input[type="color"],
-  select + input[type="color"] {
+  .ts-wrapper + input[type="color"] {
     width: calc(2 * var(--form-field-addon-width));
     flex-shrink: 0;
     border-top-left-radius: 0;
@@ -670,9 +658,8 @@ alchemy-color-select {
   }
 }
 
-// place the select color options outside, because Select2
-// is opening the selection container outside the `alchemy-color-select`
-// component
+// place the select color options outside, because Tom Select
+// renders the dropdown outside the `.color-select` container
 .select-color-option {
   .color-indicator {
     background: var(--color) 100% 100% no-repeat;
@@ -1076,7 +1063,6 @@ select.long {
     textarea,
     .file,
     .picture_thumbnail,
-    .select2-container,
     .tinymce_container {
       box-shadow: 0 0 0 1px var(--element-dirty-border-color);
       border-color: var(--element-dirty-border-color);
@@ -1158,14 +1144,12 @@ select.long {
       margin-bottom: var(--spacing-2);
     }
 
-    select,
-    .select2-container {
+    select {
       width: 100%;
     }
 
     &.display_inline {
-      select,
-      .select2-container {
+      select {
         width: 170px;
       }
     }

data/app/stylesheets/alchemy/admin/flash.scss

@@ -3,7 +3,8 @@ div#flash_notices {
   right: 50%;
   transform: translateX(50%);
   z-index: 400000;
-  width: 400px;
+  width: calc(400px + var(--main-menu-width));
+  padding-left: var(--main-menu-width);
   top: var(--spacing-1);
 
   alchemy-message {

data/app/stylesheets/alchemy/admin/forms.scss

@@ -1,5 +1,6 @@
 @use "../extends";
 @use "../mixins";
+@use "../variables" as vars;
 
 form {
   #main_content > &.alchemy {
@@ -43,21 +44,17 @@ form {
       margin: 0;
     }
 
-    .select2-container,
-    .select2-choices {
-      width: 100%;
-    }
-
     ::-webkit-input-placeholder {
       line-height: 16px;
     }
 
-    select,
-    .select2-container {
+    select {
       margin: var(--form-field-margin);
     }
 
-    &:has(.select2-container:not(.select2-container-multi)) {
+    // Center the label against a single select control instead of aligning it to
+    // the baseline, which otherwise shifts when the search input gains focus.
+    &:has(.ts-wrapper.single) {
       .control-label {
         align-self: center;
       }
@@ -132,22 +129,10 @@ form {
     .ts-control,
     input[type="email"],
     input[type="password"],
-    textarea,
-    .select2-choices {
+    textarea {
       @extend %field-with-error;
     }
 
-    .select2-choice,
-    .select2-choices {
-      border-color: var(--notice-error-border-color);
-      color: var(--notice-error-text-color);
-      margin-bottom: var(--spacing-1);
-
-      input[type="text"] {
-        box-shadow: none;
-      }
-    }
-
     label {
       color: var(--notice-error-text-color);
     }
@@ -314,7 +299,6 @@ form {
     display: flex;
     flex-direction: column;
     min-width: 0;
-    width: 50%;
 
     > label {
       display: inline-block;
@@ -322,8 +306,7 @@ form {
       text-align: left;
     }
 
-    select,
-    .select2-container {
+    select {
       margin: var(--form-field-margin);
     }
   }
@@ -338,4 +321,57 @@ form {
     justify-content: space-between;
     margin: var(--spacing-2) 0;
   }
+
+  @media screen and (max-width: vars.$small-screen-break-point) {
+    .input,
+    .submit {
+      grid-template-columns: 1fr;
+    }
+
+    .input {
+      row-gap: var(--spacing-1);
+
+      .control-label {
+        text-align: left;
+      }
+
+      // Children pinned to the second column would otherwise spawn an implicit
+      // column and pull the field back up next to the label.
+      .hint,
+      small.error,
+      .alchemy-char-counter {
+        grid-column: 1;
+      }
+
+      small.error,
+      .alchemy-char-counter {
+        text-align: left;
+      }
+
+      &.boolean {
+        input[type="checkbox"],
+        label {
+          grid-column: 1;
+        }
+      }
+
+      // Labels nudged to align with the field on the baseline grid overlap it
+      // once stacked.
+      &.tags .control-label,
+      &.tinymce_container label {
+        top: 0;
+      }
+    }
+
+    .submit {
+      > button,
+      label.checkbox {
+        grid-column: 1;
+      }
+    }
+
+    &.simple_form .buttons {
+      margin-left: 0;
+    }
+  }
 }

data/app/stylesheets/alchemy/admin/frame.scss

@@ -2,6 +2,12 @@
 @use "navigation";
 @use "../variables" as vars;
 
+// The guard only listens for events. It must not become a box of its own,
+// or it takes the place its content holds in a flex or grid parent.
+alchemy-dirty-guard {
+  display: contents;
+}
+
 alchemy-overlay {
   visibility: hidden;
   position: fixed;
@@ -41,10 +47,8 @@ div#overlay_text_box {
 }
 
 #logout {
-  position: absolute;
   z-index: 1;
-  bottom: 0;
-  left: 0;
+  flex: 0 0 auto;
   width: 100%;
 
   .main_navi_entry {
@@ -94,13 +98,45 @@ div#overlay_text_box {
 }
 
 #main_content {
-  padding-top: 84px;
+  padding-top: calc(var(--top-menu-height) + var(--spacing-2));
   padding-right: var(--spacing-2);
   padding-bottom: var(--spacing-2);
   padding-left: calc(var(--main-menu-width) + var(--spacing-2));
+  position: relative;
   z-index: 0;
   width: 100%;
   height: 100%;
+  overflow: auto;
+
+  .centered & {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &:has(.resources-table-wrapper) {
+    padding-top: var(--top-menu-height);
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-left: var(--main-menu-width);
+  }
+
+  &:has(#filter_bar),
+  &:has(.tag-list) {
+    padding-right: calc(var(--sidebar-width) + var(--spacing-2));
+
+    &:has(.resources-table-wrapper) {
+      padding-right: var(--sidebar-width);
+    }
+  }
+
+  &:has(.pagination-wrapper) {
+    padding-bottom: calc(var(--pagination-height) + var(--spacing-2));
+
+    &:has(.resources-table-wrapper) {
+      padding-bottom: var(--pagination-height);
+    }
+  }
 }
 
 #user_info {

data/app/stylesheets/alchemy/admin/image_library.scss

@@ -1,9 +1,7 @@
 @use "../mixins";
 
-.alchemy-image-overlay {
-  &.open {
-    background-color: var(--dialog-overlay-color);
-  }
+.alchemy-image-overlay-container.open::backdrop {
+  background-color: var(--dialog-overlay-color);
 }
 
 .alchemy-image-overlay-container,
@@ -60,6 +58,13 @@
   width: 100%;
   height: 100%;
 
+  // The frame must not generate a box, or the 100% height and the absolute
+  // positioning of the picture overlays would resolve against the frame
+  // instead of this element.
+  > turbo-frame {
+    display: contents;
+  }
+
   > .message {
     margin: var(--spacing-2);
     max-width: 400px;
@@ -129,18 +134,10 @@
         margin-left: 0;
       }
 
-      .select2-container {
-        width: 100%;
-      }
-
       &.tags {
         .control-label {
           top: 0;
         }
-
-        .select2-search-choice {
-          line-height: 12px;
-        }
       }
     }
   }

data/app/stylesheets/alchemy/admin/navigation.scss

@@ -15,24 +15,29 @@
 #left_menu {
   z-index: 30;
   height: 100vh;
+  height: 100dvh;
   position: fixed;
   top: 0;
   left: 0;
   width: var(--main-menu-width);
   background-color: var(--main-menu-bg-color);
+  display: flex;
+  flex-direction: column;
   @extend .disable-user-select;
 }
 
 #main_navi {
-  max-height: 100vh;
+  // Consume the space left over by the logout entry and scroll within it.
+  // min-height: 0 lets this flex item shrink below its content so the
+  // overflow actually scrolls instead of pushing the logout entry away.
+  flex: 1;
+  min-height: 0;
   padding-top: var(--spacing-7);
-  padding-bottom: 80px;
-
-  @media screen and (max-width: vars.$medium-screen-break-point) {
-    overflow-x: hidden;
-    overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
-  }
+  padding-bottom: var(--spacing-2);
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-color: var(--color-white) var(--main-menu-bg-color);
 }
 
 .main_navi_entry {
@@ -156,7 +161,10 @@
 }
 
 .sub_navigation {
-  position: absolute;
+  // Fixed rather than absolute so the hidden flyouts do not add to the
+  // scrollable overflow of the menu column (an absolutely positioned descendant
+  // would). The entry component positions the open flyout via Floating UI.
+  position: fixed;
   width: auto;
   left: var(--main-menu-width);
   top: 0;
@@ -166,11 +174,6 @@
 }
 
 .subnavi_tab {
-  &:first-of-type {
-    border-left: 1px solid var(--main-menu-active-bg-color);
-    margin-left: -1px;
-  }
-
   a {
     padding-left: var(--spacing-4);
     padding-right: var(--spacing-4);

data/app/stylesheets/alchemy/admin/node-select.scss

@@ -1,43 +1,19 @@
-.node-select--node,
-.node-select--node-url {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
+/* The node select renders the shared remote select layout (see
+ * remote-select.scss). Only the breadcrumb of ancestor names shown in the
+ * primary cell is specific to it.
+ */
+.node-select--ancestors {
+  font-weight: normal;
 }
 
-.node-select--node {
-  display: flex;
-  align-items: center;
-  height: 21px;
-
-  > alchemy-icon {
-    margin: 0 var(--spacing-2) 0 var(--spacing-1);
-  }
+.node-select--separator {
+  vertical-align: middle;
+  /* Keep the chevron within the text line; a full-size icon would tower over
+   * the text and inflate the row, dropping the leading icon out of alignment.
+   */
+  --icon-size: var(--icon-size-sm);
 
   .icon {
-    .select2-highlighted & {
-      fill: var(--color-white);
-    }
-  }
-}
-
-.node-select--node-display_name,
-.node-select--node-ancestors {
-  display: inline-flex;
-  align-items: center;
-}
-
-.node-select--node-name {
-  font-weight: bold;
-}
-
-.node-select--node-url {
-  margin-left: auto;
-  padding: var(--spacing-1) var(--spacing-2);
-  color: var(--text-color);
-  font-size: var(--font-size_small);
-
-  .select2-highlighted & {
-    color: var(--color-white);
+    fill: currentColor;
   }
 }

data/app/stylesheets/alchemy/admin/nodes.scss

@@ -66,7 +66,7 @@
     margin: 0;
     padding: 0;
 
-    &.folded > li {
+    &.folded > alchemy-menu-node {
       display: none;
     }
   }

data/app/stylesheets/alchemy/admin/page-select.scss

@@ -1,97 +1,6 @@
-.page-select--page,
-.page-select--page-name,
-.page-select--page-urlname {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-.page-select--page {
-  /* Need to redefine these variables here with the defaults from Alchemy,
-   * because they are not available if you only load this file.
-   */
-  --size-1: var(--spacing-0, 2px);
-  --size-2: var(--spacing-1, 4px);
-  --size-3: var(--spacing-2, 8px);
-  --small-font-size: var(--font-size_small, 10px);
-  --grey: var(--color-grey_light, hsl(0deg, 0%, 94%));
-  --color: var(--text-color, hsla(224deg, 23%, 26%, 0.8));
-  --highlight-color: var(--grey);
-
-  display: flex;
-  flex-direction: column;
-  color: var(--color);
-
-  alchemy-icon {
-    margin-right: var(--size-2);
-
-    .icon {
-      fill: currentColor;
-    }
-  }
-
-  .select2-highlighted & {
-    color: var(--highlight-color);
-  }
-}
-
-.page-select--top,
-.page-select--bottom {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.page-select--bottom {
-  font-size: var(--small-font-size);
-  padding-left: var(--size-1);
-}
-
-.page-select--page-urlname {
-  color: var(--text-color-muted, hsla(224deg, 23%, 26%, 0.5));
-  padding-right: var(--size-2);
-
-  .select2-highlighted & {
-    color: var(--highlight-color);
-  }
-}
-
-.page-select--language-code {
-  --bg-color: var(--grey);
-  --highlight-bg-color: var(--color-white, hsl(0deg, 0%, 100%));
-  --border-radius: var(--border-radius_medium, 3px);
-
-  display: inline-block;
-  background-color: var(--bg-color);
-  margin-left: auto;
-  border-radius: var(--border-radius);
-  padding: var(--size-1) var(--size-2);
-  text-transform: uppercase;
-
-  .select2-highlighted & {
-    color: var(--color);
-    background-color: var(--highlight-bg-color);
-  }
-}
-
-.page-select--site-name {
-  margin-left: auto;
-  padding: var(--size-2) 0 var(--size-2) var(--size-3);
-  font-size: var(--small-font-size);
-}
-
-@media (prefers-color-scheme: dark) {
-  .page-select--page {
-    --grey: var(--a-dark-grey, hsl(200deg, 5%, 17.5%));
-    --color: var(--select-text-color, hsl(200deg, 5%, 70%));
-    --highlight-color: var(--select-hover-text-color, hsl(0deg, 0%, 100%));
-  }
-
-  .page-select--page-urlname {
-    color: var(--a-lighter-grey, hsl(200deg, 5%, 70%));
-  }
-
-  .page-select--language-code {
-    --highlight-bg-color: var(--bg-color);
-  }
-}
+/* The page select renders the shared remote select layout. It is compiled
+ * standalone and linked by the Alchemy::Admin::PageSelect component, so it also
+ * pulls in the Tom Select theme for pages that do not load the admin stylesheet.
+ */
+@use "remote-select";
+@use "tom-select";

data/app/stylesheets/alchemy/admin/print.scss

@@ -9,10 +9,6 @@ div.pagination a {
   display: none;
 }
 
-div#archive_all {
-  padding: 0;
-}
-
 span.icon.true:before {
   content: "x";
 }