From fd68d7a167378c0260c316963d9cdb30d0c3ab76 Mon Sep 17 00:00:00 2001
From: fennghuang <89014758+fennghuang@users.noreply.github.com>
Date: Sat, 12 Aug 2023 08:43:50 +0000
Subject: [PATCH] feat: update ui style

---
 scripts/image_browser.py |  3 +--
 style.css                | 34 ++++++++++++++++++++++------------
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/scripts/image_browser.py b/scripts/image_browser.py
index d0a38a6..0d75ae4 100644
--- a/scripts/image_browser.py
+++ b/scripts/image_browser.py
@@ -1148,9 +1148,8 @@ def create_tab(tab: ImageBrowserTab, current_gr_tab: gr.Tab):
                             first_page = gr.Button("First Page", elem_id=f"{tab.base_tag}_control_image_browser_first_page")
                         with gr.Column(scale=2, min_width=20):
                             prev_page = gr.Button("Prev Page", elem_id=f"{tab.base_tag}_control_image_browser_prev_page")
-                        with gr.Column(scale=2, min_width=20):
+                        with gr.Row(scale=2, min_width=20, elem_classes="page-index-panel"):
                             page_index = gr.Number(value=1, label="Page Index", elem_id=f"{tab.base_tag}_control_image_browser_page_index")
-                        with gr.Column(scale=1, min_width=20, elem_classes="refresh-btn"):
                             refresh_index_button = ToolButton(value=refresh_symbol, elem_id=f"{tab.base_tag}_control_image_browser_refresh_index")
                         with gr.Column(scale=2, min_width=20):
                             next_page = gr.Button("Next Page", elem_id=f"{tab.base_tag}_control_image_browser_next_page")
diff --git a/style.css b/style.css
index a4eb07c..7f38fdb 100644
--- a/style.css
+++ b/style.css
@@ -15,18 +15,18 @@ div[id^="image_browser_tab"][id$="image_browser_gallery"].hide_loading > .svelte
 }
 
 /* hack to fix the alignment of the page index, refresh, and delete buttons*/
-div[id$='control_image_browser_page_index'] {
+div[id$='_control_image_browser_page_index'] {
   margin-top: -20px !important;
-  margin-left: 10px !important;
   display: grid;
   justify-content: end;
 }
 button[id$='_control_image_browser_refresh_index']{
-  align-self: start !important;
+  align-self: center !important;
   height: 2em !important;
+  cursor: pointer;
 }
 button[id$='_image_browser_del_img_btn'] {
-  margin-top: 22px !important;
+  margin-top: calc(var(--body-text-size) * var(--line-sm));
 }
 
 /* Workaround until gradio version is updated to a version that fixes it
@@ -37,10 +37,7 @@ button[id$='_image_browser_del_img_btn'] {
   height: auto !important;
 }
 
-#tab_image_browser .exif-search-panel {
-  margin-top: calc(var(--layout-gap) * -1);
-}
-
+#tab_image_browser .exif-search-panel,
 #tab_image_browser .no-gap-top {
   margin-top: calc(var(--layout-gap) * -1);
 }
@@ -53,10 +50,6 @@ button[id$='_image_browser_del_img_btn'] {
   color: var(--body-text-color-subdued);
 }
 
-#tab_image_browser .refresh-btn {
-  align-self: center !important
-}
-
 #tab_image_browser button[id$='_control_image_browser_first_page'],
 #tab_image_browser button[id$='_control_image_browser_prev_page'],
 #tab_image_browser button[id$='_control_image_browser_next_page'],
@@ -77,3 +70,20 @@ button[id$='_image_browser_del_img_btn'] {
 #tab_image_browser .ranking-filter-input input:disabled{
   cursor: not-allowed
 }
+
+#tab_image_browser .thumbnails .thumbnail-item:first-child{
+  margin-left: var(--spacing-lg);
+}
+
+#tab_image_browser .thumbnails .thumbnail-item:last-child{
+  margin-right: var(--spacing-lg);
+}
+
+#tab_image_browser .page-index-panel > div {
+  flex-wrap: nowrap;
+  align-self: flex-start;
+}
+
+#tab_image_browser .page-index-panel > div > div {
+  min-width: auto
+}