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

Significant progress, but a long way from finished.

Browse source
This commit is contained in:
Simon Brooke 2017-03-19 23:28:27 +00:00
parent 7439e5ae15
commit e5d399b86d
14 changed files with 496 additions and 234 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
resources/public/css/screen.css
View file

@ -1,68 +0,0 @@
html,
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
height: 100%;
}
.navbar {
margin-bottom: 10px;
}
.navbar-brand {
float: none;
}
.navbar-nav .nav-item {
float: none;
}
.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
margin-left: 0;
}
@media (min-width: 34em) {
.navbar-brand {
float: left;
}
.navbar-nav .nav-item {
float: left;
}
.navbar-divider,
.navbar-nav .nav-item+.nav-item,
.navbar-nav .nav-link + .nav-link {
margin-left: 1rem;
}
}
@-moz-keyframes three-quarters-loader {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes three-quarters-loader {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes three-quarters-loader {
0% {
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}

173
resources/public/css/yyy-app.css Normal file
View file

@ -0,0 +1,173 @@
/**
* Additional CSS for the main site. Navigation works differently between
* app and the main site; in the app it's driven by React, while in
* the main site it's CSS.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
* USA.
*/
/* desktops and laptops, primarily. Adapted to mouse; targets may be small */
@media all and (min-device-width: 1025px) {
/* top-of-page navigation, not editable, provided by Smeagol */
#nav{
margin: 0;
padding: 0;
top: 0;
width: 100%;
_position: absolute;
_top: expression(document.documentElement.scrollTop);
z-index: 149;
background:rgba(7,27,51,0.8);
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav-menu {
margin: 0;
padding: 0;
}
#nav menu li {
padding: 0;
margin: 0;
display: inline;
}
#nav menu li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav menu li.active a { background: gray;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu li#user {
padding: 0 1em;
float: right;
}
}
/* tablets, primarily. Adapted to touch; targets are larger */
@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav:hover #nav-menu {
display: block;
list-style-type: none;
width: 100%;
}
#nav-icon {
padding: 0;
}
#nav-menu {
display: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
}
/* phones, and, indeed, smaller phones. Adapted to touch; display radically
* decluttered */
@media all and (max-device-width: 768px) {
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav:hover #nav-menu {
display: block;
list-style-type: none;
width: 100%;
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav-icon {
padding: 0;
}
#nav-menu {
list-style-type: none;
display: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
}

157
resources/public/css/yyy-static.css → resources/public/css/yyy-common.css
View file

@ -201,11 +201,13 @@ th {
}
/* left bar for all pages in the Wiki - editable, provided by users. Within main-container */
#side-bar {
width: 17%;
height: 100%;
float: left;
#big-links {
width: 100%;
min-height: 3.5em;
}
#content {
clear: both;
}
/* cookies information box, fixed, in right margin, just above footer */
@ -337,62 +339,11 @@ th {
/* desktops and laptops, primarily. Adapted to mouse; targets may be small */
@media all and (min-device-width: 1025px) {
/* content of the current page in the Wiki - editable, provided by users. Within main-container */
#content {
border: thin solid silver;
width: 80%;
float: right;
padding-bottom: 5em;
}
#phone-side-bar, #phone-credits {
display: none;
}
/* top-of-page navigation, not editable, provided by Smeagol */
#nav{
margin: 0;
padding: 0;
top: 0;
width: 100%;
_position: absolute;
_top: expression(document.documentElement.scrollTop);
z-index: 149;
background:rgba(7,27,51,0.8);
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav-menu {
margin: 0;
padding: 0;
}
#nav menu li {
padding: 0;
margin: 0;
display: inline;
}
#nav menu li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav menu li.active a { background: gray;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu li#user {
padding: 0 1em;
float: right;
}
}
/* tablets, primarily. Adapted to touch; targets are larger */
@ -410,54 +361,6 @@ th {
float: right;
padding-bottom: 5em;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav:hover #nav-menu {
display: block;
list-style-type: none;
width: 100%;
}
#nav-icon {
padding: 0;
}
#nav-menu, #phone-side-bar {
display: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
}
/* phones, and, indeed, smaller phones. Adapted to touch; display radically
@ -499,50 +402,4 @@ th {
#cookies {
display: none;
}
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav-icon {
padding: 0;
}
#nav-menu {
list-style-type: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
#side-bar {
display: none;
}
}

170
resources/public/css/yyy-site.css Normal file
View file

@ -0,0 +1,170 @@
/**
* Additional CSS for the app. Navigation works differently between
* app and the main site; in the app it's driven by React, while in
* the main site it's CSS.
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License
* as published by the Free Software Foundation; either version 2
* of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301,
* USA.
*
* # The Stylesheet
*
* ## html elements generally in alphabetic order
*/
/* desktops and laptops, primarily. Adapted to mouse; targets may be small */
@media all and (min-device-width: 1025px) {
/* top-of-page navigation, not editable, provided by Smeagol */
#nav{
margin: 0;
padding: 0;
top: 0;
width: 100%;
_position: absolute;
_top: expression(document.documentElement.scrollTop);
z-index: 149;
background:rgba(7,27,51,0.8);
}
/* only needed for fly-out menu effect on tablet and phone stylesheets */
#nav-icon {
display: none;
}
#nav-menu {
margin: 0;
padding: 0;
}
#nav menu li {
padding: 0;
margin: 0;
display: inline;
}
#nav menu li a {
color: white;
text-decoration: none;
font-weight: bold;
padding: 0.1em 0.75em;
margin: 0;
}
#nav menu li.active a { background: gray;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu li#user {
padding: 0 1em;
float: right;
}
}
/* tablets, primarily. Adapted to touch; targets are larger */
@media all and (min-device-width: 769px) and (max-device-width: 1024px) {
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav:hover #nav-menu {
display: block;
list-style-type: none;
width: 100%;
}
#nav-icon {
padding: 0;
}
#nav-menu, #phone-side-bar {
display: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
}
/* phones, and, indeed, smaller phones. Adapted to touch; display radically
* decluttered */
@media all and (max-device-width: 768px) {
#nav{
margin: 0;
padding: 0;
position: fixed;
z-index: 149;
color: silver;
background:rgba(40,40,40,0.9);
}
#nav a {
color: white;
text-decoration: none;
font-weight: bold;
}
#nav-icon {
padding: 0;
}
#nav-menu {
list-style-type: none;
}
#nav menu li {
padding: 0.5em 2em 0.5em 0.5em;
margin: 0.5 em;
font-size: 150%;
}
#nav menu li a {
}
#nav ul li.active a { background: silver;}
li.nav-item a:hover { background: rgb( 240, 240, 240) }
li.nav-item a:active { background: gray; color: white; }
#nav menu #user {
text-decoration: none;
font-weight: bold;
margin: 0;
}
}

3
resources/templates/app.html
View file

@ -3,7 +3,8 @@
<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/yyy-common.css" />
<link rel="stylesheet" type="text/css" href="css/yyy-app.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>

19
resources/templates/base-unauthenticated.html
View file

@ -3,8 +3,8 @@
<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 rel="stylesheet" type="text/css" href="css/yyy-common.css" />
<link rel="stylesheet" type="text/css" href="css/yyy-site.css" />
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Archivo+Narrow" rel="stylesheet"/>
<title>{{title}}</title>
</head>
@ -36,5 +36,20 @@
{% endblock %}
</div>
</div>
<footer>
<div id="credits">
<div>
<img src="img/ric-logo.png" width="24" height="24"/>
A project of the
<a href="https://radical.scot/">Radical Independence Campaign</a> ||
Version {{version}}
</div>
<div>
<img height="16" width="16" alt="Clojure" src="img/luminus-logo.png"/>Built with <a href="http://www.luminusweb.net/">LuminusWeb</a> ||
<img height="16" width="16" alt="Clojure" src="img/clojure-icon.gif"/> Powered by <a href="http://clojure.org">Clojure</a> ||
<img height="16" width="16" alt="GitHub" src="img/github-logo-transparent.png"/>Find me/fork me on <a href="https://github.com/simon-brooke/smeagol">Github</a> ||
<img height="16" width="16" alt="Free Software Foundation" src="img/gnu.small.png"/>Licensed under the <a href="http://www.gnu.org/licenses/gpl-2.0.html">GNU General Public License version 2.0</a>
</div>
</div>
</body>
</html>

41
resources/templates/call-me-accepted.html Normal file
View file

@ -0,0 +1,41 @@
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div id="back-link-container">
<a href="javascript:history.back()" id="back-link">Back</a>
</div>
<div class="big-link-container">
<a href="library" class="big-link" id="library-link">Browse&nbsp;the&nbsp;issues</a>
</div>
{% endblock %}
{% block content %}
<p>
Thank you, {{name}}. Someone will call you shortly on {{phone}} to talk to you about
{{concern}}.
</p>
<form action="call-me" method="post">
<p class="widget">
<label for="name">Your name</label>
<input type="text" id="name" name="name"/>
</p>
<p class="widget">
<label for="postcode">Your post-code</label>
<input type="text" id="postcode" name="postcode"/>
</p>
<p class="widget">
<label for="phone">Your phone number</label>
<input type="text" id="phone" name="phone"/>
</p>
<p class="widget">
<label for="concern">Your concerns</label>
<select name="concern" id="concern">
{% for concern in concerns %}
<option>{{concern.title}}</option>
{% endfor %}
</select>
</p>
<p class="widget">
<label for="submit">&nbsp;</label>
<input name="submit" id="submit" type="submit" class="action" value="Call me!"/>
</p>
</form>
{% endblock %}

37
resources/templates/call-me.html Normal file
View file

@ -0,0 +1,37 @@
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div id="back-link-container">
<a href="javascript:history.back()" id="back-link">Back</a>
</div>
{% endblock %}
{% block content %}
<p>
Use this form to request someone to phone you to discuss your concerns about independence.
</p>
<form action="call-me" method="post">
<p class="widget">
<label for="name">Your name</label>
<input type="text" id="name" name="name"/>
</p>
<p class="widget">
<label for="postcode">Your post-code</label>
<input type="text" id="postcode" name="postcode"/>
</p>
<p class="widget">
<label for="phone">Your phone number</label>
<input type="text" id="phone" name="phone"/>
</p>
<p class="widget">
<label for="concern">Your concerns</label>
<select name="concern" id="concern">
{% for concern in concerns %}
<option>{{concern.title}}</option>
{% endfor %}
</select>
</p>
<p class="widget">
<label for="submit">&nbsp;</label>
<input name="submit" id="submit" type="submit" class="action" value="Call me!"/>
</p>
</form>
{% endblock %}

7
resources/templates/home.html
View file

@ -1,12 +1,9 @@
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div class="big-link-container">
<a href="supporter.html" class="big-link" id="yes-link">Yes</a>
<a href="supporter" class="big-link" id="yes-link">Yes</a>
</div>
<div class="big-link-container">
<a href="notyet.html" class="big-link" id="not-yet-link">No</a>
<a href="notyet" class="big-link" id="not-yet-link">No</a>
</div>
{% endblock %}
{% block content %}
froboz
{% endblock %}

12
resources/templates/notyet.html Normal file
View file

@ -0,0 +1,12 @@
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div id="back-link-container">
<a href="javascript:history.back()" id="back-link">Back</a>
</div>
<div class="big-link-container">
<a href="library" class="big-link" id="library-link">Browse&nbsp;the&nbsp;issues</a>
</div>
<div class="big-link-container">
<a href="call-me" class="big-link" id="call-me-link">Get us to talk to you</a>
</div>
{% endblock %}

12
resources/templates/supporter.html Normal file
View file

@ -0,0 +1,12 @@
{% extends "base-unauthenticated.html" %}
{% block big-links %}
<div id="back-link-container">
<a href="javascript:history.back()" id="back-link">Back</a>
</div>
<div class="big-link-container">
<a href="login" class="big-link" id="yes-link">Yes</a>
</div>
<div class="big-link-container">
<a href="register" class="big-link" id="signup-link">No</a>
</div>
{% endblock %}

3
src/clj/youyesyet/layout.clj
View file

@ -22,7 +22,8 @@
(assoc params
:page template
:csrf-token *anti-forgery-token*
:servlet-context *app-context*)))
:servlet-context *app-context*
:version (System/getProperty "youyesyet.version"))))
"text/html; charset=utf-8"))
(defn error-page

18
src/clj/youyesyet/routes/home.clj
View file

@ -8,11 +8,25 @@
(defn app-page []
(layout/render "app.html"))
(defn call-me-page [request]
(if
request
;; do something to store it in the database
(layout/render "call-me-accepted.html" (:params request))
(layout/render "call-me.html"
{:title "Please call me!"
;; TODO: Concerns need to be fetched from the database
:concerns nil})))
(defn home-page []
(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"))))
(GET "/call-me" [] (call-me-page))
(POST "/call-me" request (call-me-page request))
(GET "/notyet" [] (layout/render "notyet.html"
{:title "Can we persuade you?"}))
(GET "/supporter" [] (layout/render "supporter.html"
{:title "Have you signed up as a canvasser yet?"})))

10
src/cljs/youyesyet/views/about.cljs
View file

@ -35,23 +35,23 @@
[]
[:div.container {:id "main-container"}
[:h2 "Pre-alpha/proof of concept"]
[:p {:class "centre"}
[:p
[:img {:src "img/ric-logo.png" :width "24" :height "24"}]
" A project of the "
[:a {:href "https://radical.scot/"} "Radical Independence Campaign"]]
[:p {:class "centre"}
[:p
[:img {:src "img/luminus-logo.png" :alt "Luminus" :height "24" :width "24"}]
" Built with "
[:a {:href "http://www.luminusweb.net/"} "Luminus Web"]]
[:p {:class "centre"}
[:p
[:img {:src "img/clojure-icon.gif" :alt "Clojure" :height "24" :width "24"}]
" Powered by "
[:a {:href "http://clojure.org"} "Clojure"]]
[:p {:class "centre"}
[:p
[:img {:src "img/github-logo-transparent.png" :alt "GitHub" :height "24" :width "24"}]
" Find me/fork me on "
[:a {:href "https://github.com/simon-brooke/youyesyet"} "GitHub"]]
[:p {:class "centre"}
[:p
[:img {:src "img/gnu.small.png" :alt "Free Software Foundation" :height "24" :width "24"}]
" Licensed under the "
[:a {:href "http://www.gnu.org/licenses/gpl-2.0.html"}