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;