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

right nav header changes

Browse Source 
changed the right nav header tabs from "character" and "settings" to emojis that represent each respectively. This was to allow the selected character's name to have a larger display footprint for mobile screens.
This commit is contained in:
RossAsscends
2023-03-01 20:03:12 +09:00
parent dac14985f4
commit 8e2ffa3a01
2 changed files with 58 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/index.html
View File

@@ -936,7 +936,7 @@
mesSendString = '\nThen the roleplay chat between '+name1+' and '+name2+' begins.\n'+mesSendString;
}else{
mesSendString = '<START>\n'+mesSendString;
//mesSendString = mesSendString;
//mesSendString = mesSendString; //This edit simply removes the first "<START>" that is prepended to all context prompts
}
finalPromt = storyString+mesExmString+mesSendString+generatedPromtCache;
@@ -1228,19 +1228,15 @@
is_send_press = true;
e.preventDefault();
Generate();
//$(this).closest("form").submit();
}
});
//RossAscends: Lets add some hotkeys
document.addEventListener('keydown', (event) => {
//console.log(event.key);
if(event.ctrlKey && event.key == "Enter") { // Ctrl+Enter for Regeneration Last Response
//console.log('both CTRL and Enter were pressed');
if(is_send_press == false){
is_send_press = true;
Generate('regenerate');
//console.log('confirmed keypress was caught '+ event.key);
}
}else if(event.ctrlKey && event.key == "ArrowUp") { //Ctrl+UpArrow for Connect to last server
document.getElementById('api_button').click();
@@ -1249,16 +1245,16 @@
});
//menu buttons
var selected_button_style = { color: "#bcc1c8" };
var deselected_button_style = { color: "#565d66" };
$( "#rm_button_create" ).children("h2").css(selected_button_style);
$( "#rm_button_characters" ).children("h2").css(selected_button_style);
var selected_button_style = { };
var deselected_button_style = { };
console.log('hi there');
$( "#rm_button_create" ).css("class","deselected-right-tab");
$( "#rm_button_characters" ).css("class","deselected-right-tab");
$( "#rm_button_settings" ).click(function() {
selected_button = 'settings';
menu_type = 'settings';
$( "#rm_characters_block" ).css("display", "none");
$( "#rm_api_block" ).css("display", "block");
$('#rm_api_block').css('opacity',0.0);
$('#rm_api_block').transition({
opacity: 1.0,
@@ -1269,10 +1265,9 @@
$( "#rm_ch_create_block" ).css("display", "none");
$( "#rm_info_block" ).css("display", "none");
$( "#rm_button_characters" ).children("h2").css(deselected_button_style);
$( "#rm_button_settings" ).children("h2").css(selected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
$( "#rm_button_characters" ).css("class","deselected-right-tab");
$( "#rm_button_settings" ).css("class","selected-right-tab");
$( "#rm_button_selected_ch" ).css("class","deselected-right-tab");
});
$( "#rm_button_characters" ).click(function() {
selected_button = 'characters';
@@ -1316,9 +1311,9 @@
$("#create_button").css("display", "block");
$("#create_button").attr("value", "Create");
$('#result_info').html('&nbsp;');
$( "#rm_button_characters" ).children("h2").css(deselected_button_style);
$( "#rm_button_settings" ).children("h2").css(deselected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
$( "#rm_button_characters" ).css("class","deselected-right-tab");
$( "#rm_button_settings" ).css("class","deselected-right-tab");
$( "#rm_button_selected_ch" ).css("class","deselected-right-tab");
//create text poles
$("#rm_button_back").css("display", "inline-block");
@@ -1356,9 +1351,9 @@
$( "#rm_ch_create_block" ).css("display", "none");
$( "#rm_info_block" ).css("display", "none");
$( "#rm_button_characters" ).children("h2").css(selected_button_style);
$( "#rm_button_settings" ).children("h2").css(deselected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
$( "#rm_button_characters" ).css("class","selected-right-tab");
$( "#rm_button_settings" ).css("class","deselected-right-tab");
$( "#rm_button_selected_ch" ).css("class","deselected-right-tab");
}
function select_rm_info(text){
$( "#rm_characters_block" ).css("display", "none");
@@ -1368,9 +1363,9 @@
$("#rm_info_text").html('<h3>'+text+'</h3>');
$( "#rm_button_characters" ).children("h2").css(deselected_button_style);
$( "#rm_button_settings" ).children("h2").css(deselected_button_style);
$( "#rm_button_selected_ch" ).children("h2").css(deselected_button_style);
$( "#rm_button_characters" ).css("class","deselected-right-tab");
$( "#rm_button_settings" ).css("class","deselected-right-tab");
$( "#rm_button_selected_ch" ).css("class","deselected-right-tab");
}
function select_selected_character(chid){ //character select
@@ -1378,7 +1373,7 @@
select_rm_create();
menu_type = 'character_edit';
$( "#delete_button_div" ).css("display", "block");
$( "#rm_button_selected_ch" ).children("h2").css(selected_button_style);
$( "#rm_button_selected_ch" ).css("class","selected-right-tab");
var display_name = characters[chid].name;
$( "#rm_button_selected_ch" ).children("h2").text(display_name);
@@ -2957,12 +2952,13 @@
<input type="checkbox" id="nav-toggle">
<nav id="right-nav-panel">
<div class="right_menu_button" id="rm_button_characters"><h2>Characters</h2></div>
<div class="right_menu_button" id="rm_button_settings"><h2>Settings</h2></div>
<div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"></div>
<div id="right-nav-panel-tabs">
<div class="right_menu_button" id="rm_button_characters">&#x1F464;</div>
<div class="right_menu_button" id="rm_button_settings">⚙️</div>
<div class="right_menu_button" id="rm_button_selected_ch"><h2></h2></div>
<div class="right_menu_button" id="rm_button_panel_pin_div"><input type="checkbox" id="rm_button_panel_pin"></div>
</div>
<div id="rm_ch_create_block" class="right_menu" style="display: none;">
<div id="rm_button_back" class="right_menu_button"><h2 style="color: rgb(188, 193, 200, 0.5);">&#8656;</h2></div>

63
public/style.css
View File

@@ -26,6 +26,8 @@ body {
font-size:15px; /*1rem*/
color: rgb(229, 224, 216);
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.mes_text i {
color: #999 !important;
@@ -513,27 +515,35 @@ input[type=button] {
border-radius: 3px;
background-color: rgba(0,0,0,0.3);
}
#right-nav-panel-tabs{
margin-top:10px;
margin-bottom:10px;
width: calc(100% - 25px);
}
.right_menu_button{
display:inline-block;
cursor:pointer;
vertical-align:middle;
text-align: center;
padding-left: 4px;
padding-right: 4px;
margin-top:0px;
padding-right: 20px;
font-size:1.5rem;
margin-top:0px;
filter: grayscale(1) brightness(75%);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.right_menu_button:active {
color:red;
box-shadow: 0 0 5px -1px rgba(0,0,0,0.05);
background-color: rgba(0,0,0,0.05);
.right_menu_button:hover {
filter: brightness(150%) grayscale(1);
}
#rm_button_panel_pin_div {
height: 1.65rem;
width: 24px;
margin-top: -10px;
margin-right: 30px;
height: 20px;
width: 20px;
margin-top: 0;
margin-right: 0;
float: right;
}
@@ -554,8 +564,9 @@ input[type=button] {
}
#rm_button_panel_pin::after {
content: '\01F513'; /*open lock emoji*/
filter:grayscale(1);
content: '\01F513';
position: absolute;
filter: grayscale(1);
line-height: 20px;
font-size: 15px;
padding: 0;
@@ -564,14 +575,12 @@ input[type=button] {
display: inline-block;
width: 20px;
height: 20px;
margin-top: 0;
margin-top: -25px;
margin-left: 0;
border-radius: 5px;
background: rgba(0, 0, 0, 0.3);
color: #666;
-webkit-transition: all 0.275s;
transition: all 0.275s;
}
#rm_button_panel_pin:checked::after {
@@ -1218,18 +1227,6 @@ width: 103px;
display: inline;
}
#send_form:hover #online_status_text {
color:red;
transition:0.3s
}
#send_form:hover #online_status_indicator {
border: 1px solid yellow;
opacity:0.5;
transition:0.3s
}
#online_status_text {
display: inline;
font-size: 0.75rem;
@@ -1523,7 +1520,7 @@ input[type="range"] {
outline: none;
box-shadow: 0 0 3px rgba(255,255,255,0.5);
background-color: rgba(0,0,0,0.3);
font-size: 1rem;
font-size: 15px;
line-height:1.25rem;
}
@@ -1885,11 +1882,15 @@ h1 {
h2 {
font-size: 1.5rem;
line-height: 1.75rem;
line-height: 1.5rem;
margin-top: 5px;
}
.right_menu_button h2 {color: rgb(86, 93, 102);}
.right_menu_button h2 {
margin-top: 0;
margin-bottom: 0;
font-size: 1.5rem;
}
a {
color: #orange;