From 1f705c122dfe7b9ec0cd956c5188b907e6e8e4b8 Mon Sep 17 00:00:00 2001 From: hackademix Date: Mon, 28 Jan 2019 15:50:21 +0100 Subject: Mobile-friendly UI sizing in CSS. --- html/common.css | 15 +++++++++++-- html/display_panel/content/panel-styles.css | 34 ++++++++++++++++------------- html/mobile.js | 1 + 3 files changed, 33 insertions(+), 17 deletions(-) diff --git a/html/common.css b/html/common.css index 14931fa..7162338 100644 --- a/html/common.css +++ b/html/common.css @@ -6,11 +6,22 @@ html { font-family: sans-serif; } body { - padding:0; - margin:10px 30px 10px 20px; + padding: 0; + font-size: 12px; + margin: 1em; color:#000; } +.mobile body { + font-size: 6mm; + width: auto; + max-width: auto; +} + +.mobile button { + font-size: 1.5em +} + div.libre { position: relative; } diff --git a/html/display_panel/content/panel-styles.css b/html/display_panel/content/panel-styles.css index 940a8ff..d5c3528 100644 --- a/html/display_panel/content/panel-styles.css +++ b/html/display_panel/content/panel-styles.css @@ -20,24 +20,24 @@ @import url("/html/common.css"); body { - width:500px; + width: 500px; } #header{ -display:block; -width:500px; +display: block; +width: 100% } h2 { - font-size:1.1em; + font-size: 1.4em; font-weight:bold; font-family:arial; - border-bottom:4px solid #444; + border-bottom:.2em solid #444; padding-bottom:0; - margin:10px 0 0 0; + margin:.8em 0 0 0; line-height:140%; } code { - font-size:1.2em; + font-size: 1.2em; margin:0; padding:0; } @@ -47,18 +47,18 @@ ul { list-style:none; } #info li { - padding:5px; - border-bottom:2px solid #CCC; + padding: .3em; + border-bottom:.1em solid #CCC; margin:0; overflow: hidden; } #info ul ul { - margin:10px; + margin: .4em; list-style:disc; } #info ul ul li { - padding:5px; + padding: .5em; border-bottom:0; } #info { @@ -121,18 +121,18 @@ span.blocked { } .title-area { - width: 250px; + width: 50%; float:left !important; text-align: center !important; } .title-area #librejs-web-link { - font-size: 18px; + font-size: 1.2em; } #librejs-web-labels-pages>ul { - margin-top: 8px; - font-size: 14px; + margin-top: .5em; + font-size: 1.2em; list-style-type: disc; } @@ -150,3 +150,7 @@ span.blocked { width: 100%; text-align: center; } + +.mobile #report-tab { + display: none; +} diff --git a/html/mobile.js b/html/mobile.js index ae80a63..f824046 100644 --- a/html/mobile.js +++ b/html/mobile.js @@ -1,5 +1,6 @@ window.isMobile = !("windows" in browser); if (isMobile) { + document.documentElement.classList.add("mobile"); let s = document.createElement("script"); s.src = "/html/fastclick.js"; document.head.appendChild(s); -- cgit v1.2.3