From 59378b5a5fa14d55d790765c631c91307b429d39 Mon Sep 17 00:00:00 2001 From: Simon Brooke Date: Thu, 16 Mar 2017 21:16:07 +0000 Subject: [PATCH] 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 @@ + You Yes Yet?
-
-
-
-

Welcome to YouYesYet

-

If you're seeing this message, that means you haven't yet compiled your ClojureScript!

-

Please run lein figwheel to start the ClojureScript compiler and reload the page.

-

For better ClojureScript development experience in Chrome follow these steps:

-
    -
  • Open DevTools -
  • Go to Settings ("three dots" icon in the upper right corner of DevTools > Menu > Settings F1 > General > Console) -
  • Check-in "Enable custom formatters" -
  • Close DevTools -
  • Open DevTools -
-

See ClojureScript documentation for further details.

-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ You Yes Yet is loading. + You must enable JavaScript to use the You Yes Yet app. +

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")))