From fa2b1b309bd758284a3a0b6a962bd16117af3f1f Mon Sep 17 00:00:00 2001
From: Thomas von Deyen <thomas@vondeyen.com>
Date: Tue, 28 May 2024 11:53:21 +0200
Subject: [PATCH] PageSelect: Move URL to bottom

URLs might be very long and contain necessary information to
better distingiush pages just by name.
---
 .../stylesheets/alchemy/page-select.scss      | 19 ++++++++++++-------
 .../alchemy_admin/components/page_select.js   |  6 +++---
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/alchemy/page-select.scss b/app/assets/stylesheets/alchemy/page-select.scss
index d5754e9ddb..7a0e31140b 100644
--- 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,6 +46,7 @@
   margin-left: auto;
   border-radius: $default-border-radius;
   padding: $default-padding / 2 $default-padding;
+  text-transform: uppercase;
 
   .select2-highlighted & {
     color: $select-hover-bg-color;
@@ -49,9 +54,9 @@
   }
 }
 
-.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
index 9b338ec7ed..d8a43bd305 100644
--- 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>
     `