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

small screen styles

Browse Source
This commit is contained in:
LenAnderson
2024-04-24 17:50:41 -04:00
parent 64ff604bba
commit 1a6e2575a7
2 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/scripts/slash-commands/SlashCommandAutoComplete.js
View File

@ -501,11 +501,11 @@ export class SlashCommandAutoComplete {
this.dom.style.setProperty('--bottom', `${window.innerHeight - rect.top}px`);
this.domWrap.style.bottom = `${window.innerHeight - rect.top}px`;
if (this.isShowingDetails) {
this.domWrap.style.left = '1vw';
this.domWrap.style.setProperty('--leftOffset', '1vw');
} else {
this.domWrap.style.left = `${rect.left}px`;
this.domWrap.style.setProperty('--leftOffset', `${rect.left}px`);
}
this.domWrap.style.right = `calc(1vw + ${this.isShowingDetails ? 25 : 0}vw)`;
this.domWrap.style.setProperty('--rightOffset', `calc(1vw + ${this.isShowingDetails ? 25 : 0}vw)`);
this.updateDetailsPosition();
}
}
@ -523,7 +523,7 @@ export class SlashCommandAutoComplete {
const selRect = this.selectedItem.dom.children[0].getBoundingClientRect();
this.detailsWrap.style.setProperty('--targetOffset', `${selRect.top}`);
this.detailsWrap.style.bottom = `${window.innerHeight - rect.top}px`;
this.detailsWrap.style.left = `calc(100vw - ${this.domWrap.style.right})`;
this.detailsWrap.style.left = `calc(100vw - calc(1vw + ${this.isShowingDetails ? 25 : 0}vw))`;
this.detailsWrap.style.right = '1vw';
this.detailsWrap.style.top = '5vh';
} else {

20
public/style.css
View File

@ -1101,9 +1101,13 @@ select {
.slashCommandAutoComplete-wrap {
--targetOffset: 0;
--direction: column;
--leftOffset: 1vw;
--rightOffset: 1vw;
display: flex;
flex-direction: var(--direction);
position: absolute;
left: var(--leftOffset);
right: var(--rightOffset);
z-index: 10000;
@ -1508,7 +1512,21 @@ select {
}
}
}
@media screen and (max-width: 1000px) {
.slashCommandAutoComplete-wrap {
left: 1vw;
> .slashCommandAutoComplete {
.specs {
grid-column: 2 / 4;
}
.help {
grid-column: 2 / 4;
padding-left: 1em;
opacity: 0.75;
}
}
}
}
.slashCommandBrowser {
> .search {
display: flex;