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
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

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