Mobile design enhancements

- Hide content on status bar - Hide search bar - Disable webui width resizing - Set min-width: 600px for main container - Set min-width: 160px for category list
Novik · Apr 28, 2023 · 4206060 · 4206060
1 parent 2c3fd59
commit 4206060
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 14 deletions.
diff --git a/css/style.css b/css/style.css
@@ -83,10 +83,10 @@ input.Button[disabled] { opacity: 0.3; cursor: default }
 
 select {margin-top: 5px}
 a {font-size: 11px;  color: #686868}
-table#maincont {margin: 5px 0 0 0}
+table#maincont {margin: 5px 0 0 0; min-width: 600px;}
 table#maincont td.uicell {vertical-align: top; padding: 0 }
 
-div#CatList {width: 0px; border: 1px solid #A0A0A0; background-color: #FFFFFF; overflow-y: auto; overflow-x: hidden}
+
 div#CatList ul { margin: 0; padding: 0; list-style: none; white-space: nowrap}
 div#CatList ul li { display: flex; padding: 3px; flex-flow: row nowrap; align-items: center; height: 16px; font-size: 11px;  cursor: pointer; border: 0px solid #FFFFFF; overflow: hidden;}
 div#CatList ul li.sel {background-color: #CFDEEF; border-color: #CFDEEF }
@@ -127,7 +127,6 @@ div#CatList .label-prefix div { margin-right: 0px; width: 12px; }
 .Status_RSS {background-position: 0px -208px}
 
 div#HDivider, div#VDivider { font-size: 0; }
-div#HDivider { width: 5px; height: 0px; padding: 0; margin: 0; cursor: e-resize; }
 div#VDivider { width: 100%; height: 5px; padding: 0; margin: 0; cursor: n-resize; }
 div#dividerDrag { width: 5px; height: 5px; padding: 0; margin: 0; background: #A0A0A0; position: absolute; display: none }
 
@@ -310,3 +309,23 @@ div#tadd select { width: 220px }
 	#go { display: none }
 	#query { width: 80px }
 }
+
+@media only screen and (min-width: 1280px) {
+  .desktop { display: inline-block; }
+}
+
+@media only screen and (max-width: 1279px) {
+  .desktop { display: none; }
+}
+
+@media only screen and (min-width: 730px) {
+  .mobile-search { display: inline-block; }
+  div#HDivider { width: 5px; height: 0px; padding: 0; margin: 0; cursor: e-resize; }
+  div#CatList {width: 0px; border: 1px solid #A0A0A0; background-color: #FFFFFF; overflow-y: auto; overflow-x: hidden; min-width: 160px; }
+}
+
+@media only screen and (max-width: 729px) {
+  .mobile-search { display: none; }
+  div#CatList { display: none; }
+  div#HDivider { display: none; }
+}
diff --git a/index.html b/index.html
@@ -73,7 +73,7 @@
 			<a id="mnu_help" href="javascript://void();" onclick="theDialogManager.toggle('dlgHelp'); return(false);" onfocus="this.blur()" title="Help">
 				<div id="help"></div>
 			</a>
-			<table id='rc' cellpadding="0" cellspacing="0"><tr id='rrow'>
+			<table id='rc' class="mobile-search" cellpadding="0" cellspacing="0"><tr id='rrow'>
 				<td>
 					<a id="mnu_search" class="top-menu-item" href="javascript://void();" onclick="theSearchEngines.show(); return(false);" onfocus="this.blur()" title="Search">
 						<div id="search" class="top-menu-item"></div>
@@ -241,35 +241,35 @@
 							        <table id="st_up" class="statuscell" cellpadding="0" cellspacing="0">
 							        	<tr>
 										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Speed); </script>:</div></td><td><div class="stval" id="stup_speed"></div></td>
-										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.limit); </script>:</div></td><td><div class="stval" id="stup_limit"></div></td>
-										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Total); </script>:</div></td><td><div class="stval" id="stup_total"></div></td>
+										<td class="desktop"><div class="sthdr"><script type="text/javascript"> document.write(theUILang.limit); </script>:</div></td><td class="desktop"><div class="stval" id="stup_limit"></div></td>
+										<td class="desktop"><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Total); </script>:</div></td><td class="desktop"><div class="stval" id="stup_total"></div></td>
 									</tr>
 								</table>
 							</td>
 							<td>
 							        <table id="st_down" class="statuscell" cellpadding="0" cellspacing="0">
 							        	<tr>
 										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Speed); </script>:</div></td><td><div class="stval" id="stdown_speed"></div></td>
-										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.limit); </script>:</div></td><td><div class="stval" id="stdown_limit"></div></td>
-										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Total); </script>:</div></td><td><div class="stval" id="stdown_total"></div></td>
+										<td class="desktop"><div class="sthdr"><script type="text/javascript"> document.write(theUILang.limit); </script>:</div></td><td class="desktop"><div class="stval" id="stdown_limit"></div></td>
+										<td class="desktop"><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Total); </script>:</div></td><td class="desktop"><div class="stval" id="stdown_total"></div></td>
 									</tr>
 								</table>
 							</td>
-							<td>
+							<td class="desktop">
 								<table id="st_fd" class="statuscell" cellpadding="0" cellspacing="0">
 									<tr>
 										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Open_label); </script>:</div></td><td><div class="stval" id="stopen_http_count"></div></td><td><div class="stval" id="stopen_sock_count"></div></td><td><div class="stval" id="stopen_fd_count"></div></td>
 									</tr>
 								</table>
 							</td>
-							<td>
+							<td class="desktop">
 							        <table id="st_system" class="statuscell" cellpadding="0" cellspacing="0">
 							        	<tr>
 										<td><div class="sthdr">rTorrent:</div></td><td><div class="stval" id="rtorrentv"></div></td>
 									</tr>
 								</table>
 							</td>
-							<td class="statusCell">
+							<td class="statusCell desktop">
 								<table id="st_system" class="statuscell" cellpadding="0" cellspacing="0">
 									<tr>
 										<td><div class="sthdr"><script type="text/javascript"> document.write(theUILang.Torrents); </script>:</div></td><td><div class="stval" id="viewrows"></div></td>

diff --git a/js/webui.js b/js/webui.js
@@ -2727,7 +2727,7 @@ var theWebUI =
 	{
 		var ww = $(window).width();
 		var wh = $(window).height();
-       		var w = Math.floor(ww * (1 - theWebUI.settings["webui.hsplit"])) - 5;
+       		var w = Math.floor(ww * (1 - 1)) - 5;
 	        var th = ($("#t").is(":visible") ? $("#t").height() : -1)+$("#StatusBar").height()+12;
 		$("#StatusBar").width(ww);
 		if(theWebUI.settings["webui.show_cats"])

diff --git a/plugins/check_port/check_port.css b/plugins/check_port/check_port.css
@@ -1,6 +1,13 @@
-#port-holder { height: 19px; line-height: 19px; margin-left: 24px; margin-right: 8px; }
 #port-ip-text { font-size: 11px; font-family: Tahoma, Arial, Helvetica, sans-serif }
 
 #StatusBar table tr td.pstatus0 { background: url(./images/yellow.png) 5px no-repeat; }
 #StatusBar table tr td.pstatus1 { background: url(./images/red.png) 5px no-repeat; }
-#StatusBar table tr td.pstatus2 { background: url(./images/green.png) 5px no-repeat; }
+#StatusBar table tr td.pstatus2 { background: url(./images/green.png) 5px no-repeat; }
+
+@media only screen and (min-width: 730px) {
+  #port-holder { height: 19px; line-height: 19px; margin-left: 24px; margin-right: 8px; display: inline-block; }
+}
+
+@media only screen and (max-width: 729px) {
+  #port-holder { display: none; }
+}