From 4e638c65c5cc6e765b3519179c6dc0c2a6a99fbd Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Sun, 12 Feb 2023 20:13:23 +0200 Subject: [PATCH 1/5] Added search bar for characters --- public/img/times-circle.svg | 1 + public/index.html | 24 +++++++++++++++++++++-- public/style.css | 39 +++++++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 public/img/times-circle.svg diff --git a/public/img/times-circle.svg b/public/img/times-circle.svg new file mode 100644 index 000000000..cdee94147 --- /dev/null +++ b/public/img/times-circle.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index e19a7131c..e0cf5f3d2 100644 --- a/public/index.html +++ b/public/index.html @@ -170,6 +170,19 @@ $('#characloud_url').click(function(){ window.open('https://boosty.to/tavernai', '_blank'); }); + $('#character_search_bar').on('input', function() { + const searchValue = $(this).val().trim().toLowerCase(); + + if (!searchValue) { + $("#rm_print_charaters_block .character_select").show(); + } else { + $("#rm_print_charaters_block .character_select").each(function () { + $(this).children('.ch_name').text().toLowerCase().includes(searchValue) + ? $(this).show() + : $(this).hide(); + }); + } + }); function checkOnlineStatus(){ //console.log(online_status); if(online_status == 'no_connection'){ @@ -3022,8 +3035,15 @@
-

+

-

+Import

+
+

+

+

+Import

+
 
+
+ +
+
+
diff --git a/public/style.css b/public/style.css index 7db39645b..28257e029 100644 --- a/public/style.css +++ b/public/style.css @@ -510,6 +510,45 @@ input[type=button] { display: block; /* visibility: hidden; */ } + +#rm_characters_topbar { + display: flex; + flex-direction: row; + align-items: center; +} + +#rm_characters_topbar_expander { + flex-grow: 1; +} + +#character_search_bar { + outline: none; + box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0); + border: none; + background: transparent; + border-bottom: 1px dashed rgba(255, 255, 255, 0.12); + color: rgb(188, 193, 200, 0.5); + font-weight: 300; +} + +#character_search_bar::-webkit-search-cancel-button { + -webkit-appearance: none; + height: 1em; + width: 1em; + border-radius: 50em; + background: url('/img/times-circle.svg') no-repeat 50% 50%; + background-size: contain; + opacity: 0; + pointer-events: none; + filter: invert(1); + cursor: pointer; +} + +#character_search_bar:focus::-webkit-search-cancel-button { + opacity: .3; + pointer-events: all; +} + .character_select{ padding: 0px; border-radius: 10px; From b2fbd3d972697e6720f9ca7f64c3df4d9947c57f Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Sun, 12 Feb 2023 22:43:44 +0200 Subject: [PATCH 2/5] Removed extra closing div (I'm stoopid) --- public/index.html | 1 - 1 file changed, 1 deletion(-) diff --git a/public/index.html b/public/index.html index e0cf5f3d2..292f302fc 100644 --- a/public/index.html +++ b/public/index.html @@ -3043,7 +3043,6 @@
-
From c0a8e2656463282dd647ccf979efdb2c32cd04ba Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Sun, 12 Feb 2023 22:53:24 +0200 Subject: [PATCH 3/5] Move search form farther from scroll bar --- public/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/public/style.css b/public/style.css index 28257e029..6b15a37de 100644 --- a/public/style.css +++ b/public/style.css @@ -521,6 +521,10 @@ input[type=button] { flex-grow: 1; } +#form_character_search_form { + margin-right: 1rem; +} + #character_search_bar { outline: none; box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0); From 19224991935722a2908797341f05a33828939236 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Mon, 13 Feb 2023 13:59:56 +0200 Subject: [PATCH 4/5] Aligned search bar vertically --- public/index.html | 9 +++++---- public/style.css | 19 ++++++++++++++++--- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/public/index.html b/public/index.html index 292f302fc..7d4b0f3fa 100644 --- a/public/index.html +++ b/public/index.html @@ -1282,7 +1282,7 @@ function select_rm_characters(){ menu_type = 'characters'; - $( "#rm_charaters_block" ).css("display", "block"); + $( "#rm_charaters_block" ).css("display", "flex"); $('#rm_charaters_block').css('opacity',0.0); $('#rm_charaters_block').transition({ opacity: 1.0, @@ -3036,9 +3036,10 @@
-

+

-

+Import

-
 
+
+

+Create

+

+Import

+
diff --git a/public/style.css b/public/style.css index 6b15a37de..7d5892d88 100644 --- a/public/style.css +++ b/public/style.css @@ -506,6 +506,19 @@ input[type=button] { display: none; } + +#rm_charaters_block { + display: flex; + height: 100%; + flex-direction: column; +} + +#rm_print_charaters_block { + flex-grow: 1; + height: 100%; + overflow-y: scroll; +} + #rm_characters_block{ display: block; /* visibility: hidden; */ @@ -513,8 +526,7 @@ input[type=button] { #rm_characters_topbar { display: flex; - flex-direction: row; - align-items: center; + flex-direction: column; } #rm_characters_topbar_expander { @@ -532,7 +544,7 @@ input[type=button] { background: transparent; border-bottom: 1px dashed rgba(255, 255, 255, 0.12); color: rgb(188, 193, 200, 0.5); - font-weight: 300; + font-weight: 400; } #character_search_bar::-webkit-search-cancel-button { @@ -1657,6 +1669,7 @@ a { white-space:nowrap; background: #191b31A0; + backdrop-filter: blur(10px); } From 028b860bdeb965c70980caea9b6939f68834a0b5 Mon Sep 17 00:00:00 2001 From: SillyLossy Date: Mon, 13 Feb 2023 14:08:06 +0200 Subject: [PATCH 5/5] Adjust CSS --- public/style.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/public/style.css b/public/style.css index 7d5892d88..37e97b574 100644 --- a/public/style.css +++ b/public/style.css @@ -529,15 +529,23 @@ input[type=button] { flex-direction: column; } +#rm_characters_topbar_buttons { + margin-top: 0; + display: flex; + flex-direction: row; + align-items: center; +} + #rm_characters_topbar_expander { flex-grow: 1; } #form_character_search_form { - margin-right: 1rem; + margin-bottom: 1rem; } #character_search_bar { + width: 90%; outline: none; box-shadow: 0 0px 0px rgba(255, 255, 255, 0.0); border: none;