relikd/appchk-web
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Redo graph + mobile touch

Browse Source
This commit is contained in:
relikd
2020-09-08 22:16:43 +02:00
parent d3820b6785
commit 36b71476ba
4 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
out/static/script.js
View File

@@ -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]");

43
out/static/style.css
View File

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

2
src/html_bundle.py
View File

@@ -54,7 +54,7 @@ def gen_pie_chart(parts, classes, stroke=0.6):
else:
txt += f'<path fill="transparent" class="{clss}" stroke-width="{stroke_p}" d="M{arc(total)}A{r_p},0,{1 if deg > 180 else 0},1,{arc(total + deg)}" />'
total += deg
return '<svg viewBox="0 0 {0} {0}">{1}</svg>'.format(size, txt)
return '<svg viewBox="0 0 {0} {0}" width="100" height="100">{1}</svg>'.format(size, txt)
def gen_radial_graph(percent):

4
templates/base.html
View File

@@ -3,9 +3,9 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=0.75" />
<script type="text/javascript" src="/static/script.js"></script>
<script type="text/javascript" src="/static/script.js?1"></script>
<title>#_TITLE_#AppCheck: Privacy Monitor</title>
<link rel="stylesheet" type="text/css" href="/static/style.css">
<link rel="stylesheet" type="text/css" href="/static/style.css?1">
<link rel="stylesheet" type="text/css" href="/static/fonts/font.css">
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">