#30: Starting to work.

We can serve both conventional pages, and the app.
This commit is contained in:
Simon Brooke 2017-03-19 17:54:37 +00:00
parent ce9520fc2c
commit 7439e5ae15
6 changed files with 152 additions and 54 deletions

View file

@ -0,0 +1,53 @@
<!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">
<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="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 -->
<!-- ATTENTION \/ -->
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- ATTENTION /\ -->
<script type="text/javascript">
var context = "{{servlet-context}}";
var csrfToken = "{{csrf-token}}";
</script>
{% script "/js/app.js" %}
</body>
</html>

View file

@ -0,0 +1,42 @@
<!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">
<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>{{title}}</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>
{{title}}
</h1>
</header>
<div id="main-container" class="container">
<div id="big-links">
{{big-links}}
</div>
<div if="#content">
{{content}}
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!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">
<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>{{title}}</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>
{{title}}
</h1>
</header>
<div id="main-container" class="container">
<div id="big-links">
{% block big-links %}
{% endblock %}
</div>
<div if="#content">
{% block content %}
{% endblock %}
</div>
</div>
</body>
</html>

View file

@ -1,53 +1,12 @@
<!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">
<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="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>
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div class="big-link-container">
<a href="supporter.html" class="big-link" id="yes-link">Yes</a>
</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 -->
<!-- ATTENTION \/ -->
<!-- Leaflet -->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- ATTENTION /\ -->
<script type="text/javascript">
var context = "{{servlet-context}}";
var csrfToken = "{{csrf-token}}";
</script>
{% script "/js/app.js" %}
</body>
</html>
<div class="big-link-container">
<a href="notyet.html" class="big-link" id="not-yet-link">No</a>
</div>
{% endblock %}
{% block content %}
froboz
{% endblock %}

View file

@ -5,11 +5,14 @@
[ring.util.http-response :as response]
[clojure.java.io :as io]))
(defn app-page []
(layout/render "app.html"))
(defn home-page []
(layout/render "home.html"))
(layout/render "home.html" {:title "You Yes Yet?"}))
(defroutes home-routes
(GET "/" [] (home-page))
(GET "/app" [] (app-page))
(GET "/docs" [] (-> (response/ok (-> "docs/docs.md" io/resource slurp))
(response/header "Content-Type" "text/plain; charset=utf-8"))))

View file

@ -0,0 +1 @@
;; Ultimately it's the goal to use the same UI utils for both main site and single page app.