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

Migrate grid view to pure CSS

Browse Source
This commit is contained in:
Cohee
2023-07-13 23:00:30 +03:00
parent 4bf8e2c49f
commit 5db9a7b5ba
3 changed files with 64 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

@@ -3369,8 +3369,8 @@
<div class="avatar" title="">
<img src="">
</div>
<div class="flex-container wide100pLess70px">
<div class="wide100p">
<div class="flex-container wide100pLess70px character_select_container">
<div class="wide100p character_name_block">
<span class="ch_name"></span>
<i class="ch_avatar_url"></i>
</div>
@@ -3506,7 +3506,7 @@
<div class="avatar">
<img src="">
</div>
<div class="flex-container wide100pLess70px gap5px">
<div class="flex-container wide100pLess70px gap5px group_name_block">
<div class="ch_name"></div>
<i class='group_fav_icon fa-solid fa-star'></i>
<input class="ch_fav" value="" hidden />

40
public/script.js
View File

@@ -916,7 +916,6 @@ async function printCharacters() {
sortCharactersList();
favsToHotswap();
await delay(300);
doCharListDisplaySwitch();
updateVisibleDivs('#rm_print_characters_block', true);
displayOverrideWarnings();
@@ -6798,33 +6797,12 @@ async function doImpersonate() {
const isPwaMode = window.navigator.standalone;
if (isPwaMode) { $("body").addClass('PWA') }
function doCharListDisplaySwitch(flipSwitch) {
if (!flipSwitch) {
console.debug('toggling body charListGrid state')
$("body").toggleClass('charListGrid')
power_user.charListGrid = $("body").hasClass("charListGrid") ? true : false;
saveSettingsDebounced()
}
//(wide100p alignitemsflexstart) removed, the rest added
if (power_user.charListGrid === true && $("body").hasClass('charListGrid')
|| power_user.charListGrid === false && !$("body").hasClass('charListGrid')) {
$("#rm_print_characters_block").toggleClass('flexFlowColumn flex-container')
$("#rm_print_characters_block .character_select").toggleClass('wide100p alignitemsflexstart heightMinContent flexFlowColumn wide30p overflowHidden wideMax100px')
$("#rm_print_characters_block .character_select .ch_name").toggleClass('wide100p wideMax100px')
$("#rm_print_characters_block .character_select .ch_name").parent().toggleClass('wide100p')
$("#rm_print_characters_block .character_select .ch_name").parent().parent().toggleClass('wide100pLess70px justifyCenter wideMax100px')
$("#rm_print_characters_block .group_select").toggleClass('wide100p alignitemsflexstart heightMinContent alignitemscenter flexFlowColumn wide30p overflowHidden wideMax100px')
$("#rm_print_characters_block .group_select .ch_name").toggleClass('wide100p wideMax100px')
$("#rm_print_characters_block .group_select .ch_name").parent().toggleClass('wide100pLess70px')
$(".character_select .ch_description").toggle()
$("#rm_print_characters_block .tags_inline").toggle()
select_rm_characters()
}
function doCharListDisplaySwitch() {
console.debug('toggling body charListGrid state')
$("body").toggleClass('charListGrid')
power_user.charListGrid = $("body").hasClass("charListGrid") ? true : false;
saveSettingsDebounced()
updateVisibleDivs('#rm_print_characters_block', true);
}
$(document).ready(function () {
@@ -8652,8 +8630,6 @@ $(document).ready(function () {
}
$("#charListGridToggle").on('click', async () => {
doCharListDisplaySwitch(true)
})
doCharListDisplaySwitch();
});
})

54
public/style.css
View File

@@ -1197,7 +1197,59 @@ input[type="file"] {
flex-grow: 1;
display: flex;
/* row-gap: 5px; */
justify-content: space-between;
}
body.charListGrid #rm_print_characters_block {
display: flex;
gap: 5px;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-around;
}
body.charListGrid #rm_print_characters_block .character_select {
width: 30%;
align-items: flex-start;
height: min-content;
flex-direction: column;
overflow: hidden;
max-width: 100px;
}
body.charListGrid #rm_print_characters_block .character_select .ch_name,
body.charListGrid #rm_print_characters_block .group_select .ch_name {
width: 100%;
max-width: 100px;
text-align: center;
font-size: calc(var(--mainFontSize) * .8);
}
body.charListGrid #rm_print_characters_block .character_select .character_name_block {
width: 100%;
}
body.charListGrid #rm_print_characters_block .character_select .character_select_container {
width: 100%;
justify-content: center;
max-width: 100px;
}
body.charListGrid #rm_print_characters_block .group_select {
width: 30%;
height: min-content;
align-items: center !important;
flex-direction: column;
overflow: hidden;
max-width: 100px;
}
body.charListGrid #rm_print_characters_block .group_select .group_name_block {
width: 100%;
}
body.charListGrid #rm_print_characters_block .ch_description,
body.charListGrid #rm_print_characters_block .tags_inline {
display: none;
}
#rm_ch_create_block {