alchemy_cms 8.2.7 → 8.3.0

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

@@ -1,26 +1,247 @@
+@use "../variables" as vars;
+
 #dashboard {
+  display: flex;
+  flex-direction: column;
   overflow: auto;
-  padding: var(--spacing-4) 0;
   width: 100%;
+  min-height: 100%;
   position: relative;
 
-  h1 {
-    font-size: 1.5em;
-    margin: 0 0 var(--spacing-2) var(--spacing-2);
+  .greeting {
+    grid-column: span 4;
+    flex: 1 1 50%;
+    padding: var(--spacing-4) var(--spacing-3) var(--spacing-4);
+
+    @media (min-width: vars.$medium-screen-break-point) {
+      grid-column: span 2;
+    }
+
+    @media (min-width: vars.$large-screen-break-point) {
+      grid-column: span 2;
+    }
+
+    h1 {
+      font-size: var(--font-size_large);
+      margin-top: 0;
+    }
+
+    p {
+      margin: var(--spacing-4) 0;
+    }
+
+    .user-name {
+      white-space: nowrap;
+    }
+  }
+
+  alchemy-message {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .top-row {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    padding: var(--spacing-2);
+    gap: var(--spacing-4);
+    align-items: stretch;
+  }
+
+  footer {
+    display: flex;
+    margin: auto 0 0;
+    padding-top: var(--spacing-6);
+    justify-content: center;
+    color: var(--text-color-muted);
+    text-align: center;
+
+    ul {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      gap: var(--spacing-1);
+      list-style-type: none;
+
+      li {
+        white-space: nowrap;
+      }
+
+      @media (min-width: vars.$medium-screen-break-point) {
+        flex-direction: row;
+        gap: var(--spacing-6);
+      }
+    }
   }
 
-  p {
-    margin: 0 0 var(--spacing-4) var(--spacing-2);
+  .stats {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    padding: var(--spacing-2);
+    gap: var(--spacing-4);
+    align-items: stretch;
   }
 
-  .column {
-    width: 50%;
-    float: left;
-    padding-right: var(--spacing-4);
+  .widgets {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-flow: dense;
+    padding: var(--spacing-2);
+    gap: var(--spacing-4);
+    align-items: start;
   }
 
   .widget {
-    margin-bottom: var(--spacing-4);
+    position: relative;
+    min-height: 92px;
+    grid-column: span var(--col-span, 4);
+    border-radius: var(--border-radius_large);
+    background-color: var(--dashboard-widget-background-color);
+    box-shadow: var(--dashboard-widget-box-shadow);
+    --table-row-height: var(--spacing-6);
+
+    @media (min-width: vars.$medium-screen-break-point) {
+      --col-span: 2;
+    }
+
+    @media (min-width: vars.$xxlarge-screen-break-point) {
+      --col-span: 1;
+    }
+
+    &.stat {
+      --col-span: 4;
+      min-height: 115px;
+
+      .widget-body {
+        gap: var(--spacing-2);
+        padding: var(--spacing-4);
+
+        .count {
+          font-weight: bold;
+          font-size: var(--font-size_xlarge);
+        }
+      }
+
+      @media (min-width: vars.$medium-screen-break-point) {
+        --col-span: 2;
+      }
+
+      @media (min-width: vars.$xxlarge-screen-break-point) {
+        --col-span: 1;
+      }
+    }
+
+    &.usage {
+      --table-row-height: var(--spacing-7);
+      min-height: 237px;
+
+      @media (min-width: vars.$xxlarge-screen-break-point) {
+        --col-span: 2;
+      }
+    }
+
+    &.wide {
+      --col-span: 4;
+
+      @media (min-width: vars.$xxlarge-screen-break-point) {
+        --col-span: 2;
+      }
+    }
+
+    &.system-info {
+      grid-column: span 4;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--spacing-4);
+      padding: var(--spacing-4);
+
+      @media (min-width: vars.$medium-screen-break-point) {
+        grid-column: span 2;
+      }
+
+      @media (min-width: vars.$large-screen-break-point) {
+        flex-direction: row;
+      }
+
+      @media (min-width: vars.$xxlarge-screen-break-point) {
+        grid-column: 4;
+      }
+    }
+
+    .label-with-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--icon-gap, var(--spacing-2));
+
+      > alchemy-icon,
+      > svg {
+        width: var(--icon-size, var(--icon-size-md));
+        height: var(--icon-size, var(--icon-size-md));
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  .widget-body {
+    display: flex;
+    flex-direction: column;
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--spacing-3) var(--spacing-4);
+      font-weight: var(--font-weight_bold);
+      line-height: 1.6;
+      border-bottom: 2px solid var(--table-border-color);
+
+      aside {
+        font-weight: normal;
+      }
+    }
+
+    alchemy-message {
+      margin: var(--spacing-4) var(--spacing-4);
+    }
+
+    .table-scroll {
+      max-height: calc(var(--table-row-height) * 10);
+      overflow-y: auto;
+      border-radius: var(--border-radius_large);
+
+      background:
+        linear-gradient(
+            var(--dashboard-widget-background-color) 30%,
+            var(--table-scroll-fade-color)
+          )
+          center top,
+        linear-gradient(
+            var(--table-scroll-fade-color),
+            var(--dashboard-widget-background-color) 70%
+          )
+          center bottom,
+        radial-gradient(
+            ellipse 75% 125% at 50% -50%,
+            var(--table-scroll-shadow-color),
+            transparent
+          )
+          center top,
+        radial-gradient(
+            ellipse 75% 125% at 50% 150%,
+            var(--table-scroll-shadow-color),
+            transparent
+          )
+          center bottom;
+      background-repeat: no-repeat;
+      background-size:
+        100% 24px,
+        100% 24px,
+        100% 10px,
+        100% 10px;
+      background-attachment: local, local, scroll, scroll;
+    }
 
     h2 {
       padding: var(--spacing-2);
@@ -32,31 +253,180 @@
     }
 
     table {
+      border-spacing: 0;
+      border-radius: var(--border-radius_large);
+
+      &.usage-stats {
+        td {
+          padding: var(--spacing-2) var(--spacing-4);
+          border: 0 none;
+        }
+
+        td.usage-stats--bar {
+          width: 50%;
+          padding: var(--spacing-2);
+
+          .bar {
+            display: inline-flex;
+            height: var(--spacing-2);
+            border-radius: var(--border-radius_medium);
+            min-width: 1px;
+            overflow: hidden;
+
+            .bar__public,
+            .bar__draft {
+              height: 100%;
+              background-color: #{"oklch(65% 0.15 var(--bar-hue, 0))"};
+            }
+
+            .bar__draft {
+              opacity: 0.35;
+            }
+          }
+        }
+
+        td.usage-stats--label {
+          width: 30%;
+        }
+
+        td.usage-stats--value {
+          width: 10%;
+          font-variant-numeric: tabular-nums;
+          text-align: end;
+          white-space: nowrap;
+        }
+      }
+
+      tr {
+        &:first-child {
+          td,
+          th {
+            &:first-child {
+              border-top-left-radius: var(--border-radius_large);
+            }
+          }
+
+          td,
+          th {
+            &:last-child {
+              border-top-right-radius: var(--border-radius_large);
+            }
+          }
+        }
+
+        &:last-child {
+          td,
+          th {
+            &:first-child {
+              border-bottom-left-radius: var(--border-radius_large);
+            }
+          }
+
+          td,
+          th {
+            border-bottom-width: 0;
+
+            &:last-child {
+              border-bottom-right-radius: var(--border-radius_large);
+            }
+          }
+        }
+
+        &:hover td {
+          background-color: transparent;
+        }
+      }
+
+      th,
+      td {
+        padding: var(--spacing-3) var(--spacing-4);
+      }
+
+      th {
+        border-right-width: 0;
+      }
+
       td {
         position: relative;
+        border-bottom: 1px solid var(--table-border-color);
+        border-right: 0 none;
 
-        &:first-child {
-          width: 40%;
+        &.button {
+          width: 5%;
+        }
+
+        &.name {
+          width: 20%;
+        }
+
+        &.page_name {
+          width: 45%;
+        }
+
+        &.site_name {
+          width: 20%;
+        }
+
+        .label-with-icon {
+          align-items: start;
+
+          > alchemy-icon,
+          > svg {
+            margin-block-start: 0.3em;
+          }
         }
 
-        form {
-          float: right;
+        .button_to {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          padding-block-start: var(--spacing-1);
         }
       }
     }
   }
-}
 
-.logo {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 0.5em;
+  .version-info {
+    display: flex;
+    flex: 1 1 100%;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: center;
+
+    @media (min-width: vars.$large-screen-break-point) {
+      flex-basis: 50%;
+      align-items: start;
+      padding-left: var(--spacing-4);
+    }
+
+    .version {
+      font-weight: var(--font-weight_bold);
+    }
 
-  svg {
-    width: 200px;
-    height: auto;
+    .ruby-rails-version {
+      display: inline-flex;
+      gap: var(--spacing-2);
+      --icon-gap: var(--spacing-1);
+      --icon-size: var(--icon-size-sm);
+      font-size: var(--font-size_small);
+    }
+  }
+
+  .logo {
+    display: flex;
+    flex: 1 1 100%;
+    justify-content: center;
+
+    @media (min-width: vars.$large-screen-break-point) {
+      flex-basis: 50%;
+      padding-right: var(--spacing-4);
+    }
+
+    > svg {
+      width: auto;
+      max-width: 100%;
+      height: 60px;
+    }
   }
 }
 
@@ -64,9 +434,6 @@ alchemy-update-check {
   display: flex;
   position: relative;
   height: 16px;
-  margin-bottom: 2em;
-  text-align: center;
-  justify-content: center;
 
   > span {
     display: inline-flex;

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

@@ -388,7 +388,7 @@ button.element-toggle {
       pointer-events: none;
     }
 
-    .element-body {
+    .element-ingredient-editors {
       margin: var(--spacing-1) var(--spacing-2);
     }
 
@@ -436,14 +436,9 @@ button.element-toggle {
   .alchemy-popover {
     width: 360px;
     padding-bottom: var(--spacing-0);
-
-    label {
-      margin-bottom: var(--spacing-1);
-      font-size: var(--font-size_small);
-    }
   }
 
-  .element-body {
+  .element-ingredient-editors {
     margin: var(--spacing-2);
   }
 
@@ -465,11 +460,13 @@ button.element-toggle {
 
   .autocomplete_tag_list {
     display: block;
-    margin-top: var(--spacing-1);
-    padding: var(--spacing-1) 0;
+    padding: var(--spacing-2) var(--spacing-2) var(--spacing-3);
+    border-top: 1px solid var(--element-toolbar-border-color);
 
     label {
+      display: block;
       font-size: var(--font-size_small);
+      text-indent: 1px;
     }
 
     .select2-container {
@@ -595,22 +592,22 @@ alchemy-publish-element-button {
 
 .ingredient-group {
   width: 100%;
-  padding: var(--spacing-1) 0;
-  position: relative;
-  border-bottom: 1px solid var(--element-toolbar-border-color);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-top: 1px solid var(--element-toolbar-border-color);
 
-  &:last-child {
-    border-bottom: none;
-    padding-bottom: 0;
+  &:first-of-type {
+    margin-top: var(--spacing-1);
   }
 
   summary {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    font-weight: bold;
+    justify-content: start;
+    gap: var(--spacing-0);
     text-decoration: none;
     padding: var(--spacing-1) 1px;
+    margin-left: calc(-1 * var(--spacing-1));
+    cursor: pointer;
   }
 
   &[open] {

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

@@ -46,7 +46,7 @@ textarea {
 
 .alchemy-char-counter {
   display: block;
-  clear: both;
+  grid-column: 2;
   text-align: right;
 
   &.too-long {
@@ -71,8 +71,8 @@ fieldset {
   color: var(--border-color);
 }
 
-.page-publication-date-fields {
-  margin: var(--spacing-2) 0;
+form .input .page-publication-date-fields.input-row {
+  margin: var(--spacing-4) 0 var(--spacing-2) 0;
 
   &.hidden {
     display: none;