add-in non-functional UI components

assets/src/js/components/Gearwheel.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import { h, Component } from 'preact';
+import Client from '../lib/client.js';
+import { bind } from 'decko';
+
+class Gearwheel extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+      this.fetchData();
+  }
+
+  componentWillUnmount() {
+      
+  }
+
+  @bind
+  fetchData() {
+   
+  }
+
+  render(props, state) {
+    return (
+        <li class="settings">
+            <a href="#"><svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M444.788 291.1l42.616 24.599c4.867 2.809 7.126 8.618 5.459 13.985-11.07 35.642-29.97 67.842-54.689 94.586a12.016 12.016 0 0 1-14.832 2.254l-42.584-24.595a191.577 191.577 0 0 1-60.759 35.13v49.182a12.01 12.01 0 0 1-9.377 11.718c-34.956 7.85-72.499 8.256-109.219.007-5.49-1.233-9.403-6.096-9.403-11.723v-49.184a191.555 191.555 0 0 1-60.759-35.13l-42.584 24.595a12.016 12.016 0 0 1-14.832-2.254c-24.718-26.744-43.619-58.944-54.689-94.586-1.667-5.366.592-11.175 5.459-13.985L67.212 291.1a193.48 193.48 0 0 1 0-70.199l-42.616-24.599c-4.867-2.809-7.126-8.618-5.459-13.985 11.07-35.642 29.97-67.842 54.689-94.586a12.016 12.016 0 0 1 14.832-2.254l42.584 24.595a191.577 191.577 0 0 1 60.759-35.13V25.759a12.01 12.01 0 0 1 9.377-11.718c34.956-7.85 72.499-8.256 109.219-.007 5.49 1.233 9.403 6.096 9.403 11.723v49.184a191.555 191.555 0 0 1 60.759 35.13l42.584-24.595a12.016 12.016 0 0 1 14.832 2.254c24.718 26.744 43.619 58.944 54.689 94.586 1.667 5.366-.592 11.175-5.459 13.985L444.788 220.9a193.485 193.485 0 0 1 0 70.2zM336 256c0-44.112-35.888-80-80-80s-80 35.888-80 80 35.888 80 80 80 80-35.888 80-80z"></path></svg></a>
+        </li>
+    )
+  }
+}
+
+export default Gearwheel

assets/src/js/components/SiteSettings.js

@@ -0,0 +1,76 @@
+'use strict';
+
+import { h, Component } from 'preact';
+import Client from '../lib/client.js';
+import { bind } from 'decko';
+
+class SiteSettings extends Component {
+
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    componentDidMount() {
+        this.fetchData();
+    }
+
+    componentWillUnmount() {
+
+    }
+
+    @bind
+    fetchData() {
+
+    }
+
+    @bind 
+    onSubmit(evt) {
+        console.log(evt)
+    }
+
+    render(props, state) {
+        return (
+            <div class="modal-wrap" style={"display: " + ( props.visible ? '' : 'none')}>
+                <div class="modal">
+                    <p>Update your site name or get your tracking code</p>
+                    <form onSubmit={this.onSubmit}>
+                        <fieldset>
+                            <label>Site Name</label>
+                            <input type="text" name="site-name" id="sitename" placeholder="" value="Paul Jarvis" />
+                        </fieldset>
+
+                        <fieldset>
+                            <label>Add this code to your website</label>
+                            <textarea onclick={(evt) => evt.target.select() } readonly="readonly">{`<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
+<script>
+(function(f, a, t, h, o, m){
+	a[h]=a[h]||function(){
+		(a[h].q=a[h].q||[]).push(arguments)
+	};
+	o=f.createElement('script'),
+	m=f.getElementsByTagName('script')[0];
+	o.async=1; o.src=t; o.id='fathom-script';
+	m.parentNode.insertBefore(o,m)
+})(document, window, '//stats.usefathom.com/tracker.js', 'fathom');
+fathom('trackPageview');
+</script>
+<!-- / Fathom -->`}
+                            </textarea>
+                            <small><a href="#">Copy code</a></small>
+                        </fieldset>
+
+                        <fieldset>
+                            <div class="half">
+                                <div class="submit"><button type="submit">Update site name</button></div>
+                                <div class="delete"><a href="#">Delete site</a></div>
+                            </div>
+                        </fieldset>
+                    </form>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default SiteSettings

assets/src/js/components/SiteSwitcher.js

@@ -0,0 +1,39 @@
+'use strict';
+
+import { h, Component } from 'preact';
+import Client from '../lib/client.js';
+import { bind } from 'decko';
+
+class SiteSwitcher extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = {}
+  }
+
+  componentDidMount() {
+      this.fetchData();
+  }
+
+  componentWillUnmount() {
+      
+  }
+
+  @bind
+  fetchData() {
+   
+  }
+
+  render(props, state) {
+    return (
+        <li class="sites">
+            <a href="#">Current site</a>
+            <ul>
+                <li class="add-new"><a href="#">+ Add another site</a></li>
+            </ul>
+        </li>
+    )
+  }
+}
+
+export default SiteSwitcher

assets/src/js/pages/dashboard.js

@@ -5,6 +5,9 @@ import LogoutButton from '../components/LogoutButton.js';
 import Realtime from '../components/Realtime.js';
 import DatePicker from '../components/DatePicker.js';
 import Sidebar from '../components/Sidebar.js';
+import SiteSwitcher from '../components/SiteSwitcher.js';
+import SiteSettings from '../components/SiteSettings.js';
+import Gearwheel from '../components/Gearwheel.js';
 import Table from '../components/Table.js';
 import Chart from '../components/Chart.js';
 import { bind } from 'decko';
@@ -41,8 +44,9 @@ class Dashboard extends Component {
         <nav class="main-nav animated fadeInDown">
             <ul>
               <li class="logo"><a href="/">Fathom</a></li>
+              <SiteSwitcher />
+              <Gearwheel />
               <li class="visitors"><Realtime /></li>
-              {logoutMenuItem}
           </ul>
         </nav>
       </header>
@@ -74,6 +78,8 @@ class Dashboard extends Component {
       </section>
 
       <footer class="section"></footer>
+
+      <SiteSettings visible={false} site={{ name: "Test", id: 50}} />
     </div>
   )}
 }

assets/src/sass/styles.scss

@@ -15,10 +15,24 @@ font size   12, 16, 64
 
 ::selection       { background: #a0ffd1; }
 ::-moz-selection  { background: #a0ffd1; }
-*{ box-sizing: border-box; }
+* {
+
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  list-style: none;
+  box-sizing: border-box;
+  text-decoration: none;
+  font-size: 100%;
+  vertical-align: baseline;
+  line-height: 1.2;
+
+}
 html, body, #root { height: 100%; }
 body { overflow-y: scroll; }
 
+
 html {}
 body { 
   font: 400 16px/1 'overpass', sans-serif; 
@@ -60,11 +74,11 @@ body {
   .box-totals { background: #46494d; color: #fff; padding: 24px 16px 0 16px; }
   .box-pages, .box-referrers, .box-graph { background: #fff; }
 
-  nav.main-nav ul { width: 100%; text-align: right; margin-top: 4px; margin-bottom: 0; padding: 0; }
+  nav.main-nav ul { width: 100%; margin-top: 4px; margin-bottom: 0; padding: 0; }
   nav li { display: inline-block; }
   nav li a { transition: color .2s ease; position: relative; display: inline-block; padding: 0 8px 0 0; }
-  nav.main-nav li a { padding: 6px 8px 6px 0; }
   nav li a:hover { color: #98a0a6; }
+  .main-nav ul li { padding: 8px 0; }
 
   .date-nav ul { padding: 0; margin: 0; font-size: 12px; text-transform: uppercase; }
   .date-nav li, 
@@ -151,7 +165,41 @@ body {
   a { color: #46494d; text-decoration: none; transition: all .4s ease; }
   .cell a:hover { color: #533feb; }
 
+  /* site switcher */
+  nav li.sites { font-size: 12px; margin-left: 12px; background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#533feb' d='M151.5 347.8L3.5 201c-4.7-4.7-4.7-12.3 0-17l19.8-19.8c4.7-4.7 12.3-4.7 17 0L160 282.7l119.7-118.5c4.7-4.7 12.3-4.7 17 0l19.8 19.8c4.7 4.7 4.7 12.3 0 17l-148 146.8c-4.7 4.7-12.3 4.7-17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; border-radius: 4px; padding: 8px; background-size: 10px auto; }
+  nav li.sites:hover { background: #533feb url("data:image/svg+xml;charset=utf8,%3Csvg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='#fff' d='M168.5 164.2l148 146.8c4.7 4.7 4.7 12.3 0 17l-19.8 19.8c-4.7 4.7-12.3 4.7-17 0L160 229.3 40.3 347.8c-4.7 4.7-12.3 4.7-17 0L3.5 328c-4.7-4.7-4.7-12.3 0-17l148-146.8c4.7-4.7 12.3-4.7 17 0z'%3E%3C/path%3E%3C/svg%3E") 97% 8px no-repeat; background-size: 10px auto; }
+  nav li.sites ul { display: none; position: absolute; z-index: 1001; width: 100%; background: #533feb; border-radius: 4px; padding: 8px 0; margin: 0 0 0 -8px; }
+  nav li.sites:hover ul { display: block; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); }
+  nav li.sites:hover a { color: #fff; }
+  nav li.sites ul li { padding: 0 4px; width: 100%; }
+  nav li.sites ul a { color: #ddd; display: inline-block; width: 100%; font-size: 13px; padding: 4px; }
+  nav li.sites ul a:hover { background: rgba(255,255,255,.2); border-radius: 2px; }
+  nav li.sites ul li.add-new a { color: #88ffc6 !important; }
+
+/* gearwheel */
+  nav .settings svg { width: 16px; display: inline-block; transition: ease all .2s; }
+  nav .settings svg path { fill: #533feb; }
+  nav .settings svg:hover { transform: rotate(45deg); }			
+
+  /* modal */
+  .modal-wrap { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: 1977; background: rgba(20,20,20,.8); display: grid; grid-template-columns: 1fr; align-items: center; }
+  .modal { max-width: 420px; margin: 0 auto; text-align: left; background: #fff; z-index: 1978; height: auto; border-radius: 4px; box-shadow: 0 2px 8px 0 rgba(34,34,34,.10); overflow: hidden; }
+  .modal p { padding: 16px; font-size: 12px; color: #aaa; }
+  
+  small { font-size: 12px; color: #aaa; }
+  small a { color: #aaa; }
+  
+  .modal form { padding: 0 16px; }
+  .modal label { padding: 4px 0; display: block; }
+  .modal fieldset { padding: 0; display: block; width: 100%; margin-bottom: 32px; }
+  .modal fieldset:last-child { margin-bottom: 16px; }
+  .modal input, textarea { background: #f5f7fa; padding: 4px; width: 100%; display: block; font: 400 16px "overpass", sans-serif; color: #222; border-bottom: 2px solid #e6e8eb; }
+  .modal textarea { font-size: 12px; min-height: 120px; resize: none; overflow-y: scroll; }
+  .modal button { background: #88ffc6; color: #222; padding: 4px 16px; font: 400 16px "overpass", sans-serif; cursor: pointer; border-radius: 4px; }
+  .modal div.delete a { color: #533feb; }
+
   @media ( min-width: 1220px ) {
+
     nav.main-nav ul { margin-top: 24px; }
     .hide-on-mobile{ display: initial; }
 
@@ -180,6 +228,16 @@ body {
 
     .totals-detail { width: 100%; }
     .total-numbers { font-size: 64px; }
+
+    .half { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; align-items: center; }
+		.half div { text-align: right; }
+		.half div.submit { text-align: left; }
+
+    nav li { display: inline-block; position: relative; margin-right: 16px; }
+    nav li.sites { width: 204px; margin-right: 0; }
+    nav li.sites, nav li.settings, nav li.visitors { float: right; }
+    nav li.sites, nav li.sites:hover { background-position: 184px 8px; }
+  
   }
 
   @media( max-width: 600px ) {
@@ -187,7 +245,6 @@ body {
   }
 }
 
-
 .login-page{
   
   &.flex-rapper { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }