From db19ccb0f00b9db89cd8f8b899d98acff55127e6 Mon Sep 17 00:00:00 2001
From: RossAsscends <124905043+RossAscends@users.noreply.github.com>
Date: Wed, 1 Mar 2023 05:38:02 +0900
Subject: [PATCH] added panel lock to rightnav

Added a lock/unlock toggle to the right nav which will function to pin the panel in place (disengages auto-close) if the user desires it.
---
 public/index.html |  6 +++--
 public/style.css  | 67 ++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 64 insertions(+), 9 deletions(-)

diff --git a/public/index.html b/public/index.html
index fb8ec9072..df2109bcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1905,9 +1905,10 @@
 		// RossAscends: Added functionality that will close the RightNav panels when User clicks outside them			
 			
 			var NavToggle = document.getElementById("nav-toggle");
+			var PanelPin = document.getElementById("rm_button_panel_pin");
 			$('document').ready(function(){
 				$("html").click(function(e){
-				if (NavToggle.checked === true){
+				if (NavToggle.checked === true && PanelPin.checked === false) {
 					if ($(e.target).attr('id') !== "nav-toggle") {
 						if (document.querySelector('#right-nav-panel').contains(e.target) === false){
 							document.getElementById('nav-toggle').click();
@@ -2962,8 +2963,9 @@
         <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="rm_ch_create_block" class="right_menu">
+        <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>
             
             <form id="form_create"  action="javascript:void(null);" method="post" enctype="multipart/form-data">
diff --git a/public/style.css b/public/style.css
index 0b5ebf97f..2adc85c8b 100644
--- a/public/style.css
+++ b/public/style.css
@@ -520,10 +520,67 @@ input[type=button] {
     text-align: center;
     padding-left: 4px;
     padding-right: 4px;
-    margin-top:0px;
-    
+    margin-top:0px;   
+}
+
+.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);
+}
+
+#rm_button_panel_pin_div {
+    height: 1.65rem;
+    width: 24px;
+    margin-top: -10px;
+    margin-right: 30px;
+    float: right;
+}
+
+#rm_button_panel_pin {	
+    /*position: absolute;
+    right: 13px;
+    top: 12px;*/
+    padding: 0px;
+    margin: 0px;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    z-index: 3001;
+}
+	
+#rm_button_panel_pin:hover::after {										
+    color: #f4f4f4;
+}
+
+#rm_button_panel_pin::after {
+	content: '\01F513'; /*open lock emoji*/
+	filter:grayscale(1);
+    line-height: 20px;
+    font-size: 15px;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-top: 0;
+    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 {
+    content: '\01F512'; /*closed lock emoji*/
+    line-height: 20px;
+    font-size: 15px;
+}
+
+
 #character_import_button{
     cursor: pointer;
     display: inline-block;
@@ -587,11 +644,7 @@ input[type=button] {
 }
 }
 
-.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);
-}
+
 
 #rm_ch_create_block{
     display: none;