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

Zoomed Avatars back to reg. mobile 🦀

Browse Source
This commit is contained in:
RossAscends
2023-06-30 12:59:40 +09:00
parent 3353fe572c
commit e6761f7293
3 changed files with 49 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
public/script.js
View File

@ -7838,13 +7838,13 @@ $(document).ready(function () {
$(document).on('click', '.mes .avatar', function () { $(document).on('click', '.mes .avatar', function () {
console.log(isMobile()); //console.log(isMobile());
console.log($('body').hasClass('waifuMode')); //console.log($('body').hasClass('waifuMode'));
if (isMobile() === true && !$('body').hasClass('waifuMode')) { /* if (isMobile() === true && !$('body').hasClass('waifuMode')) {
console.debug('saw mobile regular mode, returning'); console.debug('saw mobile regular mode, returning');
return; return;
} else { console.debug('saw valid env for zoomed display') } } else { console.debug('saw valid env for zoomed display') } */
let thumbURL = $(this).children('img').attr('src'); let thumbURL = $(this).children('img').attr('src');
let charsPath = '/characters/' let charsPath = '/characters/'

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

@ -297,13 +297,13 @@ function toggleWaifu() {
function switchWaifuMode() { function switchWaifuMode() {
$("body").toggleClass("waifuMode", power_user.waifuMode); $("body").toggleClass("waifuMode", power_user.waifuMode);
$("#waifuMode").prop("checked", power_user.waifuMode); $("#waifuMode").prop("checked", power_user.waifuMode);
if (isMobile() && !$('body').hasClass('waifuMode')) { /* if (isMobile() && !$('body').hasClass('waifuMode')) {
console.debug('saw mobile regular mode, removing ZoomedAvatars'); console.debug('saw mobile regular mode, removing ZoomedAvatars');
if ($('.zoomed_avatar[forChar]').length) { if ($('.zoomed_avatar[forChar]').length) {
$('.zoomed_avatar[forChar]').remove(); $('.zoomed_avatar[forChar]').remove();
} }
return; return;
} } */
scrollChatToBottom(); scrollChatToBottom();
} }

49
public/style.css
View File

@ -1925,7 +1925,7 @@ grammarly-extension {
#kobold_order>div { #kobold_order>div {
padding: 5px; padding: 5px;
padding-left: 25px; padding-left: 30px;
width: 100%; width: 100%;
border-radius: 5px; border-radius: 5px;
color: var(--SmartThemeBodyColor); color: var(--SmartThemeBodyColor);
@ -1943,7 +1943,7 @@ grammarly-extension {
#kobold_order>div::after { #kobold_order>div::after {
content: "☰"; content: "☰";
left: 5px; left: 8px;
position: absolute; position: absolute;
} }
@ -4475,23 +4475,22 @@ body.waifuMode .zoomed_avatar {
min-width: 100% !important; min-width: 100% !important;
} }
.zoomed_avatar { body:not(.waifuMode) .zoomed_avatar {
min-width: 100px; min-width: 100px;
min-height: 100px; min-height: 100px;
max-height: 90vh;
max-width: 90vh;
width: calc((100vw - var(--sheldWidth)) /2);
position: absolute; position: absolute;
padding: 0; padding: 0;
filter: drop-shadow(2px 2px 2px #51515199); filter: drop-shadow(2px 2px 2px #51515199);
z-index: 2; z-index: 30;
overflow: hidden; overflow: hidden;
display: none;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
top: 50px; top: 50px;
aspect-ratio: 2 / 3; aspect-ratio: 2 / 3;
width: fit-content;
max-height: calc(60svh - 60px);
max-width: 90svw;
} }
.world_entry_thin_controls, .world_entry_thin_controls,
@ -4717,13 +4716,6 @@ body.waifuMode .zoomed_avatar {
object-fit: cover; object-fit: cover;
} }
body:not(.waifuMode) .zoomed_avatar {
display: none;
/* z-index: 999;
width: fit-content;
max-height: calc(60svh - 60px); */
}
body.waifuMode .zoomed_avatar { body.waifuMode .zoomed_avatar {
width: fit-content; width: fit-content;
max-height: calc(60svh - 60px); max-height: calc(60svh - 60px);
@ -4754,9 +4746,36 @@ body.waifuMode .zoomed_avatar {
top: unset; top: unset;
bottom: unset; bottom: unset;
} }
body:not(.waifuMode) .zoomed_avatar {
width: fit-content;
max-height: calc(60svh - 60px);
max-width: 90svw;
}
} }
@media screen and (max-width: 450px) { @media screen and (max-width: 450px) {
body:not(.waifuMode) .zoomed_avatar {
min-width: 100px;
min-height: 100px;
max-height: 50vh;
max-width: 50vh;
width: 50vw;
position: absolute;
padding: 0;
filter: drop-shadow(2px 2px 2px #51515199);
z-index: 30;
overflow: hidden;
display: none;
left: 0;
right: 0;
margin: 0 auto;
top: 50px;
aspect-ratio: 2 / 3;
}
.drawer25pWidth { .drawer25pWidth {
flex-basis: max(calc(100% / 2 - 10px), 180px); flex-basis: max(calc(100% / 2 - 10px), 180px);
} }