Pinning enabled for both menus as well as better text flow

2025-06-05 21:59:24 +02:00 · 2022-08-09 18:05:30 -04:00
parent dd165a3281
commit cd382dc1b8
5 changed files with 140 additions and 98 deletions
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -316,6 +316,12 @@
  width: var(--flyout_menu_width);
 }

+.SideMenu .flyout_menu_contents {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: calc(100vh - 40px);
+}
+
 .settings_menu {
 	padding-left: 30px;
 	padding-top: 7px;
@@ -477,6 +483,14 @@
  width: var(--flyout_menu_width);
 }

+.rightSideMenu .flyout_menu_contents {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: calc(100vh - 150px);
+}
+
+
+
 table.server_vars {
 	border: 1px solid #959595;
 }
@@ -566,37 +580,53 @@ body {
 }

@media only screen and (min-aspect-ratio: 7/5) {
+/* ------------------- Desktop Mode --------------------------- */
 .main-grid {
 	transition: margin-left .5s;
 	display: grid;
 	height: 98vh;
-	margin-left: var(--flyout_menu_closed_width);
+	margin-left: var(--flyout_menu_width);
+	margin-right: var(--flyout_menu_closed_width);
 	grid-template-areas: "menuicon gamescreen options lefticon"
 						 "menuicon inputrow inputrow lefticon";
-	grid-template-columns: 30px auto fit-content(30%) 20px;
+	grid-template-columns: 30px auto 30% 30px;
 	grid-template-rows: auto 100px;
 }
+.main-grid.settings_pinned {
+	margin-left: var(--flyout_menu_width);
+}
+.main-grid.story_pinned {
+	margin-left: var(--flyout_menu_closed_width);
+	margin-right: var(--flyout_menu_width);
+	grid-template-areas: "menuicon options gamescreen lefticon"
+						 "menuicon inputrow inputrow lefticon";
+	grid-template-columns: 30px 30% auto 30px;
+}
+.main-grid.settings_pinned.story_pinned {
+	margin-left: var(--flyout_menu_width);
+	margin-right: var(--flyout_menu_width);
+	grid-template-areas: "menuicon gamescreen options lefticon"
+						 "menuicon inputrow inputrow lefticon";
+	grid-template-columns: 30px auto 30% 30px;
+}
 }

@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
 .main-grid {
 	transition: margin-left .5s;
 	display: grid;
 	height: 98vh;
 	margin-left: var(--flyout_menu_closed_width);
 	grid-template-areas: "menuicon gamescreen lefticon"
-					     "menuicon mobile_options lefticon"
+					     "menuicon options lefticon"
 						 "menuicon inputrow lefticon";
 	grid-template-columns: 30px auto 20px;
 	grid-template-rows: auto min-content 100px;
 }
 }

-@media only screen and (min-aspect-ratio: 7/5) {
-.main-grid.pinned {
-	margin-left: var(--flyout_menu_width);
-}
-}
+

 /* ---------------------------------- GAME SCREEN ----------------------------------*/
 .gamescreen {
@@ -638,23 +668,12 @@ body {
 	font-style: italic;
 }

-@media only screen and (min-aspect-ratio: 7/5) {
 .sequence_area {
 	margin-top: 10px;
 	grid-area: options;
 	background-color: var(--gamescreen_background);
 	overflow-y: scroll;
 }
-}
-
-@media only screen and (max-aspect-ratio: 7/5) {
-.sequence_area {
-	margin-top: 5px;
-	grid-area: mobile_options;
-	background-color: var(--gamescreen_background);
-	overflow-y: hidden;
-}
-}

@media only screen and (max-aspect-ratio: 7/5) {
 .sequences {
@@ -1087,10 +1106,4 @@ body.NotConnected {

 .cursor {
 	cursor: pointer;
-}
-
-.flout_menu_contents {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: 80vh;
 }
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1879,41 +1879,62 @@ String.prototype.toHHMMSS = function () {
 }

 function toggle_flyout(x) {
-	if (document.getElementById("SideMenu").classList.contains("open")) {
-		x.classList.remove("change");
-		document.getElementById("SideMenu").classList.remove("open");
-		document.getElementById("main-grid").classList.remove("menu-open");
-		//if pinned
-		if (document.getElementById("SideMenu").classList.contains("pinned")) {
-			document.getElementById("menu_pin").classList.remove("hidden");
-		} else {
-			document.getElementById("menu_pin").classList.add("hidden");
-		}
+	if (document.getElementById("SideMenu").classList.contains("pinned")) {
+		//do nothing
 	} else {
-		x.classList.add("change");
-		document.getElementById("SideMenu").classList.add("open");
-		document.getElementById("main-grid").classList.add("menu-open");
-		document.getElementById("menu_pin").classList.remove("hidden");
-	}
+		if (document.getElementById("SideMenu").classList.contains("open")) {
+			x.classList.remove("change");
+			document.getElementById("SideMenu").classList.remove("open");
+			document.getElementById("main-grid").classList.remove("menu-open");
+		} else {
+			x.classList.add("change");
+			document.getElementById("SideMenu").classList.add("open");
+			document.getElementById("main-grid").classList.add("menu-open");
+			document.getElementById("menu_pin").classList.remove("hidden");
+		}
+}
 }

 function toggle_flyout_right(x) {
-	if (document.getElementById("rightSideMenu").classList.contains("open")) {
-		document.getElementById("rightSideMenu").classList.remove("open");
-		x.setAttribute("data-glyph", "chevron-left");
+	if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
+		//do nothing
 	} else {
-		document.getElementById("rightSideMenu").classList.add("open");
-		x.setAttribute("data-glyph", "chevron-right");
+		if (document.getElementById("rightSideMenu").classList.contains("open")) {
+			x.classList.remove("change");
+			document.getElementById("rightSideMenu").classList.remove("open");
+			document.getElementById("main-grid").classList.remove("story_menu-open");
+		} else {
+			x.classList.add("change");
+			document.getElementById("rightSideMenu").classList.add("open");
+			document.getElementById("main-grid").classList.add("story_menu-open");
+			document.getElementById("story_menu_pin").classList.remove("hidden");
+		}
 	}
 }

-function toggle_pin_flyout() {
+function toggle_settings_pin_flyout() {
 	if (document.getElementById("SideMenu").classList.contains("pinned")) {
 		document.getElementById("SideMenu").classList.remove("pinned");
-		document.getElementById("main-grid").classList.remove("pinned");
+		document.getElementById("main-grid").classList.remove("settings_pinned");
+		document.getElementById("setting_menu_icon").classList.remove("hidden");
 	} else {
+		document.getElementById("setting_menu_icon").classList.remove("change");
+		document.getElementById("setting_menu_icon").classList.add("hidden");
 		document.getElementById("SideMenu").classList.add("pinned");
-		document.getElementById("main-grid").classList.add("pinned");
+		document.getElementById("main-grid").classList.add("settings_pinned");
+	}
+}
+
+function toggle_story_pin_flyout() {
+	if (document.getElementById("rightSideMenu").classList.contains("pinned")) {
+		document.getElementById("rightSideMenu").classList.remove("pinned");
+		document.getElementById("main-grid").classList.remove("story_pinned");
+		document.getElementById("story_menu_icon").classList.remove("hidden");
+	} else {
+		document.getElementById("rightSideMenu").classList.add("pinned");
+		document.getElementById("main-grid").classList.add("story_pinned");
+		document.getElementById("story_menu_icon").classList.remove("change");
+		document.getElementById("story_menu_icon").classList.add("hidden");
 	}
 }

--- a/templates/index_new.html
+++ b/templates/index_new.html
@@ -20,14 +20,14 @@
 	<!------------ Left Flyout Menu--------------------->
 	<div id="SideMenu" class="SideMenu pinned">
 		<!------------ Menu Pin --------------------->
-		<span id="menu_pin" class="oi menu_pin" onclick="toggle_pin_flyout()" data-glyph="pin"></span>
+		<span id="menu_pin" class="oi menu_pin" onclick="toggle_settings_pin_flyout()" data-glyph="pin"></span>
 		{% include 'settings flyout.html' %}
 	</div>

 	<!------------ Main Screen--------------------->
-	<div id="main-grid" class="main-grid pinned">
+	<div id="main-grid" class="main-grid settings_pinned">
 		<!------------ Left Menu Icon--------------------->
-		<div class="menu_icon" onclick="toggle_flyout(this)"> 
+		<div id="setting_menu_icon" class="menu_icon hidden changed" onclick="toggle_flyout(this)"> 
 			<div class="menubar1"></div>
 			<div class="menubar2"></div>
 			<div class="menubar3"></div>
@@ -57,11 +57,17 @@
 			<button type="button" class="btn action_button retry" onclick="socket.emit('retry', {});"><span class="oi" data-glyph="loop-circular"></span></button>
 		</div>
 		<!------------ Right Menu Icon--------------------->
-		<span class="oi right_menu_icon" data-glyph="chevron-left" onclick="toggle_flyout_right(this)"></span>
+		<div id="story_menu_icon" class="right_menu_icon" onclick="toggle_flyout_right(this)"> 
+			<div class="menubar1"></div>
+			<div class="menubar2"></div>
+			<div class="menubar3"></div>
+		</div>
+		<!----<span class="oi right_menu_icon" data-glyph="chevron-left" onclick="toggle_flyout_right(this)"></span>--->
 	</div>
 	
 	<!------------ Right Flyout Menu--------------------->
 	<div id="rightSideMenu" class="rightSideMenu">
+		<span id="story_menu_pin" class="oi story_menu_pin" onclick="toggle_story_pin_flyout()" data-glyph="pin"></span>
 		{% include 'story flyout.html' %}
 	</div>
 	
--- a/templates/settings
+++ b/templates/settings
@@ -32,56 +32,58 @@
 	<span class="setting_menu_button" onclick="show_setting_menu(this);">User</span>
 	<span style="float: right;margin-right: 30px;" onclick="window.open('https://github.com/KoboldAI/KoboldAI-Client/wiki');">Help</span>
 </div>
+<div class="flyout_menu_contents">

-<div id="setting_menu_model" class="settings_category_area">
-	<div id="Model_Info">
-		<div>
-			Running Model: <span class="var_sync_model_model">ReadOnly</span>
-			<select id=presets class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
+	<div id="setting_menu_model" class="settings_category_area">
+		<div id="Model_Info">
+			<div>
+				Running Model: <span class="var_sync_model_model">ReadOnly</span>
+				<select id=presets class="var_sync_model_selected_preset settings_select presets" onchange='sync_to_server(this)'><option>Preset</option></select>
+			</div>
+			<div><button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button></div>
 		</div>
-		<div><button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button></div>
-	</div>
-	<div class="setting_tile_area">
-	{% with menu='Model' %}
-		{% include 'settings item.html' %}
-	{% endwith %}
-	</div>
-</div>
-<div id="setting_menu_story" class="hidden settings_category_area">
-	<div id="Story_Info">
-		<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
-		<div>
-			<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
-			<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
-			<!---<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>--->
-			<a class='cursor' onclick="document.getElementById('download_iframe').src = 'json';">Download Story</a>
+		<div class="setting_tile_area">
+		{% with menu='Model' %}
+			{% include 'settings item.html' %}
+		{% endwith %}
 		</div>
 	</div>
-	<div class="setting_tile_area">
-	{% with menu='Story' %}
-		{% include 'settings item.html' %}
-	{% endwith %}
-	</div>
-	<h4>
-		<span id="bias_open" class="oi" data-glyph="chevron-bottom" onclick='this.classList.add("hidden"); 
-																			 document.getElementById("bias_close").classList.remove("hidden"); 
-																			 document.getElementById("biasing").classList.add("hidden");'> Biasing:</span>
-		<span id="bias_close" class="oi hidden" data-glyph="chevron-right" onclick='this.classList.add("hidden"); 
-																			 document.getElementById("bias_open").classList.remove("hidden"); 
-																			 document.getElementById("biasing").classList.remove("hidden");'> Biasing:</span>
-	</h4>
-	<div id="biasing">
-		<div class="bias_header">
-			<div class="bias_header_phrase">Phrase</div>
-			<div class="bias_header_score">Score</div>
-			<div class="bias_header_comp_threshold">Completion Threshold</div>
+	<div id="setting_menu_story" class="hidden settings_category_area">
+		<div id="Story_Info">
+			<div><b>Story Name: </b><span class="var_sync_story_story_name" contenteditable=true onblur="sync_to_server(this);"></span></div>
+			<div>
+				<button id="load_story" class="btn action_button" onclick="socket.emit('load_story_list', '');">Load Story</button>
+				<button id="save_story" class="btn action_button var_sync_alt_story_gamesaved" onclick='socket.emit("save_story", null, (response) => {save_as_story(response);});'>Save Story</button>
+				<!---<button id="download_story" class="btn action_button" onclick="document.getElementById('download_iframe').src = 'json';">Download Story</button>--->
+				<a class='cursor' onclick="document.getElementById('download_iframe').src = 'json';">Download Story</a>
+			</div>
+		</div>
+		<div class="setting_tile_area">
+		{% with menu='Story' %}
+			{% include 'settings item.html' %}
+		{% endwith %}
+		</div>
+		<h4>
+			<span id="bias_open" class="oi" data-glyph="chevron-bottom" onclick='this.classList.add("hidden"); 
+																				 document.getElementById("bias_close").classList.remove("hidden"); 
+																				 document.getElementById("biasing").classList.add("hidden");'> Biasing:</span>
+			<span id="bias_close" class="oi hidden" data-glyph="chevron-right" onclick='this.classList.add("hidden"); 
+																				 document.getElementById("bias_open").classList.remove("hidden"); 
+																				 document.getElementById("biasing").classList.remove("hidden");'> Biasing:</span>
+		</h4>
+		<div id="biasing">
+			<div class="bias_header">
+				<div class="bias_header_phrase">Phrase</div>
+				<div class="bias_header_score">Score</div>
+				<div class="bias_header_comp_threshold">Completion Threshold</div>
+			</div>
 		</div>
 	</div>
-</div>
-<div id="setting_menu_user" class="hidden settings_category_area">
-	<div class="setting_tile_area">
-	{% with menu='User' %}
-		{% include 'settings item.html' %}
-	{% endwith %}
+	<div id="setting_menu_user" class="hidden settings_category_area">
+		<div class="setting_tile_area">
+		{% with menu='User' %}
+			{% include 'settings item.html' %}
+		{% endwith %}
+		</div>
 	</div>
 </div>
--- a/templates/story
+++ b/templates/story
@@ -26,7 +26,7 @@
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_notes');">Notes</span>
 	<span class="story_menu_button" onclick="show_story_menu(this, 'story_menu_wi');">World Info</span>
 </div>
-<div class="flout_menu_contents">
+<div class="flyout_menu_contents">
 	<div id="story_menu_memory" class="story_category_area">
 		<div id="Memory">
 			Memory:<br/>