NB-Public
/
green-spider
mirror of https://github.com/netzbegruenung/green-spider.git
14
0
Fork 1
Code Issues 2 Projects Releases Wiki Activity

Merge pull request #51 from netzbegruenung/add-tooltips 

Tooltip hinzufügen
This commit is contained in:
Marian Steinbach 2018-06-06 23:37:52 +02:00 committed by GitHub
parent f5de4a77ae 2034345d97
commit 38c7a5c126
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 755 additions and 440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Makefile
View File

@ -28,6 +28,7 @@ webapp/node_modules:
webapp: webapp/node_modules
cd webapp && npx webpack --config webpack.config.js
cp -r webapp/dist/* ./docs/
cp webapp/node_modules/tooltipster/dist/css/tooltipster.bundle.min.css ./docs/css/
rm webapp/dist/bundle.js
serve-webapp:

38
docs/bundle.js
View File

File diff suppressed because one or more lines are too long

1
docs/css/tooltipster.bundle.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
docs/icon/icon128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
docs/icon/icon32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

20
docs/index.html
View File

@ -5,9 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
<link rel="stylesheet" href="css/tooltipster.bundle.min.css">
<link rel="icon" href="icon/icon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="icon/icon128.png" type="image/png" sizes="128x128">
<style type="text/css">
h5 {
@ -40,11 +43,6 @@
font-size: 0.8rem;
}
.icon {
width: 32px;
height: 32px;
}
a.screenshot {
display: inline-block;
margin-left: 3px;
@ -56,6 +54,8 @@
}
.icon {
width: 32px;
height: 32px;
font-size: 24px;
}
.screenshot .icon {
@ -96,9 +96,9 @@
<th scope="col">Erreichbar</th>
<th scope="col">Antwortzeit</th>
<th scope="col">Icon</th>
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></th>
<th scope="col"><abbr title="Site ist sowohl mit www. als auch ohne www. in URL erreichbar">www. optional</abbr></th>
<th scope="col"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
<th scope="col">HTTPS</th>
<th scope="col">www. optional</th>
<th scope="col">Kanonische URL</th>
<th scope="col">Responsive</th>
<th scope="col">Feed</th>
<th scope="col">Screenshots</th>

20
webapp/dist/index.html vendored
View File

@ -5,9 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>GREEN SPIDER: Websites von Bündnis 90/Die Grünen besser machen</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://netzbegruenung.github.io/webfonts/style.css">
<link rel="stylesheet" href="https://unpkg.com/ionicons@4.1.2/dist/css/ionicons.min.css">
<link rel="stylesheet" href="css/tooltipster.bundle.min.css">
<link rel="icon" href="icon/icon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="icon/icon128.png" type="image/png" sizes="128x128">
<style type="text/css">
h5 {
@ -40,11 +43,6 @@
font-size: 0.8rem;
}
.icon {
width: 32px;
height: 32px;
}
a.screenshot {
display: inline-block;
margin-left: 3px;
@ -56,6 +54,8 @@
}
.icon {
width: 32px;
height: 32px;
font-size: 24px;
}
.screenshot .icon {
@ -96,9 +96,9 @@
<th scope="col">Erreichbar</th>
<th scope="col">Antwortzeit</th>
<th scope="col">Icon</th>
<th scope="col"><abbr title="Site nutzt HTTP-Verschlüsselung">HTTPS</abbr></th>
<th scope="col"><abbr title="Site ist sowohl mit www. als auch ohne www. in URL erreichbar">www. optional</abbr></th>
<th scope="col"><abbr title="URL-Varianten leiten auf eine einzige Startseiten-URL weiter">Kanonische URL</abbr></th>
<th scope="col">HTTPS</th>
<th scope="col">www. optional</th>
<th scope="col">Kanonische URL</th>
<th scope="col">Responsive</th>
<th scope="col">Feed</th>
<th scope="col">Screenshots</th>

1055
webapp/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
webapp/package.json
View File

@ -25,8 +25,8 @@
"datatables.net": "^1.10.16",
"jquery": "^3.3.1",
"lodash": "^4.17.5",
"npm": "^5.8.0",
"popper.js": "^1.14.3",
"punycode": "^2.1.0"
"npm": "^5.10.0",
"punycode": "^2.1.0",
"tooltipster": "^4.2.6"
}
}

54
webapp/src/index.js
View File

@ -1,10 +1,9 @@
import _ from 'lodash';
import $ from 'jquery';
import 'bootstrap';
import 'popper.js';
import punycode from 'punycode';
import 'datatables.net';
import LazyLoad from 'vanilla-lazyload';
import 'tooltipster';
$(function(){
@ -37,7 +36,7 @@ $(function(){
} else if (item.meta.level === 'DE:LANDESVERBAND') {
level = 'LV';
}
row.append('<td>' + (level === null ? '' : level) + '</td>');
row.append('<td data-order="'+ (level === null ? '' : level) +'"><span class="tt" title="Art der Gliederung: LV = Landesverband, KV = Kreisverband, OV = Ortsverband">' + (level === null ? '' : level) + '</span></td>');
// land
row.append('<td>' + (item.meta.state === null ? '' : item.meta.state) + '</td>');
@ -49,47 +48,58 @@ $(function(){
row.append('<td>' + (item.meta.city === null ? '' : item.meta.city) + '</td>');
// input URL
row.append('<td><a href="' + item.input_url + '">' + trunc(punycode.toUnicode(item.input_url), 60) + '</a></td>');
row.append('<td data-order="' + item.input_url + '"><span class="tt" title="URL, die als Ausgangspunkt für diese Site vorliegt. Nicht notwendigerweise die kanonische URL."><a href="' + item.input_url + '" target="_blank" rel="noopener noreferrer">' + trunc(punycode.toUnicode(item.input_url), 60) + '</a></span></td>');
// score
row.append('<td>' + item.score.toFixed(1) + '</td>');
row.append('<td data-order="' + item.score.toFixed(3) + '"><span class="tt" title="Punktzahl für diese Site (je höher desto besser)">' + item.score.toFixed(1) + '</span></td>');
// IPs
var ips = _.join(item.details.ipv4_addresses, ', ');
row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center">' + (ips === '' ? no : ips) + '</td>');
row.append('<td class="text '+ (ips === '' ? 'bad' : 'good') +' text-center" data-order="' + (ips === '' ? no : ips) + '"><span class="tt" title="IPv4-Adresse(n) des Servers bzw. der Server">' + (ips === '' ? no : ips) + '</span></td>');
// SITE_REACHABLE
row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center" data-order="'+ (item.result.SITE_REACHABLE.value ? '1' : '0') +'">' + (item.result.SITE_REACHABLE.value ? yes : no) + '</td>');
var reachable = '<span class="tt" title="Die Site war beim Check erreichbar.">' + yes + '</span>';
if (!item.result.SITE_REACHABLE.value) {
reachable = '<span class="tt" title="Die Site war beim Check nicht erreichbar.">' + no + '</span>';
}
row.append('<td class="'+ (item.result.SITE_REACHABLE.value ? 'good' : 'bad') +' text-center" data-order="'+ (item.result.SITE_REACHABLE.value ? '1' : '0') +'">' + reachable + '</td>');
// HTTP_RESPONSE_DURATION
var durationClass = 'bad';
if (item.result.HTTP_RESPONSE_DURATION.score > 0) { durationClass = 'medium'; }
if (item.result.HTTP_RESPONSE_DURATION.score > 0.5) { durationClass = 'good'; }
row.append('<td class="text '+ durationClass +' text-center" data-order="' + item.result.HTTP_RESPONSE_DURATION.value + '">' + item.result.HTTP_RESPONSE_DURATION.value + ' ms</td>');
row.append('<td class="text '+ durationClass +' text-center" data-order="' + item.result.HTTP_RESPONSE_DURATION.value + '"><span class="tt" title="Dauer, bis der Server die Seitenanfrage beantwortet. Unter 100 ms ist sehr gut. Unter 1 Sekunde ist okay.">' + item.result.HTTP_RESPONSE_DURATION.value + ' ms</span></td>');
// FAVICON
var icon = item.result.FAVICON.value && (item.details.icons[0] != null);
var iconFile = (icon && (item.details.icons[0] != null) ? item.details.icons[0] : '');
row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + (icon ? ('<img src="/siteicons/' + iconFile + '" class="siteicon" title="'+ iconFile +'">') : no) + '</td>');
var noicon = '<span class="tt" title="Diese Site hat kein Icon.">'+ no +'</span>'
var icontag = (icon ? ('<img src="/siteicons/' + iconFile + '" class="siteicon tt" title="Die Site verweist auf das gezeigte Icon.">') : noicon);
row.append('<td class="' + (icon ? 'good' : 'bad') + ' text-center" data-order="'+ iconFile +'">' + icontag + '</td>');
// HTTPS
var hasHTTPS = item.result.HTTPS.value;
row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center" data-order="'+ (hasHTTPS ? '1' : '0') +'">' + (hasHTTPS ? yes : no) + '</td>');
var hasHTTPScontent = (hasHTTPS ? '<span class="tt" title="Die Site ist über HTTPS erreichbar">' + yes + '</span>' : '<span class="tt" title="Die Site ist nicht über HTTPS erreichbar (-2 Punkte).">' + no + '</span>')
row.append('<td class="'+ (hasHTTPS ? 'good' : 'bad') +' text-center" data-order="'+ (hasHTTPS ? '1' : '0') +'">' + hasHTTPScontent + '</td>');
// WWW_OPTIONAL
var wwwOptional = item.result.WWW_OPTIONAL.value;
row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center" data-order="'+ (wwwOptional ? '1' : '0') +'">' + (wwwOptional ? yes : no) + '</td>');
var wwwOptionalcontent = (wwwOptional ? '<span class="tt" title="Die Site ist sowohl mit als auch ohne www. in der URL aufrufbar">' + yes + '</span>' : '<span class="tt" title="Die Site ist nicht sowohl mit als auch ohne www. in der URL aufrufbar.">' + no + '</span>')
row.append('<td class="'+ (wwwOptional ? 'good' : 'bad') +' text-center" data-order="'+ (wwwOptional ? '1' : '0') +'">' + wwwOptionalcontent + '</td>');
// one canonical URL
var canonical = item.result.CANONICAL_URL.value;
row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center" data-order="'+ (canonical ? '1' : '0') +'">' + (canonical ? yes : no) + '</td>');
var canonicalContent = (canonical ? '<span class="tt" title="Verschiedene URL-Varianten werden auf eine einzige umgeleitet">' + yes + '</span>' : '<span class="tt" title="Verschiedene URL-Varianten werden nicht auf eine einzige umgeleitet.">' + no + '</span>');
row.append('<td class="'+ (canonical ? 'good' : 'bad') +' text-center" data-order="'+ (canonical ? '1' : '0') +'">' + canonicalContent + '</td>');
var responsive = item.result.RESPONSIVE.value;
row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center" data-order="'+ (responsive ? '1' : '0') +'">' + (responsive ? yes : no) + '</td>');
var responsiveContent = (responsive ? '<span class="tt" title="Die Site funktioniert anscheinend auch auf mobilen Geräten">' + yes + '</span>' : '<span class="tt" title="Es scheint, als funktioniert die Site nicht auf mobilen Geräten.">' + no + '</span>');
row.append('<td class="'+ (responsive ? 'good' : 'bad') +' text-center" data-order="'+ (responsive ? '1' : '0') +'">' + responsiveContent + '</td>');
// feeds
var feeds = item.result.FEEDS.value;
row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center" data-order="'+ (feeds ? '1' : '0') +'">' + (feeds ? yes : no) + '</td>');
var feedsContent = (feeds ? '<span class="tt" title="Die Site verweit auf mind. einen RSS-/Atom-Feed.">' + yes + '</span>' : '<span class="tt" title="Kein Link rel=alternate auf einen RSS-/Atom-Feed gefunden.">' + no + '</span>');
row.append('<td class="'+ (feeds ? 'good' : 'bad') +' text-center" data-order="'+ (feeds ? '1' : '0') +'">' + feedsContent + '</td>');
// screenshots
var screenshot = false;
@ -97,11 +107,12 @@ $(function(){
if (typeof screenshots[item.details.canonical_urls[0]] !== 'undefined') {
var surl = 'http://green-spider-screenshots.sendung.de/320x640/'+screenshots[item.details.canonical_urls[0]];
var lurl = 'http://green-spider-screenshots.sendung.de/1500x1500/'+screenshots[item.details.canonical_urls[0]];
screenshot = '<a class="screenshot" href="'+ surl +'" target="_blank" title="Mobile"><i class="icon ion-md-phone-portrait"></i></a>';
screenshot += '<a class="screenshot" href="'+ lurl +'" target="_blank" title="Desktop"><i class="icon ion-md-desktop"></i></a>';
screenshot = '<a class="screenshot tt" href="'+ surl +'" target="_blank" title="Screenshot für Smartphone-Ansicht anzeigen"><i class="icon ion-md-phone-portrait"></i></a>';
screenshot += '<a class="screenshot tt" href="'+ lurl +'" target="_blank" title="Screenshot für Desktop-Ansicht anzeigen"><i class="icon ion-md-desktop"></i></a>';
}
}
row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center" data-order="'+ (screenshot ? '1' : '0') +'">' + (screenshot ? screenshot : no) + '</td>');
var noscreenshot = '<span class="tt" title="Für diese Site liegen aktuell keine Screenshots vor (führt nicht zu Punktabzug).">' + no + '</span>';
row.append('<td class="'+ (screenshot ? 'good' : 'bad') +' text-center" data-order="'+ (screenshot ? '1' : '0') +'">' + (screenshot ? screenshot : noscreenshot) + '</td>');
// cms
row.append('<td class="text text-center">' + (item.details.cms ? item.details.cms : '') + '</td>');
@ -109,7 +120,7 @@ $(function(){
tbody.append(row);
});
// enable data table funcionts (sorting)
// enable data table functions (sorting)
table = $('table.table').DataTable({
order: [[0, "asc"]],
paging: false,
@ -119,6 +130,11 @@ $(function(){
}
});
// activate tooltips
$('.tt').tooltipster({
animationDuration: 100
});
});
});