Merge pull request #2899 from tvdeyen/page-select-layout

PageSelect: Move URL to bottom
AlchemyCMS · May 28, 2024 · 98293af · 98293af
2 parents e4b295d + fa2b1b3
commit 98293af
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/app/assets/stylesheets/alchemy/page-select.scss b/app/assets/stylesheets/alchemy/page-select.scss
@@ -10,9 +10,12 @@
   display: flex;
   flex-direction: column;
 
-  .icon {
-    margin: 0 $default-margin;
-    fill: currentColor;
+  alchemy-icon {
+    margin-right: $default-margin;
+
+    .icon {
+      fill: currentColor;
+    }
   }
 }
 
@@ -25,11 +28,12 @@
 
 .page-select--bottom {
   font-size: $small-font-size;
-  padding-left: $default-padding;
+  padding-left: $default-padding / 2;
 }
 
-.page-select--site-name {
+.page-select--page-urlname {
   color: $muted-text-color;
+  padding-right: $default-padding;
 
   .select2-highlighted & {
     color: $medium-gray;
@@ -42,16 +46,17 @@
   margin-left: auto;
   border-radius: $default-border-radius;
   padding: $default-padding / 2 $default-padding;
+  text-transform: uppercase;
 
   .select2-highlighted & {
     color: $select-hover-bg-color;
     background-color: white;
   }
 }
 
-.page-select--page-urlname {
+.page-select--site-name {
   margin-left: auto;
-  padding: $default-padding 2 * $default-padding;
+  padding: $default-padding 0 $default-padding 2 * $default-padding;
   color: $dark-gray;
   font-size: $small-font-size;
 

diff --git a/app/javascript/alchemy_admin/components/page_select.js b/app/javascript/alchemy_admin/components/page_select.js
@@ -45,11 +45,11 @@ class PageSelect extends RemoteSelect {
         <div class="page-select--top">
           <alchemy-icon name="file-3"></alchemy-icon>
           <span class="page-select--page-name">${page.name}</span>
-          <span class="page-select--page-urlname">${page.url_path}</span>
+          <span class="page-select--site-name">${page.site.name}</span>
         </div>
         <div class="page-select--bottom">
-          <span class="page-select--site-name">${page.site.name}</span>
-          <span class="page-select--language-code">${page.language.name}</span>
+          <span class="page-select--page-urlname">${page.url_path}</span>
+          <span class="page-select--language-code">${page.language_code}</span>
         </div>
       </div>
     `