updated requirements, rolled in style changes and js

10 files changed, 116 insertions, 27 deletions

diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 3dc8ee4..cac2442 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -1,3 +1,6 @@
+form {
+
+}
 form fieldset {
     margin: 1rem 0;
     padding: 0;
@@ -76,10 +79,18 @@ table {
     background: $link_color;
     color: #fff !important;
     border: 1px solid $link_color;
-    padding: 5px 9px;
+    padding: 7px 9px;
     white-space: nowrap;
     &:hover {
         background: $link_hover_color;
         border: 1px solid $link_hover_color;
     }
 }
+.form-narrow {
+    margin: 0 auto;
+    max-width: 60%;
+}
+.fancy-legend {
+    @include fontsize(24);
+    @include fancy-serif;
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 9a01c61..e852855 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -153,6 +153,7 @@ h3 {
 }
 .wrapper {
     @include constrain_wide;
+    margin-top: 5rem;
 }
 //**************  Universals ************************
 .hide {
@@ -176,6 +177,12 @@ h3 {
 .alert, .error {
     color: red !important;
 }
+.text-center {
+    text-align: center;
+}
+.sm {
+    max-width: 80px;
+}
 //**************  other global classes ************************
 .sans {
     @include generic_sans;
diff --git a/design/sass/screenv1.scss b/design/sass/screenv1.scss
index a9e582e..a818f08 100644
--- a/design/sass/screenv1.scss
+++ b/design/sass/screenv1.scss
@@ -5,3 +5,4 @@
 @import "_header.scss";
 @import "_footer.scss";
 @import "_forms.scss";
+@import "_model.scss";
diff --git a/design/templates/base.html b/design/templates/base.html
index 45291d0..6b6ef8c 100644
--- a/design/templates/base.html
+++ b/design/templates/base.html
@@ -27,10 +27,10 @@
     <nav class="right">
         <ul>
             <li><a href="{% url 'pages' slug='tour' %}" title="">Tour</a></li>
-            <li><a href="{% url 'pages' slug='howto' %}" title="">How to</a></li>
-            <li><a href="{% url 'logout' %}" title="">Log out</a></li>{% if request.user %}
-            <li><a href="{% url 'settings' %}" title="">Account</a></li>{% else %}
-            <li><a href="{% url 'login' %}" title="">Login</a></li>
+            <li><a href="{% url 'pages' slug='howto' %}" title="">How to</a></li>{% if not request.user.is_anonymous %}
+            <li><a href="{% url 'settings' %}" title="">Account</a></li>
+            <li><a href="{% url 'logout' %}" title="">Log out</a></li>{% else %}
+            <li><a href="{% url 'login' %}" title="" id="overlay-trigger" data-element="#js-overlay-content">Login</a></li>
             <li><a href="{% url 'django_registration_register' %}" title="" class="btn">Get Started</a></li>{% endif %}
         </ul>
     </nav>
@@ -53,4 +53,24 @@
         </ul>
     </nav>
     </footer>
+    {% block extra %}
+    {%endblock%}
+<script async src="/media/js/package.min.js"></script>
+<script>
+// Waiting for the DOM to load
+document.addEventListener("DOMContentLoaded", function () {
+  // Select your overlay trigger
+  var trigger = document.querySelector('#overlay-trigger');
+  trigger.addEventListener('click', function(e){
+    e.preventDefault();
+    novicell.overlay.create({
+      'selector': trigger.getAttribute('data-element'),
+      'class': 'selector-overlay',
+      "onCreate": function() { console.log('created'); },
+      "onLoaded": function() { console.log('loaded'); },
+      "onDestroy": function() { console.log('Destroyed'); }
+    });
+  });
+});
+</script>
 </body>
diff --git a/design/templates/django_registration/logged_out.html b/design/templates/django_registration/logged_out.html
new file mode 100644
index 0000000..cccb58b
--- /dev/null
+++ b/design/templates/django_registration/logged_out.html
@@ -0,0 +1,9 @@
+{% extends 'base.html' %}
+
+{% block title %}Logged Out{% endblock %}
+
+{% block primary %}
+<h2>You're logged out</h2>
+<h4>Thanks for visiting the site today</h4>
+<a href="{%url 'login'%}">Login again</a>
+{% endblock %}
diff --git a/design/templates/django_registration/registration_form.html b/design/templates/django_registration/registration_form.html
index 54e01c5..8573918 100644
--- a/design/templates/django_registration/registration_form.html
+++ b/design/templates/django_registration/registration_form.html
@@ -15,3 +15,10 @@
 </form>
 <p class="text-muted">Already have an account? <a href="{% url 'login' %}">Log in</a>.</p>
 {% endblock %}
+{% block extra %}
+<div class="overlay-content" id="js-overlay-content" style="display: none;">
+    {% include 'lib/login.html' with form=login_form site=site %}
+    {{login_form}}
+</div>
+{{site.name}}
+{%endblock%}
diff --git a/design/templates/lib/login.html b/design/templates/lib/login.html
new file mode 100644
index 0000000..de2300d
--- /dev/null
+++ b/design/templates/lib/login.html
@@ -0,0 +1,34 @@
+<h1>Login to {{site.name}}</h1>
+{% if form.errors %}
+<p>Your username and password didn't match. Please try again.</p>
+{% endif %}
+
+{% if next %}
+    {% if user.is_authenticated %}
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
+    {% else %}
+    <p>Please login to see this page.</p>
+    {% endif %}
+{% endif %}
+
+<form method="post" action="{% url 'login' %}">
+{% csrf_token %}
+<fieldset>
+    {{ form.username.label_tag }}
+    {{ form.username }}
+</fieldset>
+<fieldset>
+    {{ form.password.label_tag }}
+    {{ form.password }}
+</fieldset>
+
+<input type="submit" class="btn sm" value="login">
+<input type="hidden" name="next" value="{{ next }}">
+<a href="" >Cancel</a>
+</form>
+
+{# Assumes you setup the password_reset view in your URLconf #}
+<hr />
+<p class="text-center">No account yet? <a href="/register/">Sign up</a>.<br>
+<a href="{% url 'password_reset' %}">Forgot your password?</a></p>
diff --git a/design/templates/notes/note_list.html b/design/templates/notes/note_list.html
deleted file mode 100644
index 762d05a..0000000
--- a/design/templates/notes/note_list.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{% extends 'base.html' %}
-{% block content %}
-<main>
-    <h1> Notes</h1>
-    <ul>{% for obj in object_list %}
-    <li>{{obj}}</li>
-    {% endfor %}</ul>
-</main>
-{% endblock %}
diff --git a/design/templates/pages/page.html b/design/templates/pages/page.html
index 3ac5795..91d4732 100644
--- a/design/templates/pages/page.html
+++ b/design/templates/pages/page.html
@@ -5,3 +5,11 @@
     {{page.body_html|safe}}
 </main>
 {% endblock %}
+
+{% block extra %}
+{% if login_form %}
+<div class="overlay-content" id="js-overlay-content" style="display: none;">
+    {% include 'lib/login.html' with form=login_form %}
+</div>
+{% endif %}
+{%endblock%}
diff --git a/design/templates/registration/login.html b/design/templates/registration/login.html
index 13b1c6c..a481556 100644
--- a/design/templates/registration/login.html
+++ b/design/templates/registration/login.html
@@ -1,5 +1,7 @@
 {% extends 'base.html' %}
 {% block content %}
+<form class="form-narrow" method="post" action="{% url 'login' %}">
+<legend class="fancy-legend">Login to {{site.name}}</legend>
 {% if form.errors %}
 <p>Your username and password didn't match. Please try again.</p>
 {% endif %}
@@ -13,23 +15,22 @@
     {% endif %}
 {% endif %}
 
-<form method="post" action="{% url 'login' %}">
 {% csrf_token %}
-<table>
-<tr>
-    <td>{{ form.username.label_tag }}</td>
-    <td>{{ form.username }}</td>
-</tr>
-<tr>
-    <td>{{ form.password.label_tag }}</td>
-    <td>{{ form.password }}</td>
-</tr>
-</table>
+<fieldset>
+    {{ form.username.label_tag }}
+    {{ form.username }}
+</fieldset>
+<fieldset>
+    {{ form.password.label_tag }}
+    {{ form.password }}
+</fieldset>
 
-<input type="submit" value="login">
+<input type="submit" class="btn sm" value="login">
 <input type="hidden" name="next" value="{{ next }}">
 </form>
 
 {# Assumes you setup the password_reset view in your URLconf #}
-<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
+<hr />
+<p class="text-center">No account yet? <a href="/register/">Sign up</a>.<br>
+<a href="{% url 'password_reset' %}">Forgot your password?</a></p>
 {% endblock %}