core: Make RSS-Bridge more usable via mobile devices

Adds styles for display sizes smaller than 768px where elements are currently hardly usable. Note that RSS-Bridge is not designed for mobile use, but some users may want to try things on their mobile phone before using it in real life applications. Resolves #796
RSS-Bridge · Jun 22, 2019 · 99d4571 · 99d4571
1 parent 69acc62
commit 99d4571
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 0 deletions.
diff --git a/formats/HtmlFormat.php b/formats/HtmlFormat.php
@@ -95,6 +95,7 @@ public function stringify(){
 <html>
 <head>
 	<meta charset="{$charset}">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<title>{$title}</title>
 	<link href="static/HtmlFormat.css" rel="stylesheet">
 	<meta name="robots" content="noindex, follow">

diff --git a/static/HtmlFormat.css b/static/HtmlFormat.css
@@ -96,3 +96,20 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
  button:hover {
 	background: #49afff;
 }
+
+@media screen and (max-width: 767px) {
+
+	section {
+		width: 100%;
+		padding: 0;
+
+	}
+
+	button {
+		display: inline-block;
+		width: 40%;
+		padding: 5px auto;
+		margin: 3px auto 0;
+	}
+
+}
diff --git a/static/style.css b/static/style.css
@@ -199,6 +199,7 @@ form {
 
 	.parameters label {
 		text-align: right;
+		line-height: 1.5em;
 	}
 
 	.parameters label::before {
@@ -303,3 +304,54 @@ h5 {
 .advice > li {
 	text-align: left;
 }
+
+@media screen and (max-width: 767px) {
+	body {
+		font-size: 75%;
+	}
+
+	header > section.warning {
+		width: 90%;
+	}
+
+	header > section.critical-warning {
+		width: 90%;
+	}
+
+	.searchbar {
+		width: 90%;
+		margin: 0 auto;
+	}
+
+	section {
+		width: 90%;
+		margin: 10px auto;
+		overflow: hidden;
+	}
+
+	button {
+		display: inline-block;
+		width: 40%;
+		padding: 5px auto;
+		margin: 3px auto 0;
+	}
+
+	@supports (display: grid) {
+
+		.parameters {
+			grid-template-columns: auto auto;
+			grid-column-gap: 5px;
+		}
+
+		.parameters label {
+			line-height: 2em;
+			word-break: break-word;
+		}
+
+	} /* @supports (display: grid) */
+
+	.secure-warning {
+		width: 100%;
+	}
+
+}