diff --git a/app/assets/stylesheets/alchemy/node-select.scss b/app/assets/stylesheets/alchemy/node-select.scss index 464c54b6c9..97a20649fd 100644 --- 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 index 98276050d4..fbf307c838 100644 --- 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 = `` + return `
- ${ancestors.join(" / ")} + ${ancestors.length > 0 ? ancestors.join(seperator) + seperator : ""} ${node.name} diff --git a/app/views/alchemy/admin/nodes/_page_nodes.html.erb b/app/views/alchemy/admin/nodes/_page_nodes.html.erb index 678274cc5b..dbe4e8d295 100644 --- a/app/views/alchemy/admin/nodes/_page_nodes.html.erb +++ b/app/views/alchemy/admin/nodes/_page_nodes.html.erb @@ -7,10 +7,11 @@ <% nodes = @page.nodes.select(&:persisted?) %> + <% seperator = '' %> <% if nodes.length > 0 %> <% nodes.each do |node| %> - <%= "#{node.ancestors.map(&:name).join(" / ")} / #{node.name}" %> + <%== "#{node.ancestors.map(&:name).join(seperator)}#{seperator}#{node.name}" %> "> <%= link_to render_icon(:minus),