Better node-select seperator styling

Makes it more readable and consistant.
AlchemyCMS · May 16, 2024 · e49e2b5 · e49e2b5
1 parent 0c79541
commit e49e2b5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/app/assets/stylesheets/alchemy/node-select.scss b/app/assets/stylesheets/alchemy/node-select.scss
@@ -10,15 +10,23 @@
   align-items: center;
   height: 21px;
 
-  .icon {
+  > alchemy-icon {
     margin: 0 8px 0 4px;
+  }
 
+  .icon {
     .select2-highlighted & {
       fill: $white;
     }
   }
 }
 
+.node-select--node-display_name,
+.node-select--node-ancestors {
+  display: inline-flex;
+  align-items: center;
+}
+
 .node-select--node-name {
   font-weight: bold;
 }

diff --git a/app/javascript/alchemy_admin/components/node_select.js b/app/javascript/alchemy_admin/components/node_select.js
@@ -23,12 +23,14 @@ class NodeSelect extends RemoteSelect {
    */
   _renderListEntry(node) {
     const ancestors = node.ancestors.map((a) => a.name)
+    const seperator = `<alchemy-icon name="arrow-right-s"></alchemy-icon>`
+
     return `
       <div class="node-select--node">
         <alchemy-icon name="menu-2"></alchemy-icon>
         <div class="node-select--node-display_name">
           <span class="node-select--node-ancestors">
-            ${ancestors.join(" /&nbsp;")}
+            ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""}
           </span>
           <span class="node-select--node-name">
             ${node.name}

diff --git a/app/views/alchemy/admin/nodes/_page_nodes.html.erb b/app/views/alchemy/admin/nodes/_page_nodes.html.erb
@@ -7,10 +7,11 @@
       <th class="tools"></th>
     </tr>
     <% nodes = @page.nodes.select(&:persisted?) %>
+    <% seperator = '<alchemy-icon name="arrow-right-s" style="vertical-align: text-bottom"></alchemy-icon>' %>
     <% if nodes.length > 0 %>
       <% nodes.each do |node| %>
         <tr class="even">
-          <td><%= "#{node.ancestors.map(&:name).join(" / ")} / #{node.name}" %></td>
+          <td><%== "#{node.ancestors.map(&:name).join(seperator)}#{seperator}<strong>#{node.name}</strong>" %></td>
           <td class="tools">
             <sl-tooltip content="<%= Alchemy.t("delete_node") %>">
               <%= link_to render_icon(:minus),