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

topbar resize, font scaling fix, mobile slider fix

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
Show Stats 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%;
border-radius: 0 0 20px 20px;
margin-top: 0px;
height: calc(100% - 40px);
height: calc(100% - var(--topBarBlockSize));
}
.drawer25pWidth {

23
public/css/promptmanager.css
View File

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

15
public/script.js
View File

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

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

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

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

@ -46,7 +46,7 @@ export {
export const MAX_CONTEXT_DEFAULT = 4096;
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 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);
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").val(power_user.font_scale);
}
@ -522,7 +532,7 @@ async function applyTheme(name) {
key: 'font_scale',
action: async () => {
localStorage.setItem(storage_keys.font_scale, power_user.font_scale);
await applyFontScale();
await applyFontScale('forced');
}
},
{
@ -641,7 +651,7 @@ async function applyMovingUIPreset(name) {
}
switchUiMode();
applyFontScale();
applyFontScale('forced');
applyThemeColor();
applyChatWidth();
applyAvatarStyle();

59
public/style.css
View File

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