alchemy_cms 7.1.7 → 7.2.0.rc1

data/app/assets/stylesheets/alchemy/sitemap.scss

@@ -1,24 +1,55 @@
-$sitemap-url-large-width: 250px;
-$sitemap-url-xlarge-width: 350px;
-$sitemap-url-header-offset: 110px;
-
-#sort_panel {
-  background: $light-gray;
-  padding: 47px 0 8px 0;
-  position: fixed;
-  top: 29px;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  border-bottom: $default-border;
-
-  div.info {
-    margin: 16px 12px 8px 163px;
+:root {
+  --sitemap-url-width: 420px;
+  --sitemap-url-header-offset: 0;
+  --sitemap-status-width-base: 90px;
+  --sitemap-status-length: 2;
+
+  @media screen and (min-width: $large-screen-break-point) {
+    --sitemap-url-width: 520px;
+  }
+
+  @media screen and (min-width: $xlarge-screen-break-point) {
+    --sitemap-url-width: 620px;
   }
 
-  .buttons {
-    margin: 0 12px 0 163px;
-    text-align: right;
+  @media screen and (min-width: $xxlarge-screen-break-point) {
+    --sitemap-url-width: 820px;
+  }
+}
+
+#sitemap_heading {
+  display: flex;
+  padding: 0;
+  line-height: 28px;
+
+  .page_name {
+    margin-left: 43px;
+  }
+
+  .page_urlname {
+    display: none;
+    margin-left: auto;
+    padding-left: $default-padding;
+    width: calc(var(--sitemap-url-width) - 60px);
+
+    @media screen and (min-width: $large-screen-break-point) {
+      display: block;
+    }
+  }
+
+  .page_status {
+    display: none;
+    padding-left: 2 * $default-padding;
+    margin-right: 190px;
+    margin-left: auto;
+
+    @media screen and (min-width: $medium-screen-break-point) {
+      display: block;
+    }
+
+    @media screen and (min-width: $large-screen-break-point) {
+      margin-left: initial;
+    }
   }
 }
 
@@ -27,49 +58,49 @@ $sitemap-url-header-offset: 110px;
   min-height: calc(100vh - 148px);
 }
 
-.sitemap_pagename_link {
-  display: block;
-  padding: 0 10px;
-  margin: 2px;
-  text-decoration: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
+#sitemap {
+  padding: 0 0 104px 0;
 
-  &.inactive {
-    color: #656565;
+  .page-icon {
+    display: inline-flex;
   }
-}
 
-.sitemap_url {
-  display: none;
-  float: right;
-  background-color: $sitemap-info-background-color;
-  line-height: $sitemap-line-height - 2px;
-  font-size: $small-font-size;
-  padding: 0 2 * $default-padding;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: 1px solid $sitemap-page-background-color;
+  .handle {
+    cursor: move;
+  }
 
-  @media screen and (min-width: $large-screen-break-point) {
-    display: block;
-    width: $sitemap-url-large-width;
+  .page_folder {
+    position: absolute;
+    left: -$sitemap-line-height;
+    top: 0;
+    width: $sitemap-line-height;
+    height: $sitemap-line-height;
   }
 
-  @media screen and (min-width: 1440px) {
-    width: $sitemap-url-xlarge-width;
+  .placeholder {
+    background-color: $medium-gray;
+    margin-bottom: 0px;
+    margin-left: 22px;
   }
-}
 
-.sitemap_line_spacer {
-  float: left;
-  width: 20px;
-  height: 28px;
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+
+  li {
+    padding-left: 0;
+
+    li {
+      padding-left: $sitemap-line-height;
+      padding-right: 0;
+    }
+  }
 }
 
 .sitemap_page {
+  display: flex;
+  align-items: center;
   height: $sitemap-line-height;
   margin: 3 * $default-margin 0;
   position: relative;
@@ -87,89 +118,65 @@ $sitemap-url-header-offset: 110px;
     background-color: $sitemap-page-hover-color;
     border-radius: $default-border-radius;
   }
-}
-
-.sitemap_sitename {
-  @include border-left-radius($default-border-radius);
-  line-height: $sitemap-line-height - 4;
-  overflow: hidden;
-  background-color: $sitemap-page-background-color;
 
-  &.without-status {
-    @include border-right-radius($default-border-radius);
+  &:has(.page_infos :nth-child(3)) {
+    --sitemap-status-length: 3;
   }
+
+  --sitemap-status-width: calc(
+    var(--sitemap-status-width-base) * var(--sitemap-status-length)
+  );
 }
 
 .sitemap_left_images {
   position: relative;
-  width: 32px;
-  line-height: $sitemap-line-height;
-  float: left;
-  text-align: center;
-}
-
-.sitemap_right_tools {
+  justify-content: center;
   display: flex;
   align-items: center;
-  gap: $default-padding;
+  flex-shrink: 0;
+  width: 32px;
   height: $sitemap-line-height;
-  padding: 0 2 * $default-padding;
-  float: right;
-
-  .sitemap_tool {
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
-    line-height: $sitemap-line-height;
-    text-align: center;
-    margin: 0;
-
-    &.disabled .icon {
-      opacity: 0.25;
-      filter: grayscale(100%);
-    }
-  }
-
-  .icon.blank {
-    margin-left: 2px;
-    float: left;
-    margin-top: 3px;
-    margin-right: 3px;
-  }
 }
 
-#sitemap {
-  padding: 0 0 104px 0;
-
-  .handle {
-    cursor: move;
-  }
+.sitemap_sitename {
+  flex-grow: 1;
+  @include border-left-radius($default-border-radius);
+  line-height: $sitemap-line-height - 4;
+  overflow: hidden;
+  background-color: $sitemap-page-background-color;
 
-  .page_folder {
-    position: absolute;
-    left: -$sitemap-line-height;
-    top: 0;
-    width: $sitemap-line-height;
-    height: $sitemap-line-height;
+  &.without-status {
+    @include border-right-radius($default-border-radius);
   }
 
-  .placeholder {
-    background-color: $medium-gray;
-    margin-bottom: 0px;
-    margin-left: 22px;
-  }
+  .sitemap_pagename_link {
+    display: block;
+    padding: 0 10px;
+    margin: 2px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
 
-  ul {
-    margin: 0;
-    padding: 0;
+    &.inactive {
+      color: #656565;
+    }
   }
+}
 
-  li {
-    padding-left: 0;
+.sitemap_url {
+  display: none;
+  background-color: $sitemap-info-background-color;
+  line-height: $sitemap-line-height - 2px;
+  font-size: $small-font-size;
+  padding: 0 2 * $default-padding;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid $sitemap-page-background-color;
+  width: calc(var(--sitemap-url-width) - var(--sitemap-status-width));
 
-    li {
-      padding-left: $sitemap-line-height;
-      padding-right: 0;
-    }
+  @media screen and (min-width: $large-screen-break-point) {
+    display: block;
   }
 }
 
@@ -177,10 +184,9 @@ $sitemap-url-header-offset: 110px;
   @extend .right-rounded-border;
   background-color: $sitemap-page-background-color;
   border-left: 1px solid $light-gray;
-  float: right;
   display: none;
   justify-content: end;
-  width: 170px;
+  width: var(--sitemap-status-width);
   height: $sitemap-line-height;
   line-height: $sitemap-line-height;
 
@@ -195,58 +201,48 @@ $sitemap-url-header-offset: 110px;
   }
 }
 
-.page_status_and_name .page_status {
-  margin-left: 2px;
-}
-
-.page_status {
-  display: inline-block;
-
-  .alchemy-dialog & {
-    display: block;
-  }
-}
-
-#sitemap_heading {
-  display: flex;
-  padding: 0;
-  line-height: 28px;
+.sitemap_right_tools {
+  display: none;
+  align-items: center;
+  gap: $default-padding;
+  height: $sitemap-line-height;
+  padding: 0 2 * $default-padding;
 
-  .page_name {
-    margin-left: 43px;
+  @media screen and (min-width: $small-screen-break-point) {
+    display: flex;
   }
 
-  .page_urlname {
-    display: none;
-    margin-left: auto;
-    padding-left: $default-padding;
-
-    @media screen and (min-width: $large-screen-break-point) {
-      display: block;
-      width: $sitemap-url-large-width + $sitemap-url-header-offset;
-    }
+  .sitemap_tool {
+    width: $sitemap-line-height;
+    height: $sitemap-line-height;
+    line-height: $sitemap-line-height;
+    text-align: center;
+    margin: 0;
 
-    @media screen and (min-width: 1440px) {
-      width: $sitemap-url-xlarge-width + $sitemap-url-header-offset;
+    &.disabled .icon {
+      opacity: 0.25;
+      filter: grayscale(100%);
     }
   }
+}
 
-  .page_status {
-    display: none;
-    padding-left: 2 * $default-padding;
-    margin-right: 190px;
-    margin-left: auto;
-
-    @media screen and (min-width: $medium-screen-break-point) {
-      display: block;
-    }
+.page_status_and_name .page_status {
+  margin-left: $default-margin;
+  margin-bottom: -1px;
 
-    @media screen and (min-width: $large-screen-break-point) {
-      margin-left: initial;
-    }
+  // The lock icon is a bit too high, so we need to adjust it
+  &:last-child {
+    margin-bottom: 0;
   }
 }
 
+.page_status {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: $default-margin;
+}
+
 #page_filter_result {
   display: none;
   margin-left: 2 * $default-margin;

data/app/assets/stylesheets/alchemy/tables.scss

@@ -11,8 +11,29 @@ table {
   }
 }
 
+.table {
+  display: flex;
+  flex-direction: column;
+  row-gap: $default-padding;
+
+  .row,
+  header {
+    display: flex;
+  }
+
+  .col {
+    flex: 1;
+  }
+
+  .tools {
+    flex: 0;
+    white-space: nowrap;
+  }
+}
+
 .list td,
-.list th {
+.list th,
+.table .col {
   padding: 2 * $default-padding 3 * $default-padding;
   vertical-align: top;
   line-height: 22px;
@@ -42,7 +63,8 @@ table {
   }
 }
 
-th {
+th,
+.table header .col {
   white-space: nowrap;
   text-align: left;
   vertical-align: top;
@@ -50,19 +72,26 @@ th {
   font-weight: bold;
 }
 
-tr.even td {
+tr.even td,
+.table .row.even .col {
   background-color: $table-row-even-background-color;
 }
 
-tr.odd td {
+tr.odd td,
+.table .row.odd .col {
   background-color: $table-row-odd-background-color;
 }
 
-.list tr .tools {
-  width: 40px;
+.list tr .tools,
+.table .row .col.tools {
   padding: $default-padding 2 * $default-padding;
   white-space: nowrap;
   @extend .disable-user-select;
+  background-color: transparent;
+}
+
+.list tr .tools {
+  width: 40px;
 
   &.long {
     width: 60px;
@@ -75,18 +104,20 @@ td.heading {
   text-decoration: underline;
 }
 
-.list .tools .icon,
-.list td.icon .icon {
+.list .tools alchemy-icon,
+.list td.icon alchemy-icon {
   @extend .disable-user-select;
-  margin: 0 $default-margin;
+  margin: 2px 0;
 }
 
-.list tr:hover td {
+.list tr:hover td,
+.table .row:hover .col {
   background-color: $table-row-hover-color;
 }
 
 td,
-th {
+th,
+.table .col {
   &.center,
   &.boolean {
     text-align: center;
@@ -97,7 +128,8 @@ th {
   }
 }
 
-td {
+td,
+.table .col {
   &.file_name {
     white-space: nowrap;
   }
@@ -184,3 +216,8 @@ td#user_roles {
     min-width: 40%;
   }
 }
+
+.sort_link {
+  display: inline-flex;
+  align-items: center;
+}

data/app/assets/stylesheets/alchemy/tags.scss

@@ -7,7 +7,7 @@
     max-height: 316px;
   }
 
-  .js_filter_field_box {
+  alchemy-list-filter {
     margin: 0;
 
     input {
@@ -37,7 +37,7 @@
       a {
         @include tag-base;
         text-decoration: none;
-        display: block;
+        display: flex;
       }
 
       &:hover {
@@ -48,6 +48,10 @@
         a {
           background-color: $dark-gray;
           color: $light-gray;
+
+          &:before {
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.95)"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+          }
         }
       }
     }
@@ -92,7 +96,7 @@
 }
 
 #tags_tag_list {
-  .js_filter_field_box {
+  alchemy-list-filter {
     margin-top: 0;
   }
 
@@ -135,14 +139,16 @@
 .autocomplete_tag_list {
   .select2-container.select2-container-multi {
     .select2-search-choice {
-      padding: 0;
-
-      div {
-        @include tag-base(
-          $padding: $default-padding 6 * $default-padding $default-padding 3 *
-            $default-padding,
-          $margin: 0
-        );
+      padding: $default-padding 22px;
+      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#{$icon-color}"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>');
+      background-repeat: no-repeat;
+      background-position: 6px;
+      background-color: $medium-gray;
+      background-size: 1rem;
+
+      > div {
+        position: relative;
+        top: -1px;
       }
     }
   }

data/app/assets/stylesheets/alchemy/toolbar.scss

@@ -48,8 +48,8 @@
 
   .icon_button {
     .icon {
-      font-size: 1.5em;
-      text-shadow: 0 0 1px rgba(#fff, 0.75);
+      width: var(--icon-size-xl);
+      height: var(--icon-size-xl);
     }
   }
 

data/app/assets/stylesheets/alchemy/typography.scss

@@ -1,42 +1,57 @@
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4,
-h5, .h5 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4,
+h5,
+.h5 {
   padding: 0;
   margin: 1em 0;
 }
 
-h1, .h1,
-h2, .h2,
-h3, .h3,
-h4, .h4 {
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3,
+h4,
+.h4 {
   font-weight: bold;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: 1.5rem;
 }
 
-h2, .h2 {
+h2,
+.h2 {
   font-size: 1.25rem;
 }
 
-h3, .h3 {
+h3,
+.h3 {
   font-size: 1.125rem;
 }
 
-h4, .h4,
-h5, .h5 {
+h4,
+.h4,
+h5,
+.h5 {
   font-size: 1rem;
 }
 
-h5, .h5 {
+h5,
+.h5 {
   font-weight: normal;
 }
 
 p {
-  margin: 0 0 2*$default-margin 0;
+  margin: 0 0 2 * $default-margin 0;
   white-space: normal;
 
   a {
@@ -44,12 +59,16 @@ p {
   }
 }
 
-kbd {
-  font-family: Courier, monospaced;
-  background: $medium-gray;
+kbd,
+code {
   border: $default-border;
-  padding: 0.25em 0.5em;
-  vertical-align: top;
-  margin-right: 1ex;
   border-radius: $default-border-radius;
+  font-family: Courier, monospaced;
+  margin: 0 0.25ex;
+  padding: 0.25em 0.5em;
+  vertical-align: baseline;
+}
+
+code {
+  background: $medium-gray;
 }

data/app/assets/stylesheets/alchemy/upload.scss

@@ -22,11 +22,12 @@
   &:after {
     align-items: center;
     background-color: rgba($dark-gray, 0.6);
-    color: rgba(255, 255, 255, 0.6);
-    content: $ri-upload-cloud-line;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="rgba(255, 255, 255, 0.6)"><path d="M1 14.5C1 12.1716 2.22429 10.1291 4.06426 8.9812C4.56469 5.044 7.92686 2 12 2C16.0731 2 19.4353 5.044 19.9357 8.9812C21.7757 10.1291 23 12.1716 23 14.5C23 17.9216 20.3562 20.7257 17 20.9811L7 21C3.64378 20.7257 1 17.9216 1 14.5ZM16.8483 18.9868C19.1817 18.8093 21 16.8561 21 14.5C21 12.927 20.1884 11.4962 18.8771 10.6781L18.0714 10.1754L17.9517 9.23338C17.5735 6.25803 15.0288 4 12 4C8.97116 4 6.42647 6.25803 6.0483 9.23338L5.92856 10.1754L5.12288 10.6781C3.81156 11.4962 3 12.927 3 14.5C3 16.8561 4.81833 18.8093 7.1517 18.9868L7.325 19H16.675L16.8483 18.9868ZM13 13V17H11V13H8L12 8L16 13H13Z"></path></svg>');
+    background-repeat: no-repeat;
+    background-size: 80px 80px;
+    background-position: center;
+    content: "";
     display: flex;
-    font-family: "remixicon";
-    font-size: 80px;
     justify-content: center;
     height: 100%;
     left: 0;