spread search interface horizontally

copyparty/web/browser.css

@@ -405,7 +405,7 @@ input[type="checkbox"]:checked+label {
 
 
 
-#op_search table {
+#srch_form {
 	border: 1px solid #3a3a3a;
 	box-shadow: 0 0 1em #222 inset;
 	background: #2d2d2d;
@@ -414,15 +414,24 @@ input[type="checkbox"]:checked+label {
 	margin-bottom: 0;
 	padding: 0 .5em .5em 0;
 }
+#srch_form table {
+	display: inline-block;
+}
 #srch_form td {
 	padding: .6em .6em;
 }
+#srch_form td:first-child {
+	width: 3em;
+	padding-right: .2em;
+	text-align: right;
+}
 #op_search input {
 	margin: 0;
 }
 #srch_q {
 	white-space: pre;
 	color: #f80;
+	margin: .2em 0 0 1.6em
 }
 #files td div span {
 	color: #fff;

copyparty/web/browser.html

@@ -29,9 +29,9 @@
 
     <div id="op_search" class="opview">
         {%- if have_tags_idx %}
-        <table id="srch_form" class="tags"></table>
+        <div id="srch_form" class="tags"></div>
         {%- else %}
-        <table id="srch_form"></table>
+        <div id="srch_form"></div>
         {%- endif %}
         <div id="srch_q"></div>
     </div>

copyparty/web/browser.js

@@ -597,10 +597,10 @@ function autoplay_blocked() {
 		]);
 	}
 
-	var html = [];
+	var trs = [];
 	var orig_html = null;
 	for (var a = 0; a < sconf.length; a++) {
-		html.push('<tr><td><br />' + sconf[a][0] + '</td>');
+		var html = ['<tr><td><br />' + sconf[a][0] + '</td>'];
 		for (var b = 1; b < 3; b++) {
 			var hn = "srch_" + sconf[a][b][0];
 			var csp = (sconf[a].length == 2) ? 2 : 1;
@@ -613,6 +613,11 @@ function autoplay_blocked() {
 				break;
 		}
 		html.push('</tr>');
+		trs.push(html);
+	}
+	var html = [];
+	for (var a = 0; a < trs.length; a += 2) {
+		html.push('<table>' + (trs[a].concat(trs[a + 1])).join('\n') + '</table>');
 	}
 	ebi('srch_form').innerHTML = html.join('\n');
 
@@ -679,6 +684,7 @@ function autoplay_blocked() {
 			ebi('path').style.display = 'none';
 			ebi('tree').style.display = 'none';
 			ebi('wrap').style.marginLeft = '0';
+			treectl.hidden = true;
 		}
 
 		var html = mk_files_header(tagord);
@@ -731,6 +737,7 @@ function autoplay_blocked() {
 		ebi('path').style.display = oldcfg[0];
 		ebi('tree').style.display = oldcfg[1];
 		ebi('wrap').style.marginLeft = oldcfg[2];
+		treectl.hidden = false;
 		oldcfg = [];
 		ebi('files').innerHTML = orig_html;
 		orig_html = null;
@@ -740,6 +747,9 @@ function autoplay_blocked() {
 
 
 var treectl = (function () {
+	var treectl = {
+		"hidden": false
+	};
 	var dyn = bcfg_get('dyntree', true);
 	var treesz = icfg_get('treesz', 16);
 	treesz = Math.min(Math.max(treesz, 4), 50);
@@ -773,7 +783,7 @@ var treectl = (function () {
 	}
 
 	function onscroll() {
-		if (!entreed)
+		if (!entreed || treectl.hidden)
 			return;
 
 		var top = ebi('wrap').getBoundingClientRect().top;
@@ -787,7 +797,7 @@ var treectl = (function () {
 	periodic();
 
 	function onresize(e) {
-		if (!entreed)
+		if (!entreed || treectl.hidden)
 			return;
 
 		var q = '#tree';
@@ -1065,9 +1075,8 @@ var treectl = (function () {
 		hist_replace(get_evpath() + window.location.hash);
 	}
 
-	return {
-		"onscroll": onscroll
-	}
+	treectl.onscroll = onscroll;
+	return treectl;
 })();