From c38b793425e3cfc41ecc7912d9d30e7bdfb873ff Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Thu, 11 Aug 2022 15:33:10 -0400
Subject: [PATCH] Fix for mobile

---
 static/koboldai.css | 33 +++++++++++++++++++++++++++++++--
 static/koboldai.js  | 44 ++++++++++++++++++--------------------------
 2 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index 061de311..e4390027 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -263,6 +263,13 @@
 	cursor: pointer;
 }
 
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.menu_icon.hidden {
+	display: inline-block !important;
+}
+}
+
 @media only screen and (max-aspect-ratio: 7/5) {
 .menu_pin {
 	display: none;
@@ -468,6 +475,13 @@
 	grid-area: lefticon;
 }
 
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.right_menu_icon.hidden {
+	display: inline-block !important;
+}
+}
+
 .rightSideMenu {
 	height: 100%;
 	width: 0;
@@ -488,9 +502,12 @@
   width: var(--flyout_menu_width);
 }
 
+@media only screen and (min-aspect-ratio: 7/5) {
+/*  Desktop Mode  */
 .rightSideMenu.pinned {
   width: var(--flyout_menu_width);
 }
+}
 
 .rightSideMenu .flyout_menu_contents {
 	overflow-x: hidden;
@@ -498,6 +515,12 @@
 	height: calc(100vh - 150px);
 }
 
+@media only screen and (max-aspect-ratio: 7/5) {
+/* mobile */
+.story_menu_pin {
+	display: none;
+}
+}
 
 
 table.server_vars {
@@ -629,7 +652,7 @@ body {
 	grid-template-areas: "menuicon gamescreen lefticon"
 					     "menuicon options lefticon"
 						 "menuicon inputrow lefticon";
-	grid-template-columns: 30px auto 20px;
+	grid-template-columns: 30px auto 30px;
 	grid-template-rows: auto min-content 100px;
 }
 }
@@ -1117,4 +1140,10 @@ body.NotConnected {
 
 .cursor {
 	cursor: pointer;
-}
\ No newline at end of file
+}
+
+@font-face {
+  font-family: 'Material Symbols Outlined';
+  font-style: normal;
+  src: url(/material-symbols.woff) format('woff');
+}
diff --git a/static/koboldai.js b/static/koboldai.js
index 85a96c65..33bb055c 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -1958,36 +1958,28 @@ function close_menus() {
 }
 
 function toggle_flyout(x) {
-	if (document.getElementById("SideMenu").classList.contains("pinned")) {
-		//do nothing
+	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 {
-		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");
-		}
-}
+		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("pinned")) {
-		//do nothing
+	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 {
-		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");
-		}
+		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");
 	}
 }
 
@@ -2045,7 +2037,7 @@ function setCookie(cname, cvalue, exdays=60) {
   const d = new Date();
   d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
   let expires = "expires="+d.toUTCString();
-  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/;samesite=none;domain=koboldai.org";
 }
 
 function getCookie(cname) {