rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

ext button to left, stack buttons on mobile

Browse Source
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
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; top: unset;
bottom: unset; bottom: unset;
} }
#leftSendForm,
#rightSendForm {
width: 1.15em;
flex-wrap: wrap;
height: unset;
}
#extensionsMenuButton {
order: 1;
}
} }
/*iOS specific*/ /*iOS specific*/
@ -445,4 +457,4 @@
#horde_model { #horde_model {
height: unset; height: unset;
} }
} }

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

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

18
public/index.html
View File

@ -4568,14 +4568,18 @@
<div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div> <div id="dialogue_del_mes_cancel" class="menu_button">Cancel</div>
</div> </div>
<form id="send_form" class="no-connection"> <form id="send_form" class="no-connection">
<div id="options_button" class="fa-solid fa-bars"></div> <div id="nonQRFormItems">
<textarea id="send_textarea" data-i18n="[placeholder]Not connected to API!" placeholder="Not connected to API!" name="text"></textarea> <div id="leftSendForm" class="alignContentCenter">
<div id="send_but_sheld"> <div id="options_button" class="fa-solid fa-bars"></div>
<div id="mes_stop" title="Abort request" class="mes_stop" data-i18n="[title]Abort request"> </div>
<i class="fa-solid fa-circle-stop"></i> <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>
<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>
</form> </form>
</div> </div>

6
public/script.js
View File

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

6
public/scripts/extensions.js
View File

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

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

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

46
public/style.css
View File

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