From 7f95f426fe9d582ee5b33e73edc7ef7c78a82c12 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 29 Nov 2013 17:01:50 +0100 Subject: [PATCH] More work on new HTML reader. --- apps/catalogue/models/book.py | 6 + .../templates/catalogue/book_mini_box.html | 9 + .../templates/catalogue/book_short.html | 7 + .../templates/catalogue/book_text.html | 194 +++++++++++------- .../templates/catalogue/book_text_new.html | 115 ----------- apps/catalogue/templatetags/catalogue_tags.py | 8 +- apps/catalogue/urls.py | 1 - apps/catalogue/views.py | 8 - .../templates/funding/tags/funding.html | 6 +- .../wolnelektury_core/static/css/new.book.css | 7 +- .../static/js/book_text/box.js | 19 -- .../static/js/book_text/menu.js | 117 ++++++++++- .../static/js/book_text/other.js | 36 ---- .../static/js/book_text/themes.js | 16 -- .../static/scss/book_text.scss | 6 + .../static/scss/book_text/body.scss | 81 +++++--- .../static/scss/book_text/book_box.scss | 15 ++ .../static/scss/book_text/box.scss | 41 +++- .../static/scss/book_text/const.scss | 26 +++ .../static/scss/book_text/menu.scss | 55 ++++- .../static/scss/book_text/numbering.scss | 23 ++- .../static/scss/book_text/other.scss | 59 ++++-- .../static/scss/book_text/settings.scss | 14 +- .../static/scss/book_text/themes.scss | 28 ++- .../static/scss/funding/funding.scss | 49 ++++- apps/wolnelektury_core/static/scss/main.scss | 1 + .../static/scss/main/book_box.scss | 162 ++++++++++----- .../static/scss/main/cite.scss | 4 +- .../static/scss/main/const.scss | 3 + .../static/scss/main/header.scss | 2 + .../static/scss/main/menu.scss | 5 +- wolnelektury/settings/static.py | 4 + 32 files changed, 695 insertions(+), 432 deletions(-) delete mode 100644 apps/catalogue/templates/catalogue/book_text_new.html delete mode 100644 apps/wolnelektury_core/static/js/book_text/box.js delete mode 100644 apps/wolnelektury_core/static/js/book_text/other.js delete mode 100644 apps/wolnelektury_core/static/js/book_text/themes.js create mode 100644 apps/wolnelektury_core/static/scss/book_text/book_box.scss create mode 100644 apps/wolnelektury_core/static/scss/book_text/const.scss create mode 100644 apps/wolnelektury_core/static/scss/main/const.scss diff --git a/apps/catalogue/models/book.py b/apps/catalogue/models/book.py index 3cab67632..b17d29392 100644 --- a/apps/catalogue/models/book.py +++ b/apps/catalogue/models/book.py @@ -95,6 +95,12 @@ class Book(models.Model): def name(self): return self.title + def language_code(self): + return constants.LANGUAGES_3TO2.get(self.language, self.language) + + def language_name(self): + return dict(settings.LANGUAGES).get(self.language_code(), "") + def book_tag_slug(self): return ('l-' + self.slug)[:120] diff --git a/apps/catalogue/templates/catalogue/book_mini_box.html b/apps/catalogue/templates/catalogue/book_mini_box.html index 9dd5cf061..b5c7d9735 100755 --- a/apps/catalogue/templates/catalogue/book_mini_box.html +++ b/apps/catalogue/templates/catalogue/book_mini_box.html @@ -1,6 +1,9 @@ {% load thumbnail %}
+
+ {% if with_link %} + {% endif %} {% if book.cover %} {{ author_str }} – {{ book.title }} {% endif %} + {% if show_lang %} + {{ book.language_code }} + {% endif %}
{{ author_str }} {{ book.title }}
+ {% if with_link %} + {% endif %} +
diff --git a/apps/catalogue/templates/catalogue/book_short.html b/apps/catalogue/templates/catalogue/book_short.html index 4acefe285..98f9bf880 100644 --- a/apps/catalogue/templates/catalogue/book_short.html +++ b/apps/catalogue/templates/catalogue/book_short.html @@ -81,6 +81,13 @@ {% endfor %} + {% if show_lang %} + + {% trans "Language" %}:  + {{ book.language_name }} + + {% endif %} + {% endspaceless %} diff --git a/apps/catalogue/templates/catalogue/book_text.html b/apps/catalogue/templates/catalogue/book_text.html index c4031a6c4..b18fba444 100644 --- a/apps/catalogue/templates/catalogue/book_text.html +++ b/apps/catalogue/templates/catalogue/book_text.html @@ -1,91 +1,131 @@ + {% load i18n %} {% load static from staticfiles %} {% load chunks compressed catalogue_tags %} - - +{% load thumbnail %} + - - {% trans "Wolne Lektury" %} :: {{ book.pretty_title }} + + + {{ book.pretty_title }} :: {% trans "Wolne Lektury" %} - {% compressed_css "book" %} - - {% compressed_js "book" %} - - + {% compressed_css "book_text" %} - -
- {% book_info book %} -
-
- -
- {% if book.other_versions.exists %} -
-
- {% endif %} - + {% endif %} + + + + + + + + -
+ + + +
+ +
{{ book.html_file.read|safe }} -
+ + + + + + +
- {{ piwik_tag|safe }} + + + + {% compressed_js "book_text" %} + diff --git a/apps/catalogue/templates/catalogue/book_text_new.html b/apps/catalogue/templates/catalogue/book_text_new.html deleted file mode 100644 index a993656a1..000000000 --- a/apps/catalogue/templates/catalogue/book_text_new.html +++ /dev/null @@ -1,115 +0,0 @@ - -{% load i18n %} -{% load static from staticfiles %} -{% load chunks compressed catalogue_tags %} -{% load thumbnail %} - - - - - {{ book.pretty_title }} :: {% trans "Wolne Lektury" %} - - {% compressed_css "book_text" %} - - - - > - - -
- -
- {{ book.html_file.read|safe }} -
- - - - - - - -
- - - {% compressed_js "book_text" %} - - diff --git a/apps/catalogue/templatetags/catalogue_tags.py b/apps/catalogue/templatetags/catalogue_tags.py index d6a795fb4..4df9f7b48 100644 --- a/apps/catalogue/templatetags/catalogue_tags.py +++ b/apps/catalogue/templatetags/catalogue_tags.py @@ -16,7 +16,7 @@ from django.utils.translation import ugettext as _ from catalogue.utils import split_tags, related_tag_name as _related_tag_name from catalogue.models import Book, BookMedia, Fragment, Tag -from catalogue.constants import LICENSES +from catalogue.constants import LICENSES, LANGUAGES_3TO2 register = template.Library() @@ -335,6 +335,7 @@ def book_wide(context, book): 'hide_about': hide_about, 'themes': book_themes, 'request': context.get('request'), + 'show_lang': book.language_code() != settings.LANGUAGE_CODE, } @@ -345,16 +346,19 @@ def book_short(context, book): 'main_link': book.get_absolute_url(), 'related': book.related_info(), 'request': context.get('request'), + 'show_lang': book.language_code() != settings.LANGUAGE_CODE, } @register.inclusion_tag('catalogue/book_mini_box.html') -def book_mini(book): +def book_mini(book, with_link=True): author_str = ", ".join(related_tag_name(tag) for tag in book.related_info()['tags'].get('author', ())) return { 'book': book, 'author_str': author_str, + 'with_link': with_link, + 'show_lang': book.language_code() != settings.LANGUAGE_CODE, } diff --git a/apps/catalogue/urls.py b/apps/catalogue/urls.py index e9f638345..43209198b 100644 --- a/apps/catalogue/urls.py +++ b/apps/catalogue/urls.py @@ -57,7 +57,6 @@ urlpatterns += patterns('catalogue.views', # Public interface. Do not change this URLs. url(r'^lektura/(?P%s)\.html$' % SLUG, 'book_text', name='book_text'), - url(r'^lektura/(?P%s)\.html2$' % SLUG, 'book_text2'), url(r'^lektura/(?P%s)/audiobook/$' % SLUG, 'player', name='book_player'), url(r'^lektura/(?P%s)/$' % SLUG, 'book_detail', name='book_detail'), url(r'^lektura/(?P%s)/motyw/(?P[a-zA-Z0-9-]+)/$' % SLUG, diff --git a/apps/catalogue/views.py b/apps/catalogue/views.py index b0575403b..d2b79c7ee 100644 --- a/apps/catalogue/views.py +++ b/apps/catalogue/views.py @@ -290,14 +290,6 @@ def book_text(request, slug): related = book.related_info() return render_to_response('catalogue/book_text.html', locals(), context_instance=RequestContext(request)) -def book_text2(request, slug): - book = get_object_or_404(models.Book, slug=slug) - - if not book.has_html_file(): - raise Http404 - related = book.related_info() - return render_to_response('catalogue/book_text_new.html', locals(), - context_instance=RequestContext(request)) # ========== diff --git a/apps/funding/templates/funding/tags/funding.html b/apps/funding/templates/funding/tags/funding.html index a26c6ca61..46282518e 100755 --- a/apps/funding/templates/funding/tags/funding.html +++ b/apps/funding/templates/funding/tags/funding.html @@ -24,13 +24,13 @@ style="text-align: center; background-size: {{ percentage|stringformat:'.2f' }}% 1px;" > {% if sum %} - {% trans "collected" %}: {{ sum }} zł + {% trans "collected" %}: {{ sum }} zł {% endif %} {% if not is_win %} - {% trans "needed" %}: {{ offer.target }} zł + {% trans "needed" %}: {{ offer.target }} zł {% endif %} {% if is_current %} - {% trans "until fundraiser end" %}: + {% trans "until fundraiser end" %}: {% else %} diff --git a/apps/wolnelektury_core/static/css/new.book.css b/apps/wolnelektury_core/static/css/new.book.css index b148020b4..164051e24 100644 --- a/apps/wolnelektury_core/static/css/new.book.css +++ b/apps/wolnelektury_core/static/css/new.book.css @@ -1,6 +1,6 @@ body { font-size: 16px; - font: Georgia, "Times New Roman", serif; + font-family: Georgia, "Times New Roman", serif; line-height: 1.5em; margin: 0; } @@ -45,8 +45,7 @@ a { } #info p { - text-align: justify; - margin: 1.5em 0 0; + margin: 1em 0 0; } /* =================================================== */ @@ -91,7 +90,7 @@ p { .annotation { font-style: normal; font-weight: normal; - font-size: 12px; + font-size: .75em; padding-left: 2px; position: relative; top: -4px; diff --git a/apps/wolnelektury_core/static/js/book_text/box.js b/apps/wolnelektury_core/static/js/book_text/box.js deleted file mode 100644 index e26762c2d..000000000 --- a/apps/wolnelektury_core/static/js/book_text/box.js +++ /dev/null @@ -1,19 +0,0 @@ -$(function() { - /* Toggle hidden box on click. */ - $("nav a[data-box]").each(function() { - $("#" + $(this).attr("data-box")).hide(); - - $(this).click(function(e) { - e.preventDefault(); - var showing = $(this).hasClass("active"); - $("nav .active").each(function() { - $(this).removeClass("active"); - $("#" + $(this).attr("data-box")).hide(); - }); - if (!showing) { - $(this).addClass("active"); - $("#" + $(this).attr("data-box")).show(); - } - }); - }); -}); diff --git a/apps/wolnelektury_core/static/js/book_text/menu.js b/apps/wolnelektury_core/static/js/book_text/menu.js index 3c7f57c73..79dc00190 100644 --- a/apps/wolnelektury_core/static/js/book_text/menu.js +++ b/apps/wolnelektury_core/static/js/book_text/menu.js @@ -1,24 +1,135 @@ (function($){$(function(){ +function hide_menu_boxes() { + /* Closes any open menu boxes. */ + $("#menu .active").each(function() { + $(this).removeClass("active"); + $("#" + $(this).attr("data-box")).hide(); + }); + $("#box-underlay").hide(); +} + +function release_menu() { + /* Exits the menu. It only really disappears on small screens. */ + hide_menu_boxes(); + $("body").removeClass("menu-showed"); +} + +/* Show menu */ $('#menu-toggle-on').click(function(e) { e.preventDefault(); var body = $("body"); + /* Just stop hiding the menu. This way, after narrowing the browser, + * menu will still disappear normally. */ body.removeClass("menu-hidden"); + /* Menu still not visible? Really open it then. */ if (!$("#menu").is(":visible")) { body.addClass("menu-showed"); } }); +/* Hide menu */ $('#menu-toggle-off').click(function(e) { e.preventDefault(); - var body = $("body"); - body.removeClass("menu-showed"); + /* Just release the menu. This way, after widening the browser, + * menu will still appear normally. */ + release_menu(); + /* Menu still visible after releasing it? Really hide it then. */ if ($("#menu").is(":visible")) { - body.addClass("menu-hidden"); + $("body").addClass("menu-hidden"); } }); +/* Exit menu by clicking anywhere else. */ +$("#box-underlay").click(release_menu); + + +/* Toggle hidden box on click. */ +$("#menu a").each(function() { + var boxid = $(this).attr("data-box"); + if (boxid) { + $("#" + $(this).attr("data-box")).hide(); + + $(this).click(function(e) { + e.preventDefault(); + var showing = $(this).hasClass("active"); + hide_menu_boxes(); + if (!showing) { + $("body").addClass("menu-showed"); + $(this).addClass("active"); + $("#box-underlay").show(); + $("#" + $(this).attr("data-box")).show(); + } + }); + } + else { + $(this).click(release_menu); + } +}); + + +/* Show menu item for other versions of text. + * It's only present if there are any. */ +$("#menu-other").show(); + + +/* Load other version of text. */ +$(".display-other").click(function(e) { + e.preventDefault(); + release_menu(); + + $("#other-text").show(); + $("body").addClass('with-other-text'); + + $.ajax($(this).attr('data-other'), { + success: function(text) { + $("#other-text-body").html(text); + $("#other-text-waiter").hide(); + $("#other-text-body").show(); + loaded_text($("#other-text-body")); + } + }); +}); + + +/* Remove other version of text. */ +$(".other-text-close").click(function(e) { + release_menu(); + e.preventDefault(); + $("#other-text").hide(); + $("body").removeClass('with-other-text'); + $("#other-text-body").html(""); +}); + + +/* Release menu after clicking inside TOC. */ +$("#toc a").click(release_menu); + + +if ($('#nota_red').length > 0) { + $("#menu-nota_red").show(); +} + +/* Show themes menu item, if there are any. */ +if ($('#themes li').length > 0) { + $("#menu-themes").show(); +} + +function loaded_text(text) { + /* Attach events to elements inside book texts here. + * This way they'll work for the other text when it's loaded. */ + + $(".theme-begin", text).click(function(e) { + e.preventDefault(); + if ($(this).css("overflow") == "hidden" || $(this).hasClass('showing')) { + $(this).toggleClass("showing"); + } + }); + +} +loaded_text("#book-text"); + })})(jQuery); diff --git a/apps/wolnelektury_core/static/js/book_text/other.js b/apps/wolnelektury_core/static/js/book_text/other.js deleted file mode 100644 index 1956aa80e..000000000 --- a/apps/wolnelektury_core/static/js/book_text/other.js +++ /dev/null @@ -1,36 +0,0 @@ -(function($){$(function(){ - - -$("#menu-other").show(); - - -$(".display-other").click(function(e) { - e.preventDefault(); - - if ($('#big-pane').length == 0) - $("#other-text").show(); - $("#other-versions").slideUp('fast'); - $(".menu").removeClass('selected'); - - $("#other").hide(); - $("nav .active").removeClass('active'); - $("body").addClass('with-other-text'); - - $.ajax($(this).attr('data-other'), { - success: function(text) { - $("#other-text-body").html(text); - $("#other-text-waiter").hide(); - $("#other-text-body").show(); - } - }); -}); - - -$("#other-text-close").click(function(e) { - e.preventDefault(); - if ($('#big-pane').length == 0) - $("#other-text").hide(); - $("body").removeClass('with-other-text'); -}); - -})})(jQuery); diff --git a/apps/wolnelektury_core/static/js/book_text/themes.js b/apps/wolnelektury_core/static/js/book_text/themes.js deleted file mode 100644 index 32e2e81ce..000000000 --- a/apps/wolnelektury_core/static/js/book_text/themes.js +++ /dev/null @@ -1,16 +0,0 @@ -(function($){$(function(){ - - -if ($('#themes li').length > 0) { - $("#menu-themes").show(); -} - - -$(".theme-begin").click(function(e) { - e.preventDefault(); - if ($(this).css("overflow") == "hidden" || $(this).hasClass('showing')) { - $(this).toggleClass("showing"); - } -}); - -})})(jQuery); diff --git a/apps/wolnelektury_core/static/scss/book_text.scss b/apps/wolnelektury_core/static/scss/book_text.scss index 8e91f5f2e..4459aa4c7 100644 --- a/apps/wolnelektury_core/static/scss/book_text.scss +++ b/apps/wolnelektury_core/static/scss/book_text.scss @@ -1,5 +1,6 @@ @import "tools"; +@import "book_text/const"; @import "book_text/body"; @import "book_text/box"; @import "book_text/info"; @@ -11,3 +12,8 @@ @import "book_text/themes"; @import "book_text/toc"; +@import "main/book_box"; +@import "book_text/book_box"; + +@import "main/auth"; +@import "main/dialogs"; diff --git a/apps/wolnelektury_core/static/scss/book_text/body.scss b/apps/wolnelektury_core/static/scss/book_text/body.scss index 99867c3b8..2454f0c78 100644 --- a/apps/wolnelektury_core/static/scss/book_text/body.scss +++ b/apps/wolnelektury_core/static/scss/book_text/body.scss @@ -2,9 +2,17 @@ * #big-pane * Everything besides the menu. */ -@include min-screen(640px) { +#big-pane { + display: flex; + flex-direction: row; + justify-content: left; + @include min-screen($W_BOOK_TEXT_MAX) { + justify-content: center; + } +} +@include min-screen($S_MENU) { #big-pane { - margin-left: 80px; + @include size(margin-left, $W_MENU); } .menu-hidden { #big-pane { @@ -23,62 +31,87 @@ */ @mixin left-without-numbers { - padding-left: 20px; - @include min-screen(240px) { - padding-left: 30px; + @include size(padding-left, $W_NONUMBERS_TINY); + @include min-screen($S_NONUMBERS_TINY_MAX) { + @include size(padding-left, $W_NONUMBERS); } } @mixin right-without-themes { - padding-right: 20px; - @include min-screen(240px) { - padding-right: 30px; + @include size(padding-right, $W_NOTHEMES_TINY); + @include min-screen($S_NOTHEMES_TINY_MAX) { + @include size(padding-right, $W_NOTHEMES_SMALL); } - @include min-screen(320px) { - padding-right: 44px; + @include min-screen($S_NOTHEMES_SMALL_MAX) { + @include size(padding-right, $W_NOTHEMES); } } -#main-text { +#main-text, #other-text { @include left-without-numbers; @include right-without-themes; + @include size(min-width, $W_BOOK_TEXT_MIN); /* make room for line numbers */ - @include min-screen(320px) { - padding-left: 50px; + @include min-screen($S_NUMBERS) { + @include size(padding-left, $W_NUMBERS); } /* make room for themes */ - @include min-screen(600px) { - padding-right: 160px; + @include min-screen($S_THEMES) { + @include size(padding-right, $W_THEMES); } } .always-hide-line-numbers { /* Cancel making room for line numbers. */ - #main-text { + #main-text, #other-text { @include left-without-numbers; } } -.always-hide-themes { - /* Cancel making room for themes. */ - #main-text { - @include right-without-themes; +@include min-screen($S_THEMES) { + .always-hide-themes { + /* Cancel making room for themes. */ + #main-text, #other-text { + @include right-without-themes; + } } } +.with-other-text { + #main-text, #other-text { + @include right-without-themes; + @include min-screen($S_THEMES_WOTHER) { + @include size(padding-right, $W_THEMES); + } + } +} #book-text { - max-width: 600px; - margin: 20px auto; - + @include size(max-width, $W_BOOK_TEXT_MAX); + @include size(margin, 20px auto); + + font-size: .8em; + + @include min-screen($S_SMALL_TEXT_MAX) { + font-size: 1em; + } + h1 { - margin-top: 0px; + margin-top: 0; + } +} +.with-other-text { + #book-text { + font-size: .8em; + @include min-screen($S_SMALL_TEXT_MAX_WOTHER) { + font-size: 1em; + } } } diff --git a/apps/wolnelektury_core/static/scss/book_text/book_box.scss b/apps/wolnelektury_core/static/scss/book_text/book_box.scss new file mode 100644 index 000000000..38550ce74 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/book_text/book_box.scss @@ -0,0 +1,15 @@ +#book-short { + margin: 0; + padding: 0; + overflow: visible; + max-width: 488px; + + .book-box .book-box-inner { + border: none; + box-shadow: none; + } + + .book-box-read { + opacity: .5; + } +} diff --git a/apps/wolnelektury_core/static/scss/book_text/box.scss b/apps/wolnelektury_core/static/scss/book_text/box.scss index 4762e45cf..4f0976976 100644 --- a/apps/wolnelektury_core/static/scss/book_text/box.scss +++ b/apps/wolnelektury_core/static/scss/book_text/box.scss @@ -7,21 +7,44 @@ the hidden boxes (TOC and Themes). display: none; position: fixed; - left: 80px; + @include size(left, $W_MENU); top: 0; - bottom: 0; - max-width: 380px; - padding: 10px; + right: 0; + + max-height: 100%; + @include size(max-width, 380px); + @include size(padding, 10px 10px 30px 10px); margin: 0; overflow-x: hidden; overflow-y: auto; - z-index: 100000; + z-index: 100; color: black; - background: white; - opacity: .9; + background: #fff; + box-shadow: 2px 2px 2px #444; - border-width: 0 2px 2px 0; + @include size(border-width, 0 1px 1px 0); border-style: solid; - border-color: #191919; + border-color: #444; + + @include size(font-size, 14px); + line-height: 1.2em; + + h2 { + margin-top: 0; + } +} + + + +#box-underlay { + display: none; + position: fixed; + @include size(left, $W_MENU); + top: 0; + bottom: 0; + right: 0; + background:#000; + opacity: .5; + z-index: 99; } diff --git a/apps/wolnelektury_core/static/scss/book_text/const.scss b/apps/wolnelektury_core/static/scss/book_text/const.scss new file mode 100644 index 000000000..3373fe8a0 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/book_text/const.scss @@ -0,0 +1,26 @@ +$W_MENU: 80px; +$S_MENU: 600px; + +$W_BOOK_TEXT_MIN: 160px; +$W_BOOK_TEXT_MAX: 600px; +$S_SMALL_TEXT_MAX: 600px; +$S_SMALL_TEXT_MAX_WOTHER: 1200px; + +$W_NONUMBERS_TINY: 20px; +$S_NONUMBERS_TINY_MAX: 240px; +$W_NONUMBERS: 30px; +$S_NUMBERS: 320px; +$W_NUMBERS: 50px; + +$W_NOTHEMES_TINY: 20px; +$S_NOTHEMES_TINY_MAX: 240px; +$W_NOTHEMES_SMALL: 30px; +$S_NOTHEMES_SMALL_MAX: 320px; +$W_NOTHEMES: 44px; +$S_THEMES: 600px; +$S_THEMES_WOTHER: 1200px; +$W_THEMES: 160px; + +$W_BOOK_SHORT_FULL: 487.5px; +$S_BOOK_SHORT_FULL: $W_BOOK_SHORT_FULL + $W_MENU + 2px; +$S_BOOK_SHORT_MEDIUM: 400px; diff --git a/apps/wolnelektury_core/static/scss/book_text/menu.scss b/apps/wolnelektury_core/static/scss/book_text/menu.scss index e2879b429..380ba2243 100644 --- a/apps/wolnelektury_core/static/scss/book_text/menu.scss +++ b/apps/wolnelektury_core/static/scss/book_text/menu.scss @@ -1,29 +1,60 @@ +%menu-toggle { + position: relative; + padding: 0; + &:before { + content: ""; + position: absolute; + top: 8px; + height: 5px; + border-top: 15px double #ddd; + border-bottom: 5px solid #ddd; + } +} + /* Button for showing menu */ #menu-toggle-on { - width: 20px; - height: 20px; + @extend %menu-toggle; + @include size(width, $W_NONUMBERS_TINY); position: fixed; top: 0; left: 0; background: #191919; - color: white; + color: #ddd; text-align: center; - z-index: 500; + z-index: 100; + @include size(height, 44px); - @include min-screen(240px) { - width: 30px; - height: 30px; + @include min-screen($S_NONUMBERS_TINY_MAX) { + @include size(width, $W_NONUMBERS); } - @include min-screen(320px) { - width: 44px; - height: 44px; + @include min-screen($S_NUMBERS) { + @include size(width, 44px); + } + + &:before { + left: 5px; + right: 5px; + @include min-screen(240px) { + left: 8px; + right: 8px; + } } } +#menu-toggle-off { + @extend %menu-toggle; + height: 24px; + &:before { + left: 25px; + right: 25px; + } +} + + #menu { display: none; - z-index: 1000; + z-index: 101; width: 80px; position: fixed; @@ -33,6 +64,8 @@ background: #191919; height: 100%; + line-height: 1.1em; + ul { list-style: none; margin: 0; diff --git a/apps/wolnelektury_core/static/scss/book_text/numbering.scss b/apps/wolnelektury_core/static/scss/book_text/numbering.scss index fc611df94..e31b49403 100644 --- a/apps/wolnelektury_core/static/scss/book_text/numbering.scss +++ b/apps/wolnelektury_core/static/scss/book_text/numbering.scss @@ -1,8 +1,8 @@ @mixin hide-line-numbers { float: left; - margin-left: -20px; + margin-left: -$W_NONUMBERS_TINY; - width: 20px; + width: $W_NONUMBERS_TINY; height: 100%; padding: 0; overflow: hidden; @@ -19,18 +19,18 @@ content: "#"; display: block; float: left; - width: 9px; + width: $W_NONUMBERS_TINY / 2 - 1px; height: 100%; overflow: hidden; border-right: 1px solid #ccc; } - @include min-screen(240px) { - width: 30px; - margin-left: -30px; + @include min-screen($S_NONUMBERS_TINY_MAX) { + width: $W_NONUMBERS; + margin-left: -$W_NONUMBERS; &:before { - width: 14px; + width: $W_NONUMBERS / 2 - 1; } } } @@ -39,10 +39,11 @@ .anchor { @include hide-line-numbers; - @include min-screen(320px) { + @include min-screen($S_NUMBERS) { /* Show line numbers. */ - margin-left: -50px; - width: 44px; + font-size: .8em; + margin-left: -$W_NUMBERS; + width: $W_NUMBERS - 4px; height: auto; padding: 2px; text-align: center; @@ -54,7 +55,7 @@ } } -@include min-screen(320px) { +@include min-screen($S_NUMBERS) { .always-hide-line-numbers { /* Cancel showing line numbers. */ .anchor { diff --git a/apps/wolnelektury_core/static/scss/book_text/other.scss b/apps/wolnelektury_core/static/scss/book_text/other.scss index ca2aebb49..9ccedd932 100644 --- a/apps/wolnelektury_core/static/scss/book_text/other.scss +++ b/apps/wolnelektury_core/static/scss/book_text/other.scss @@ -3,33 +3,50 @@ nav #menu-other { } -#other-text { - display: none; -} +#other { + ul { + list-style: none; + padding: 0; + margin: 1em 0; -#main-pane.with-other-text { + li { + display: inline-block; - #main-text { - display: table-cell; - padding-left: 40px; - @include min-screen(1px) { - width: 300px; + a { + display: block; + } } + } +} - @include min-screen(1000px) { - width: 400px; - } + +.other-text-close { + background: #000; + color: #ddd; + opacity: .5; + text-align: center; + padding: .5em; + font-weight: bold; +} + + +#other-text { + position: relative; + display: none; + + .other-text-close { + position: absolute; + top: 0; + right: 0; } +} - #other-text { - display: table-cell; - padding-left: 40px; - @include min-screen(1px) { - width: 300px; - } +.other-text-close { + display: none; +} - @include min-screen(1000px) { - width: 400px; - } +.with-other-text { + .other-text-close { + display: block; } } diff --git a/apps/wolnelektury_core/static/scss/book_text/settings.scss b/apps/wolnelektury_core/static/scss/book_text/settings.scss index b8ac6a6df..edcb8bfdb 100644 --- a/apps/wolnelektury_core/static/scss/book_text/settings.scss +++ b/apps/wolnelektury_core/static/scss/book_text/settings.scss @@ -1,15 +1,27 @@ @mixin switch-on { background: #aaa; + border-top-color: #888; + border-left-color: #888; + border-bottom-color: #ddd; + border-right-color: #ddd; + + border-width: 2px; + border-style: solid; + } @mixin switch-off { background: none; + border-color: #aaa; } .settings-switch { display: block; padding: .5em; margin: .5em; - border: 1px solid #aaa; + //border: 1px solid #aaa; border-radius: 1em; + color: black; + border-width: 2px; + border-style: solid; } nav #menu-settings { diff --git a/apps/wolnelektury_core/static/scss/book_text/themes.scss b/apps/wolnelektury_core/static/scss/book_text/themes.scss index 899db5e1a..432a671bd 100644 --- a/apps/wolnelektury_core/static/scss/book_text/themes.scss +++ b/apps/wolnelektury_core/static/scss/book_text/themes.scss @@ -8,8 +8,6 @@ nav #menu-themes { } - - @mixin theme-hidden { width: 20px; height: 20px; @@ -21,7 +19,7 @@ nav #menu-themes { &:before { content: "▲"; color: #ccc; - text-align: center; + text-align: center; display: block; } @@ -37,7 +35,7 @@ nav #menu-themes { width: 44px; margin-right: -44px; &:before { - font-size: 3em; + font-size: 2.5em; } } @@ -52,6 +50,7 @@ nav #menu-themes { height: auto; overflow: visible; margin-left: 30px; + font-size: .9em; border-left: 1px solid #DDDDDD; color: #777; @@ -65,15 +64,15 @@ nav #menu-themes { .theme-begin { @include theme-hidden; + font-size: .9em; position: relative; float: right; margin-bottom: 8px; clear: both; line-height: 1.5em; text-align: left; - z-index: 60000; + z-index: 60; - font-size: 16px; font-style: normal; font-weight: normal; font-variant: normal; @@ -92,10 +91,19 @@ nav #menu-themes { } -@include min-screen(600px) { - .always-hide-themes { - .theme-begin { - @include theme-hidden; +.always-hide-themes { + .theme-begin { + @include theme-hidden; + } +} + +.with-other-text { + .theme-begin { + @include theme-hidden; + + @include min-screen(1200px) { + @include theme-showing; + margin-right: -160px; } } } diff --git a/apps/wolnelektury_core/static/scss/funding/funding.scss b/apps/wolnelektury_core/static/scss/funding/funding.scss index 20952733d..617cc47f9 100644 --- a/apps/wolnelektury_core/static/scss/funding/funding.scss +++ b/apps/wolnelektury_core/static/scss/funding/funding.scss @@ -16,19 +16,28 @@ @include size(padding, 5.25px 7.5px); @include size(margin, 7.5px); display: inline-block; - vertical-align: top; + vertical-align: middle; text-align: center; background: lighten(#018189, .05); @include size(width, 135px); + + @include min-screen(420px) { + vertical-align: top; + } } .learn-more { text-align: center; margin: auto; @include size(font-size, 10px); padding: .5em; + + @include min-screen(300px) { + display: inline; + } @include min-screen(420px) { padding: 0; + display: block; } } .description { @@ -55,6 +64,40 @@ background-repeat: repeat-y; background-color: #F68900; @include box-shadow(1px 1px 1px #888); + + .progress-collected { + float:left; + &:after { + content: " / "; + } + @include min-screen(500px) { + &:after { + content: none; + } + } + } + .progress-target { + float: left; + padding-left: 0; + @include min-screen(500px) { + float: right; + @include size(padding-left, 6px); + } + } + .progress-extralabel { + display: none; + @include min-screen(500px) { + display: inline; + } + } + .progress-until { + display: inline-block; + margin-right: 0em; + text-align: right; + @include min-screen(500px) { + text-align: center; + } + } } .with-button { clear: left; @@ -66,6 +109,10 @@ .funding-title { @include size(font-size, 11px); + display: block; + @include min-screen(640px) { + display: inline; + } } .funding-title-strong { @extend .funding-title; diff --git a/apps/wolnelektury_core/static/scss/main.scss b/apps/wolnelektury_core/static/scss/main.scss index 8d6e0d326..bc1ef5fc1 100644 --- a/apps/wolnelektury_core/static/scss/main.scss +++ b/apps/wolnelektury_core/static/scss/main.scss @@ -1,5 +1,6 @@ @import "tools"; +@import "main/const"; @import "main/auth"; @import "main/base"; @import "main/book_box"; diff --git a/apps/wolnelektury_core/static/scss/main/book_box.scss b/apps/wolnelektury_core/static/scss/main/book_box.scss index 0ee26be0f..e8504e5df 100755 --- a/apps/wolnelektury_core/static/scss/main/book_box.scss +++ b/apps/wolnelektury_core/static/scss/main/book_box.scss @@ -7,8 +7,8 @@ } .book-mini-box img.cover { - @include size(height, 193px); - @include size(width, 139px); + @include size(height, 193px); + @include size(width, 139px); } @@ -17,7 +17,7 @@ @include size(margin-right, 15px); @include size(margin-bottom, 5px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { position: absolute; top: 0; left: 0; @@ -28,7 +28,7 @@ @include size(height, 193px / 2); @include size(width, 139px / 2); - @media screen and (min-width: 20em) { + @include min-screen($S_BOOK_SHORT_MEDIUM) { @include size(height, 193px); @include size(width, 139px); } @@ -40,15 +40,27 @@ display: inline-block; vertical-align: top; - a { + .book-mini-box-inner { @include inner-box; @include size(height, 271px); @include size(margin, 1px); overflow: hidden; + a { + display: block; + } } img.cover { @include size(margin-bottom, 18px); } + .language { + color: #aaa; + float: right; + @include mono; + @include size(font-size, 10px); + text-transform: uppercase; + position: relative; + @include size(top, -20px); + } .desc { margin-left: 0; } @@ -75,7 +87,7 @@ list-style: none; .Book-item { - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { display: inline-block; } vertical-align: top; @@ -87,8 +99,13 @@ margin: 0; vertical-align: top; - @media screen and (min-width: 32em) { - @include size(width, 487.5px); + /* */ + a { + color: #0D7E85; + } + + @include min-screen($S_BOOK_SHORT_FULL) { + @include size(width, $W_BOOK_SHORT_FULL); } .book-box-inner { @@ -115,8 +132,6 @@ @include size(margin-right, 0); .book-left-column { /* FIXME */ - @include size(max-width, 600px); - @media screen and (min-width: 62.5em) { float: left; @include size(width, 536px); @@ -128,18 +143,20 @@ @include size(margin-top, 5px); } - @media screen and (min-width: 62.5em) { - .book-box-head, - .tags, - .book-box-tools { + .book-box-head, + .tags, + .book-box-tools { + @media screen and (min-width: 62.5em) { @include size(width, 382px); } } #theme-list-wrapper { - @include size(margin-left, 154px); + @include min-screen($S_BOOK_SHORT_MEDIUM) { + @include size(margin-left, 154px); + @include size(width, 300px); + } margin-bottom: 0; - @include size(width, 300px); p { @include size(margin-top, 10px); @@ -149,33 +166,51 @@ .right-column { @include size(margin-top, 16px); + // Eat the padding + @include size(margin-left, -10px); + @include size(margin-right, -10px); + max-width: none; @media screen and (min-width: 62.5em) { @include size(width, 415px); // Eat the padding @include size(margin-top, -8px); - @include size(margin-right, -10px); } .other-tools, .other-download { - float: left; - @include size(width, 145px); - @include size(margin-top, 50px); - @include size(margin-bottom, 0); - @include size(margin-left, 5px); - @include size(margin-right, 0); @include size(font-size, 11px); + clear: left; + @include size(margin-top, 25px); + line-height: 1.75em; + @include size(margin-left, 15px); h2 { margin: 0; @include size(font-size, 11px); @include mono; } + + @include min-screen($S_BOOK_SHORT_FULL) { + float: left; + clear: none; + @include size(width, 145px); + @include size(margin-top, 50px); + @include size(margin-right, 0); + @include size(margin-bottom, 0); + @include size(margin-left, 5px); + } + + @include min-screen(1000px) { + @include size(margin-top, 50px); + line-height: 1.2em; + } } .other-download { - @include size(margin-left, 15px); - @include size(width, 220px); + @include min-screen($S_BOOK_SHORT_FULL) { + @include size(margin-left, 15px); + @include size(width, 220px); + } } } } @@ -184,20 +219,26 @@ .book-box-body { @include size(margin-bottom, 10px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { margin-bottom: 0; @include size(height, 170px); } position: relative; + .book-box-head, + .tags, + .book-box-tools { + @include min-screen($S_BOOK_SHORT_FULL) { + margin-left: 154px; + } + } + .book-box-head { @include size(padding-top, 14px); @include size(margin-bottom, 10px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { @include size(min-height, 70px); - @include size(width, 310px); - float: right; } a { @@ -210,7 +251,7 @@ @include size(max-height, 26.4px); overflow: hidden; - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { @include size(max-width, 264px); } } @@ -220,7 +261,7 @@ @include size(margin-top, 7.2px); @include size(margin-bottom, 12px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { margin-bottom: 0; @include size(height, 57.6px); overflow: hidden; @@ -232,9 +273,7 @@ @include size(font-size, 11px); line-height: 1.2em; - @media screen and (min-width: 32em) { - @include size(width, 310px); - float: right; + @include min-screen($S_BOOK_SHORT_FULL) { clear: right; @include size(max-height, 57.6px); overflow: hidden; @@ -245,7 +284,7 @@ @include size(margin-top, 6px); @include size(margin-bottom, 6px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { display: inline; } @@ -272,27 +311,23 @@ clear: left; - @media screen and (min-width: 20em) { + @include min-screen($S_BOOK_SHORT_MEDIUM) { clear: none; @include size(margin-left, 139px + 15px); } - @media screen and (min-width: 32em) { - @include size(width, 310px); - float: right; - clear: right; - } - li { @include mono; + margin-top: 1em; - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { display: inline-block; + margin-top: 0; } } .book-box-read { - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { @include size(width, 126.5px); } @@ -312,7 +347,7 @@ .book-box-download { position: relative; - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { @include size(width, 93.5px); } @@ -323,24 +358,24 @@ &.downarrow { color: black; - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { color: #0D7E85; - } - &:before { - content: url("/static/img/download.png"); - @include size(font-size, 25px); - @include size(margin-right, 3.71px); - vertical-align: middle; - font-weight: normal; + &:before { + content: url("/static/img/download.png"); + @include size(font-size, 25px); + @include size(margin-right, 3.71px); + vertical-align: middle; + font-weight: normal; + } } } } .book-box-formats { - @include size(padding-left, 25px); + @include size(padding-left, 19px); - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { display: none; position: absolute; @@ -362,12 +397,25 @@ display: block; @include size(margin-top, 16px); - @media screen and (min-width: 32em) { + a { + &:before { + content: url("/static/img/download.png"); + @include size(font-size, 25px); + @include size(margin-right, 3.71px); + vertical-align: middle; + font-weight: normal; + } + } + + @include min-screen($S_BOOK_SHORT_FULL) { @include size(margin-top, 0); &:first-child { @include size(margin-top, 16px); } + a:before { + display:none; + } } } } @@ -379,7 +427,7 @@ } .book-box-audiobook { - @media screen and (min-width: 32em) { + @include min-screen($S_BOOK_SHORT_FULL) { @include size(width, 77px); } diff --git a/apps/wolnelektury_core/static/scss/main/cite.scss b/apps/wolnelektury_core/static/scss/main/cite.scss index b95628888..cd11ec112 100755 --- a/apps/wolnelektury_core/static/scss/main/cite.scss +++ b/apps/wolnelektury_core/static/scss/main/cite.scss @@ -39,7 +39,9 @@ .book-wide-box .cite { background-color: #f7f7f7; vertical-align: middle; - @include size(width, 395px); + @include min-screen(1000px) { + @include size(width, 395px); + } margin: 0; @include size(padding, 10px); } diff --git a/apps/wolnelektury_core/static/scss/main/const.scss b/apps/wolnelektury_core/static/scss/main/const.scss new file mode 100644 index 000000000..2ebc4b81c --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/const.scss @@ -0,0 +1,3 @@ +$S_BOOK_SHORT_MEDIUM: 320px; +$S_BOOK_SHORT_FULL: 512px; +$W_BOOK_SHORT_FULL: 487.5px; diff --git a/apps/wolnelektury_core/static/scss/main/header.scss b/apps/wolnelektury_core/static/scss/main/header.scss index 4edd53e18..770e43bc0 100755 --- a/apps/wolnelektury_core/static/scss/main/header.scss +++ b/apps/wolnelektury_core/static/scss/main/header.scss @@ -72,6 +72,7 @@ header#main { @media screen and (min-width: 24em) { @include size(padding-top, 6px); @include size(font-size, 13px); + @include size(margin-left, 180px); text-align: right; } @@ -94,6 +95,7 @@ header#main { @media screen and (min-width: 24em) { @include size(padding-top, 15px); + @include size(margin-left, 180px); text-align: right; } @media screen and (min-width: 62.5em) { diff --git a/apps/wolnelektury_core/static/scss/main/menu.scss b/apps/wolnelektury_core/static/scss/main/menu.scss index 38a7d20bc..501b32030 100755 --- a/apps/wolnelektury_core/static/scss/main/menu.scss +++ b/apps/wolnelektury_core/static/scss/main/menu.scss @@ -85,8 +85,6 @@ display: block; float: right; - @include size(padding-left, 25px); - @include size(padding-right, 20px); background: #f7f7f7; @include mono; @@ -95,6 +93,9 @@ } #lang-button { + @include size(padding-left, 25px); + @include size(padding-right, 20px); + display:block; @include size(line-height, 17px); @include size(padding-top, 16px); diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py index 798f5af80..fd99d38b7 100644 --- a/wolnelektury/settings/static.py +++ b/wolnelektury/settings/static.py @@ -107,7 +107,11 @@ PIPELINE_JS = { }, 'book_text': { 'source_filenames': [ + 'js/jquery.form.js', + 'js/jquery.jqmodal.js', 'js/book_text/*.js', + 'js/locale.js', + 'js/dialogs.js', ], 'output_filename': 'js/book_text.js', }, -- 2.20.1