LesLibres.org/Rss-Bridge
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

core: Make RSS-Bridge more usable via mobile devices

Browse source 
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
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
formats/HtmlFormat.php
View file

@ -95,6 +95,7 @@ EOD;
<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">

17
static/HtmlFormat.css
View file

@ -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;
}
}

52
static/style.css
View file

@ -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%;
}
}