Add left-right arrows

diff --git a/src/copyspeak/settings/static.py b/src/copyspeak/settings/static.py
index d506058..c580365 100644 (file)
--- a/src/copyspeak/settings/static.py
+++ b/src/copyspeak/settings/static.py
@@ -25,10 +25,11 @@ PIPELINE_CSS = {
     },
 }
 PIPELINE_JS = {
-    'base': {
+    'word_detail': {
         'source_filenames': (
+            'js/word_detail.js',
         ),
-        'output_filename': 'compressed/base.js',
+        'output_filename': 'compressed/word_detail.js',
     },
 }
 

diff --git a/src/copyspeak/static/css/base.scss b/src/copyspeak/static/css/base.scss
index 523490a..ab19422 100644 (file)
--- a/src/copyspeak/static/css/base.scss
+++ b/src/copyspeak/static/css/base.scss
@@ -24,6 +24,11 @@ header {
             margin-right: .5em;
             vertical-align:middle;
         }
+
+        &:hover {
+            color: white;
+            text-decoration: underline;
+        }
     }
 
     #buy {
@@ -212,8 +217,8 @@ h1.main {
     background-image: url(/static/img/bg/neutral.png);
     background-size: 100%;
 
-    color: #fff;
-    a { color: #fff; }
+    color: #555;
+    a { color: #555; }
 }
 .lawful {
     background-image: url(/static/img/bg/lawful.png);
@@ -295,3 +300,44 @@ footer {
         }
     }
 }
+
+
+%prevnext {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background: rgba(64,64,64,.5);
+    z-index:100;
+    opacity: 0;
+    text-align: center;
+
+    span {
+        position: absolute;
+        top: 50%;
+        margin-top: -.5em;
+        left: 0;
+        width: 100%;
+        color: #000;
+    }
+
+    &:hover, &.active {
+        opacity: 1;
+    }
+
+    font-size: 8vw;
+    width: 16vw;
+    @media screen and (min-width: 45em) {
+        width: 8vw;
+        font-size: 4vw;
+    }
+}
+
+#previous-card {
+    @extend %prevnext;
+    left: 0;
+}
+#next-card {
+    @extend %prevnext;
+    right: 0;
+}

diff --git a/src/copyspeak/static/js/word_detail.js b/src/copyspeak/static/js/word_detail.js
new file mode 100644 (file)
index 0000000..dfb502b
--- /dev/null
+++ b/src/copyspeak/static/js/word_detail.js
@@ -0,0 +1,16 @@
+document.onkeydown = function(e) {
+    if (!e) e = window.event;
+    var keynum = e.keyCode ? e.keyCode : e.which; // IE vs others
+    switch (keynum) {
+        case 37:
+            var link = document.getElementById('previous-card');
+            link.setAttribute('class', 'active');
+            location.href = link.getAttribute('href');
+            return false;
+        case 39:
+            var link = document.getElementById('next-card');
+            link.setAttribute('class', 'active');
+            location.href = link.getAttribute('href');
+            return false;
+    }
+};

diff --git a/src/copyspeak/templates/base.html b/src/copyspeak/templates/base.html
index e826af2..f376222 100644 (file)
--- a/src/copyspeak/templates/base.html
+++ b/src/copyspeak/templates/base.html
@@ -46,7 +46,7 @@
         <footer>
             {% chunk 'footer' %}
         </footer>
-    {#% compressed_js 'base' %#}
-    {% tracking_code %}
+
+        {% tracking_code %}
     </body>
 </html>

diff --git a/src/words/models.py b/src/words/models.py
index 095382b..a1c5fbd 100644 (file)
--- a/src/words/models.py
+++ b/src/words/models.py
@@ -28,3 +28,18 @@ class Word(models.Model):
 
     def get_absolute_url(self):
         return reverse('words_word', args=[self.slug])
+
+    def get_next(self):
+        try:
+            return Word.objects.filter(alignment=self.alignment, word__gt=self.word)[0]
+        except IndexError:
+            next_alignment = ALIGNMENTS[([a[0] for a in ALIGNMENTS].index(self.alignment) + 1) % len(ALIGNMENTS)][0]
+            return Word.objects.filter(alignment=next_alignment)[0]
+
+    def get_previous(self):
+        words = Word.objects.order_by('-word')
+        try:
+            return words.filter(alignment=self.alignment, word__lt=self.word)[0]
+        except IndexError:
+            prev_alignment = ALIGNMENTS[([a[0] for a in ALIGNMENTS].index(self.alignment) - 1) % len(ALIGNMENTS)][0]
+            return words.filter(alignment=prev_alignment)[0]

diff --git a/src/words/templates/words/home.html b/src/words/templates/words/home.html
index bc13102..05b6197 100755 (executable)
--- a/src/words/templates/words/home.html
+++ b/src/words/templates/words/home.html
@@ -54,7 +54,7 @@
 </section>
 
 <section>
-<h1 class="main"><a href="#words" id="words">The words</a></h1>
+<h1 class="main"><a href="#glossary" id="glossary">The glossary</a></h1>
 
 <div class="three-container">
 <div class="card-dummy"></div>

diff --git a/src/words/templates/words/word_detail.html b/src/words/templates/words/word_detail.html
index 6bf82f5..78c7b8e 100755 (executable)
--- a/src/words/templates/words/word_detail.html
+++ b/src/words/templates/words/word_detail.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load static from staticfiles %}
+{% load compressed %}
 {% load textile_en from fnp_markup %}
 
 {% block title %}{{ object }}{% endblock %}
@@ -7,6 +8,17 @@
 
 {% block body %}
 
+<div class="a-card" style="position: relative">
+
+{% if previous %}
+<a id="previous-card" href="{{ previous.get_absolute_url }}" title="{{ previous }}"><span>&#9664;</span></a>
+{% endif %}
+
+{% if next %}
+<a id="next-card" href="{{ next.get_absolute_url }}" title="{{ next }}"><span>&#9654;</span></a>
+{% endif %}
+
+
 <div class="card-container">
 <div class="card-dummy"></div>
 <section class="card front {{ object.alignment }}">
@@ -43,12 +55,9 @@
 
 </section></div>
 
-<!--section>
-{% for word in words %}
-    <a href="{{ word.get_absolute_url }}">{{ word }}</a>
-{% endfor %}
-</section-->
+</div>
 
 
+{% compressed_js 'word_detail' %}
 
 {% endblock %}

diff --git a/src/words/views.py b/src/words/views.py
index 15b4c21..43bf9d5 100644 (file)
--- a/src/words/views.py
+++ b/src/words/views.py
@@ -22,4 +22,6 @@ class WordView(DetailView):
         return {
             'object': object,
             'words': Word.objects.all(),
+            'previous': object.get_previous(),
+            'next': object.get_next(),
         }