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

improved user-Settings adaptable display

Browse Source
This commit is contained in:
RossAscends
2023-04-15 16:00:37 +09:00
parent dc35b0ba6e
commit fdce599762
2 changed files with 64 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
public/index.html
View File

@@ -1092,53 +1092,8 @@
</div> </div>
<div id="user-settings-block" class="drawer-content closedDrawer"> <div id="user-settings-block" class="drawer-content closedDrawer">
<h3>User Settings</h3> <h3>User Settings</h3>
<div class="flex-container"> <div class="flex-container spaceEvenly">
<div name="NameAndAvatar" class="flex-container wide100p"> <div name="UI Customization" class="flex-container drawer25pWidth">
<div name="NameChanger">
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Name</h4>
<input id="your_name" name="your_name" class="text_pole widthNatural" maxlength="" value="" autocomplete="off">
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Update">
</form>
</div>
<div name="AvatarSelector">
<h4>Your Avatar</h4>
<div id="user_avatar_block">
<div class="avatar_upload">+</div>
</div>
<form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
</form>
</div>
</div>
<div id="power-user-options-block" class="flex-container">
<div id="power-user-option-checkboxes">
<h4>Power User Options</h4>
<label for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
Swipes
</label>
<label for="play_message_sound" class="checkbox_label">
<input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span>
New Message Sound
<a href="/notes/message_sound" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
<label for="play_sound_unfocused" class="checkbox_label">
<input id="play_sound_unfocused" type="checkbox" />
Background Sound Only
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
Auto-load Last Chat
</label>
</div>
</div>
<div name="UI Customization" class="flex-container">
<div class="ui-settings"> <div class="ui-settings">
<h4>UI Customization</h4> <h4>UI Customization</h4>
<div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn"> <div id="font-blur-UIpresets-block" class="flex-container flexFlowColumn">
@@ -1212,8 +1167,7 @@
</div> </div>
</div> </div>
<div id="UI-Theme-Block" class="flex-container flexFlowColumn drawer25pWidth">
<div id="UI-Theme-Block" class="flex-container flexFlowColumn">
<div id="color-picker-block" class="flex-container flexFlowColumn"> <div id="color-picker-block" class="flex-container flexFlowColumn">
<h4>UI Colors</h4> <h4>UI Colors</h4>
<div class="flex-container"> <div class="flex-container">
@@ -1247,6 +1201,52 @@
</div> </div>
</div> </div>
<div id="power-user-options-block" class="flex-container drawer25pWidth">
<div id="power-user-option-checkboxes">
<h4>Power User Options</h4>
<label for="swipes-checkbox">
<input id="swipes-checkbox" type="checkbox" />
Swipes
</label>
<label for="play_message_sound" class="checkbox_label">
<input id="play_message_sound" type="checkbox" />
<audio id="audio_message_sound" src="sounds/message.mp3" hidden></audio>
<span>
New Message Sound
<a href="/notes/message_sound" class="notes-link" target="_blank">
<span class="note-link-span">?</span>
</a>
</span>
</label>
<label for="play_sound_unfocused" class="checkbox_label">
<input id="play_sound_unfocused" type="checkbox" />
Background Sound Only
</label>
<label for="auto-load-chat-checkbox"><input id="auto-load-chat-checkbox" type="checkbox" />
Auto-load Last Chat
</label>
</div>
</div>
<div name="NameAndAvatar" class="flex-container flexFlowColumn drawer25pWidth">
<div name="NameChanger">
<form id='form_change_name' action="javascript:void(null);" method="post" enctype="multipart/form-data">
<h4>Name</h4>
<input id="your_name" name="your_name" class="text_pole" maxlength="" value="" autocomplete="off">
<input id="your_name_button" class="menu_button" type="submit" title="Click to set a new User Name (reloads page)" value="Update">
</form>
</div>
<div name="AvatarSelector">
<h4>Your Avatar</h4>
<div id="user_avatar_block">
<div class="avatar_upload">+</div>
</div>
<form id="form_upload_avatar" action="javascript:void(null);" method="post" enctype="multipart/form-data">
<input type="file" id="avatar_upload_file" accept="image/*" name="avatar">
</form>
</div>
</div>

22
public/style.css
View File

@@ -1778,13 +1778,6 @@ input[type="range"]::-webkit-slider-thumb {
/*Notes '?' links*/ /*Notes '?' links*/
.notes-link {
margin-left: 3px;
position: absolute;
}
.note-link-span { .note-link-span {
color: var(--sienna); color: var(--sienna);
border: 1px solid var(--sienna); border: 1px solid var(--sienna);
@@ -2924,6 +2917,11 @@ label[for="extensions_autoconnect"] {
display: none; display: none;
} }
/*utility class intended to force drawer flex items to be 25% width of drawer*/
.drawer25pWidth {
flex-basis: calc((var(--sheldWidth) / 4) - 16px);
}
.drawer-content { .drawer-content {
@@ -3323,10 +3321,20 @@ toolcool-color-picker {
min-width: 33%; min-width: 33%;
} }
.drawer25pWidth {
flex-basis: max(calc(100% / 4 - 10px), 200px);
}
/*for debug purposes*/ /*for debug purposes*/
/* div {border: 1px solid purple;} */ /* div {border: 1px solid purple;} */
} }
@media (max-width: 450px) {
.drawer25pWidth {
flex-basis: max(calc(100% / 2 - 10px), 200px);
}
}
/*bubble chat style*/ /*bubble chat style*/