From ea30e8abe5600b8f7a2713bf4ab530e22a1dd7de Mon Sep 17 00:00:00 2001
From: RossAsscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 1 Mar 2023 04:38:54 +0900
Subject: [PATCH] text-pole fixes

- removed forced size tags from text-pole div's as these caused some textareas to overflow the nav on iphone. instead widths are done with CSS now.

- added <br> after yourName textarea  and increased size of the nameChange button to match the API design. This is also better for phones.
---
 public/index.html | 11 ++++++-----
 public/style.css  | 16 ++++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 5840cb85f..fb8ec9072 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2873,7 +2873,7 @@
             <div id="scenario_div">
                 <h4>Scenario</h4>
                 <h5>Circumstances and context of the dialogue (<a href="/notes/12" target="_blank">?</a>)</h5>
-                <input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" size="40" value="" autocomplete="off" form="form_create">
+                <input id="scenario_pole" name="scenario" class="text_pole" maxlength="9999" value="" autocomplete="off" form="form_create">
             </div>
             
             <div id="mes_example_div">
@@ -2970,7 +2970,7 @@
                 
                 <div id="name_div">
                     <h4>Name</h4><h5>Character name</h5>
-                <input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" size="35" value="" autocomplete="off">
+                <input id="character_name_pole" name="ch_name" class="text_pole" maxlength="120" value="" autocomplete="off">
                 </div>
                 <div id="avatar_div" class="avatar_div">
                     <div id="avatar_div_div" class="avatar">
@@ -3034,7 +3034,7 @@
                 <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">
 
                 <h4>API url</h4><h5>Example: http://127.0.0.1:5000/api </h5>
-                <input id="api_url_text" name="api_url" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
+                <input id="api_url_text" name="api_url" class="text_pole" maxlength="500" value="" autocomplete="off">
                 <input id="api_button" type="submit" value="Connect">
                 <img id="api_loading" src="img/load.svg" >
                 </form>
@@ -3061,7 +3061,7 @@
                 <form  action="javascript:void(null);" method="post" enctype="multipart/form-data">
 
                     <h4>API key</h4><h5>Where to get (<a href="/notes/6" target="_blank">?</a>)</h5>
-                    <input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" size="35" value="" autocomplete="off">
+                    <input id="api_key_novel" name="api_key_novel" class="text_pole" maxlength="500" value="" autocomplete="off">
 					<Br>
                     <input id="api_button_novel" type="submit" value="Connect">
                     <img id="api_loading_novel" src="img/load.svg" >
@@ -3095,7 +3095,8 @@
             <div id="user_avatar_block"></div>
             <form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
                 <h4>Name</h4>
-                <input id="your_name" name="your_name" class="text_pole" maxlength="35" size="16" value="" autocomplete="off">
+                <input id="your_name" name="your_name" class="text_pole" maxlength="35" value="" autocomplete="off">
+				<br>
                 <input id="your_name_button" type="submit" value="Change">
             </form>
             <hr>
diff --git a/public/style.css b/public/style.css
index ed094e647..3dcbbe9fb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -438,6 +438,8 @@ width: 100%;
     size: 10;
     font-size: 11pt;
     padding: 7px;
+	width:90%;
+	margin-bottom:5px;
 }
 
 
@@ -1473,10 +1475,20 @@ input[type="range"] {
 }
 
 #your_name_button {
-    opacity: 0.5;
+	cursor: pointer;
+    color: #fff;
+    opacity: 0.7;
+    padding: 10px;
     margin-left: 10px;
-    cursor: pointer;
+    margin-top: 10px;
+    margin: 10px;
+    font-size: 1rem;
+    height: 2.5rem;
+    transition: 0.3s;
 }
+
+#your_name_button:hover{background-color:green;}
+
 #form_change_name{
     margin-bottom: 15px;
 }