general styling improvements

api/api.go

@@ -14,6 +14,7 @@ type Datapoint struct {
 }
 
 var defaultPeriod = 7
+var defaultLimit = 10
 
 // log fatal errors
 func checkError(err error) {

api/browsers.go

@@ -30,10 +30,10 @@ var GetBrowsersHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.Re
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY) AND browser_name IS NOT NULL
     GROUP BY browser_name
     ORDER BY count DESC
-    LIMIT 10`)
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 

api/countries.go

@@ -30,10 +30,10 @@ var GetCountriesHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY) AND country IS NOT NULL
     GROUP BY country
     ORDER BY count DESC
-    LIMIT 10`)
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 

api/languages.go

@@ -27,11 +27,12 @@ var GetLanguagesHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY browser_language
-    ORDER BY count DESC`)
+    ORDER BY count DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
 
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 

api/pageviews.go

@@ -18,11 +18,12 @@ var GetPageviewsHandler = http.HandlerFunc(func(w http.ResponseWriter, r *http.R
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY path
-    ORDER BY pageviews DESC`)
+    ORDER BY pageviews DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
 
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 

api/screen-resolutions.go

@@ -29,10 +29,11 @@ var GetScreenResolutionsHandler = http.HandlerFunc(func(w http.ResponseWriter, r
     FROM visits
     WHERE timestamp >= DATE_SUB(CURRENT_TIMESTAMP, INTERVAL ? DAY)
     GROUP BY screen_resolution
-    ORDER BY count DESC`)
+    ORDER BY count DESC
+    LIMIT ?`)
   checkError(err)
   defer stmt.Close()
-  rows, err := stmt.Query(period)
+  rows, err := stmt.Query(period, defaultLimit)
   checkError(err)
   defer rows.Close()
 

assets/js/components/HeaderBar.js

@@ -0,0 +1,22 @@
+'use strict'
+
+import { h, render, Component } from 'preact';
+import LogoutButton from '../components/LogoutButton.js';
+
+class HeaderBar extends Component {
+  render() {
+    const rightContent = this.props.showLogout ? <LogoutButton onSuccess={this.props.onLogout} /> : '';
+
+    return (
+      <header class="header-bar cf">
+        <div class="container">
+          <h1 class="pull-left title">Ana <small class="subtitle">open web analytics</small></h1>
+          <div class="pull-right">
+              {rightContent}
+          </div>
+        </div>
+      </header>
+  )}
+}
+
+export default HeaderBar

assets/js/components/LoginForm.js

@@ -40,11 +40,11 @@ class LoginForm extends Component {
         <form method="POST" onSubmit={this.handleSubmit}>
           <div class="small-margin">
             <label>Email address</label>
-            <input type="email" name="email" onChange={this.linkState('email')} required="required" />
+            <input type="email" name="email" placeholder="Email address" onChange={this.linkState('email')} required="required" />
           </div>
           <div class="small-margin">
             <label>Password</label>
-            <input type="password" name="password" onChange={this.linkState('password')} required="required" />
+            <input type="password" name="password" placeholder="**********" onChange={this.linkState('password')} required="required" />
           </div>
           <div class="small-margin">
             <input type="submit" value="Sign in" />

assets/js/pages/dashboard.js

@@ -1,12 +1,12 @@
 'use strict'
 
 import { h, render, Component } from 'preact';
-import LogoutButton from '../components/LogoutButton.js';
 import Pageviews from '../components/Pageviews.js';
 import Realtime from '../components/Realtime.js';
 import Graph from '../components/Graph.js';
 import DatePicker from '../components/DatePicker.js';
 import Table from '../components/Table.js';
+import HeaderBar from '../components/HeaderBar.js';
 
 class Dashboard extends Component {
   constructor(props) {
@@ -20,14 +20,7 @@ class Dashboard extends Component {
   render() {
     return (
     <div>
-      <header class="header-bar cf">
-        <div class="container">
-          <h1 class="pull-left title">Ana <small class="subtitle">open web analytics</small></h1>
-          <div class="pull-right">
-            <LogoutButton onSuccess={this.props.onLogout} />
-          </div>
-        </div>
-      </header>
+      <HeaderBar showLogout={true} onLogout={this.props.onLogout} />
       <div class="container">
         <Realtime />
         <div class="clear">

assets/js/pages/login.js

@@ -2,15 +2,16 @@
 
 import { h, render, Component } from 'preact';
 import LoginForm from '../components/LoginForm.js';
+import HeaderBar from '../components/HeaderBar.js';
 
 class Login extends Component {
   render() {
     return (
-      <div class="container">
-        <header class="header cf">
-          <h1 class="pull-left">Ana <small>open web analytics</small></h1>
-        </header>
-        <LoginForm onSuccess={this.props.onLogin} />
+      <div>
+        <HeaderBar showLogout={false} />
+        <div class="container">
+          <LoginForm onSuccess={this.props.onLogin} />
+        </div>
       </div>
     )
   }

assets/sass/_forms.scss

@@ -0,0 +1,37 @@
+label {
+  font-weight: bold;
+  display: block;
+  margin-bottom: 2px;
+}
+
+input {
+  padding: 8px;
+  border: 1px solid #999;
+  min-width: 260px;
+
+  &:focus {
+    border: 1px solid #33C3F0;
+    outline: 0;
+  }
+}
+
+button,
+input[type="submit"],
+input[type="button"],
+.button {
+  min-width: auto;
+  padding: 10px 20px;
+  cursor: pointer;
+
+  border: 0;
+  color: white;
+  background: #09F;
+  font-weight: bold;
+
+
+  &.active,
+  &:hover,
+  &:focus {
+    background: darken( #09F, 20%)
+  }
+}

assets/sass/styles.scss

@@ -1,6 +1,7 @@
 @import "normalize";
 @import "util";
 @import "grid";
+@import "forms";
 
 body {
   font-family: Raleway, HelveticaNeue, "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -43,24 +44,6 @@ a {
   }
 }
 
-label {
-  display: block;
-}
-
-input {
-  padding: 8px;
-}
-
-button,
-input[type="submit"] {
-  padding: 8px;
-  cursor: pointer;
-
-  &.active {
-    border: 2px solid black;
-  }
-}
-
 .container {
   max-width: 1020px;
   padding: 0 20px;

gulpfile.js

@@ -40,5 +40,5 @@ gulp.task('sass', function () {
 
 gulp.task('watch', ['default'], function() {
   gulp.watch(['./assets/js/**/*.js'], ['browserify'] );
-  gulp.watch(['./assets/sass/*.scss'], ['sass'] );
+  gulp.watch(['./assets/sass/**/*.scss'], ['sass'] );
 });