Fixed swipes not showing on iOS (a CSS grid bug)

removed opacity transitions from edit_mes elements
Mobile UI:
- turned off pinch zooming
- fixed page body so it can't be scrolled off screen
CSS
- send_but more opaque to be seen on light BGs
- replaced mes_edit unicode pencil with SVG
- replaced mes_edit done and cancel images with menu_buttons
-- easier to tap on mobile
- reduced mobile body font from 18px to 16px;
- fixed select_chat_popup vertical sizing on mobile
- gave chat, send_form, and large popups opaque borders on mobile
This commit is contained in:
RossAsscends
2023-03-25 01:10:01 +09:00
parent 662cce8c6c
commit b7f7a2cd3d
5 changed files with 95 additions and 170 deletions

View File

@ -1,7 +1,7 @@
const port = 8000;
const whitelist = ['127.0.0.1','192.168.0.*']; //Example for add several IP in whitelist: ['127.0.0.1', '192.168.0.10']
const whitelistMode = true; //Disabling enabling the ip whitelist mode. true/false
const whitelistMode = false//Disabling enabling the ip whitelist mode. true/false
const autorun = true; //Autorun in the browser. true/false
const enableExtensions = true; //Enables support for TavernAI-extras project
const listen = true; // If true, Can be access from other device or PC. otherwise can be access only from hosting machine.

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>

After

Width:  |  Height:  |  Size: 863 B

View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable-no">
<meta name="apple-mobile-web-app-capable" content="yes">
<!--<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">-->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>-->
@ -1283,13 +1283,16 @@
<div class="mes_block">
<div class="ch_name">
<span class="name_text">${characterName}</span>
<div title=Edit class=mes_edit></div>
<div class=mes_edit_cancel><img src=img/cancel.png></div>
<div class=mes_edit_done><img src=img/done.png></div>
<div title="Edit" class="mes_edit"></div>
<div class="mes_edit_cancel menu_button">CANCEL</div><!-- <img src=img/cancel.png></div> -->
<div class="mes_edit_done menu_button">CONFIRM</div><!-- <img src=img/done.png></div> -->
</div>
<div class=mes_text></div>
<div class="mes_bias"></div>
</div>
<div class="swipe_right">
<img src="img/swipe_right.png">
<div class="swipes-counter"></div>

View File

@ -3893,34 +3893,8 @@ $(document).ready(function () {
}
$(this).parent().parent().children(".mes_text").empty();
$(this).css("display", "none");
$(this)
.parent()
.children(".mes_edit_done")
.css("display", "inline-block");
$(this).parent().children(".mes_edit_done").css("opacity", 0.0);
$(this)
.parent()
.children(".mes_edit_cancel")
.css("display", "inline-block");
$(this).parent().children(".mes_edit_cancel").css("opacity", 0.0);
$(this)
.parent()
.children(".mes_edit_done")
.transition({
opacity: 1.0,
duration: 600,
easing: "",
complete: function () { },
});
$(this)
.parent()
.children(".mes_edit_cancel")
.transition({
opacity: 1.0,
duration: 600,
easing: "",
complete: function () { },
});
$(this).parent().children(".mes_edit_done").css("display", "inline-block");
$(this).parent().children(".mes_edit_cancel").css("display", "inline-block");
var edit_mes_id = $(this).parent().parent().parent().attr("mesid");
this_edit_mes_id = edit_mes_id;
@ -3947,17 +3921,10 @@ $(document).ready(function () {
.parent()
.children(".mes_text")
.children(".edit_textarea");
edit_textarea.css("opacity", 0.0);
edit_textarea.transition({
opacity: 1.0,
duration: 0,
easing: "",
complete: function () { },
});
edit_textarea.height(0);
edit_textarea.height(edit_textarea[0].scrollHeight);
edit_textarea.focus();
edit_textarea[0].setSelectionRange(
edit_textarea[0].setSelectionRange( //this sets the cursor at the end of the text
edit_textarea.val().length,
edit_textarea.val().length
);

View File

@ -18,10 +18,11 @@
--grey50: rgb(125, 125, 125);
--grey70: rgb(175, 175, 175);
--grey30a: rgba(50,50,50,0.3); /* dark grey transparent for #chat and #send_form so their borders stand out on dark BGs*/
--grey30a: rgba(50,50,50,0.3);
--fullred: rgba(255, 0, 0, 1);
--crimson70a: rgba(100, 0, 0, 0.7);
--okGreen70a:rgba(0,100,0,0.7);
--cobalt30a: rgba(100, 100, 255, 0.3);
--sienna: rgb(210, 100, 40);
--orangered: rgb(255, 90, 0);
@ -55,8 +56,6 @@ body {
color: var(--ivory);
}
::-webkit-scrollbar {
width: 0.6em;
}
@ -73,12 +72,6 @@ body {
border-radius: 5px;
}
/* @supports (height: 100dvh) {
body {
height: 100dvh;
}
} */
.mes_text p {
margin-top: 0;
margin-bottom: 10px;
@ -102,7 +95,6 @@ body {
color: darkgoldenrod;
}
/*.mes_text br {display:none;}*/
.mes_text i,
.mes_text em {
color: var(--grey70);
@ -204,21 +196,6 @@ margin-top:5px;
transition: all 1s ease-in-out;
flex-direction: column;
z-index: 3;
/*old style top to bottom flow*/
/* overflow-x: hidden;
overflow-y: scroll;
margin-top: 40px;
border-bottom: 1px solid var(--black30a);
border-left: 1px solid var(--black30a);
border-right: 1px solid var(--black30a);
backdrop-filter: blur(20px);
background-color: var(--black70a);
-webkit-backdrop-filter: blur(20px);
text-shadow: #000 0 0 3px;
scrollbar-width: thin;
transition: all 1s ease-in-out; */
}
#form_sheld {
@ -265,7 +242,7 @@ margin-top:5px;
border: none;
cursor: pointer;
transition: 0.3s;
filter: brightness(0.5);
filter: brightness(0.7);
order: 99999;
}
@ -303,7 +280,6 @@ margin-top:5px;
#options_button:after {
content: '\2630';
/*uses a unicode symbol for hamburger menu icon */
text-decoration: none;
font-size: 1.5rem;
@ -317,7 +293,6 @@ margin-top:5px;
opacity: 0.0;
display: none;
bottom: 200px;
/*sets vertical position of the options menu to the left of input bar */
position: relative;
z-index: 1990;
@ -327,9 +302,7 @@ margin-top:5px;
overflow: hidden;
display: block;
position: absolute;
/* backdrop-filter: blur(10px); */ /* removed because we can't have both this and the input bar blurring*/
background-color: var(--black100);
/* -webkit-backdrop-filter: blur(10px); */ /* removed because we can't have both this and the input bar blurring*/
border: 1px solid #666;
border-radius: 15px;
box-shadow: 0 0 5px black;
@ -338,7 +311,6 @@ margin-top:5px;
z-index: 2000;
}
/* Ссылки внутри выпадающего блока */
.options-content hr {
margin: 0;
padding: 0;
@ -359,7 +331,6 @@ margin-top:5px;
}
.options-content img {
/* opacity: 0.5; */
width: 1.5rem;
margin-right: 5px;
height: 1.25rem;
@ -370,7 +341,6 @@ margin-top:5px;
vertical-align: middle;
}
/* Изменяем цвет ссылки при наведении */
.options-content a:hover {
background-color: var(--white30a);
}
@ -383,26 +353,17 @@ margin-top:5px;
.mes {
display: grid;
grid-template-columns: min-content min-content auto min-content min-content;
grid-template-columns: min-content min-content auto min-content;
padding: 20px 10px 0 10px;
margin-top: 0;
width: 100%;
color: var(--ivory, white);
/* display: grid;
grid-template-columns: min-content min-content auto min-content min-content;
padding: 10px 10px 0 10px;
vertical-align: top;
width: 100%;
color: var(--ivory, white); */
}
/*.last_mes .mes_text {
min-height: 10em;
}*/
.last_mes{
grid-template-columns: [checkbox] fit-content(60px) [avatar] 50px [msg_block] auto [rightswipe] fit-content(48px);
grid-template-columns: [checkbox] fit-content(60px) [avatar-leftswipe] 50px [name-mestext] auto [edit-rightswipe] 30px !important;
grid-template-rows: [avatar-NameMesText-edit] 50px [swipes] auto;
grid-row-gap: 20px;
}
/* SWIPE RELATED STYLES*/
@ -410,33 +371,32 @@ margin-top:5px;
.swipe_right,.swipe_left {
height: 40px;
width: 40px;
opacity: 0.36;
position: absolute;
right: 10px;
margin-top: 5em;
left: auto;
opacity: 0.3;
right: 5px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
z-index: 9999;
grid-row-start: 2;
grid-column-start: 4;
flex-flow:column;
}
.swipe_right img, .swipe_left img {
height: 30px;
display: flex;
width: 30px;
}
.swipes-counter{
display: flex;
color: white;
position: fixed;
font-size: 12px;
padding: 0;
margin-top: 60px;
}
.swipe_left {
left: 15px;
right: auto;
grid-column-start: 2;
align-items: flex-end;
}
.avatar {
@ -453,37 +413,29 @@ margin-top:5px;
border-radius: 50%;
border: 1px solid var(--black30a);
box-shadow: 0 0 5px var(--black50a);
}
.avatar.selected img {
/* outline-style: solid;
outline-color: rgb(255 255 255 / 70%);
outline-width: 2px; */
}
.mes_block {
padding-top: 0;
padding-left: 10px;
grid-row-start: 1;
grid-row-end: 3;
grid-column-start:3;
}
.ch_name {
font-weight: bolder;
}
.mes_text {
font-weight: 400;
line-height: 1.25rem;
padding-right: 60px;
padding-left: 0;
padding-top: 5px;
padding-bottom: 5px;
max-width: 720px;
word-wrap: break-word;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
.mes_text::after {
@ -552,15 +504,12 @@ textarea {
}
#description_textarea {
height: -webkit-fill-available;
}
#character_name_pole {margin-bottom:0;}
#firstmessage_textarea {
height: -webkit-fill-available;
}
@ -576,12 +525,6 @@ textarea {
margin: 5px 0;
}
/* .topbar {
max-height: calc(100% - 50px);
padding: 0 20px;
}
*/
#top-bar h3 {
margin: 0;
padding: 10px 0;
@ -605,14 +548,10 @@ select:focus {
outline: none;
}
input::file-selector-button {}
input[type="file"] {
display: none;
}
input[type=submit] {}
#right-nav-panel-tabs {
margin-top: 10px;
margin-bottom: 10px;
@ -1788,48 +1727,52 @@ input[type="range"]{
float: right;
color: var(--white30a);
cursor: pointer;
margin-right: 4px;
transition: 0.3s ease-in-out;
background-image: url(/img/pencil-solid.svg);
background-repeat: no-repeat;
background-attachment: local;
background-position: center;
height: 20px;
width: 20px;
filter: invert(1) drop-shadow(0px 0px 2px black);
opacity: 0.2;
}
.mes_edit:after {
content: "\270e";
}
/*unicode pencil*/
.mes_edit:hover {
color: var(--white100);
opacity: 1;
}
.last_mes .mes_edit, .last_mes .mes_edit_done, .last_mes .mes_edit_cancel {
grid-row-start: 1;
position: relative;
right: -30px;
}
.mes_edit_done {
.mes_edit_done, .mes_edit_cancel {
display: none;
float: right;
right: 8px;
cursor: pointer;
margin-right: 15px;
opacity: 0.5;
}
.mes_edit_done img {
width: 23px;
height: 23px;
margin-right: 10px;
filter: drop-shadow(0px 0px 2px black);
transition: 0.3s ease-in-out;
}
.mes_edit_cancel {
display: none;
float: right;
margin-right: 4px;
cursor: pointer;
opacity: 0.5;
margin-right: 0px;
}
.mes_edit_cancel img {
width: 23px;
height: 23px;
.mes_edit_cancel.menu_button, .mes_edit_done.menu_button{
opacity: 0.5;
padding: 5px;
margin-top: 0;
margin-bottom: 0;
}
.mes_edit_cancel.menu_button{background-color: var(--crimson70a);}
.mes_edit_done.menu_button{background-color: var(--okGreen70a);}
.mes_edit_cancel.menu_button:hover, .mes_edit_done.menu_button:hover{
opacity: 1;
}
.edit_textarea {
@ -1918,7 +1861,6 @@ input[type="range"]{
margin-bottom: 3px;
margin-left: 0;
color: var(--grey50);
}
#character_popup_text {
@ -1929,15 +1871,10 @@ input[type="range"]{
width: 100%;
}
#personality_div {}
#personality_textarea {
width: 100%;
}
#scenario_div {}
#mes_example_div {
height: 100%;
display: grid;
@ -2028,10 +1965,6 @@ input[type="range"]{
}
#select_chat_div {
/* margin-left: 5px; */
/* margin-top: 30px; */
/* overflow-x: hidden;
overflow-y: scroll; */
padding: 0;
height: min-content;
}
@ -2057,7 +1990,6 @@ input[type="range"]{
.select_chat_block {
border-radius: 10px;
/* margin-right: 10px; */
margin-top: 10px;
border: 1px solid var(--white30a);
padding: 10px;
@ -2099,9 +2031,6 @@ input[type="range"]{
}
.PastChat_cross{
/* position: absolute;
right: 15px;
margin-top: 5px; */
width: 15px;
height: 15px;
cursor: pointer;
@ -2131,8 +2060,6 @@ input[type="range"]{
grid-template-columns: 340px auto;
}
/* GROUP CHATS */
#rm_group_top_bar {
@ -2862,9 +2789,15 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
/* ---------- @media queries must always go at the bottom ------------*/
@media screen and (max-width: 450px) { /*styles for mobile phones (tested on iPhone 13 Pro)*/
@media screen and (max-width: 450px) { /*styles for mobile phones (tested on iPhone 13 Pro)*/
body {
font-size: 18px;
font-size: 16px;
position: fixed;
touch-action: none;
overflow: hidden;
height: 100vh;
width: 100vw;
}
.drawer-content {
@ -2873,6 +2806,13 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
position: fixed;
left: 0;
top: 10px;
border: 1px solid var(--grey30);
}
#select_chat_popup{
align-items: start;
height: min-content;
align-content: start;
}
#top-settings-holder{
@ -2888,7 +2828,22 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
margin: 0 auto;
margin-left: 5px;
position: fixed;
}
#character_popup, #world_popup, #send_form {
border: 1px solid var(--grey30);
}
#chat {
border-left: 1px solid var(--grey30);
border-right: 1px solid var(--grey30);
border-bottom: 1px solid var(--grey30);
align-items: start;
align-content: start;
}
#sheld, #character_popup {
overflow-y: hidden;
}
.mes-text {padding-right: 25px;}
@ -2899,9 +2854,9 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
width: calc(100vw - 10px);
left: 5px !important;
overflow-y: hidden;
border-left: 1px solid var(--grey30a);
border-right: 1px solid var(--grey30a);
border-bottom: 1px solid var(--grey30a);
border-left: 1px solid var(--grey30);
border-right: 1px solid var(--grey30);
border-bottom: 1px solid var(--grey30);
border-radius: 0 0 20px 20px;
/* border: 0;*/
}
@ -2954,10 +2909,9 @@ filter: invert(20%) sepia(100%) saturate(2518%) hue-rotate(353deg) brightness(93
#talkativeness_hint span {
min-width: 33%;
}
/*for debug purposes*/
/*
* {border: 1px solid purple;}
*/
/* div {border: 1px solid purple;} */
}
@media (max-width: 768px) {