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

better placement and sizing for avatar popups

Browse Source
This commit is contained in:
RossAscends
2023-05-02 03:15:40 +09:00
parent aec32c2f65
commit adccd4e210
2 changed files with 11 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
public/script.js
View File

@ -5387,17 +5387,8 @@ $(document).ready(function () {
}); });
$(document).on('click', '.mes .avatar', function () { $(document).on('click', '.mes .avatar', function () {
let avPopperOrigin = $(this);
const avatarPopup = {
name: 'offset',
options: {
offset: [0, 8],
},
};
let avatarPopper = Popper.createPopper(document.getElementById('top-settings-holder'), document.getElementById('avatar_zoom_popup'), {
modifiers: [avatarPopup],
});
let thumbURL = $(this).children('img').attr('src'); let thumbURL = $(this).children('img').attr('src');
let charsPath = '/characters/' let charsPath = '/characters/'
let targetAvatarImg = thumbURL.substring(thumbURL.lastIndexOf("=") + 1); let targetAvatarImg = thumbURL.substring(thumbURL.lastIndexOf("=") + 1);
@ -5411,9 +5402,14 @@ $(document).ready(function () {
$("#zoomed_avatar").attr('src', avatarSrc); $("#zoomed_avatar").attr('src', avatarSrc);
} }
$('#avatar_zoom_popup').toggle(); let avatarPopper = Popper.createPopper(document.getElementById('top-bar'), document.getElementById('avatar_zoom_popup'), {
placement: 'bottom',
});
avatarPopper.update(); avatarPopper.update();
$('#avatar_zoom_popup').toggle();
}); });

12
public/style.css
View File

@ -3682,23 +3682,19 @@ body.noShadows * {
} }
#avatar_zoom_popup { #avatar_zoom_popup {
/* height: 600px; min-height: 0px;
width: 400px; */ min-width: 400px;
max-height: 60svh; max-height: 60svh;
max-width: 40svh; max-width: 40svh;
margin: 0 auto;
display: block;
position: absolute;
top: 60px;
z-index: 999; z-index: 999;
display: none; display: none;
} }
#zoomed_avatar { #zoomed_avatar {
border: 1px solid var(--white50a); border: 1px solid var(--white50a);
border-radius: 20px; border-radius: 20px;
max-height: 60svh; max-height: calc(60svh - 60px);
max-width: 40svh;
box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;
} }