Merge pull request #2780 from tvdeyen/fix-layoutpages-layout

Fix layoutpages layout
AlchemyCMS · Mar 8, 2024 · 2f87500 · 2f87500
2 parents c5172b4 + 38e15d4
commit 2f87500
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 66 deletions.
diff --git a/app/assets/stylesheets/alchemy/base.scss b/app/assets/stylesheets/alchemy/base.scss
@@ -28,7 +28,8 @@ noscript {
   color: $warning_text_color;
   background-color: $warning_background_color;
 
-  h1, p {
+  h1,
+  p {
     margin: 16px 0;
   }
 }
@@ -43,7 +44,9 @@ body {
   cursor: default;
 
   // Fix for strange element window offset
-  &.pages.edit { overflow: hidden }
+  &.pages.edit {
+    overflow: hidden;
+  }
 
   &.prevent-scrolling {
     overflow: hidden;
@@ -57,14 +60,16 @@ a {
 
   &:hover {
     text-decoration: underline;
+    text-decoration-thickness: 1px;
   }
 
   img {
     border: none;
   }
 }
 
-a:focus, [tabindex]:focus {
+a:focus,
+[tabindex]:focus {
   @include default-focus-style;
 }
 
@@ -82,14 +87,18 @@ hr {
   width: 80%;
   max-width: 500px;
   margin: 2em auto;
-  padding: 4*$default-padding;
+  padding: 4 * $default-padding;
   background: $medium-gray;
   border-radius: $default-border-radius;
 }
 
-.float_right { float: right }
+.float_right {
+  float: right;
+}
 
-.float_left { float: left }
+.float_left {
+  float: left;
+}
 
 .center {
   text-align: center;
@@ -124,11 +133,11 @@ hr {
 }
 
 .with_padding {
-  padding: 2*$default-padding;
+  padding: 2 * $default-padding;
 }
 
 .with_margin {
-  margin: 2*$default-margin;
+  margin: 2 * $default-margin;
 }
 
 a img {
@@ -142,18 +151,3 @@ a img {
 .hidden {
   display: none;
 }
-
-@-moz-keyframes spin {
-  from { -moz-transform: rotate(0deg); }
-  to   { -moz-transform: rotate(360deg); }
-}
-
-@-webkit-keyframes spin {
-  from { -webkit-transform: rotate(0deg); }
-  to   { -webkit-transform: rotate(360deg); }
-}
-
-@keyframes spin {
-  from {transform:rotate(0deg);}
-  to   {transform:rotate(360deg);}
-}
diff --git a/app/assets/stylesheets/alchemy/nodes.scss b/app/assets/stylesheets/alchemy/nodes.scss
@@ -84,6 +84,8 @@
 }
 
 .sitemap_node {
+  display: flex;
+  align-items: center;
   height: $sitemap-line-height;
   margin: 3 * $default-margin 0;
   transition: background-color $transition-duration;
@@ -102,8 +104,9 @@
   }
 
   .node_name {
-    height: $sitemap-line-height;
     display: flex;
+    height: $sitemap-line-height;
+    flex: 1;
     justify-content: space-between;
     @include border-left-radius($default-border-radius);
     padding: 0 0 0 10px;
@@ -126,8 +129,7 @@
 .nodes_tree-left_images {
   position: relative;
   width: 32px;
-  line-height: $sitemap-line-height;
-  float: left;
+  height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
   text-align: center;
 }
@@ -136,15 +138,13 @@
   display: flex;
   height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
-  float: right;
   align-items: center;
 
   > a {
-    float: left;
+    display: inline-flex;
     width: $sitemap-line-height;
     height: $sitemap-line-height;
-    line-height: $sitemap-line-height;
-    text-align: center;
+    align-items: center;
     text-decoration: none;
     margin: 0;
 

diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -149,7 +149,6 @@
     display: block;
     padding: 0 10px;
     margin: 2px;
-    text-decoration: none;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

diff --git a/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb b/app/views/alchemy/admin/layoutpages/_layoutpage.html.erb
@@ -11,6 +11,22 @@
       <i class="icon ri-file-line ri-xl"></i>
     <% end %>
     </div>
+    <div class="sitemap_sitename without-status">
+      <%= link_to(
+        layoutpage.name,
+        alchemy.edit_admin_page_path(layoutpage),
+        title: Alchemy.t(:edit_page),
+        class: "sitemap_pagename_link #{cycle('even', 'odd')}"
+      ) -%>
+    </div>
+    <div class="page_infos">
+      <% if layoutpage.locked? %>
+        <span class="page_status locked">
+          <i class="icon ri-fw ri-1x ri-edit-line"></i>
+          <%= layoutpage.status_title(:locked) %>
+        </span>
+      <% end %>
+    </div>
     <div class="sitemap_right_tools">
     <%- if can?(:configure, layoutpage) -%>
       <sl-tooltip content="<%= Alchemy.t(:edit_page_properties) %>">
@@ -54,21 +70,5 @@
       </sl-tooltip>
     <%- end -%>
     </div>
-    <div class="page_infos">
-      <% if layoutpage.locked? %>
-        <span class="page_status locked">
-          <i class="icon ri-fw ri-1x ri-edit-line"></i>
-          <%= layoutpage.status_title(:locked) %>
-        </span>
-      <% end %>
-    </div>
-    <div class="sitemap_sitename without-status">
-      <%= link_to(
-        layoutpage.name,
-        alchemy.edit_admin_page_path(layoutpage),
-        title: Alchemy.t(:edit_page),
-        class: "sitemap_pagename_link #{cycle('even', 'odd')}"
-      ) -%>
-    </div>
   </div>
 </li>
diff --git a/app/views/alchemy/admin/nodes/_node.html.erb b/app/views/alchemy/admin/nodes/_node.html.erb
@@ -7,6 +7,25 @@
     <span class="nodes_tree-left_images">
       &nbsp;
     </span>
+    <div class="node_name">
+      <%= node.name || '&nbsp;'.html_safe %>
+      <span class="node_page">
+      <% if node.page %>
+        <i class="icon ri-file-3-line"></i>
+        <%= link_to [:edit, :admin, node.page], title: Alchemy.t(:edit_page) do %>
+          <%= node.page.name %>
+        <% end %>
+      <% end %>
+      </span>
+      <% if node.url %>
+        <span class="node_url">
+          <%= link_to node.url, node.url, target: '_blank', title: node.url %>
+          <% if node.external? %>
+            <i class="ri-external-link-line ri-sm"></i>
+          <% end %>
+        </span>
+      <% end %>
+    </div>
     <span class="nodes_tree-right_tools">
       <% if can?(:edit, node) %>
         <sl-tooltip content="<%= node.root? ? Alchemy.t(:edit_menu) : Alchemy.t(:edit_node) %>">
@@ -52,25 +71,6 @@
         </sl-tooltip>
       <% end %>
     </span>
-    <div class="node_name">
-      <%= node.name || '&nbsp;'.html_safe %>
-      <span class="node_page">
-      <% if node.page %>
-        <i class="icon ri-file-3-line"></i>
-        <%= link_to [:edit, :admin, node.page], title: Alchemy.t(:edit_page) do %>
-          <%= node.page.name %>
-        <% end %>
-      <% end %>
-      </span>
-      <% if node.url %>
-        <span class="node_url">
-          <%= link_to node.url, node.url, target: '_blank', title: node.url %>
-          <% if node.external? %>
-            <i class="ri-external-link-line ri-sm"></i>
-          <% end %>
-        </span>
-      <% end %>
-    </div>
   <% end %>
   <%= content_tag :ul, class: "children #{' folded' if node.folded?}", data: { record_id: node.id } do %>
     <%= render partial: 'node', collection: node.children.includes(:page, :children) %>