Filter updates and styling

6 files changed, 124 insertions, 93 deletions

diff --git a/tmpl/filter.tmpl b/tmpl/filter.tmpl
index ce9ff95..e039281 100644
--- a/tmpl/filter.tmpl
+++ b/tmpl/filter.tmpl
@@ -1,73 +1,96 @@
 {{ define "filter" }}
-	<div class="timerange">
-		<!--
-	  <form>
-	  <input type="date" name="bdate" value="{{ .Begin|dateRFC }}" />
-	  <input type="time" name="btime" value="{{ .Begin|timeRFC }}" />
-	  <input type="date" name="edate" value="{{ .End|dateRFC }}" />
-	  <input type="time" name="etime" value="{{ .End|timeRFC }}" />
-	  <select name="timezone">
-	  <option value="-39600">-1100</option>
-	  <option value="-36000">-1000</option>
-	  <option value="-32400">-0900</option>
-	  <option value="-28800">-0800</option>
-	  <option value="-25200">-0700</option>
-	  <option value="-21600">-0600</option>
-	  <option value="-18000">-0500</option>
-	  <option value="-14400">-0400</option>
-	  <option value="-10800">-0300</option>
-	  <option value="-7200">-0200</option>
-	  <option value="-3600">-0100</option>
-	  <option value="0">UTC</option>
-	  <option value="3600">+0100</option>
-	  <option value="7200">+0200</option>
-	  <option value="10800">+0300</option>
-	  <option value="14400">+0400</option>
-	  <option value="18000">+0500</option>
-	  <option value="21600">+0600</option>
-	  <option value="25200">+0700</option>
-	  <option value="28800">+0800</option>
-	  <option value="32400">+0900</option>
-	  <option value="36000">+1000</option>
-	  <option value="39600">+1100</option>
-	  </select>
-	  </form>
-		-->
-		<a href="?{{ datetimeRelative "-24h" | .QuerySetEncode "begin" }}">last day</a>
-		<a href="?{{ datetimeRelative "-168h" | .QuerySetEncode "begin" }}">last 7 days</a>
-		<a href="?{{ datetimeRelative "-720h" | .QuerySetEncode "begin" }}">last 30 days</a>
-		<a href="?{{ .QuerySetEncode "bots" "0" }}">without bots</a>
-		<a href="?{{ .QuerySetEncode "bots" "1" }}">only bots</a>
-	</div>
-	<div class="field is-grouped is-grouped-multiline">
-		<div class="control">
-			{{ if .QuerySetContains "bots" }}
-				{{ $bots := .Query.Get "bots" }}
-				{{ if eq $bots "0" }}
-					<div class="tags has-addons">
-						<a class="tag is-link">No bots</a>
-						<a class="tag is-delete" href="?{{ .QuerySetEncode "bots" "" }}"></a>
-					</div>
-				{{ end }}
-				{{ if eq $bots "1" }}
-					<div class="tags has-addons">
-						<a class="tag is-link">Only bots</a>
+	<div class="filter tags field is-grouped">
+		<span>Filters:</span>
+		{{ if .QuerySetContains "bots" }}
+			{{ $bots := .Query.Get "bots" }}
+			{{ if eq $bots "0" }}
+				<div class="control">
+					<span class="tags has-addons">
+						<a class="tag is-danger" href="?{{ .QuerySetEncode "bots" "" }}">no bots</a>
 						<a class="tag is-delete" href="?{{ .QuerySetEncode "bots" "" }}"></a>
-					</div>
-				{{ end }}
-			{{ end }}
-			{{ if .QuerySetContains "country" }}
-				<div class="tags has-addons">
-					<a class="tag is-link">Country {{ .Query.Get "country" }}</a>
-					<a class="tag is-delete" href="?{{ .QuerySetEncode "country" "" }}"></a>
+					</span>
 				</div>
 			{{ end }}
-			{{ if .QuerySetContains "begin" }}
-				<div class="tags has-addons">
-					<a class="tag is-link">Time filter</a>
-					<a class="tag is-delete" href="?{{ .QuerySetEncode "begin" "" }}"></a>
+			{{ if eq $bots "1" }}
+				<div class="control">
+					<span class="tags has-addons">
+						<a class="tag is-danger" href="?{{ .QuerySetEncode "bots" "" }}">only bots</a>
+						<a class="tag is-delete" href="?{{ .QuerySetEncode "bots" "" }}"></a>
+					</span>
 				</div>
 			{{ end }}
-		</div>
+		{{ else }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-info" href="?{{ .QuerySetEncode "bots" "0" }}">bots</a>
+					<a class="tag is-light" href="?{{ .QuerySetEncode "bots" "0" }}">without</a>
+				</span>
+			</div>
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-info" href="?{{ .QuerySetEncode "bots" "1" }}">bots</a>
+					<a class="tag is-light" href="?{{ .QuerySetEncode "bots" "1" }}">only</a>
+				</span>
+			</div>
+		{{ end }}
+		{{ if .QuerySetContains "country" }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-danger" href="?{{ .QuerySetEncode "country" "" }}">country {{ .Query.Get "country" }}</a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "country" "" }}"></a>
+				</span>
+			</div>
+		{{ end }}
+		{{ if .QuerySetContains "path" }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-danger" href="?{{ .QuerySetEncode "path" "" }}">path</a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "path" "" }}"></a>
+				</span>
+			</div>
+		{{ end }}
+		{{ if .QuerySetContains "browser" }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-danger" href="?{{ .QuerySetEncode "browser" "" }}">browser</a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "browser" "" }}"></a>
+				</span>
+			</div>
+		{{ end }}
+		{{ if .QuerySetContains "referrer" }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-danger" href="?{{ .QuerySetEncode "referrer" "" }}">referrer</a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "referrer" "" }}"></a>
+				</span>
+			</div>
+		{{ end }}
+		{{ if .QuerySetContains "begin" }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-danger" href="?{{ .QuerySetEncode "begin" "" }}">time</a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "begin" "" }}"></a>
+				</span>
+			</div>
+		{{ else }}
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-info" href="?{{ datetimeRelative "-24h" | .QuerySetEncode "begin" }}">days</a>
+					<a class="tag is-light" href="?{{ datetimeRelative "-24h" | .QuerySetEncode "begin" }}">1</a>
+				</span>
+			</div>
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-info" href="?{{ datetimeRelative "-168h" | .QuerySetEncode "begin" }}">days</a>
+					<a class="tag is-light" href="?{{ datetimeRelative "-168h" | .QuerySetEncode "begin" }}">7</a>
+				</span>
+			</div>
+			<div class="control">
+				<span class="tags has-addons">
+					<a class="tag is-info" href="?{{ datetimeRelative "-720h" | .QuerySetEncode "begin" }}">days</a>
+					<a class="tag is-light" href="?{{ datetimeRelative "-720h" | .QuerySetEncode "begin" }}">30</a>
+				</span>
+			</div>
+		{{ end }}
 	</div>
 {{ end }}
diff --git a/tmpl/hitView.tmpl b/tmpl/hitView.tmpl
index 3deb96b..f7d4dcb 100644
--- a/tmpl/hitView.tmpl
+++ b/tmpl/hitView.tmpl
@@ -17,7 +17,7 @@
 	</section>
 
 	{{ if .PageSet }}
-		<section id="pages" class="card">
+		<section id="pages" class="card card--narrow">
 			<header class="card-header">
 				<h3 class="card-header-title">Top 10 pages</h3>
 			</header>
@@ -47,7 +47,7 @@
 		</section>
 	{{ end }}
 
-	<section id="countries" class="card">
+	<section id="countries" class="card card--narrow">
 		<header class="card-header">
 			<h3 class="card-header-title">Countries</h3>
 		</header>
@@ -73,7 +73,7 @@
 		</div>
 	</section>
 
-	<section id="referrers" class="card">
+	<section id="referrers" class="card card--narrow">
 		<header class="card-header">
 			<h3 class="card-header-title">Referrers</h3>
 		</header>
@@ -97,7 +97,7 @@
 		</div>
 	</section>
 
-	<section id="useragents" class="card">
+	<section id="useragents" class="card card--narrow">
 		<header class="card-header">
 			<h3 class="card-header-title">User agents</h3>
 		</header>
@@ -125,7 +125,7 @@
 {{ end }}
 
 {{ define "siteSummary" }}
-	<section class="level">
+	<section class="site__summary level">
 		{{ with .Hits }}
 			<div class="level-item has-text-centered">
 				<div>
diff --git a/tmpl/layout.tmpl b/tmpl/layout.tmpl
index 4ab0db0..056ce60 100644
--- a/tmpl/layout.tmpl
+++ b/tmpl/layout.tmpl
@@ -7,7 +7,7 @@
 	</head>
 	<body class="has-navbar-fixed-top">
 		{{ template "navbar" . }}
-		<main class="page">
+		<main class="page{{ if .Sites }} page--sites{{ end }}{{ if .Site }} page--site{{ end }}">
 			{{ template "flash" . }}
 			{{ template "content" . }}
 		</main>
diff --git a/tmpl/navbar.tmpl b/tmpl/navbar.tmpl
index f49ae6f..b7a1cd7 100644
--- a/tmpl/navbar.tmpl
+++ b/tmpl/navbar.tmpl
@@ -2,7 +2,7 @@
 	<nav class="navbar is-black is-fixed-top" role="navigation" aria-label="main navigation">
 		<div class="navbar-brand">
 			<a class="navbar-item" href="//{{ .Domain }}">
-				<img src="//{{ .Domain }}/logo.png" width="112" height="28">
+				<img src="//{{ .Domain }}/favicon64.png" height="28">
 			</a>
 
 			<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarMain">
diff --git a/tmpl/site.tmpl b/tmpl/site.tmpl
index 4f4ffc3..c44f8f0 100644
--- a/tmpl/site.tmpl
+++ b/tmpl/site.tmpl
@@ -1,20 +1,23 @@
 {{ define "content" }}
-	<header class="header header--site">
-		{{ if .Site.ID }}
-			{{ with .Site }}
-				<h1 class="title title--site">Hits for {{ .Name }}</h1>
-				<span class="subtitle">{{ .Description }}</span>
+	{{ if .Site.ID }}
+		<header class="header header--site">
+			<div class="header__title">
+				{{ with .Site }}
+					<h1 class="title title--site">{{ .Name }}</h1>
+				{{ end }}
+			</div>
+			{{ if .Site.ID }}
+				{{ template "filter" . }}
 			{{ end }}
-		{{ else }}
+		</header>
+	{{ else }}
+		<header class="header header--site">
 			<h1 class="title--site">New Site</h1>
-		{{ end }}
-	</header>
+		</header>
+	{{ end }}
 
 	{{ template "siteSummary" . }}
 
-	{{ if .Site.ID }}
-		{{ template "filter" . }}
-	{{ end }}
 	{{ if .Hits }}
 		{{ template "hitView" . }}
 	{{ else }}
diff --git a/tmpl/sites.tmpl b/tmpl/sites.tmpl
index 044e595..9d449f6 100644
--- a/tmpl/sites.tmpl
+++ b/tmpl/sites.tmpl
@@ -2,17 +2,22 @@
 	<header>
 		<h1 class="title">Sites</h1>
 	</header>
-	<ul class="sites">
-		{{ range .Sites }}
-			{{ template "siteForList" . }}
-		{{ end }}
-	</ul>
+	{{ range .Sites }}
+		{{ template "siteForList" . }}
+	{{ end }}
 {{ end }}
 
 {{ define "siteForList" }}
-	<li>
-		<a href="/sites/{{ .ID }}/">{{ .Name }}</a>
-		<span>{{ .Description }}</span>
-		<img src="{{ sparkline .ID }}" />
-	</li>
+	<a class="site card" href="/sites/{{ .ID }}/">
+		<div class="card-header">
+			<object data="/favicon64.png" type="image/png">
+				<img class="card-header-icon" src="//{{ .Name }}/favicon.ico" alt="{{ .Name }} favicon" />
+			</object>
+			<span class="card-header-title">{{ .Name }}</span>
+			<img src="{{ sparkline .ID }}" />
+		</div>
+		<div class="card-content">
+			{{ .Description }}
+		</div>
+	</a>
 {{ end }}