simon/youyesyet
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/22' into develop

Browse source
This commit is contained in:
Simon Brooke 2017-03-16 21:19:14 +00:00
parent 036c84972a 84c2bb19c4
commit ee9654aa02
4 changed files with 228 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

141
resources/public/css/spinner.css Normal file
View file

@ -0,0 +1,141 @@
/*
* Cribbed from http://tobiasahlin.com/spinkit/
* (source here https://github.com/tobiasahlin/SpinKit)
* Thanks Tobias!
*/
.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; }
}

37
resources/public/css/yyy-static.css
View file

@ -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);
@ -160,7 +168,7 @@ th {
#main-container{
}
#back-link {
#back-link, .back-link {
min-width: 8em;
padding: 0.25em 1em;
background-color: gray;
@ -170,7 +178,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);
}
@ -308,6 +316,9 @@ th {
color: white;
}
.splash-screen {
}
.warn {
color: maroon;
}
@ -430,7 +441,7 @@ th {
}
#nav menu li {
padding: 0.5em;
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
@ -463,6 +474,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;
@ -496,22 +515,16 @@ 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 {
padding: 0.5em;
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}

47
resources/templates/home.html
View file

@ -1,38 +1,39 @@
<!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 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 -->
{% 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}}";

53
src/cljs/youyesyet/core.cljs
View file

@ -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,36 +21,51 @@
{: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 "#/"} "youyesyet"]
[: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 {: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?)
(nav-link "#/login" "Login" :login collapsed?)
(nav-link "#/about" "About" :about collapsed?)]]))
(defn back-link []
[: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
[:div.container {:id "main-container"}
(back-link)
[: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"}
(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 »"]]]
[: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)}}]]])])
{:__html (md->html docs)}}]]])
(defn map-page []
(maps/map-div))
@ -61,7 +77,9 @@
(defn page []
[:div
[:header
[navbar]
[:h1 "You yes yet?"]]
[(pages @(rf/subscribe [:page]))]])
;; -------------------------
@ -74,6 +92,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
@ -88,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")))