Flexify pages sitemap

AlchemyCMS · Mar 8, 2024 · 86a1268 · 86a1268
1 parent 55914c5
commit 86a1268
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 55 deletions.
diff --git a/app/assets/stylesheets/alchemy/_variables.scss b/app/assets/stylesheets/alchemy/_variables.scss
@@ -190,5 +190,6 @@ $thumbnail-background:
   linear-gradient(-45deg, transparent 75%, $medium-gray 75%) 0 0.5em/1em 1em
     $white !default;
 
+$small-screen-break-point: 500px;
 $medium-screen-break-point: 700px;
 $large-screen-break-point: 1000px;
diff --git a/app/assets/stylesheets/alchemy/sitemap.scss b/app/assets/stylesheets/alchemy/sitemap.scss
@@ -43,7 +43,6 @@ $sitemap-url-header-offset: 110px;
 
 .sitemap_url {
   display: none;
-  float: right;
   background-color: $sitemap-info-background-color;
   line-height: $sitemap-line-height - 2px;
   font-size: $small-font-size;
@@ -63,13 +62,9 @@ $sitemap-url-header-offset: 110px;
   }
 }
 
-.sitemap_line_spacer {
-  float: left;
-  width: 20px;
-  height: 28px;
-}
-
 .sitemap_page {
+  display: flex;
+  align-items: center;
   height: $sitemap-line-height;
   margin: 3 * $default-margin 0;
   position: relative;
@@ -90,6 +85,7 @@ $sitemap-url-header-offset: 110px;
 }
 
 .sitemap_sitename {
+  flex-grow: 1;
   @include border-left-radius($default-border-radius);
   line-height: $sitemap-line-height - 4;
   overflow: hidden;
@@ -102,19 +98,24 @@ $sitemap-url-header-offset: 110px;
 
 .sitemap_left_images {
   position: relative;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
   width: 32px;
-  line-height: $sitemap-line-height;
-  float: left;
-  text-align: center;
+  height: $sitemap-line-height;
 }
 
 .sitemap_right_tools {
-  display: flex;
+  display: none;
   align-items: center;
   gap: $default-padding;
   height: $sitemap-line-height;
   padding: 0 2 * $default-padding;
-  float: right;
+
+  @media screen and (min-width: $small-screen-break-point) {
+    display: flex;
+  }
 
   .sitemap_tool {
     width: $sitemap-line-height;
@@ -128,13 +129,6 @@ $sitemap-url-header-offset: 110px;
       filter: grayscale(100%);
     }
   }
-
-  .icon.blank {
-    margin-left: 2px;
-    float: left;
-    margin-top: 3px;
-    margin-right: 3px;
-  }
 }
 
 #sitemap {
@@ -177,7 +171,6 @@ $sitemap-url-header-offset: 110px;
   @extend .right-rounded-border;
   background-color: $sitemap-page-background-color;
   border-left: 1px solid $light-gray;
-  float: right;
   display: none;
   justify-content: end;
   width: 170px;

diff --git a/app/views/alchemy/admin/pages/_page.html.erb b/app/views/alchemy/admin/pages/_page.html.erb
@@ -22,6 +22,41 @@
         {{/if}}
       {{/if}}
     </div>
+    <div class="sitemap_sitename">
+      {{#if permissions.edit_content}}
+        <%= link_to(
+          "{{name}}",
+          alchemy.edit_admin_page_path(id: "__ID__"),
+          title: Alchemy.t(:edit_page),
+          class: "sitemap_pagename_link"
+        ) -%>
+      {{else}}
+        <%= content_tag("span", "{{name}}", class: "sitemap_pagename_link") %>
+      {{/if}}
+    </div>
+    <div class="sitemap_url" title="{{url_path}}">
+      {{ url_path }}
+    </div>
+    <div class="page_infos">
+      {{#if locked}}
+      <span class="page_status locked">
+        <i class="icon ri-fw ri-1x ri-edit-line"></i>
+        {{status_titles.locked}}
+      </span>
+      {{/if}}
+      {{#if restricted}}
+      <span class="page_status">
+        <i class="icon ri-fw ri-1x ri-lock-line"></i>
+        {{status_titles.restricted}}
+      </span>
+      {{/if}}
+      {{#unless public}}
+      <span class="page_status">
+        <i class="icon ri-fw ri-1x ri-cloud-off-line"></i>
+        {{status_titles.public}}
+      </span>
+      {{/unless}}
+    </div>
     <div class="sitemap_right_tools">
       {{#if permissions.info}}
       <sl-tooltip content="<%= Alchemy.t(:page_infos) %>">
@@ -122,41 +157,6 @@
       </div>
       {{/if}}
     </div>
-    <div class="page_infos">
-      {{#if locked}}
-      <span class="page_status locked">
-        <i class="icon ri-fw ri-1x ri-edit-line"></i>
-        {{status_titles.locked}}
-      </span>
-      {{/if}}
-      {{#if restricted}}
-      <span class="page_status">
-        <i class="icon ri-fw ri-1x ri-lock-line"></i>
-        {{status_titles.restricted}}
-      </span>
-      {{/if}}
-      {{#unless public}}
-      <span class="page_status">
-        <i class="icon ri-fw ri-1x ri-cloud-off-line"></i>
-        {{status_titles.public}}
-      </span>
-      {{/unless}}
-    </div>
-    <div class="sitemap_url" title="{{url_path}}">
-      {{ url_path }}
-    </div>
-    <div class="sitemap_sitename">
-      {{#if permissions.edit_content}}
-        <%= link_to(
-          "{{name}}",
-          alchemy.edit_admin_page_path(id: "__ID__"),
-          title: Alchemy.t(:edit_page),
-          class: "sitemap_pagename_link"
-        ) -%>
-      {{else}}
-        <%= content_tag("span", "{{name}}", class: "sitemap_pagename_link") %>
-      {{/if}}
-    </div>
   </div>
   <ul id="page_{{id}}_children" class="children" data-parent-id="{{id}}">
     {{> list}}