aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFelix Hanley <felix@userspace.com.au>2020-03-31 00:31:15 +0000
committerFelix Hanley <felix@userspace.com.au>2020-03-31 00:31:15 +0000
commit74b027ce3b2c66ced134ca364cfbc249f02373ff (patch)
tree9ce4b83554d40b482f53e0d48b24b0b163067b89
parente663818e06281bbc378f0010d37e42cb676df1cb (diff)
downloadsws-74b027ce3b2c66ced134ca364cfbc249f02373ff.tar.gz
sws-74b027ce3b2c66ced134ca364cfbc249f02373ff.tar.bz2
Simplify styling
-rw-r--r--cmd/server/site.go2
-rw-r--r--sass/main.scss48
-rw-r--r--tmpl/filter.tmpl8
-rw-r--r--tmpl/hitView.tmpl194
-rw-r--r--tmpl/site.tmpl2
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>