This commit is contained in:
SillyLossy
2023-03-18 12:47:50 +02:00
5 changed files with 171 additions and 56 deletions

View File

@ -834,6 +834,7 @@
</div> </div>
<div class="mes_bias">${bias}</div> <div class="mes_bias">${bias}</div>
<div class="swipe_right"> <img src="img/swipe_right.png"></div> <div class="swipe_right"> <img src="img/swipe_right.png"></div>
<div class="swipes-counter"></div>
</div> </div>
</div> </div>

View File

@ -748,6 +748,7 @@ function printMessages() {
//console.log(chat); //console.log(chat);
//console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]); //console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]);
chat.forEach(function (item, i, arr) { chat.forEach(function (item, i, arr) {
//console.log('print message calling addOneMessage');
addOneMessage(item); addOneMessage(item);
}); });
} }
@ -859,17 +860,32 @@ function addOneMessage(mes, type = "normal") {
if (type === 'swipe') { if (type === 'swipe') {
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html(''); $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('');
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText); $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText);
//console.log(mes);
} else { } else {
$("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText); $("#chat").children().filter('[mesid="' + count_view_mes + '"]').children('.mes_block').children('.mes_text').append(messageText);
hideSwipeButtons(); hideSwipeButtons();
count_view_mes++; count_view_mes++;
} }
var $textchat = $("#chat"); var $textchat = $("#chat");
$('#chat .mes').last().addClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes');
$textchat.scrollTop(($textchat[0].scrollHeight)); $textchat.scrollTop(($textchat[0].scrollHeight));
//console.log(chat[chat.length - 1].["swipes"]);
//console.log(mes);
/* if (mes["swipes"] !== undefined) {
if (mes["swipes"].length - 1 == mes["swipe_id"]) { //this works to detect when next right swipe would generate
$(".swipe_right").css('opacity', '0.7') // but we need it to happen on load, not only when swiping happens.
} else {
$(".swipe_right").css('opacity', '0.3')
};
} */
hideSwipeButtons(); hideSwipeButtons();
//console.log('addonemessage calling showSwipeBtns');
showSwipeButtons(); showSwipeButtons();
} }
@ -900,7 +916,7 @@ function sendSystemMessage(type, text) {
} }
chat.push(newMessage); chat.push(newMessage);
console.log('sendSystemMessage calls addOneMessage'); //console.log('sendSystemMessage calls addOneMessage');
addOneMessage(newMessage); addOneMessage(newMessage);
is_send_press = false; is_send_press = false;
} }
@ -1026,7 +1042,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
console.log('checking bias'); console.log('checking bias');
chat[chat.length - 1]['extra']['bias'] = messageBias; chat[chat.length - 1]['extra']['bias'] = messageBias;
} }
console.log('Generate calls addOneMessage'); //console.log('Generate calls addOneMessage');
addOneMessage(chat[chat.length - 1]); addOneMessage(chat[chat.length - 1]);
} }
//////////////////////////////////// ////////////////////////////////////
@ -1203,7 +1219,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
return; return;
function runGenerate(cycleGenerationPromt = '') { function runGenerate(cycleGenerationPromt = '') {
$(".swipe_right").css("display", "none");
is_send_press = true; is_send_press = true;
generatedPromtCache += cycleGenerationPromt; generatedPromtCache += cycleGenerationPromt;
@ -1546,7 +1562,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
if (chat[chat.length - 1]['swipe_id'] === chat[chat.length - 1]['swipes'].length - 1) { if (chat[chat.length - 1]['swipe_id'] === chat[chat.length - 1]['swipes'].length - 1) {
//console.log(getMessage); //console.log(getMessage);
chat[chat.length - 1]['mes'] = getMessage; chat[chat.length - 1]['mes'] = getMessage;
console.log('runGenerate calls addOneMessage for swipe'); // console.log('runGenerate calls addOneMessage for swipe');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
} else { } else {
chat[chat.length - 1]['mes'] = getMessage; chat[chat.length - 1]['mes'] = getMessage;
@ -1572,7 +1588,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
chat[chat.length - 1]['is_name'] = true; chat[chat.length - 1]['is_name'] = true;
chat[chat.length - 1]['force_avatar'] = avatarImg; chat[chat.length - 1]['force_avatar'] = avatarImg;
} }
console.log('runGenerate calls addOneMessage'); //console.log('runGenerate calls addOneMessage');
addOneMessage(chat[chat.length - 1]); addOneMessage(chat[chat.length - 1]);
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
@ -1594,6 +1610,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
$("#loading_mes").css("display", "none"); $("#loading_mes").css("display", "none");
//console.log('runGenerate calling showSwipeBtns');
showSwipeButtons(); showSwipeButtons();
} }
console.log('/savechat called by /Generate'); console.log('/savechat called by /Generate');
@ -1602,7 +1619,7 @@ async function Generate(type, automatic_trigger) {//encode("dsfs").length
//console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)'); //console.log('AI Response: +'+getMessage+ '('+final_message_length+' tokens)');
$("#send_but").css("display", "inline"); $("#send_but").css("display", "inline");
//console.log('runGenerate calling showSwipeBtns pt. 2');
showSwipeButtons(); showSwipeButtons();
$("#loading_mes").css("display", "none"); $("#loading_mes").css("display", "none");
@ -2027,6 +2044,7 @@ async function getSettings(type) {
$('#swipes-checkbox').prop('checked', swipes); /// swipecode $('#swipes-checkbox').prop('checked', swipes); /// swipecode
console.log('getSettings -- swipes = ' + swipes + '. toggling box'); console.log('getSettings -- swipes = ' + swipes + '. toggling box');
hideSwipeButtons(); hideSwipeButtons();
//console.log('getsettings calling showswipebtns');
showSwipeButtons(); showSwipeButtons();
//Novel //Novel
@ -2131,23 +2149,9 @@ async function getSettings(type) {
textgenerationwebui_settings[i] textgenerationwebui_settings[i]
); );
} }
/* //RossAscends: getting variables added/adjusted/applied with RA-mods
active_character = settings.active_character;
this_chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC
var chid = settings.active_character; //forcing variable sameness for chid and this_chid with active_character in order to load RA_ALC
console.log(
"getSettings -- loaded from file -- active_character : " +
settings.active_character
);
auto_connect = settings.auto_connect;
auto_load_chat = settings.auto_load_chat; */
selected_button = settings.selected_button; selected_button = settings.selected_button;
/* NavOpenClosePref = settings.NavOpenClosePref;
stickyNavPref = settings.stickyNavPref; */
/* $("#nav-toggle").prop("checked", NavOpenClosePref);
$("#rm_button_panel_pin").prop("checked", stickyNavPref);
$("#auto-connect-checkbox").prop("checked", auto_connect);
$("#auto-load-chat-checkbox").prop("checked", auto_load_chat); */
} }
if (!is_checked_colab) isColab(); if (!is_checked_colab) isColab();
@ -2687,7 +2691,33 @@ function showSwipeButtons() {
if (swipeId !== undefined && swipeId != 0) { if (swipeId !== undefined && swipeId != 0) {
currentMessage.children('.swipe_left').css('display', 'flex'); currentMessage.children('.swipe_left').css('display', 'flex');
} }
if (is_send_press === false || chat[chat.length - 1].swipes.length >= swipeId) { //only show right when generate is off, or when next right swipe would not make a generate happen
currentMessage.children('.swipe_right').css('display', 'flex'); currentMessage.children('.swipe_right').css('display', 'flex');
currentMessage.children('.swipe_right').css('opacity', '0.3');
}
//had to add this to make the swipe counter work
//(copied from the onclick functions for swipe buttons..
//don't know why the array isn't set for non-swipe messsages in Generate or addOneMessage..)
if (chat[chat.length - 1]['swipe_id'] === undefined) { // if there is no swipe-message in the last spot of the chat array
chat[chat.length - 1]['swipe_id'] = 0; // set it to id 0
chat[chat.length - 1]['swipes'] = []; // empty the array
chat[chat.length - 1]['swipes'][0] = chat[chat.length - 1]['mes']; //assign swipe array with last message from chat
}
//console.log((chat[chat.length - 1]));
if (is_send_press === false && (chat[chat.length - 1].swipes.length - swipeId) === 1) {
console.log('highlighting R swipe');
currentMessage.children('.swipe_right').css('opacity', '0.7');
}
var swipesCounterHTML = (`${(swipeId + 1)}/${(chat[chat.length - 1].swipes.length)}`);
console.log(swipesCounterHTML);
$(".swipes-counter").html(swipesCounterHTML);
//console.log(swipeId);
//console.log(chat[chat.length - 1].swipes.length);
} }
function hideSwipeButtons() { function hideSwipeButtons() {
@ -2724,6 +2754,7 @@ $(document).ready(function () {
console.log('detected swipes-checkbox changed values') console.log('detected swipes-checkbox changed values')
swipes = !!$('#swipes-checkbox').prop('checked'); swipes = !!$('#swipes-checkbox').prop('checked');
if (swipes) { if (swipes) {
//console.log('toggle change calling showswipebtns');
showSwipeButtons(); showSwipeButtons();
} else { } else {
hideSwipeButtons(); hideSwipeButtons();
@ -2746,10 +2777,13 @@ $(document).ready(function () {
chat[chat.length - 1]['swipe_id']++; //make new slot in array chat[chat.length - 1]['swipe_id']++; //make new slot in array
//console.log(chat[chat.length-1]['swipes']); //console.log(chat[chat.length-1]['swipes']);
if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array if (parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { //if swipe id of last message is the same as the length of the 'swipes' array
run_generate = true; run_generate = true;
} else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes } else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes
chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation
run_swipe_right = true; //then swipe run_swipe_right = true; //then prepare to do normal right swipe to show next message
} }
if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now) if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now)
@ -2778,10 +2812,11 @@ $(document).ready(function () {
//console.log(parseInt(chat[chat.length-1]['swipe_id'])); //console.log(parseInt(chat[chat.length-1]['swipe_id']));
//console.log(chat[chat.length-1]['swipes'].length); //console.log(chat[chat.length-1]['swipes'].length);
if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) { if (run_generate && parseInt(chat[chat.length - 1]['swipe_id']) === chat[chat.length - 1]['swipes'].length) {
//console.log('showing ...'); //console.log('showing ""..."');
$("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows ... while generating $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html('...'); //shows "..." while generating
} else { } else {
//console.log('showing previously generated swipe candidate, or "..."'); //console.log('showing previously generated swipe candidate, or "..."');
//console.log('onclick right swipe calling addOneMessage');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
} }
let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight);
@ -2819,7 +2854,7 @@ $(document).ready(function () {
Generate('swipe'); Generate('swipe');
} else { } else {
if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) { if (parseInt(chat[chat.length - 1]['swipe_id']) !== chat[chat.length - 1]['swipes'].length) {
console.log('caught here 3');
saveChat(); saveChat();
} }
} }
@ -2882,7 +2917,7 @@ $(document).ready(function () {
queue: false, queue: false,
complete: function () { complete: function () {
const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop("scrollHeight") - $('#chat').outerHeight()) - 10); const is_animation_scroll = ($('#chat').scrollTop() >= ($('#chat').prop("scrollHeight") - $('#chat').outerHeight()) - 10);
console.log('sipwing left after tr5ansition calls addOneMessage'); //console.log('on left swipe click calling addOneMessage');
addOneMessage(chat[chat.length - 1], 'swipe'); addOneMessage(chat[chat.length - 1], 'swipe');
let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight); let new_height = this_mes_div_height - (this_mes_block_height - this_mes_block[0].scrollHeight);
if (new_height < 103) new_height = 103; if (new_height < 103) new_height = 103;
@ -2971,7 +3006,7 @@ $(document).ready(function () {
}); });
$("#send_but").click(function () { $("#send_but").click(function () {
if (is_send_press == false) { if (is_send_press == false) {
hideSwipeButtons(); //hideSwipeButtons();
is_send_press = true; is_send_press = true;
Generate(); Generate();
@ -2987,7 +3022,7 @@ $(document).ready(function () {
$("#send_textarea").keydown(function (e) { $("#send_textarea").keydown(function (e) {
if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) { if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) {
hideSwipeButtons(); //hideSwipeButtons();
is_send_press = true; is_send_press = true;
e.preventDefault(); e.preventDefault();
Generate(); Generate();
@ -3425,6 +3460,7 @@ $(document).ready(function () {
chat[0]["is_name"] = true; chat[0]["is_name"] = true;
chat[0]["mes"] = this_ch_mes; chat[0]["mes"] = this_ch_mes;
add_mes_without_animation = true; add_mes_without_animation = true;
//console.log('form create submission calling addOneMessage');
addOneMessage(chat[0]); addOneMessage(chat[0]);
} }
} }
@ -3613,7 +3649,7 @@ $(document).ready(function () {
else if (id == "option_regenerate") { else if (id == "option_regenerate") {
if (is_send_press == false) { if (is_send_press == false) {
hideSwipeButtons(); //hideSwipeButtons();
is_send_press = true; is_send_press = true;
Generate("regenerate"); Generate("regenerate");
} }
@ -3647,6 +3683,7 @@ $(document).ready(function () {
$(this).prop("checked", false); $(this).prop("checked", false);
}); });
this_del_mes = 0; this_del_mes = 0;
console.log('canceled del msgs, calling showswipesbtns');
showSwipeButtons(); showSwipeButtons();
}); });
@ -3678,6 +3715,7 @@ $(document).ready(function () {
this_del_mes = 0; this_del_mes = 0;
$('#chat .mes').last().addClass('last_mes'); $('#chat .mes').last().addClass('last_mes');
$('#chat .mes').eq(-2).removeClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes');
console.log('confirmed del msgs, calling showswipesbtns');
showSwipeButtons(); showSwipeButtons();
}); });

View File

@ -279,7 +279,8 @@ $("document").ready(function () {
var SwipeButR = $('.swipe_right:last'); var SwipeButR = $('.swipe_right:last');
var SwipeTargetMesClassParent = e.target.closest('.last_mes'); var SwipeTargetMesClassParent = e.target.closest('.last_mes');
if (SwipeTargetMesClassParent !== null) { if (SwipeTargetMesClassParent !== null) {
if (SwipeButR.attr('style') == 'display: flex;' == true) { if (SwipeButR.css('display') === 'flex') {
//if (SwipeButR.attr('style') == 'display: flex;' == true) {
SwipeButR.click(); SwipeButR.click();
} }
} }
@ -287,13 +288,19 @@ $("document").ready(function () {
document.addEventListener('swiped-right', function (e) { document.addEventListener('swiped-right', function (e) {
var SwipeButL = $('.swipe_left:last'); var SwipeButL = $('.swipe_left:last');
var SwipeTargetMesClassParent = e.target.closest('.last_mes'); var SwipeTargetMesClassParent = e.target.closest('.last_mes');
//console.log('Touch swipe check -- closest last_mes = "' + (SwipeTargetMesClassParent !== null) + ' Button display = ' + (SwipeButL.attr('style') == 'display: flex;' == true));
if (SwipeTargetMesClassParent !== null) { if (SwipeTargetMesClassParent !== null) {
if (SwipeButL.attr('style') == 'display: flex;' == true) { if (SwipeButL.css('display') === 'flex') {
//if (SwipeButL.attr('style') == 'display: flex;' == true) {
SwipeButL.click(); SwipeButL.click();
} }
} }
}); });
function isInputElementInFocus() {
return $(document.activeElement).is(":input");
}
//Additional hotkeys CTRL+ENTER and CTRL+UPARROW //Additional hotkeys CTRL+ENTER and CTRL+UPARROW
document.addEventListener("keydown", (event) => { document.addEventListener("keydown", (event) => {
if (event.ctrlKey && event.key == "Enter") { if (event.ctrlKey && event.key == "Enter") {
@ -316,11 +323,36 @@ $("document").ready(function () {
ClearLocal(); ClearLocal();
} }
if (event.key == "ArrowLeft") { //swipes left if (event.key == "ArrowLeft") { //swipes left
/* console.log('SWIPE FILTER -- ' +
$("#send_textarea").val() + ' ' +
$("#character_popup").css("display") + ' ' +
$("#shadow_select_chat_popup").css("display") + ' ' +
isInputElementInFocus()); */
if (
$("#send_textarea").val() === '' &&
$("#character_popup").css("display") === "none" &&
$("#shadow_select_chat_popup").css("display") === "none" &&
!isInputElementInFocus()
) {
$('.swipe_left:last').click(); $('.swipe_left:last').click();
} }
}
if (event.key == "ArrowRight") { //swipes right if (event.key == "ArrowRight") { //swipes right
/* console.log('SWIPE FILTER -- ' +
$("#send_textarea").val() + ' ' +
$("#character_popup").css("display") + ' ' +
$("#shadow_select_chat_popup").css("display") + ' ' +
isInputElementInFocus()); */
if (
$("#send_textarea").val() === '' &&
$("#character_popup").css("display") === "none" &&
$("#shadow_select_chat_popup").css("display") === "none" &&
!isInputElementInFocus()
) {
$('.swipe_right:last').click(); $('.swipe_right:last').click();
} }
}); };
}) })
});

View File

@ -180,14 +180,14 @@ async function setExpression(character, expression) {
const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`); const debugImageStatus = document.querySelector(`#image_list li[id="${filename}"]`);
if (debugImageStatus && !debugImageStatus.classList.contains('failure')) { if (debugImageStatus && !debugImageStatus.classList.contains('failure')) {
console.log('setting expression from character images folder'); //console.log('setting expression from character images folder');
const imgUrl = `/characters/${character}/${filename}`; const imgUrl = `/characters/${character}/${filename}`;
$('img.expression').prop('src', imgUrl); $('img.expression').prop('src', imgUrl);
} else { } else {
if (showDefault) { if (showDefault) {
console.log('no character images, trying default expressions'); //console.log('no character images, trying default expressions');
const defImgUrl = `/img/default-expressions/${filename}`; const defImgUrl = `/img/default-expressions/${filename}`;
console.log(defImgUrl); //console.log(defImgUrl);
$('img.expression').prop('src', defImgUrl); $('img.expression').prop('src', defImgUrl);
} }
} }

View File

@ -176,7 +176,27 @@ code {
} }
#chat { #chat {
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 0;
overflow-y: scroll;
display: flex;
flex-wrap: wrap;
margin-top: 40px;
bottom: 10px;
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;
align-content: end;
/*old style top to bottom flow*/
/* overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
margin-top: 40px; margin-top: 40px;
border-bottom: 1px solid var(--black30a); border-bottom: 1px solid var(--black30a);
@ -187,7 +207,7 @@ code {
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
text-shadow: #000 0 0 3px; text-shadow: #000 0 0 3px;
scrollbar-width: thin; scrollbar-width: thin;
transition: all 1s ease-in-out; transition: all 1s ease-in-out; */
} }
@ -348,16 +368,25 @@ code {
} }
.mes { .mes {
display: grid; display: grid;
grid-template-columns: min-content min-content auto min-content min-content;
padding: 10px 10px 0 10px;
margin-top: 0;
width: 100%;
color: var(--ivory, white);
align-self: flex-end;
/* display: grid;
grid-template-columns: min-content min-content auto min-content min-content; grid-template-columns: min-content min-content auto min-content min-content;
padding: 10px 10px 0 10px; padding: 10px 10px 0 10px;
vertical-align: top; vertical-align: top;
width: 100%; width: 100%;
color: var(--ivory, white); color: var(--ivory, white); */
} }
.last_mes .mes_text { .last_mes .mes_text {
min-height: 7em; min-height: 6em;
} }
.last_mes{ .last_mes{
@ -367,26 +396,34 @@ code {
/* SWIPE RELATED STYLES*/ /* SWIPE RELATED STYLES*/
.swipe_right,.swipe_left { .swipe_right,.swipe_left {
height: 30px; height: 40px;
width: 30px; width: 40px;
opacity: 0.36; opacity: 0.36;
position: absolute; position: absolute;
right: 15px; right: 15px;
margin-top: 62px; margin-top: 60px;
left: auto; left: auto;
background-color: var(--black50a); background-color: var(--black50a);
padding: 20px;
border-radius: 50%; border-radius: 50%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
/* display: none; */
border: 1px solid grey; border: 1px solid grey;
flex-wrap: wrap;
} }
.swipe_right img, .swipe_left img { .swipe_right img, .swipe_left img {
height: 30px; height: 30px;
display: flex;
width: 30px; width: 30px;
} }
.swipes-counter{
display: flex;
color: white;
position: fixed;
font-size: 12px;
padding: 0;
margin-top: 60px;
}
.swipe_left { .swipe_left {
left: 20px; left: 20px;
@ -2582,9 +2619,9 @@ a {
#sheld { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/ #sheld { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
height: calc(100svh - 15px); height: calc(100svh - 15px);
width: 100vw; //calc(100vw - 15px); width: calc(100vw - 10px);
margin: 0 auto;
margin-left: 5px; margin-left: 5px;
margin-right: 5px;
position: fixed; position: fixed;
} }
#send_textarea { /*larger input bar for mobile screens, easier to tap*/ #send_textarea { /*larger input bar for mobile screens, easier to tap*/
@ -2608,8 +2645,13 @@ a {
max-height: 300px; max-height: 300px;
} }
#rm_api_block {
width:100vw;
}
#right-nav-panel, #character_popup { /* character_popup display needs work, "width:100%" items push outside the box */ #right-nav-panel, #character_popup { /* character_popup display needs work, "width:100%" items push outside the box */
width: 100%; width: 100vw;
box-shadow: none; box-shadow: none;
} }
@ -2626,7 +2668,9 @@ a {
min-width: 33%; min-width: 33%;
} }
/*for debug purposes*/ /*for debug purposes*/
/** {border: 1px solid purple;}*/ /*
* {border: 1px solid purple;}
*/
} }
@media (max-width: 768px) { @media (max-width: 768px) {