1
0
mirror of https://github.com/RSS-Bridge/rss-bridge.git synced 2025-07-24 18:31:23 +02:00

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 
This commit is contained in:
logmanoriginal
2019-06-21 21:22:21 +02:00
parent 69acc6228a
commit 99d4571c6b
3 changed files with 70 additions and 0 deletions

@@ -95,6 +95,7 @@ EOD;
<html> <html>
<head> <head>
<meta charset="{$charset}"> <meta charset="{$charset}">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{$title}</title> <title>{$title}</title>
<link href="static/HtmlFormat.css" rel="stylesheet"> <link href="static/HtmlFormat.css" rel="stylesheet">
<meta name="robots" content="noindex, follow"> <meta name="robots" content="noindex, follow">

@@ -96,3 +96,20 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
button:hover { button:hover {
background: #49afff; 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;
}
}

@@ -199,6 +199,7 @@ form {
.parameters label { .parameters label {
text-align: right; text-align: right;
line-height: 1.5em;
} }
.parameters label::before { .parameters label::before {
@@ -303,3 +304,54 @@ h5 {
.advice > li { .advice > li {
text-align: left; 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%;
}
}