Simplify styling

5 files changed, 138 insertions, 116 deletions

diff --git a/cmd/server/site.go b/cmd/server/site.go
index c8b0d08..9156bc6 100644
--- a/cmd/server/site.go
+++ b/cmd/server/site.go
@@ -55,7 +55,7 @@ func handleSite(db sws.SiteStore, rndr Renderer) http.HandlerFunc {
 		}
 		if _, ok := filter["referrer"]; !ok {
 			if rs := sws.NewReferrerSet(hitSet); rs != nil {
-				rs.SortByName()
+				rs.SortByHits()
 				payload.ReferrerSet = rs
 			}
 		}
diff --git a/sass/main.scss b/sass/main.scss
index 1564ea8..78f3064 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -4,6 +4,7 @@
 
 $family-sans-serif: "Helvetica", "Arial", sans-serif;
 $black: #120c13;
+$card-header-shadow: 0;
 
 //@import "../node_modules/bulma/bulma";
 @import "../node_modules/bulma/sass/utilities/_all";
@@ -19,6 +20,7 @@ $black: #120c13;
 @import "../node_modules/bulma/sass/components/level";
 @import "../node_modules/bulma/sass/components/navbar";
 @import "../node_modules/bulma/sass/components/menu";
+@import "../node_modules/bulma/sass/components/card";
 
 .navbar {
 	position: fixed;
@@ -26,30 +28,30 @@ $black: #120c13;
 }
 .page {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	margin-left: 24px;
+	margin-right: 24px;
 }
-
-.panel {
+.header {
+	width: 100%;
+}
+.level {
+	width: 100%;
+}
+.card {
 	// 	background-color: #fff;
 	border: 1px solid #e6e9ed;
-	flex: 0 1 33%;
-	margin-bottom: .5em;
-	margin-top: .5em;
+	flex: 1 1 400px;
+	margin: .5em;
 	padding: .5em;
 }
-.panel--wide {
-	flex: 1 0 100%;
+.card--wide {
+	flex: 1 1 100%;
 }
-.panel__header {
-	border-bottom: 2px solid #e6e9ed;
-	font-size: 1.75em;
-	margin-bottom: 10px;
-}
-.panel__title {
-	// 	font-size: 18px;
-	// 	font-weight: 400;
-	margin: 0;
-	padding: .25em;
+.card .table {
+	font-size: .825em;
 }
 
 .flash {
@@ -139,6 +141,10 @@ $black: #120c13;
 	right: unset;
 	top: 0;
 }
+.chart.horizontal .slot {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
 .chart.horizontal .slot:after {
 	display:block;
 	color: #555;
@@ -184,18 +190,18 @@ $black: #120c13;
 .chart.horizontal .slot:after {
 	font-size: 1em;
 	height: 100%;
-	margin-left: 10px;
+	margin-left: 0;
 	margin-bottom: 0;
 	position: absolute;
 }
 .chart.horizontal .slot:before {
-	left: -20px;
-	margin-left: 0;
+	left: -25px;
 	text-align: center;
 	width: 20px;
 }
 .chart.horizontal .slot:after {
 	left: 0;
+	margin-left: 10px;
 	width: auto;
 	z-index: 10;
 }
diff --git a/tmpl/filter.tmpl b/tmpl/filter.tmpl
index 36fc4eb..ce9ff95 100644
--- a/tmpl/filter.tmpl
+++ b/tmpl/filter.tmpl
@@ -56,10 +56,16 @@
 					</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>
+				</div>
+			{{ end }}
 			{{ if .QuerySetContains "begin" }}
 				<div class="tags has-addons">
 					<a class="tag is-link">Time filter</a>
-					<a class="tag is-delete"></a>
+					<a class="tag is-delete" href="?{{ .QuerySetEncode "begin" "" }}"></a>
 				</div>
 			{{ end }}
 		</div>
diff --git a/tmpl/hitView.tmpl b/tmpl/hitView.tmpl
index 35d33ca..3deb96b 100644
--- a/tmpl/hitView.tmpl
+++ b/tmpl/hitView.tmpl
@@ -1,116 +1,126 @@
 {{ define "hitView" }}
 	{{ $siteID := .Site.ID }}
 	{{ $payload := . }}
-	<section id="hits" class="panel panel--wide">
-		<header class="panel__header">
-			<h3 class="panel__title">Hits</h3>
+	<section id="hits" class="card card--wide">
+		<header class="card-header">
+			<h3 class="card-header-title">Hits</h3>
 		</header>
-		{{ if .Hits }}
-			<figure class="figure figure--graph">
-				{{ template "timeBarChart" .Hits }}
-			</figure>
-		{{ else }}
-			<p>No hits yet</p>
-		{{ end }}
+		<div class="card-content">
+			{{ if .Hits }}
+				<figure class="figure figure--graph">
+					{{ template "timeBarChart" .Hits }}
+				</figure>
+			{{ else }}
+				<p>No hits yet</p>
+			{{ end }}
+		</div>
 	</section>
 
 	{{ if .PageSet }}
-		<section id="pages" class="panel">
-			<header class="panel__header">
-				<h3 class="panel__title">Top 10 pages</h3>
+		<section id="pages" class="card">
+			<header class="card-header">
+				<h3 class="card-header-title">Top 10 pages</h3>
 			</header>
-			{{ if .PageSet.Count }}
-				<figure class="figure figure--graph">
-					{{ template "barChartHorizontal" .PageSet }}
-				</figure>
+			<div class="card-content">
+				{{ if .PageSet.Count }}
+					<figure class="figure figure--graph">
+						{{ template "barChartHorizontal" .PageSet }}
+					</figure>
 
-				{{ $sum := .PageSet.YSum }}
-				<table class="table is-striped details details--pages">
-					{{range $i, $ps := .PageSet }}
-						{{ if lt $i 10 }}
-							<tr>
-								<td class="details__name">
-									<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "path" .Path }}">{{ .Path }}</a>
-								</td>
-								<td class="details__count"><span class="details__percent">{{ percent .Count $sum | round 1 }}%</span> ({{ .Count }})</td>
-							</tr>
+					{{ $sum := .PageSet.YSum }}
+					<table class="table is-striped is-fullwidth details details--pages">
+						{{range $i, $ps := .PageSet }}
+							{{ if lt $i 10 }}
+								<tr>
+									<td class="details__name">
+										<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "path" .Path }}">{{ .Path }}</a>
+									</td>
+									<td class="details__count"><span class="details__percent has-text-right">{{ percent .Count $sum | round 1 }}%</span>&nbsp;({{ .Count }})</td>
+								</tr>
+							{{ end }}
 						{{ end }}
+					</table>
+				{{ else }}
+					<p>No page views yet</p>
+				{{ end }}
+			</div>
+		</section>
+	{{ end }}
+
+	<section id="countries" class="card">
+		<header class="card-header">
+			<h3 class="card-header-title">Countries</h3>
+		</header>
+		<div class="card-content">
+			{{ if .CountrySet }}
+				<figure class="figure figure--map">
+					{{ template "worldMap" .CountrySet }}
+				</figure>
+				{{ $sum := .CountrySet.YSum }}
+				<table class="table is-striped is-fullwidth details details--countries">
+					{{ range .CountrySet }}
+						<tr>
+							<td class="details__name">
+								<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "country" .Name }}">{{ .Name | countryName }}</a>
+							</td>
+							<td class="details__count"><span class="details__percent has-text-right">{{ percent .Count $sum | round 1 }}%</span>&nbsp;({{ .Count }})</td>
+						</tr>
 					{{ end }}
 				</table>
 			{{ else }}
 				<p>No page views yet</p>
 			{{ end }}
-		</section>
-	{{ end }}
-
-	<section id="countries" class="panel">
-		<header class="panel__header">
-			<h3 class="panel__title">Countries</h3>
-		</header>
-		{{ if .CountrySet }}
-			<figure class="figure figure--map">
-				{{ template "worldMap" .CountrySet }}
-			</figure>
-			{{ $sum := .CountrySet.YSum }}
-			<table class="table is-striped details details--countries">
-				{{ range .CountrySet }}
-					<tr>
-						<td class="details__name">
-							<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "country" .Name }}">{{ .Name | countryName }}</a>
-						</td>
-						<td class="details__count"><span class="details__percent">{{ percent .Count $sum | round 1 }}%</span> ({{ .Count }})</td>
-					</tr>
-				{{ end }}
-			</table>
-		{{ else }}
-			<p>No page views yet</p>
-		{{ end }}
+		</div>
 	</section>
 
-	<section id="referrers" class="panel">
-		<header class="panel__header">
-			<h3 class="panel__title">Referrers</h3>
+	<section id="referrers" class="card">
+		<header class="card-header">
+			<h3 class="card-header-title">Referrers</h3>
 		</header>
-		{{ if .ReferrerSet }}
-			<figure class="figure figure--graph">
-				{{ template "barChart" .ReferrerSet }}
-			</figure>
-			{{ $sum := .ReferrerSet.YSum }}
-			<table class="table is-striped details details--referrers">
-				{{ range .ReferrerSet }}
-					<tr>
-						<td class="details__name">{{ .Name }}</td>
-						<td class="details__count"><span class="details__percent">{{ percent .Count $sum | round 1 }}%</span> ({{ .Count }})</td>
-					</tr>
-				{{ end }}
-			</table>
-		{{ else }}
-			<p>No referrers yet</p>
-		{{ end }}
+		<div class="card-content">
+			{{ if .ReferrerSet }}
+				<figure class="figure figure--graph">
+					{{ template "barChart" .ReferrerSet }}
+				</figure>
+				{{ $sum := .ReferrerSet.YSum }}
+				<table class="table is-striped is-fullwidth details details--referrers">
+					{{ range .ReferrerSet }}
+						<tr>
+							<td class="details__name">{{ .Name }}</td>
+							<td class="details__count"><span class="details__percent has-text-right">{{ percent .Count $sum | round 1 }}%</span>&nbsp;({{ .Count }})</td>
+						</tr>
+					{{ end }}
+				</table>
+			{{ else }}
+				<p>No referrers yet</p>
+			{{ end }}
+		</div>
 	</section>
 
-	<section id="useragents" class="panel">
-		<header class="panel__header">
-			<h3 class="panel__title">User agents</h3>
+	<section id="useragents" class="card">
+		<header class="card-header">
+			<h3 class="card-header-title">User agents</h3>
 		</header>
-		{{ if .BrowserSet }}
-			<figure class="figure figure--graph">
-				<img src="{{ piechart "b" . }}" />
-				{{ template "barChart" .BrowserSet }}
-			</figure>
-			{{ $sum := .BrowserSet.YSum }}
-			<table class="table is-striped details details--browsers">
-				{{ range .BrowserSet }}
-					<tr>
-						<td class="details__name">
-							<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "browser" .Name }}">{{ .Name }}</a>
-						</td>
-						<td class="details__count"><span class="details__percent">{{ percent .Count $sum | round 1 }}%</span> ({{ .Count }})</td>
-					</tr>
-				{{ end }}
-			</table>
-		{{ else }} <p>No browsers visits yet</p>
-		{{ end }}
+		<div class="card-content">
+			{{ if .BrowserSet }}
+				<figure class="figure figure--graph">
+					<img src="{{ piechart "b" . }}" />
+					{{ template "barChart" .BrowserSet }}
+				</figure>
+				{{ $sum := .BrowserSet.YSum }}
+				<table class="table is-striped is-fullwidth details details--browsers">
+					{{ range .BrowserSet }}
+						<tr>
+							<td class="details__name">
+								<a href="/sites/{{ $siteID }}?{{ $payload.QuerySetEncode "browser" .Name }}">{{ .Name }}</a>
+							</td>
+							<td class="details__count"><span class="details__percent has-text-right">{{ percent .Count $sum | round 1 }}%</span>&nbsp;({{ .Count }})</td>
+						</tr>
+					{{ end }}
+				</table>
+			{{ else }} <p>No browsers visits yet</p>
+			{{ end }}
+		</div>
 	</section>
 {{ end }}
 
diff --git a/tmpl/site.tmpl b/tmpl/site.tmpl
index 4f94670..4f4ffc3 100644
--- a/tmpl/site.tmpl
+++ b/tmpl/site.tmpl
@@ -1,5 +1,5 @@
 {{ define "content" }}
-	<header class="header--site">
+	<header class="header header--site">
 		{{ if .Site.ID }}
 			{{ with .Site }}
 				<h1 class="title title--site">Hits for {{ .Name }}</h1>