From a46f55e50e9cf6fc15086677a366cdeda4ca7003 Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 16 Mar 2017 08:22:07 +0000
Subject: [PATCH 1/5] #22: This isn't even nearly working...

But it's starting to work!
---
 resources/public/css/yyy-static.css |  4 ++--
 resources/templates/home.html       | 28 ++++++++++++++++++-------
 src/cljs/youyesyet/core.cljs        | 32 +++++++++++++++++++++--------
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-static.css
index 0587468..a61993e 100644
--- a/resources/public/css/yyy-static.css
+++ b/resources/public/css/yyy-static.css
@@ -160,7 +160,7 @@ th {
 #main-container{
 }
 
-#back-link {
+#back-link, .back-link {
   min-width: 8em;
   padding: 0.25em 1em;
   background-color: gray;
@@ -170,7 +170,7 @@ th {
   border-bottom-right-radius: 0.5em;
 }
 
-#back-link:hover, #back-link:active {
+#back-link:hover, #back-link:active, .back-link:hover, .back-link:active, {
   text-decoration: none;
   background-color: rgb(160, 160, 160);
 }
diff --git a/resources/templates/home.html b/resources/templates/home.html
index 31a313d..37db8b6 100644
--- a/resources/templates/home.html
+++ b/resources/templates/home.html
@@ -1,11 +1,29 @@
 <!DOCTYPE html>
 <html>
   <head>
-      <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
-      <meta name="viewport" content="width=device-width, initial-scale=1">
-      <title>Welcome to YouYesYet</title>
+    <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" type="text/css" href="css/yyy-static.css" />
+    <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Archivo+Narrow" rel="stylesheet"/>
+    <title>You Yes Yet?</title>
   </head>
   <body>
+    <header>
+      <div id="nav">
+        <img id="nav-icon" src="img/threelines.png" alt="Menu"/>
+        <menu id="nav-menu" class="nav">
+          <li class=""><a href="index.html">Home</a></li>
+          <li class=""><a href="library.html">Library</a></li>
+          <li class=""><a href="register.html">Register</a></li>
+          <li class=""><a href="login.html">Login</a></li>
+          <li class=""><a href="about.html">About</a></li>
+        </menu>
+      </div>
+
+      <h1>
+        You yes yet?
+      </h1>
+    </header>
 
     <div id="app">
       <div class="container-fluid">
@@ -29,10 +47,6 @@
     </div>
 
     <!-- scripts and styles -->
-    {% script "/vendor/leaflet/dist/leaflet.js" %}
-    {% style "/assets/bootstrap/css/bootstrap.min.css" %}
-    {% style "/assets/font-awesome/css/font-awesome.min.css" %}
-    {% style "/css/screen.css" %}
 
     <script type="text/javascript">
         var context = "{{servlet-context}}";
diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs
index f6f5717..5976bd3 100644
--- a/src/cljs/youyesyet/core.cljs
+++ b/src/cljs/youyesyet/core.cljs
@@ -27,29 +27,43 @@
       {:on-click #(swap! collapsed? not)} "☰"]
      [:div.collapse.navbar-toggleable-xs
       (when-not @collapsed? {:class "in"})
-      [:a.navbar-brand {:href "#/"} "youyesyet"]
+      [:a.navbar-brand {:href "#/"} "You yes yet?"]
       [:ul.nav.navbar-nav
        [nav-link "#/" "Home" :home collapsed?]
        [nav-link "#/map" "Map" :home collapsed?]
        [nav-link "#/about" "About" :about collapsed?]]]]))
 
+
+(defn back-link []
+  [:div.back-link-container {:id ":div.back-link-container"}
+   [:a {:href "javascript:history.back()" :id "back-link"} "Back"]])
+
+(defn big-link [text target]
+  [:div.big-link-container
+   [:a.big-link {:href target} text]])
+
 (defn about-page []
-  [:div.container
+  [:div.container {:id "main-container"}
+   (back-link)
+   (big-link "Map" "#/map")
    [:div.row
     [:div.col-md-12
      "this is the story of youyesyet... work in progress"]]])
 
 (defn home-page []
-  [:div.container
+  [:div.container {:id "main-container"}
+   (back-link)
+   (big-link "Map" "#/map")
+   (big-link "About" "#/about")
    [:div.jumbotron
     [:h1 "Welcome to youyesyet"]
     [:p "Time to start building your site!"]
-    [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more »"]]]
-   (when-let [docs @(rf/subscribe [:docs])]
-     [:div.row
-      [:div.col-md-12
-       [:div {:dangerouslySetInnerHTML
-              {:__html (md->html docs)}}]]])])
+    [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more »"]]]])
+;;    (when-let [docs @(rf/subscribe [:docs])]
+;;      [:div.row
+;;       [:div.col-md-12
+;;        [:div {:dangerouslySetInnerHTML
+;;               {:__html (md->html docs)}}]]])])
 
 (defn map-page []
   (maps/map-div))

From 6b9e315b2fff555179e5ae37bca95cf9f1f3844e Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 16 Mar 2017 19:27:08 +0000
Subject: [PATCH 2/5] Dynamic site now looks very like the dummy...

But the phone menu isn't working nicely yet.
---
 resources/public/css/yyy-static.css | 12 +++++++++--
 resources/templates/home.html       | 16 --------------
 src/cljs/youyesyet/core.cljs        | 33 +++++++++++++++++++----------
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-static.css
index a61993e..4b59f3b 100644
--- a/resources/public/css/yyy-static.css
+++ b/resources/public/css/yyy-static.css
@@ -23,6 +23,14 @@
  * ## html elements generally in alphabetic order
  */
 
+a {
+  color: silver;
+}
+
+a:hover, a:active {
+  color: white;
+}
+
 body {
   font-family: "Archivo Narrow", "Helvetica", "Sans", sans-serif;
   background-color: rgb( 50, 109, 177);
@@ -430,7 +438,7 @@ th {
   }
 
   #nav menu li {
-    padding: 0.5em;
+    padding: 0.5em 2em 0.5em 0.5em;
     margin: 0.5 em;
     font-size: 150%;
   }
@@ -511,7 +519,7 @@ th {
   }
 
   #nav menu li {
-    padding: 0.5em;
+    padding: 0.5em 2em 0.5em 0.5em;
     margin: 0.5 em;
     font-size: 150%;
   }
diff --git a/resources/templates/home.html b/resources/templates/home.html
index 37db8b6..e282017 100644
--- a/resources/templates/home.html
+++ b/resources/templates/home.html
@@ -8,22 +8,6 @@
     <title>You Yes Yet?</title>
   </head>
   <body>
-    <header>
-      <div id="nav">
-        <img id="nav-icon" src="img/threelines.png" alt="Menu"/>
-        <menu id="nav-menu" class="nav">
-          <li class=""><a href="index.html">Home</a></li>
-          <li class=""><a href="library.html">Library</a></li>
-          <li class=""><a href="register.html">Register</a></li>
-          <li class=""><a href="login.html">Login</a></li>
-          <li class=""><a href="about.html">About</a></li>
-        </menu>
-      </div>
-
-      <h1>
-        You yes yet?
-      </h1>
-    </header>
 
     <div id="app">
       <div class="container-fluid">
diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs
index 5976bd3..ffb21f3 100644
--- a/src/cljs/youyesyet/core.cljs
+++ b/src/cljs/youyesyet/core.cljs
@@ -12,6 +12,7 @@
             [youyesyet.views.map :as maps])
   (:import goog.History))
 
+
 (defn nav-link [uri title page collapsed?]
   (let [selected-page (rf/subscribe [:page])]
     [:li.nav-item
@@ -20,28 +21,31 @@
       {:href uri
        :on-click #(reset! collapsed? true)} title]]))
 
+
 (defn navbar []
   (r/with-let [collapsed? (r/atom true)]
-    [:nav.navbar.navbar-light.bg-faded
-     [:button.navbar-toggler.hidden-sm-up
-      {:on-click #(swap! collapsed? not)} "☰"]
-     [:div.collapse.navbar-toggleable-xs
-      (when-not @collapsed? {:class "in"})
-      [:a.navbar-brand {:href "#/"} "You yes yet?"]
-      [:ul.nav.navbar-nav
-       [nav-link "#/" "Home" :home collapsed?]
-       [nav-link "#/map" "Map" :home collapsed?]
-       [nav-link "#/about" "About" :about collapsed?]]]]))
+    [:div {:id "nav"}
+     [:img {:id "nav-icon"
+            :src "img/threelines.png"
+            :on-click #(swap! collapsed? not)}]
+     [:menu.nav (merge {:id "nav-menu"} (when @collapsed? {:class "fred"}))
+      (nav-link "#/" "Home" :home collapsed?)
+      (nav-link "#/library" "Library" :library collapsed?)
+      (nav-link "#/register" "Register" :register collapsed?)
+      (nav-link "#/login" "Login" :login collapsed?)
+      (nav-link "#/about" "About" :about collapsed?)]]))
 
 
 (defn back-link []
-  [:div.back-link-container {:id ":div.back-link-container"}
+  [:div.back-link-container {:id "back-link-container"}
    [:a {:href "javascript:history.back()" :id "back-link"} "Back"]])
 
+
 (defn big-link [text target]
   [:div.big-link-container
    [:a.big-link {:href target} text]])
 
+
 (defn about-page []
   [:div.container {:id "main-container"}
    (back-link)
@@ -50,6 +54,7 @@
     [:div.col-md-12
      "this is the story of youyesyet... work in progress"]]])
 
+
 (defn home-page []
   [:div.container {:id "main-container"}
    (back-link)
@@ -75,7 +80,9 @@
 
 (defn page []
   [:div
+  [:header
    [navbar]
+    [:h1 "You yes yet?"]]
    [(pages @(rf/subscribe [:page]))]])
 
 ;; -------------------------
@@ -88,6 +95,10 @@
 (secretary/defroute "/about" []
   (rf/dispatch [:set-active-page :about]))
 
+
+(secretary/defroute "/map" []
+  (rf/dispatch [:set-active-page :map]))
+
 ;; -------------------------
 ;; History
 ;; must be called after routes have been defined

From b4618a43119b06189d95dcdc8e173ceedf854a7e Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 16 Mar 2017 19:39:27 +0000
Subject: [PATCH 3/5] Look-and-feel of dynamic pages now very good

---
 resources/public/css/yyy-static.css | 18 ++++++++++--------
 src/cljs/youyesyet/core.cljs        |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-static.css
index 4b59f3b..752c752 100644
--- a/resources/public/css/yyy-static.css
+++ b/resources/public/css/yyy-static.css
@@ -471,6 +471,14 @@ th {
     text-align: right;
   }
 
+  .hidden {
+    display: none;
+  }
+
+  .shown {
+    display: block;
+  }
+
   /* content of the current in the Wiki - editable, provided by users. Within main-container */
   #content {
     border: thin solid silver;
@@ -504,18 +512,12 @@ th {
     font-weight: bold;
   }
 
-  #nav:hover #nav-menu, #nav:hover #phone-side-bar {
-    display: block;
-    list-style-type: none;
-    width: 100%;
-  }
-
   #nav-icon {
     padding: 0;
   }
 
-  #nav-menu, #phone-side-bar {
-    display: none;
+  #nav-menu {
+    list-style-type: none;
   }
 
   #nav menu li {
diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs
index ffb21f3..e123de0 100644
--- a/src/cljs/youyesyet/core.cljs
+++ b/src/cljs/youyesyet/core.cljs
@@ -28,7 +28,7 @@
      [:img {:id "nav-icon"
             :src "img/threelines.png"
             :on-click #(swap! collapsed? not)}]
-     [:menu.nav (merge {:id "nav-menu"} (when @collapsed? {:class "fred"}))
+     [:menu.nav {:id "nav-menu" :class (if @collapsed? "hidden" "shown")}
       (nav-link "#/" "Home" :home collapsed?)
       (nav-link "#/library" "Library" :library collapsed?)
       (nav-link "#/register" "Register" :register collapsed?)

From 59378b5a5fa14d55d790765c631c91307b429d39 Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 16 Mar 2017 21:16:07 +0000
Subject: [PATCH 4/5] Very pleased with this

All the basic bits work; startup spinner is very neat.
---
 resources/public/css/spinner.css    | 135 ++++++++++++++++++++++++++++
 resources/public/css/yyy-static.css |   3 +
 resources/templates/home.html       |  35 ++++----
 src/cljs/youyesyet/core.cljs        |  16 ++--
 4 files changed, 164 insertions(+), 25 deletions(-)
 create mode 100644 resources/public/css/spinner.css

diff --git a/resources/public/css/spinner.css b/resources/public/css/spinner.css
new file mode 100644
index 0000000..ffc7daa
--- /dev/null
+++ b/resources/public/css/spinner.css
@@ -0,0 +1,135 @@
+.sk-fading-circle {
+  margin: 100px auto;
+  width: 40px;
+  height: 40px;
+  position: relative;
+}
+
+.sk-fading-circle .sk-circle {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.sk-fading-circle .sk-circle:before {
+  content: '';
+  display: block;
+  margin: 0 auto;
+  width: 15%;
+  height: 15%;
+  background-color: white;
+  border-radius: 100%;
+  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
+}
+.sk-fading-circle .sk-circle2 {
+  -webkit-transform: rotate(30deg);
+      -ms-transform: rotate(30deg);
+          transform: rotate(30deg);
+}
+.sk-fading-circle .sk-circle3 {
+  -webkit-transform: rotate(60deg);
+      -ms-transform: rotate(60deg);
+          transform: rotate(60deg);
+}
+.sk-fading-circle .sk-circle4 {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+          transform: rotate(90deg);
+}
+.sk-fading-circle .sk-circle5 {
+  -webkit-transform: rotate(120deg);
+      -ms-transform: rotate(120deg);
+          transform: rotate(120deg);
+}
+.sk-fading-circle .sk-circle6 {
+  -webkit-transform: rotate(150deg);
+      -ms-transform: rotate(150deg);
+          transform: rotate(150deg);
+}
+.sk-fading-circle .sk-circle7 {
+  -webkit-transform: rotate(180deg);
+      -ms-transform: rotate(180deg);
+          transform: rotate(180deg);
+}
+.sk-fading-circle .sk-circle8 {
+  -webkit-transform: rotate(210deg);
+      -ms-transform: rotate(210deg);
+          transform: rotate(210deg);
+}
+.sk-fading-circle .sk-circle9 {
+  -webkit-transform: rotate(240deg);
+      -ms-transform: rotate(240deg);
+          transform: rotate(240deg);
+}
+.sk-fading-circle .sk-circle10 {
+  -webkit-transform: rotate(270deg);
+      -ms-transform: rotate(270deg);
+          transform: rotate(270deg);
+}
+.sk-fading-circle .sk-circle11 {
+  -webkit-transform: rotate(300deg);
+      -ms-transform: rotate(300deg);
+          transform: rotate(300deg);
+}
+.sk-fading-circle .sk-circle12 {
+  -webkit-transform: rotate(330deg);
+      -ms-transform: rotate(330deg);
+          transform: rotate(330deg);
+}
+.sk-fading-circle .sk-circle2:before {
+  -webkit-animation-delay: -1.1s;
+          animation-delay: -1.1s;
+}
+.sk-fading-circle .sk-circle3:before {
+  -webkit-animation-delay: -1s;
+          animation-delay: -1s;
+}
+.sk-fading-circle .sk-circle4:before {
+  -webkit-animation-delay: -0.9s;
+          animation-delay: -0.9s;
+}
+.sk-fading-circle .sk-circle5:before {
+  -webkit-animation-delay: -0.8s;
+          animation-delay: -0.8s;
+}
+.sk-fading-circle .sk-circle6:before {
+  -webkit-animation-delay: -0.7s;
+          animation-delay: -0.7s;
+}
+.sk-fading-circle .sk-circle7:before {
+  -webkit-animation-delay: -0.6s;
+          animation-delay: -0.6s;
+}
+.sk-fading-circle .sk-circle8:before {
+  -webkit-animation-delay: -0.5s;
+          animation-delay: -0.5s;
+}
+.sk-fading-circle .sk-circle9:before {
+  -webkit-animation-delay: -0.4s;
+          animation-delay: -0.4s;
+}
+.sk-fading-circle .sk-circle10:before {
+  -webkit-animation-delay: -0.3s;
+          animation-delay: -0.3s;
+}
+.sk-fading-circle .sk-circle11:before {
+  -webkit-animation-delay: -0.2s;
+          animation-delay: -0.2s;
+}
+.sk-fading-circle .sk-circle12:before {
+  -webkit-animation-delay: -0.1s;
+          animation-delay: -0.1s;
+}
+
+@-webkit-keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
+
+@keyframes sk-circleFadeDelay {
+  0%, 39%, 100% { opacity: 0; }
+  40% { opacity: 1; }
+}
diff --git a/resources/public/css/yyy-static.css b/resources/public/css/yyy-static.css
index 752c752..515088f 100644
--- a/resources/public/css/yyy-static.css
+++ b/resources/public/css/yyy-static.css
@@ -316,6 +316,9 @@ th {
   color: white;
 }
 
+.splash-screen {
+}
+
 .warn {
   color: maroon;
 }
diff --git a/resources/templates/home.html b/resources/templates/home.html
index e282017..c0b6d43 100644
--- a/resources/templates/home.html
+++ b/resources/templates/home.html
@@ -4,30 +4,33 @@
     <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" type="text/css" href="css/yyy-static.css" />
+    <link rel="stylesheet" type="text/css" href="css/spinner.css" />
     <link href="https://fonts.googleapis.com/css?family=Archivo+Black|Archivo+Narrow" rel="stylesheet"/>
     <title>You Yes Yet?</title>
   </head>
   <body>
 
     <div id="app">
-      <div class="container-fluid">
-        <div class="card-deck">
-          <div class="card-block">
-            <h4>Welcome to YouYesYet</h4>
-            <p>If you're seeing this message, that means you haven't yet compiled your ClojureScript!</p>
-            <p>Please run <code>lein figwheel</code> to start the ClojureScript compiler and reload the page.</p>
-            <h4>For better ClojureScript development experience in Chrome follow these steps:</h4>
-            <ul>
-              <li>Open DevTools
-              <li>Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > General > Console)
-              <li>Check-in "Enable custom formatters"
-              <li>Close DevTools
-              <li>Open DevTools
-            </ul>
-            <p>See <a href="http://www.luminusweb.net/docs/clojurescript.md">ClojureScript</a> documentation for further details.</p>
-          </div>
+      <div class="splash-screen">
+        <div class="sk-fading-circle">
+          <div class="sk-circle1 sk-circle"></div>
+          <div class="sk-circle2 sk-circle"></div>
+          <div class="sk-circle3 sk-circle"></div>
+          <div class="sk-circle4 sk-circle"></div>
+          <div class="sk-circle5 sk-circle"></div>
+          <div class="sk-circle6 sk-circle"></div>
+          <div class="sk-circle7 sk-circle"></div>
+          <div class="sk-circle8 sk-circle"></div>
+          <div class="sk-circle9 sk-circle"></div>
+          <div class="sk-circle10 sk-circle"></div>
+          <div class="sk-circle11 sk-circle"></div>
+          <div class="sk-circle12 sk-circle"></div>
         </div>
       </div>
+      <p class="footer">
+        You Yes Yet is loading.
+        You must enable JavaScript to use the You Yes Yet app.
+      </p>
     </div>
 
     <!-- scripts and styles -->
diff --git a/src/cljs/youyesyet/core.cljs b/src/cljs/youyesyet/core.cljs
index e123de0..ebd579d 100644
--- a/src/cljs/youyesyet/core.cljs
+++ b/src/cljs/youyesyet/core.cljs
@@ -49,7 +49,6 @@
 (defn about-page []
   [:div.container {:id "main-container"}
    (back-link)
-   (big-link "Map" "#/map")
    [:div.row
     [:div.col-md-12
      "this is the story of youyesyet... work in progress"]]])
@@ -57,18 +56,16 @@
 
 (defn home-page []
   [:div.container {:id "main-container"}
-   (back-link)
-   (big-link "Map" "#/map")
    (big-link "About" "#/about")
    [:div.jumbotron
     [:h1 "Welcome to youyesyet"]
     [:p "Time to start building your site!"]
     [:p [:a.btn.btn-primary.btn-lg {:href "http://luminusweb.net"} "Learn more »"]]]])
-;;    (when-let [docs @(rf/subscribe [:docs])]
-;;      [:div.row
-;;       [:div.col-md-12
-;;        [:div {:dangerouslySetInnerHTML
-;;               {:__html (md->html docs)}}]]])])
+   (when-let [docs @(rf/subscribe [:docs])]
+     [:div.row
+      [:div.col-md-12
+       [:div {:dangerouslySetInnerHTML
+              {:__html (md->html docs)}}]]])
 
 (defn map-page []
   (maps/map-div))
@@ -113,7 +110,8 @@
 ;; -------------------------
 ;; Initialize app
 (defn fetch-docs! []
-  (GET (str js/context "/docs") {:handler #(rf/dispatch [:set-docs %])}))
+  (GET (str js/context "/docs")
+       {:handler #(rf/dispatch [:set-docs %])}))
 
 (defn mount-components []
   (r/render [#'page] (.getElementById js/document "app")))

From 84c2bb19c4b235380c52c4133f67447d7785305f Mon Sep 17 00:00:00 2001
From: Simon Brooke <simon@journeyman.cc>
Date: Thu, 16 Mar 2017 21:16:41 +0000
Subject: [PATCH 5/5] Added credits to the spinner CSS

---
 resources/public/css/spinner.css | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/resources/public/css/spinner.css b/resources/public/css/spinner.css
index ffc7daa..66bc787 100644
--- a/resources/public/css/spinner.css
+++ b/resources/public/css/spinner.css
@@ -1,3 +1,9 @@
+/*
+ * Cribbed from http://tobiasahlin.com/spinkit/
+ * (source here https://github.com/tobiasahlin/SpinKit)
+ * Thanks Tobias!
+ */
+
 .sk-fading-circle {
   margin: 100px auto;
   width: 40px;