From b61fb61373dbb41f789aa0f28c5d944a53d36027 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 6 Dec 2013 15:19:20 +0100 Subject: [PATCH] Add left-right arrows --- src/copyspeak/settings/static.py | 5 ++- src/copyspeak/static/css/base.scss | 50 +++++++++++++++++++++- src/copyspeak/static/js/word_detail.js | 16 +++++++ src/copyspeak/templates/base.html | 4 +- src/words/models.py | 15 +++++++ src/words/templates/words/home.html | 2 +- src/words/templates/words/word_detail.html | 19 +++++--- src/words/views.py | 2 + 8 files changed, 101 insertions(+), 12 deletions(-) create mode 100644 src/copyspeak/static/js/word_detail.js diff --git a/src/copyspeak/settings/static.py b/src/copyspeak/settings/static.py index d506058..c580365 100644 --- 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 --- 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 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 --- a/src/copyspeak/templates/base.html +++ b/src/copyspeak/templates/base.html @@ -46,7 +46,7 @@ - {#% compressed_js 'base' %#} - {% tracking_code %} + + {% tracking_code %} diff --git a/src/words/models.py b/src/words/models.py index 095382b..a1c5fbd 100644 --- 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 --- a/src/words/templates/words/home.html +++ b/src/words/templates/words/home.html @@ -54,7 +54,7 @@
-

The words

+

The glossary

diff --git a/src/words/templates/words/word_detail.html b/src/words/templates/words/word_detail.html index 6bf82f5..78c7b8e 100755 --- 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 %} +
+ +{% if previous %} +◀ +{% endif %} + +{% if next %} +▶ +{% endif %} + +
@@ -43,12 +55,9 @@
- +
+{% compressed_js 'word_detail' %} {% endblock %} diff --git a/src/words/views.py b/src/words/views.py index 15b4c21..43bf9d5 100644 --- 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(), } -- 2.20.1