From b791b3ea3a237c1461f5f770776ab4bf23808c52 Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Fri, 26 Jan 2024 14:46:44 -0500
Subject: [PATCH] Update for mobile browsers to better format settings, popup
 windows, etc

---
 static/koboldai.css   | 112 ++++++++++++++++++++++++++++++++++++++++--
 templates/popups.html |   4 +-
 2 files changed, 110 insertions(+), 6 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index 6cd58c07..c4133fc2 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -1,3 +1,14 @@
+/*
+Mobile Detection:
+@media only screen and (max-aspect-ratio: 5/6) {
+	
+Low Res Detection:
+@media only screen and (max-width: 1023px) {
+
+
+*/
+
+
 /*----------------Global Colors------------------*/
 @media only screen and (max-aspect-ratio: 5/6) {
 	:root {
@@ -175,7 +186,6 @@ border-top-right-radius: var(--tabs_rounding);
 	scrollbar-color: var(--scrollbar-color);
 }
 
-
 .setting_tile_area {
 	padding-left: 10px;
 	padding-right: 10px;
@@ -185,6 +195,19 @@ border-top-right-radius: var(--tabs_rounding);
 	animation: 1s 1 normal grow-backY;
 }
 
+
+@media only screen and (max-width: 1023px) {
+	.setting_tile_area {
+		padding-left: 10px;
+		padding-right: 10px;
+		display: flex;
+		flex-direction: column;
+		flex-wrap: wrap;
+		animation: 1s 1 normal grow-backY;
+	}
+}
+
+
 #Images {
 	padding-left: 10px;
 	padding-right: 10px;
@@ -206,7 +229,6 @@ border-top-right-radius: var(--tabs_rounding);
 	justify-content: space-between;
 }
 
-
 .setting_container {
 	display: grid;
 	grid-template-areas: "label value"
@@ -223,6 +245,24 @@ border-top-right-radius: var(--tabs_rounding);
 	width: calc(50% - 4px);
 }
 
+@media only screen and (max-width: 1023px) {
+	.setting_container {
+		display: grid;
+		grid-template-areas: "label value"
+							 "item item"
+							 "minlabel maxlabel";
+		grid-template-rows: 20px 23px 20px;
+		grid-template-columns: 147px 30px;
+		row-gap: 0.2em;
+		background-color: var(--setting_background);
+		color: var(--setting_text);
+		border-radius: var(--radius_settings_background);
+		padding: 2px;
+		margin: 2px;
+		width: 185px;
+	}
+}
+
 /*Couldn't find a way to give this settings a specific class, so bruteforce it is. Well, until someone smarter than me can fix this. -GuiAworld*/
 #img_gen_art_guide_card {
     grid-template-areas:
@@ -500,6 +540,23 @@ border-top-right-radius: var(--tabs_rounding);
 	cursor: pointer;
 }
 
+@media only screen and (max-aspect-ratio: 5/6) {
+	.search_icon {
+		position: absolute;
+		top:8px;
+		color: var(--text);
+		left: calc(var(--flyout_menu_width) - 25px);
+		z-index:21;
+		width: 25px;
+		height: 25px;
+		display: inline-block;
+		transition: left 0.5s;
+		cursor: pointer;
+	}
+}
+
+
+
 .SideMenu {
 	height: 100%;
 	z-index: 20;
@@ -2080,10 +2137,11 @@ body {
 .popup .popup_list_area {
 	overflow-x: hidden;
 	overflow-y: scroll;
-	flex-grow: 1;
+	/*flex-grow: 1;*/
 	flex-shrink: 1;
 	flex-basis: auto;
 	color: var(--popup_item_color_text);
+	min-height: 50%;
 	
 }
 
@@ -2241,7 +2299,6 @@ body {
 
 .loadmodelsettings {
 	overflow-y: auto;
-	max-height: 50%;
 }
 
 
@@ -3872,3 +3929,50 @@ select {
 	text-decoration: underline dotted red;
 }
 
+@media only screen and (max-width: 1023px) {
+	.story_popup_footer {
+		flex-direction: column
+	}
+}
+
+
+#load-model {
+	display: grid;
+	grid-template-areas: "header"
+						 "table_header"
+						 "breadcrumbs"
+						 "model_list"
+						 "plugin"
+						 "model_settings"
+						 "ok";
+	grid-template-rows: 26px 38px max-content 1fr max-content auto 34px;
+	overflow-x: scroll;
+}
+
+#load-model .title {
+	grid-area: header;
+}
+
+#load-model #modelspecifier {
+	grid-area: table_header;
+}
+
+#load-model #loadmodellistbreadcrumbs {
+	grid-area: breadcrumbs;
+}
+
+#load-model #loadmodellistcontent {
+	grid-area: model_list;
+}
+
+#load-model #loadmodelplugin {
+	grid-area: plugin;
+}
+
+#load-model #loadmodelsettings {
+	grid-area: model_settings;
+}
+
+#load-model .popup_load_cancel {
+	grid-area: ok;
+}
diff --git a/templates/popups.html b/templates/popups.html
index c0656a22..337e4207 100644
--- a/templates/popups.html
+++ b/templates/popups.html
@@ -10,7 +10,7 @@
 		<div class="popup_load_cancel hidden" id="popup_upload">
 			<input type=file id="popup_upload_file">
 		</div>
-		<div style="display:flex;justify-content: space-between;">
+		<div class="story_popup_footer" style="display:flex;justify-content: space-between;">
 			<span>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></span>
 			<!---<span>
 				Upload file without saving to google: 
@@ -36,7 +36,7 @@
 	</div>
 
 	<!---------------- Model Load Screen ---------------------->
-	<div id="load-model" class="popup-window popup">
+	<div id="load-model" class="popup-window popup loadmodel">
 		<div class="title">
 			Select A Model To Load
 		</div>