From c4d4440009353e81e110b7b3814b8716b1d62fff Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Sat, 20 Dec 2025 07:38:50 +0530 Subject: [PATCH 1/7] Allow independent scrolling of nav, filter and main sections --- admin_ui/src/components/SidebarNav.vue | 2 +- admin_ui/src/views/RowListing.vue | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/admin_ui/src/components/SidebarNav.vue b/admin_ui/src/components/SidebarNav.vue index e777c4a7..92bc349a 100644 --- a/admin_ui/src/components/SidebarNav.vue +++ b/admin_ui/src/components/SidebarNav.vue @@ -88,7 +88,7 @@ export default defineComponent({ div.sidebar { background-color: rgba(0, 0, 0, 0.1); overflow-y: auto; - height: 100%; + height: calc(100vh - 5rem); p { padding: 0.5rem; diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 8550fb57..7f950e2c 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -858,6 +858,7 @@ div.wrapper { div.left_column, div.right_column { overflow: auto; + height: calc(100vh - 5rem); padding: 0.5rem; } From 914c6745ac11ba65d07f79d037f49a1f37a840c8 Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Sat, 20 Dec 2025 07:59:45 +0530 Subject: [PATCH 2/7] Improve styling of action buttons in RowListing --- admin_ui/src/views/RowListing.vue | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 7f950e2c..1122e37f 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -815,6 +815,7 @@ div.wrapper { cursor: pointer; display: flex; flex-direction: row; + column-gap: 0.5rem; @media (max-width: @mobile_width) { width: 100%; @@ -827,11 +828,17 @@ div.wrapper { text-decoration: none; margin-left: 0.25rem; box-sizing: border-box; - padding: 0.2rem 0.5rem; + padding: 0.5rem 0.8rem; text-align: center; + border-radius: 0.5rem; + font-size: 0.8rem; &:hover { - color: white; + transform: scale(1.1); + } + + &:active { + outline: 0.2rem solid lightblue; } @media (max-width: @mobile_width) { From 8cb956dcaaa9cb31d8cb0eb932833622e1053771 Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Mon, 22 Dec 2025 19:39:29 +0530 Subject: [PATCH 3/7] Unify styling of button's border radius --- admin_ui/src/main.less | 13 ++++++++++--- admin_ui/src/views/RowListing.vue | 1 - 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less index f1cee557..a3ccef83 100644 --- a/admin_ui/src/main.less +++ b/admin_ui/src/main.less @@ -221,6 +221,7 @@ textarea { button { width: 100%; + border-radius: 0.5rem; } textarea { @@ -270,11 +271,17 @@ a { background-color: @dark_blue; color: white; font-size: 0.7em; - padding: 0.3rem 0.5rem; + padding: 0.5rem 0.8rem; text-transform: uppercase; + border-radius: 0.5rem; + font-size: 0.8rem; &:hover { - color: white; + transform: scale(1.1); + } + + &:active { + outline: 0.2rem solid lightblue; } } } @@ -295,4 +302,4 @@ div.quillWrapper .ql-snow.ql-toolbar .ql-formats { .ql-snow .ql-picker.ql-header { margin-top: 1rem; } -} \ No newline at end of file +} diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 1122e37f..4d62d075 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -830,7 +830,6 @@ div.wrapper { box-sizing: border-box; padding: 0.5rem 0.8rem; text-align: center; - border-radius: 0.5rem; font-size: 0.8rem; &:hover { From 0e97ad92d9f7ffac8793f0a58a7e5c771890e1e8 Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Mon, 22 Dec 2025 19:55:40 +0530 Subject: [PATCH 4/7] Make button style common in main.less --- admin_ui/src/main.less | 29 +++++++++++++++++++++++++---- admin_ui/src/views/RowListing.vue | 8 -------- 2 files changed, 25 insertions(+), 12 deletions(-) diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less index a3ccef83..c9d46393 100644 --- a/admin_ui/src/main.less +++ b/admin_ui/src/main.less @@ -64,7 +64,15 @@ button { a { color: @dark_blue; - &:hover { + &.button:hover { + background-color: lighten(@dark_blue, 10%); + } + + &.button:active { + outline: 0.2rem solid lightblue; + } + + &:not(.button):hover { color: lighten(@dark_blue, 10%); } @@ -120,10 +128,14 @@ button { a { color: @light_blue; - &:hover { + &:not(.button):hover { color: lighten(@light_blue, 10%); } + &.button:hover { + background-color: lighten(@light_blue, 10%); + } + &.subtle { color: @off_white; @@ -255,6 +267,10 @@ button { transition: background-color 0.5s; } + &:active { + outline: 0.2rem solid lightblue; + } + &:disabled { opacity: 0.8; } @@ -276,8 +292,13 @@ a { border-radius: 0.5rem; font-size: 0.8rem; - &:hover { - transform: scale(1.1); + + &.button:hover { + background-color: lighten(@dark_blue, 10%); + } + + &.button:active { + outline: 0.2rem solid lightblue; } &:active { diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 4d62d075..800f3c04 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -832,14 +832,6 @@ div.wrapper { text-align: center; font-size: 0.8rem; - &:hover { - transform: scale(1.1); - } - - &:active { - outline: 0.2rem solid lightblue; - } - @media (max-width: @mobile_width) { flex-grow: 1; From cd4372c9fe261b3770d75e433feff3ed526ad434 Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Mon, 22 Dec 2025 20:02:38 +0530 Subject: [PATCH 5/7] Convert background color of close button to red --- admin_ui/src/components/RowFilter.vue | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/admin_ui/src/components/RowFilter.vue b/admin_ui/src/components/RowFilter.vue index 88552f65..287ab9a4 100644 --- a/admin_ui/src/components/RowFilter.vue +++ b/admin_ui/src/components/RowFilter.vue @@ -131,6 +131,16 @@ div.filter_wrapper { position: absolute; top: 0.5rem; right: 0.5rem; + background-color: rgb(147, 41, 41); + font-weight: bolder; + + &:hover { + background-color: lighten(rgb(147, 41, 41), 10%); + } + + &:active { + outline: 0.2rem solid rgb(207, 118, 118); + } } } From d98de7d9a4bd95bfa2bfb32ee919300ee4a59851 Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Mon, 22 Dec 2025 20:04:29 +0530 Subject: [PATCH 6/7] Allow horizontal scroll on listing page without moving action buttons out of sight --- admin_ui/src/views/RowListing.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/admin_ui/src/views/RowListing.vue b/admin_ui/src/views/RowListing.vue index 800f3c04..28522c13 100644 --- a/admin_ui/src/views/RowListing.vue +++ b/admin_ui/src/views/RowListing.vue @@ -866,6 +866,7 @@ div.wrapper { div.table_wrapper { position: relative; + overflow: auto; p#loading_indicator { position: absolute; From 34e3d01694a984987e11cb70465c631e58e08b6b Mon Sep 17 00:00:00 2001 From: abhishek-compro Date: Tue, 23 Dec 2025 07:45:48 +0530 Subject: [PATCH 7/7] Remove unnecessary styling --- admin_ui/src/main.less | 4 ---- 1 file changed, 4 deletions(-) diff --git a/admin_ui/src/main.less b/admin_ui/src/main.less index c9d46393..80263609 100644 --- a/admin_ui/src/main.less +++ b/admin_ui/src/main.less @@ -297,10 +297,6 @@ a { background-color: lighten(@dark_blue, 10%); } - &.button:active { - outline: 0.2rem solid lightblue; - } - &:active { outline: 0.2rem solid lightblue; }