Adjust styling of page definitions

Author: tvdeyen

app/assets/builds/alchemy/admin.css

@@ -21,7 +21,7 @@
   aside {
     position: sticky;
     top: calc(var(--top-menu-height) + var(--spacing-2));
-    background-color: var(--sidebar-background-color);
+    background-color: var(--panel-background-color);
     border-radius: var(--border-radius_medium);
     padding: var(--spacing-4);
     margin-bottom: var(--spacing-2);
@@ -31,20 +31,22 @@
       flex-direction: column;
       gap: var(--spacing-2);
       list-style-position: outside;
-      margin-left: var(--spacing-1);
+      margin: 0 var(--spacing-1);
     }
 
     li {
-      padding: var(--spacing-1);
+      margin: var(--spacing-1) 0;
+      padding: var(--spacing-2);
       font-weight: bold;
     }
   }
 
   details {
-    padding: var(--spacing-2);
-    margin: var(--spacing-2) 0;
+    padding: var(--spacing-2) var(--spacing-2);
+    margin: var(--spacing-4) 0;
     background-color: var(--element-header-bg-color);
     border-radius: var(--border-radius_medium);
+    border: 1px solid hsla(0, 0%, 45%, 0.15);
 
     summary {
       display: flex;
@@ -53,6 +55,7 @@
       padding: var(--spacing-1) 0;
       font-weight: bold;
       gap: var(--spacing-1);
+      transition: margin var(--transition-duration) ease-out;
 
       header {
         display: flex;
@@ -62,8 +65,6 @@
         gap: var(--spacing-1);
 
         .label {
-          padding: var(--spacing-0) var(--spacing-2);
-          background-color: hsla(0, 0%, 45%, 0.15);
           margin-left: auto;
           font-weight: normal;
 
@@ -83,24 +84,43 @@
       }
     }
 
-    &[open] > summary:before {
-      content: "▾";
+    &[open] {
+      > summary {
+        &:before {
+          content: "▾";
+        }
+
+        margin-bottom: var(
+          --spacing-1
+        ); // necessary for the detail opening transition to work
+      }
     }
 
     > div {
       padding: var(--spacing-1) 0 var(--spacing-1) var(--spacing-5);
     }
 
     ol {
-      list-style-type: none;
-      padding-left: 0;
+      list-style-type: square;
+      margin: var(--spacing-4) 0;
+      padding-left: var(--spacing-3);
 
       li {
-        margin: var(--spacing-4) 0;
+        margin: var(--spacing-6) 0;
+
+        &:only-child {
+          margin-top: 0;
+          margin-bottom: 0;
+        }
 
         header {
           gap: var(--spacing-2);
         }
+
+        p.description {
+          margin: var(--spacing-2) 0;
+          padding: var(--spacing-2);
+        }
       }
     }
 
@@ -113,7 +133,7 @@
   .page-definition {
     padding: var(--spacing-4);
     margin-bottom: var(--spacing-2);
-    background-color: var(--sidebar-background-color);
+    background-color: var(--panel-background-color);
     border-radius: var(--border-radius_medium);
 
     > img {
@@ -124,6 +144,18 @@
 
     p {
       margin: var(--spacing-4) 0;
+      padding: var(--spacing-4);
+      background-color: hsla(0, 0%, 45%, 0.05);
+      border-radius: var(--border-radius_medium);
+
+      &:first-child {
+        margin-top: var(--spacing-2);
+      }
+    }
+
+    .label {
+      padding: var(--spacing-0) var(--spacing-2);
+      background-color: hsla(0, 0%, 45%, 0.15);
     }
   }
 }

app/stylesheets/alchemy/admin/page_definitions.scss

@@ -13,14 +13,6 @@
       </header>
     </summary>
     <div>
-      <% if element.deprecated %>
-        <alchemy-message type="warning">
-          <%= element.deprecation_notice %>
-        </alchemy-message>
-      <% end %>
-      <% if element.has_hint? %>
-        <p><%= element.hint %></p>
-      <% end %>
       <% if element.unique %>
         <sl-tooltip content="This element can only be used once per page">
           <small class="label">
@@ -35,6 +27,14 @@
           </small>
         </sl-tooltip>
       <% end %>
+      <% if element.deprecated %>
+        <alchemy-message type="warning">
+          <%= element.deprecation_notice %>
+        </alchemy-message>
+      <% end %>
+      <% if element.has_hint? %>
+        <p class="description"><%= element.hint %></p>
+      <% end %>
       <% if element.ingredients.any? %>
         <ol>
           <%= render collection: element.ingredients, partial: "ingredient", locals: {element_name: element_name} %>

app/views/alchemy/admin/page_definitions/_element.html.erb

@@ -4,6 +4,6 @@
     <small><%= Alchemy::Ingredient.normalize_type(ingredient.type).constantize.model_name.human %></small>
   </header>
   <% if ingredient.has_hint? %>
-    <p><%== ingredient.hint %></p>
+    <p class="description"><%= sanitize ingredient.hint %></p>
   <% end %>
 </li>

app/views/alchemy/admin/page_definitions/_ingredient.html.erb

@@ -14,8 +14,15 @@
   <% if page_definition.image %>
     <%= image_tag page_definition.image %>
   <% end %>
+  <% if page_definition.unique %>
+    <sl-tooltip content="This page can only be used once per page">
+      <small class="label">
+        <%= Alchemy::PageDefinition.human_attribute_name(:unique) %>
+      </small>
+    </sl-tooltip>
+  <% end %>
   <% if page_definition.has_hint? %>
-    <p><%= page_definition.hint %></p>
+    <p class="description"><%= page_definition.hint %></p>
   <% end %>
   <% if page_definition.elements.any? %>
     <%= render collection: page_definition.elements, partial: "element", as: "element_name" %>

app/views/alchemy/admin/page_definitions/_page_definition.html.erb

@@ -211,6 +211,7 @@
 
 - name: slide
   icon: image-2-line
+  hint: "A single slide for the slider element."
   compact: true
   ingredients:
     - role: picture

spec/dummy/config/alchemy/elements.yml

@@ -53,6 +53,7 @@
   searchresults: true
 
 - name: contact
+  hint: The contact page provides a contactform.
   unique: true
   cache: false
   elements: [headline, text, contactform]