fix: more responsive browse template (#24)

tmpim · Dec 12, 2023 · e5e29e8 · e5e29e8
1 parent 40bc5a3
commit e5e29e8
Showing 1 changed file with 20 additions and 7 deletions.
diff --git a/caskethttp/browse/default_template.html b/caskethttp/browse/default_template.html
@@ -31,6 +31,10 @@
 	padding-right: 5%;
 }
 
+#summary {	
+	gap: 0.5em 1em;
+}
+
 .filler {
     flex: 1;
 }
@@ -85,10 +89,6 @@
 	padding-bottom: 10px;
 }
 
-.meta-item {
-	margin-right: 1em;
-}
-
 .dropdown {
     position: relative;
     font-weight: bold;
@@ -145,6 +145,7 @@
 #filter {
 	padding: 4px;
 	border: 1px solid #cccccc;
+	box-sizing: border-box;
 }
 
 table {
@@ -265,7 +266,19 @@
 	}
 
 	#filter {
-		max-width: 100px;
+		width: 100%;
+	}
+
+	.meta-item.filter-item {
+		flex: 1;
+	}
+
+	#summary {
+		flex-wrap: wrap;
+	}
+
+	#summary > .filler {
+		flex-basis: 100%;
 	}
 }
 </style>
@@ -328,7 +341,7 @@ <h1>
 					{{- if ne 0 .ItemsLimitedTo}}
 					<span class="meta-item">(of which only <b>{{.ItemsLimitedTo}}</b> are displayed)</span>
 					{{- end}}
-					<span class="meta-item"><input type="text" placeholder="filter" id="filter" onkeyup='filter()'></span>
+					<span class="meta-item filter-item"><input type="text" placeholder="filter" id="filter" onkeyup='filter()'></span>
                     <span class="filler"></span>
                     {{- if .ArchiveTypes }}
                     <div class="dropdown" onclick="">
@@ -479,4 +492,4 @@ <h1>
 			timeList.forEach(localizeDatetime);
 		</script>
 	</body>
-</html>
+</html>