From 36b71476bab838be12bd06dc98e5fcf53da0d9ce Mon Sep 17 00:00:00 2001 From: relikd Date: Tue, 8 Sep 2020 22:16:43 +0200 Subject: [PATCH] Redo graph + mobile touch --- out/static/script.js | 1 + out/static/style.css | 43 +++++++++++++++++++++++-------------------- src/html_bundle.py | 2 +- templates/base.html | 4 ++-- 4 files changed, 27 insertions(+), 23 deletions(-) diff --git a/out/static/script.js b/out/static/script.js index f3ccbfe..2ea3369 100644 --- a/out/static/script.js +++ b/out/static/script.js @@ -1,5 +1,6 @@ (function(){// main entry updateViewport(); + addEventListener('touchstart', function() {}); // :hover })(); function updateViewport() {// show at least 2 columns on mobile devices var viewport = document.head.querySelector("meta[name=viewport]"); diff --git a/out/static/style.css b/out/static/style.css index 63967b7..ec97f63 100644 --- a/out/static/style.css +++ b/out/static/style.css @@ -120,38 +120,41 @@ td { padding: 0.2em 1em 0.2em 0.1em; } p.trckr { font-size: 0.8em; } /* graphs */ -.pie-chart { width: 100px; height: 100px; } -.dot-graph span { outline: 3px solid transparent; outline-offset: 2px; } -.dot-graph span:hover { outline-color: black; } +.dot-graph { + touch-action: manipulation; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; +} +.dot-graph span:hover i { border-top: 5px solid black; margin-top: -5px } .dot-graph span:hover p { display: inline; } .dot-graph p { display: none; position: absolute; vertical-align: bottom; background: white; - border: 1px solid #ddd; - padding: 0.2em; - margin: -2em 0; + border: 0.4em solid black; + padding: 0.3em 0.8em; + margin-top: -2.8em; } .dot-graph i { display: inline-block; vertical-align: bottom; - width: 20px; - height: 20px; - padding: 0; - margin: 1px 1px; + width: 1.5em; + height: 2em; + margin-bottom: 5px; } /* color-bind friendly color palette */ -.cb0{background:#63ACBE} -.cb1{background:#601A4A} -.cb2{background:#09F4EC} -.cb3{background:#1F77B4} -.cb4{background:#EE442F} -.cb5{background:#7F7F7F} -.cb6{background:#0F2080} -.cb7{background:#3b9f35} -.cb8{background:#F5793A} -.cb9{background:#AC66FB} +.cb0 i{background:#63ACBE} +.cb1 i{background:#601A4A} +.cb2 i{background:#09F4EC} +.cb3 i{background:#1F77B4} +.cb4 i{background:#EE442F} +.cb5 i{background:#7F7F7F} +.cb6 i{background:#0F2080} +.cb7 i{background:#3b9f35} +.cb8 i{background:#F5793A} +.cb9 i{background:#AC66FB} .cs0{stroke:#3AE48C} .cs1{stroke:#D11} diff --git a/src/html_bundle.py b/src/html_bundle.py index ccac874..d2fe205 100755 --- a/src/html_bundle.py +++ b/src/html_bundle.py @@ -54,7 +54,7 @@ def gen_pie_chart(parts, classes, stroke=0.6): else: txt += f'' total += deg - return '{1}'.format(size, txt) + return '{1}'.format(size, txt) def gen_radial_graph(percent): diff --git a/templates/base.html b/templates/base.html index 26ac4f9..c0a5ff2 100644 --- a/templates/base.html +++ b/templates/base.html @@ -3,9 +3,9 @@ - + #_TITLE_#AppCheck: Privacy Monitor - +