rixty
/
SillyTavern
mirror of https://github.com/SillyTavern/SillyTavern.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

ext button to left, stack buttons on mobile

This commit is contained in:
RossAscends 2023-11-14 15:53:26 +09:00
parent 52c07e0895
commit 3f4a62d22c
7 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
public/css/mobile-styles.css
View File

@ -369,6 +369,18 @@
top: unset;
bottom: unset;
}
#leftSendForm,
#rightSendForm {
width: 1.15em;
flex-wrap: wrap;
height: unset;
}
#extensionsMenuButton {
order: 1;
}
}
/*iOS specific*/
@ -445,4 +457,4 @@
#horde_model {
height: unset;
}
}
}

6
public/css/st-tailwind.css
View File

@ -297,6 +297,10 @@
align-content: flex-start;
}
.alignContentCenter {
align-content: center;
}
.overflowHidden {
overflow: hidden;
}
@ -526,4 +530,4 @@ textarea:disabled {
height: 30px;
text-align: center;
padding: 5px;
}
}

18
public/index.html
View File

@ -4568,14 +4568,18 @@
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div>
<form id="send_form" class="no-connection">
<div id="options_button" class="fa-solid fa-bars"></div>
<textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
<div id="send_but_sheld">
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
<i class="fa-solid fa-circle-stop"></i>
<div id="nonQRFormItems">
<div id="leftSendForm" class="alignContentCenter">
<div id="options_button" class="fa-solid fa-bars"></div>
</div>
<textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea>
<div id="rightSendForm" class="alignContentCenter">
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request">
<i class="fa-solid fa-circle-stop"></i>
</div>
<div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
<div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
</div>
<div id="mes_continue" class="fa-fw fa-solid fa-arrow-right displayNone" title="Continue the last message" data-i18n="[title]Continue the last message"></div>
<div id="send_but" class="fa-solid fa-paper-plane displayNone" title="Send a message" data-i18n="[title]Send a message"></div>
</div>
</form>
</div>

6
public/script.js
View File

@ -8023,14 +8023,14 @@ jQuery(async function () {
return menu.is(':hover') || button.is(':hover');
}
button.on('mouseenter click', function () { showMenu(); });
button.on('mouseleave', function () {
button.on('click', function () { showMenu(); });
button.on('blur', function () {
//delay to prevent menu hiding when mouse leaves button into menu
setTimeout(() => {
if (!isMouseOverButtonOrMenu()) { hideMenu(); }
}, 100)
});
menu.on('mouseleave', function () {
menu.on('blur', function () {
//delay to prevent menu hide when mouseleaves menu into button
setTimeout(() => {
if (!isMouseOverButtonOrMenu()) { hideMenu(); }

6
public/scripts/extensions.js
View File

@ -347,14 +347,14 @@ function addExtensionsButtonAndMenu() {
$(document.body).append(extensionsMenuHTML);
$('#send_but_sheld').prepend(buttonHTML);
$('#leftSendForm').prepend(buttonHTML);
const button = $('#extensionsMenuButton');
const dropdown = $('#extensionsMenu');
//dropdown.hide();
let popper = Popper.createPopper(button.get(0), dropdown.get(0), {
placement: 'top-end',
placement: 'top-start',
});
$(button).on('click', function () {
@ -592,7 +592,7 @@ function getModuleInformation() {
* Generates the HTML strings for all extensions and displays them in a popup.
*/
async function showExtensionsDetails() {
try{
try {
showLoader();
let htmlDefault = '<h3>Built-in Extensions:</h3>';
let htmlExternal = '<h3>Installed Extensions:</h3>';

2
public/scripts/extensions/quick-reply/style.css
View File

@ -12,7 +12,7 @@
display: none;
max-width: 100%;
overflow-x: auto;
order: 10;
order: 1;
}
#quickReplies {

46
public/style.css
View File

@ -559,10 +559,9 @@ hr {
background-color: var(--crimson70a) !important;
}
#send_but_sheld {
#nonQRFormItems {
padding: 0;
border: 0;
height: var(--bottomFormBlockSize);
position: relative;
background-position: center;
display: flex;
@ -570,10 +569,28 @@ hr {
column-gap: 5px;
font-size: var(--bottomFormIconSize);
overflow: hidden;
order: 1003;
order: 2;
width: 100%;
}
#send_but_sheld>div {
#leftSendForm,
#rightSendForm {
display: flex;
flex-wrap: wrap;
}
#leftSendForm {
order: 1;
padding-left: 2px;
}
#rightSendForm {
order: 3;
padding-right: 2px;
}
#send_form>#nonQRFormItems>div>div:not(.mes_stop) {
width: var(--bottomFormBlockSize);
height: var(--bottomFormBlockSize);
margin: 0;
@ -585,25 +602,26 @@ hr {
display: flex;
align-items: center;
justify-content: center;
transition: all 300ms;
}
#options_button:hover,
#send_but_sheld>div:hover {
#send_form>#nonQRFormItems>div>div:hover {
opacity: 1;
filter: brightness(1.2);
}
#send_but {
order: 99999;
order: 2;
}
#mes_continue {
order: 99998;
order: 1;
}
#send_but_sheld .mes_stop {
#send_form .mes_stop {
display: none;
order: 99997;
order: 2;
padding-right: 2px;
}
#options_button {
@ -622,7 +640,7 @@ hr {
transition: 0.3s;
display: flex;
align-items: center;
order: 1001;
order: 2;
}
.font-family-reset {
@ -670,7 +688,7 @@ hr {
}
#extensionsMenuButton {
order: 100;
order: 4;
padding: 1px;
}
@ -968,7 +986,7 @@ select {
margin: 0;
text-shadow: 0px 0px calc(var(--shadowWidth) * 1px) var(--SmartThemeShadowColor);
flex: 1;
order: 1002;
order: 3;
}
.text_pole::placeholder {
@ -3742,4 +3760,4 @@ a {
height: 100vh;
z-index: 9999;
}
}
}