From f6297ed304fc4c874b3520f5b771d8a9b7de40a5 Mon Sep 17 00:00:00 2001 From: RossAsscends <124905043+RossAscends@users.noreply.github.com> Date: Sat, 18 Mar 2023 21:12:08 +0900 Subject: [PATCH] create/edit character buttons >>> icons chat/mes padding adjusted swipe left/right circle background removed --- public/index.html | 43 +++++++++++++++------------ public/script.js | 12 ++++---- public/style.css | 76 ++++++++++++++++++++++++++++++++++------------- 3 files changed, 86 insertions(+), 45 deletions(-) diff --git a/public/index.html b/public/index.html index d9b084f04..df9a8d086 100644 --- a/public/index.html +++ b/public/index.html @@ -345,8 +345,8 @@
-

Character Name


- Character Name +
@@ -357,24 +357,35 @@ title="Click to select a new avatar for this character"> - Change Avatar + ๐Ÿ“ท +
+ + + + + + + +
-
 
+
-
+

Description ?

- -
+

First message?

- +
@@ -397,15 +408,9 @@
- + -
- - - - -
@@ -794,13 +799,13 @@
- - - + + +
- +
diff --git a/public/script.js b/public/script.js index af303ac19..35faf6c58 100644 --- a/public/script.js +++ b/public/script.js @@ -2500,8 +2500,8 @@ function select_selected_character(chid) { //create text poles $("#rm_button_back").css("display", "none"); //$("#character_import_button").css("display", "none"); - $("#create_button").attr("value", "Save"); - $("#create_button").css("display", "none"); + $("#create_button").attr("value", "Save"); // what is the use case for this? + $("#create_button_label").css("display", "none"); $("#rm_button_selected_ch").children("h2").text(display_name); $("#add_avatar_button").val(""); @@ -2553,7 +2553,7 @@ function select_rm_create() { $("#delete_button_div").css("display", "none"); $("#delete_button").css("display", "none"); $("#export_button").css("display", "none"); - $("#create_button").css("display", "block"); + $("#create_button_label").css("display", "block"); $("#create_button").attr("value", "Create"); //RossAscends: commented this out as part of the auto-loading token counter //$('#result_info').html(' '); @@ -2573,7 +2573,7 @@ function select_rm_create() { } else { $("#mes_example_textarea").val(create_save_mes_example); } - $("#avatar_div").css("display", "grid"); + $("#avatar_div").css("display", "flex"); $("#avatar_load_preview").attr("src", default_avatar); $("#name_div").css("display", "block"); @@ -3373,7 +3373,7 @@ $(document).ready(function () { data: formData, beforeSend: function () { $("#create_button").attr("disabled", true); - $("#create_button").attr("value", "Creating..."); + $("#create_button").attr("value", "โณ"); }, cache: false, contentType: false, @@ -3405,7 +3405,7 @@ $(document).ready(function () { $("#add_avatar_button").val("").clone(true) ); - $("#create_button").attr("value", "Create"); + $("#create_button").attr("value", "โœ…"); if (true) { let oldSelectedChar = null; if (this_chid != undefined && this_chid != "invalid-safety-id") { diff --git a/public/style.css b/public/style.css index 803de0c8f..bc326c7b4 100644 --- a/public/style.css +++ b/public/style.css @@ -367,7 +367,7 @@ code { display: grid; grid-template-columns: min-content min-content auto min-content min-content; - padding: 10px 10px 0 10px; + padding: 20px 10px 0 10px; margin-top: 0; width: 100%; color: var(--ivory, white); @@ -382,7 +382,7 @@ code { } .last_mes .mes_text { - min-height: 6em; + min-height: 10em; } .last_mes{ @@ -396,14 +396,11 @@ code { width: 40px; opacity: 0.36; position: absolute; - right: 15px; - margin-top: 60px; + right: 10px; + margin-top: 5em; left: auto; - background-color: var(--black50a); - border-radius: 50%; align-items: center; justify-content: center; - border: 1px solid grey; flex-wrap: wrap; } @@ -422,7 +419,7 @@ code { } .swipe_left { - left: 20px; + left: 15px; right: auto; } @@ -452,7 +449,7 @@ code { .mes_block { padding-top: 0; - padding-left: 20px; + padding-left: 10px; } .ch_name { @@ -544,7 +541,7 @@ textarea { } -#character_name_pole {} +#character_name_pole {margin-bottom:0;} #firstmessage_textarea { @@ -1025,33 +1022,49 @@ input[type=search]:focus::-webkit-search-cancel-button { } .avatar_div { - /*margin-top: 16px;*/ - vertical-align: middle; - display: grid; - grid-template-columns: min-content min-content; + display: flex; + width: 100%; + flex-wrap: wrap; + margin-top: 16px; + margin-bottom:10px; align-items: center; - grid-gap: 10px; } +#avatar-and-name-block{ + justify-content: space-between; + display: flex; + flex: 0 0 100%; + flex-wrap: wrap; + margin-bottom:10px; +} + +#name_div{ + width: 100%; +} + +#create_button {display:none;} + .avatar_div .avatar { margin-left: 4px; margin-right: 10px; + height: 70px; + width:70px; display: inline-block; } #first_message_div {} #advanced_div { - width: 100%; + /* width: 100%; */ } .form_create_bottom_buttons_block { - display: grid; - width: min-content; + display: flex; + flex: 1; grid-template-columns: repeat(3, min-content); grid-gap: 20px; align-items: center; - margin: 0px auto; + justify-content: right; } #rm_info_block { @@ -1085,9 +1098,14 @@ input[type=search]:focus::-webkit-search-cancel-button { background-color: var(--crimson70a); } +#delete_button:hover { + background-color: var(--fullred); +} + #result_info { margin-left: 10px; color: var(--white30a); + display: flex; } .input-file { @@ -1174,12 +1192,30 @@ input[type=search]:focus::-webkit-search-cancel-button { cursor: pointer; } -.menu_button { +.avatar_div .menu_button, .form_create_bottom_buttons_block .menu_button { font-weight: bold; color: var(--white70); background-color: var(--black50a); border: 1px solid var(--white30a); border-radius: 10px; + padding: 3px; + cursor: pointer; + margin: 10px 0; + transition: 0.3s; + font-size: 22px; + min-width:40px; + min-height:40px; + filter: grayscale(0.5); + text-align: center; +} + + .menu_button{ + + font-weight: bold; + color: var(--white70); + background-color: var(--black50a); + border: 1px solid var(--white30a); + border-radius: 10px; padding: 10px; width: min-content; cursor: pointer;