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

Merge pull request #2050 from Dakraid/feature/new-avatar-tag-layout 

Update layout for avatar tags and controls
This commit is contained in:
Cohee 2024-04-10 20:27:31 +03:00 committed by GitHub
parent 91e93958b8 9b97294799
commit b5d7d0a73f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 96 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/css/mobile-styles.css
View File

@ -208,6 +208,7 @@
#cfgConfig,
#logprobsViewer,
#movingDivs > div {
/* 100vh are fallback units for browsers that don't support svh */
height: calc(100vh - 45px);
height: calc(100svh - 45px);
min-width: 100% !important;
@ -223,6 +224,10 @@
backdrop-filter: blur(calc(var(--SmartThemeBlurStrength) * 2));
}
#right-nav-panel {
padding-right: 15px;
}
#floatingPrompt,
#cfgConfig,
#logprobsViewer,

2
public/css/tags.css
View File

@ -99,7 +99,7 @@
#bulkTagsList,
#tagList.tags {
margin: 2px 0;
margin: 5px 0;
}
#bulkTagsList,

14
public/index.html
View File

@ -4154,7 +4154,7 @@
<div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
</div>
<div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto wide100p">
<div class="hotswap avatars_inline flex-container"></div>
<div class="hotswap avatars_inline flex-container expander"></div>
</div>
</div>
<hr>
@ -4191,14 +4191,13 @@
Tokens: <span data-token-counter="character_name_pole" data-token-permanent="true">counting...</span>
</div>
</div>
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap flexGap5">
<div class="flex-container flexFlowColumn expander flexNoGap">
<div id="avatar_div" class="avatar_div alignitemsflexstart justifySpaceBetween flexnowrap">
<label id="avatar_div_div" class="add_avatar avatar" for="add_avatar_button" title="Click to select a new avatar for this character" data-i18n="[title]Click to select a new avatar for this character">
<img id="avatar_load_preview" src="img/ai4.png" alt="avatar">
<input hidden type="file" id="add_avatar_button" name="avatar" accept="image/*">
</label>
<div class="flex-container flexFlowColumn">
<div class="flex-container flexFlowColumn">
<div class="flex-container justifyContentFlexEnd flexFlowColumn">
<div class="flex-container" id="avatar_controls">
<div class="form_create_bottom_buttons_block">
<div id="rm_button_back" class="menu_button fa-solid fa-left-long "></div>
<!-- <div id="renameCharButton" class="menu_button fa-solid fa-user-pen" title="Rename Character"></div> -->
@ -4216,7 +4215,7 @@
</label>
<div id="delete_button" class="menu_button fa-solid fa-skull " title="Delete Character" data-i18n="[title]Delete Character"></div>
</div>
<label class="flex1" for="char-management-dropdown">
<label class="flex1 height100p" for="char-management-dropdown">
<select id="char-management-dropdown">
<option value="default" disabled selected data-i18n="More...">More...</option>
<option id="set_character_world" data-i18n="Link to World Info">
@ -4252,6 +4251,7 @@
</select>
</label>
</div>
</div>
<div id="tags_div">
<div class="tag_controls">
<input id="tagInput" class="text_pole textarea_compact tag_input wide100p margin0" data-i18n="[placeholder]Search / Create Tags" placeholder="Search / Create tags" maxlength="50" />
@ -4261,8 +4261,6 @@
</div>
</div>
</div>
</div>
</div>
<hr>
<div id="spoiler_free_desc" class="flex-container flexFlowColumn flex1 flexNoGap">
<div id="creators_notes_div" class="title_restorable">

34
public/style.css
View File

@ -985,9 +985,7 @@ body.reduced-motion #bg_custom {
}
.avatars_inline .avatar {
margin-top: calc(var(--avatar-base-border-radius));
margin-left: calc(var(--avatar-base-border-radius));
margin-bottom: calc(var(--avatar-base-border-radius));
margin: calc(var(--avatar-base-border-radius));
}
.avatars_inline .avatar:last-of-type {
@ -1100,8 +1098,8 @@ select {
@media screen and (min-width: 1001px) {
#description_textarea {
height: 30vh;
height: 30svh;
height: 29vh;
height: 29svh;
}
#firstmessage_textarea {
@ -1188,7 +1186,7 @@ input[type="file"] {
#right-nav-panel-tabs {
display: flex;
align-items: center;
gap: 10px;
gap: 5px;
overflow: hidden;
width: 100%;
}
@ -1198,7 +1196,7 @@ input[type="file"] {
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 0 5px;
padding: 0px 10px 0px 5px;
}
#right-nav-panel-tabs .right_menu_button,
@ -1652,6 +1650,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
.missing-avatar.inline_avatar {
padding: unset;
border-radius: var(--avatar-base-border-radius-round);
width: fit-content;
}
/*applies to char list and mes_text char display name*/
@ -2000,6 +1999,19 @@ grammarly-extension {
justify-content: center;
align-items: center;
align-self: center !important;
width: 100%;
height: 100%;
/* Avoids cutting off the box shadow on the avatar*/
margin: 10px;
}
#avatar_controls {
height: 100%;
width: 100%;
flex-grow: 1;
justify-content: flex-end;
flex-flow: column;
padding: 5px 5px 10px 0;
}
#description_div,
@ -2210,11 +2222,11 @@ grammarly-extension {
font-weight: bold;
padding: 5px;
margin: 0;
height: 26px;
filter: grayscale(0.5);
text-align: center;
font-size: 17px;
aspect-ratio: 1 / 1;
flex: 0.075;
}
.menu_button:hover,
@ -2633,7 +2645,11 @@ input[type="range"]::-webkit-slider-thumb {
color: var(--SmartThemeBodyColor);
}
#char-management-dropdown,
#char-management-dropdown {
height: 100%;
margin-bottom: 0;
}
#tagInput {
height: 26px;
margin-bottom: 0;