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

topbar resize, font scaling fix, mobile slider fix

Browse Source
This commit is contained in:
RossAscends
2023-08-25 07:06:52 +09:00
parent c91ab3b5e0
commit ce5e706fac
6 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -205,7 +205,7 @@
width: 100%; width: 100%;
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
margin-top: 0px; margin-top: 0px;
height: calc(100% - 40px); height: calc(100% - var(--topBarBlockSize));
} }
.drawer25pWidth { .drawer25pWidth {

21
public/css/promptmanager.css
View File

@ -94,7 +94,7 @@
#completion_prompt_manager_popup .completion_prompt_manager_popup_entry { #completion_prompt_manager_popup .completion_prompt_manager_popup_entry {
padding: 1em; padding: 1em;
margin-top:2em; margin-top: 2em;
} }
#completion_prompt_manager_popup #completion_prompt_manager_popup_inspect .completion_prompt_manager_popup_entry { #completion_prompt_manager_popup #completion_prompt_manager_popup_inspect .completion_prompt_manager_popup_entry {
@ -123,7 +123,7 @@
} }
.completion_prompt_manager_popup_entry_form_control { .completion_prompt_manager_popup_entry_form_control {
margin-top:1em; margin-top: 1em;
} }
#prompt-manager-reset-character, #prompt-manager-reset-character,
@ -236,13 +236,13 @@
font-size: 16px; font-size: 16px;
} }
#prompt-manager-export-format-popup { #prompt-manager-export-format-popup {
padding: 0.25em; padding: 0.25em;
display:none; display: none;
} }
#prompt-manager-export-format-popup[data-show] { #prompt-manager-export-format-popup[data-show] {
display:block; display: block;
} }
#completion_prompt_manager_popup { #completion_prompt_manager_popup {
@ -251,24 +251,24 @@
#completion_prompt_manager_popup { #completion_prompt_manager_popup {
overflow-y: auto; overflow-y: auto;
height: calc(100% - 40px); height: calc(100% - var(--topBarBlockSize));
position: absolute; position: absolute;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
left: 0; left: 0;
right: 0; right: 0;
top: 40px; top: var(--topBarBlockSize);
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
padding: 1em; padding: 1em;
border: 1px solid #333333; border: 1px solid #333333;
flex-direction: column; flex-direction: column;
z-index: 3010 !important; z-index: 3010 !important;
border-radius: 0 0 20px 20px; border-radius: 0 0 20px 20px;
background-color: var(--SmartThemeBlurTintColor); background-color: var(--SmartThemeBlurTintColor);
} }
#prompt-manager-export-format-popup { #prompt-manager-export-format-popup {
display:none; display: none;
} }
.prompt-manager-export-format-popup-flex { .prompt-manager-export-format-popup-flex {
@ -296,6 +296,7 @@
#completion_prompt_manager_popup { #completion_prompt_manager_popup {
max-width: 100%; max-width: 100%;
} }
#completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span { #completion_prompt_manager #completion_prompt_manager_list li.completion_prompt_manager_prompt span span span {
margin-left: 0.5em; margin-left: 0.5em;
} }

15
public/script.js
View File

@ -8042,28 +8042,27 @@ $(document).ready(function () {
var sliderTimer; var sliderTimer;
$("input[type='range']").on("touchstart", function () { $("input[type='range']").on("touchstart", function () {
// Unlock the slider after 500ms // Unlock the slider after 300ms
sliderTimer = setTimeout(function () { setTimeout(function () {
sliderLocked = false; sliderLocked = false;
}, 500); $(this).css('background-color', 'var(--SmartThemeQuoteColor)');
}.bind(this), 300);
}); });
$("input[type='range']").on("touchend", function () { $("input[type='range']").on("touchend", function () {
clearTimeout(sliderTimer); clearTimeout(sliderTimer);
$(this).css('background-color', '') $(this).css('background-color', '');
sliderLocked = true sliderLocked = true;
}); });
$("input[type='range']").on("touchmove", function (event) { $("input[type='range']").on("touchmove", function (event) {
if (sliderLocked) { if (sliderLocked) {
event.preventDefault(); event.preventDefault();
} }
else {
$(this).css('background-color', 'var(--SmartThemeQuoteColor)')
}
}); });
const sliders = [ const sliders = [
{ {
sliderId: "#amount_gen", sliderId: "#amount_gen",

4
public/scripts/extensions/expressions/style.css
View File

@ -6,13 +6,13 @@
#expression-wrapper { #expression-wrapper {
display: flex; display: flex;
height: calc(100vh - 40px); height: calc(100vh - var(--topBarBlockSize));
width: 100vw; width: 100vw;
} }
#visual-novel-wrapper { #visual-novel-wrapper {
display: flex; display: flex;
height: calc(100vh - 40px); height: calc(100vh - var(--topBarBlockSize));
width: 100vw; width: 100vw;
position: relative; position: relative;
overflow: hidden; overflow: hidden;

20
public/scripts/power-user.js
View File

@ -46,7 +46,7 @@ export {
export const MAX_CONTEXT_DEFAULT = 4096; export const MAX_CONTEXT_DEFAULT = 4096;
const MAX_CONTEXT_UNLOCKED = 65536; const MAX_CONTEXT_UNLOCKED = 65536;
const defaultStoryString = "{{#if system}}{{system}}\n{{/if}}{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}\n{{/if}}{{#if persona}}{{persona}}\n{{/if}}"; const defaultStoryString = "{{#if system}}{{system}}\n{{/if}}{{#if description}}{{description}}\n{{/if}}{{#if personality}}{{char}}'s personality: {{personality}}\n{{/if}}{{#if scenario}}Scenario: {{scenario}}\n{{/if}}{{#if persona}}{{persona}}\n{{/if}}";
const defaultExampleSeparator = '***'; const defaultExampleSeparator = '***';
const defaultChatStart = '***'; const defaultChatStart = '***';
@ -482,9 +482,19 @@ async function applyShadowWidth() {
} }
async function applyFontScale() { async function applyFontScale(type) {
power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1); power_user.font_scale = Number(localStorage.getItem(storage_keys.font_scale) ?? 1);
document.documentElement.style.setProperty('--fontScale', power_user.font_scale); //this is to allow forced setting on page load, theme swap, etc
if (type === 'forced') {
document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
} else {
//this is to prevent the slider from updating page in real time
$("#font_scale").off('mouseup touchend').on('mouseup touchend', () => {
document.documentElement.style.setProperty('--fontScale', power_user.font_scale);
})
}
$("#font_scale_counter").text(power_user.font_scale); $("#font_scale_counter").text(power_user.font_scale);
$("#font_scale").val(power_user.font_scale); $("#font_scale").val(power_user.font_scale);
} }
@ -522,7 +532,7 @@ async function applyTheme(name) {
key: 'font_scale', key: 'font_scale',
action: async () => { action: async () => {
localStorage.setItem(storage_keys.font_scale, power_user.font_scale); localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
await applyFontScale(); await applyFontScale('forced');
} }
}, },
{ {
@ -641,7 +651,7 @@ async function applyMovingUIPreset(name) {
} }
switchUiMode(); switchUiMode();
applyFontScale(); applyFontScale('forced');
applyThemeColor(); applyThemeColor();
applyChatWidth(); applyChatWidth();
applyAvatarStyle(); applyAvatarStyle();

57
public/style.css
View File

@ -72,6 +72,11 @@
--bottomFormIconSize: calc(var(--mainFontSize) * 2); --bottomFormIconSize: calc(var(--mainFontSize) * 2);
--bottomFormBlockSize: calc(var(--bottomFormIconSize) + var(--bottomFormBlockPadding)); --bottomFormBlockSize: calc(var(--bottomFormIconSize) + var(--bottomFormBlockPadding));
/*Top Bar Scaling Variables*/
--topBarIconSize: calc(var(--mainFontSize) * 2);
--topBarBlockSize: calc(var(--topBarIconSize) + var(--topBarBlockPadding));
--topBarBlockPadding: calc(var(--mainFontSize) / 3);
/*styles for the color picker*/ /*styles for the color picker*/
--tool-cool-color-picker-btn-bg: transparent; --tool-cool-color-picker-btn-bg: transparent;
--tool-cool-color-picker-btn-border-color: transparent; --tool-cool-color-picker-btn-border-color: transparent;
@ -381,7 +386,7 @@ hr {
left: 0; left: 0;
right: 0; right: 0;
display: inline-block; display: inline-block;
height: 35px; height: var(--bottomFormBlockSize);
position: absolute; position: absolute;
border-bottom: 1px solid var(--grey30a); border-bottom: 1px solid var(--grey30a);
box-shadow: 0 2px 20px 0 var(--black70a); box-shadow: 0 2px 20px 0 var(--black70a);
@ -394,14 +399,15 @@ hr {
#sheld { #sheld {
display: grid; display: grid;
grid-template-rows: auto min-content; grid-template-rows: auto min-content;
height: calc(100vh - 36px); height: calc(100vh - var(--topBarBlockSize));
height: calc(100svh - 36px); height: calc(100svh - var(--topBarBlockSize));
max-height: calc(100svh - var(--topBarBlockSize));
overflow-x: hidden; overflow-x: hidden;
/* max-width: 50vw; */ /* max-width: 50vw; */
position: absolute; position: absolute;
left: calc((100vw - var(--sheldWidth))/2); left: calc((100vw - var(--sheldWidth))/2);
left: calc((100svw - var(--sheldWidth))/2); left: calc((100svw - var(--sheldWidth))/2);
top: 36px; top: var(--topBarBlockSize);
margin: 0 auto; margin: 0 auto;
left: 0; left: 0;
right: 0; right: 0;
@ -466,7 +472,7 @@ hr {
} }
#chat { #chat {
max-height: calc(100vh - 42px); max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
overflow-x: hidden; overflow-x: hidden;
padding-bottom: 0; padding-bottom: 0;
overflow-y: scroll; overflow-y: scroll;
@ -2444,7 +2450,7 @@ input[type="range"]::-webkit-slider-thumb {
margin-right: auto; margin-right: auto;
left: 0; left: 0;
right: 0; right: 0;
top: 40px; top: var(--topBarBlockSize);
box-shadow: 0 0 20px var(--black70a); box-shadow: 0 0 20px var(--black70a);
padding: 10px; padding: 10px;
border: 1px solid var(--black30a); border: 1px solid var(--black30a);
@ -2529,8 +2535,8 @@ h5 {
grid-template-rows: auto auto; grid-template-rows: auto auto;
max-width: var(--sheldWidth); max-width: var(--sheldWidth);
height: min-content; height: min-content;
max-height: calc(100vh - 40px); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - 40px); max-height: calc(100svh - var(--topBarBlockSize));
min-height: 100px; min-height: 100px;
position: absolute; position: absolute;
z-index: 2066; z-index: 2066;
@ -2891,10 +2897,10 @@ a {
#right-nav-panel { #right-nav-panel {
width: calc((100vw - var(--sheldWidth) - 2px) /2); width: calc((100vw - var(--sheldWidth) - 2px) /2);
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100svw - var(--sheldWidth) - 2px) /2);
max-height: calc(100vh - 42px); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - 42px); max-height: calc(100svh - var(--topBarBlockSize));
height: calc(100vh - 42px); height: calc(100vh - var(--topBarBlockSize));
height: calc(100svh - 42px); height: calc(100svh - var(--topBarBlockSize));
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;
@ -3026,31 +3032,28 @@ a {
/*------------ TOP SIDE SETTINGS ----------------*/ /*------------ TOP SIDE SETTINGS ----------------*/
#top-settings-holder { #top-settings-holder {
display: flex;
margin: 0 auto; margin: 0 auto;
padding-top: 2px; height: var(--topBarBlockSize);
height: 30px;
/* max-width: var(--sheldWidth); */
justify-content: center; justify-content: center;
display: grid;
grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10%;
z-index: 3000; z-index: 3000;
position: relative; position: relative;
grid-gap: 1%;
width: var(--sheldWidth); width: var(--sheldWidth);
} }
.drawer { .drawer {
align-items: center; align-items: center;
justify-content: center;
display: flex; display: flex;
flex-flow: column; flex-flow: row;
width: 100%; width: 100%;
} }
.drawer-icon { .drawer-icon {
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
font-size: 25px; font-size: var(--topBarIconSize);
} }
.drawer-icon.openIcon { .drawer-icon.openIcon {
@ -3123,11 +3126,11 @@ a {
min-width: 450px; min-width: 450px;
width: var(--sheldWidth); width: var(--sheldWidth);
overflow-y: auto; overflow-y: auto;
max-height: calc(100vh - 70px); max-height: calc(100vh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
max-height: calc(100svh - 70px); max-height: calc(100svh - calc(var(--topBarBlockSize) + var(--bottomFormBlockSize)));
display: none; display: none;
position: absolute; position: absolute;
top: 41px; top: var(--topBarBlockSize);
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
@ -3149,10 +3152,10 @@ a {
.fillLeft { .fillLeft {
width: calc((100vw - var(--sheldWidth) - 2px) /2); width: calc((100vw - var(--sheldWidth) - 2px) /2);
width: calc((100svw - var(--sheldWidth) - 2px) /2); width: calc((100svw - var(--sheldWidth) - 2px) /2);
height: calc(100vh - 42px); height: calc(100vh - var(--topBarBlockSize));
height: calc(100svh - 42px); height: calc(100svh - var(--topBarBlockSize));
max-height: calc(100vh - 42px); max-height: calc(100vh - var(--topBarBlockSize));
max-height: calc(100svh - 42px); max-height: calc(100svh - var(--topBarBlockSize));
position: fixed; position: fixed;
top: 0; top: 0;
margin: 0; margin: 0;