html: smaller navigation, larger charts

This commit is contained in:
Nils Schneider 2012-06-03 13:13:45 +02:00
parent 62ea5f5a97
commit 973a39087d
6 changed files with 65 additions and 22 deletions

View file

@ -12,5 +12,7 @@ line.link {
stroke-opacity: 1; stroke-opacity: 1;
} }
#chart { #chart, #chart svg {
display: block;
vertical-align: middle;
} }

View file

@ -12,7 +12,7 @@ function getOffset( el ) {
var offset = getOffset(document.getElementById('chart')); var offset = getOffset(document.getElementById('chart'));
var w = window.innerWidth - offset.left, var w = window.innerWidth - offset.left,
h = window.innerHeight - offset.top - 24, h = window.innerHeight - offset.top,
fill = d3.scale.category20(); fill = d3.scale.category20();
var vis = d3.select("#chart").append("svg") var vis = d3.select("#chart").append("svg")

View file

@ -1,6 +1,7 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<link rel="stylesheet" href="theme/default/style.css" type="text/css" /> <link rel="stylesheet" href="theme/default/style.css" type="text/css" />
<link href='style.css' rel='stylesheet' type='text/css' />
<style type="text/css"> <style type="text/css">
#map { #map {
@ -109,12 +110,13 @@
</head> </head>
<body onload="init()"> <body onload="init()">
<header>
<h1>luebeck.freifunk.net</h1> <h1>luebeck.freifunk.net</h1>
<ul> <ul>
<li><a href="nodes.html">Knotengraph</a></li> <li><a href="nodes.html">Knotengraph</a></li>
<li><a href="geomap.html">Knotenkarte</a></li> <li><a href="geomap.html">Knotenkarte</a></li>
</ul> </ul>
<h2>Knotenkarte</h2> </header>
<div id="map"></div> <div id="map"></div>
</body> </body>
</html> </html>

View file

@ -3,19 +3,21 @@
<head> <head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> <meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Freifunk Lübeck - Knotengraph</title> <title>Freifunk Lübeck - Knotengraph</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<link href='force.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="d3.js"></script>
<script src='d3.layout.js' type='text/javascript'> </script>
<script src='d3.geom.js' type='text/javascript'> </script>
</head> </head>
<body> <body>
<header>
<h1>luebeck.freifunk.net</h1> <h1>luebeck.freifunk.net</h1>
<ul> <ul>
<li><a href="nodes.html">Knotengraph</a></li> <li><a href="nodes.html">Knotengraph</a></li>
<li><a href="geomap.html">Knotenkarte</a></li> <li><a href="geomap.html">Knotenkarte</a></li>
</ul> </ul>
<h2>Knotenkarte</h2> </header>
<div id="chart"></div> <div id="chart"></div>
<link href='force.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="d3.js"></script>
<script src='d3.layout.js' type='text/javascript'> </script>
<script src='d3.geom.js' type='text/javascript'> </script>
<script src='force.js' type='text/javascript'></script> <script src='force.js' type='text/javascript'></script>
</body> </body>
</html> </html>

38
html/style.css Normal file
View file

@ -0,0 +1,38 @@
body {
margin: 0;
padding: 0;
font-family: sans serif;
}
header h1, ul {
margin: 0;
padding: 0;
}
header h1, ul, ul li {
display: inline-block;
font-size: 10pt;
}
header h1, ul li a {
padding: 0.5em;
}
header ul {
list-style: none;
padding: 0;
}
header {
background: #333;
color: #fefefe;
}
header a {
text-decoration: none;
color: #FFCC01;
}
header a:hover {
background: #C83771;
}

View file

@ -194,11 +194,10 @@ class NodeDB:
linklist.remove(i) linklist.remove(i)
j = linklist[0] j = linklist[0]
for mac in self._nodes[i].macs: for mac in node.macs:
self._nodes[j].add_mac(mac) self._nodes[j].add_mac(mac)
self._nodes[j].gps = self._nodes[i].gps self._nodes[j].gps = node.gps
self._nodes[i].gps = None node.gps = None
self._links.remove(link)