From 884be9d702f99a38cd9b04c4fdedca887286f35d Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 10 Jan 2014 16:58:04 +0100 Subject: [PATCH] Update picture viewer. --- .../templates/catalogue/book_text.html | 225 ++++++++---------- .../templates/catalogue/viewer_base.html | 73 ++++++ .../templates/lesmianator/poem.html | 50 ++-- .../templates/picture/picture_list_thumb.html | 4 +- .../templates/picture/picture_short.html | 85 +++---- .../templates/picture/picture_viewer.html | 124 +++++----- .../static/css/master.picture.css | 104 ++------ .../static/js/book_text/menu.js | 18 +- apps/wolnelektury_core/static/js/picture.js | 25 +- .../static/scss/book_text.scss | 1 + .../static/scss/book_text/body.scss | 25 ++ .../static/scss/book_text/menu.scss | 69 ++++-- apps/wolnelektury_core/static/scss/main.scss | 1 + .../static/scss/main/base.scss | 5 + .../static/scss/main/book_box.scss | 31 ++- .../static/scss/main/picture_box.scss | 33 +++ wolnelektury/settings/static.py | 12 +- 17 files changed, 479 insertions(+), 406 deletions(-) create mode 100644 apps/catalogue/templates/catalogue/viewer_base.html create mode 100644 apps/wolnelektury_core/static/scss/main/picture_box.scss diff --git a/apps/catalogue/templates/catalogue/book_text.html b/apps/catalogue/templates/catalogue/book_text.html index b18fba444..e4ed91f5a 100644 --- a/apps/catalogue/templates/catalogue/book_text.html +++ b/apps/catalogue/templates/catalogue/book_text.html @@ -1,131 +1,100 @@ - +{% extends "catalogue/viewer_base.html" %} {% load i18n %} -{% load static from staticfiles %} -{% load chunks compressed catalogue_tags %} +{% load catalogue_tags %} {% load thumbnail %} - - - - - {{ book.pretty_title }} :: {% trans "Wolne Lektury" %} - - {% compressed_css "book_text" %} - - - - -
- -
- {{ book.html_file.read|safe }} -
- - - - - - - -
- - - - {% compressed_js "book_text" %} - - - + + {% endfor %} + {% endspaceless %} + + +{% endif %} + +
+

{% trans "Settings" %}

+ {% trans "Display line numbers" %}
+ {% trans "Display themes" %}
+ {% trans "Display footnotes" %}
+
+ +
+ {% book_short book %} +
+{% endblock footer %} diff --git a/apps/catalogue/templates/catalogue/viewer_base.html b/apps/catalogue/templates/catalogue/viewer_base.html new file mode 100644 index 000000000..1092ead87 --- /dev/null +++ b/apps/catalogue/templates/catalogue/viewer_base.html @@ -0,0 +1,73 @@ + +{% load i18n %} +{% load static from staticfiles %} +{% load compressed %} + + + + + {% block title %}{% endblock %} :: {% trans "Wolne Lektury" %} + + {% compressed_css "book_text" %} + {% block extrahead %}{% endblock %} + + + + + + + + {% block big-pane %} +
+ + {% block main %} +
+ {% block main-text %}{% endblock %} +
+ {% endblock main %} + {% endblock big-pane %} + + +
+ {% block footer %}{% endblock %} + +
+ + {# template #} +
+
{% trans "Close" %}
+
+

* {% trans "Loading" %}

+
+
+
+ +
+ + + {% block js-dependencies %}{% endblock %} + + {% compressed_js "book_text" %} + + + {% block extrabody %}{% endblock %} + + diff --git a/apps/lesmianator/templates/lesmianator/poem.html b/apps/lesmianator/templates/lesmianator/poem.html index 4a83f2d86..4c4726f0f 100644 --- a/apps/lesmianator/templates/lesmianator/poem.html +++ b/apps/lesmianator/templates/lesmianator/poem.html @@ -1,29 +1,24 @@ +{% extends "catalogue/viewer_base.html" %} {% load i18n %} -{% load static from staticfiles %} -{% load compressed %} - - - - - {% block title %}WolneLektury.pl{% endblock %} - - {% compressed_css "book" %} - - - - -
+ + +{% block title %}Leśmianator{% endblock %} + + +{% block menu %} +
  • Wolne Lektury przepuszczone przez mikser.
    • + {% if shelf or not books %} + {# shelf or global mixing #} +
  • Twórzże się jeszcze raz!
    • + {% else %}{% if book %} +
  • Twórzże się jeszcze raz!
    • + {% endif %}{% endif %} +{% endblock menu %} + + + +{% block main-text %} +

    Leśmianator *** @@ -66,6 +61,5 @@

    - {{ piwik_tag|safe }} - - +
    +{% endblock main-text %} diff --git a/apps/picture/templates/picture/picture_list_thumb.html b/apps/picture/templates/picture/picture_list_thumb.html index 472a2ceb7..6a42d6906 100644 --- a/apps/picture/templates/picture/picture_list_thumb.html +++ b/apps/picture/templates/picture/picture_list_thumb.html @@ -21,7 +21,7 @@
    {% block book_list_logos %} - Narodowe Centrum Kultury + Narodowe Centrum Kultury {% endblock %}
    @@ -29,7 +29,7 @@
      {% spaceless %} {% for picture in book_list %} -
    1. +
    2. {% picture_short picture %}
      3. {% endfor %} diff --git a/apps/picture/templates/picture/picture_short.html b/apps/picture/templates/picture/picture_short.html index 080bd1618..6095f441f 100644 --- a/apps/picture/templates/picture/picture_short.html +++ b/apps/picture/templates/picture/picture_short.html @@ -2,70 +2,74 @@ {% load thumbnail %} {% load catalogue_tags social_tags %} {% load picture_tags %} -
      -
      +
      +
      + +
      + +
      +
      + {% for tag in tags.author %} + {{ tag }}{% if not forloop.last %}, + {% endif %}{% endfor %} +
      +
      + {% if main_link %}{% endif %} + {{ picture.title }} + {% if main_link %}{% endif %} +
      +
      + + +
      {% block picture-view %} - + {% if main_link %}{% endif %} {% thumbnail picture.image_file "216x288" crop="center" as thumb %} {% endthumbnail %} - + {% if main_link %}{% endif %} {% endblock %} {# what about licensing icons here #}
      -
      - -
      -
      - {% for author in tags.author %} - {{ author }}{% if not forloop.last %},{% endif %} - {% endfor %} -
      -
      {{ picture.title }}
      -
      +
      {% spaceless %} - {% trans "Epoch" %}:  - - {% for tag in tags.epoch %} - {{ tag.name }}{% if not forloop.last %}, {% endif %} + + {% trans "Epoch" %}:  + {% for tag in tags.epoch %} + {{ tag }} + {% if not forloop.last %}, {% endif %} {% endfor %} - + - {% trans "Kind" %}:  - - {% for tag in tags.kind %} - {{ tag.name }}{% if not forloop.last %}, {% endif %} + + {% trans "Kind" %}:  + {% for tag in tags.kind %} + {{ tag }} + {% if not forloop.last %}, {% endif %} {% endfor %} - + - {% trans "Genre" %}:  - - {% for tag in tags.genre %} - {{ tag.name }}{% if not forloop.last %}, {% endif %} + + {% trans "Genre" %}:  + {% for tag in tags.genre %} + {{ tag }} + {% if not forloop.last %}, {% endif %} {% endfor %} - + {% endspaceless %}
      {% block book-box-extra-info %}{% endblock %} @@ -73,6 +77,7 @@ {% endblock %} {% block right-column %} {% endblock %} -
      +
      +
      diff --git a/apps/picture/templates/picture/picture_viewer.html b/apps/picture/templates/picture/picture_viewer.html index 40cbd8071..65b689d27 100644 --- a/apps/picture/templates/picture/picture_viewer.html +++ b/apps/picture/templates/picture/picture_viewer.html @@ -1,72 +1,80 @@ +{% extends "catalogue/viewer_base.html" %} {% load i18n %} {% load static from staticfiles %} -{% load chunks compressed catalogue_tags %} +{% load compressed catalogue_tags %} {% load thumbnail %} - - - - -{# XXX było: picture.pretty_title #} - {% trans "Wolne Lektury" %} :: {{ picture.title }} - - {% compressed_css "picture" %} - - - {% compressed_js "book" %} - - - - - -
      -
      - Wolne Lektury - - Narodowe Centrum Kultury -
      - {% book_info picture %} -
      - {{ picture.html_file.read|safe }} - + +{% block title %}{{ picture.pretty_title }}{% endblock %} + + +{% block body-id %}picture-viewer{% endblock %} + + +{% block js-dependencies %} + +{% endblock %} + + +{% block no-menu-extra %} +
    3. +
    4. -
      5. +{% endblock %} + + +{% block menu %} +
    5. +-
      6. + + +
    6. + {{ picture.pretty_title }} +
      7. + + +
    7. {% trans "Objects" %}
      8. +
    8. {% trans "Themes" %}
      9. + + + + +
    9. + Narodowe Centrum Kultury +
      10. + +{% endblock %} + +{% block main %}
      - {% thumbnail picture.image_file "700x500" as pic %}
      -
      {% endthumbnail %}
      - {{ piwik_tag|safe }} -
      -
      -
      +{% endblock %} + + +{% block footer %} +{{ picture.html_file.read|safe }} + +
      +
      Wolne Lektury - -
      -
      - Narodowe Centrum Kultury + + Narodowe Centrum Kultury
      -
      - - + +
      + {{ picture.short_html }} +
      + +{% endblock %} diff --git a/apps/wolnelektury_core/static/css/master.picture.css b/apps/wolnelektury_core/static/css/master.picture.css index 81bc69824..43abda40a 100644 --- a/apps/wolnelektury_core/static/css/master.picture.css +++ b/apps/wolnelektury_core/static/css/master.picture.css @@ -1,6 +1,7 @@ #picture-view { - width: 100%; + left: 0; + right: 0; position:absolute; top: 0; bottom: 0; @@ -9,7 +10,7 @@ #picture-view .picture-wrap { background-repeat: no-repeat; - margin: 3rem auto 1rem auto; + margin: 0 auto 0 auto; display: block; position: relative; z-index: 10; @@ -17,11 +18,6 @@ } - -.picture-wrap img.loading { - margin-left: -10000px; -} - .picture-wrap .mark { border: 2px solid rgba(200, 200, 200, 0.7); position: absolute; @@ -37,100 +33,28 @@ // bottom: -1.5em; } - -.toolbar { - position: fixed; - //top: 1.5rem; - left: 0rem; - color: #FFF; - z-index: 99; - list-style: none; - padding: 0; - margin: 0; - - background: #333; - opacity: 0.9; - width: 8rem; -} - -.toolbar ul { - list-style: none; - padding: 0; - margin: 0; - font-size: 0.8rem; - background-color: #222; -} - -.toolbar .button.inactive a:active, -.toolbar .button.inactive a:link, -.toolbar .button.inactive a:visited +.button.inactive:active, +.button.inactive:link, +.button.inactive:visited { color: #606060 !important; cursor: not-allowed; } -.toolbar .button a { - //background: #333; - //opacity: 0.9; - display: block; - height:1.5rem; - - text-align: center; - color: #FFF; - padding: 0.2rem 0; - text-decoration: none; -} - -.toolbar .button .dropdown-body a { - height: 1.2rem; - white-space: nowrap; -} - -#picture-view .toolbar .button.square a { - width: 4rem; //1.5rem; - font-weight: bold; -} - -li.button { - clear: both; -} -li.button.square { - clear: none; - float: left; -} - -.toolbar .button a:link, -.toolbar .button a:visited { - color: #FFF; -} - -#picture-view .toolbar.button a:active { - color: yellow; -} - -.moveright { - margin-left: 8rem !important; -} - #sponsors { - position: absolute; - display: block; - left: 0; - bottom: 0; - width: 8rem; - - z-index:1; -} -#sponsors div { - z-index: 10; + margin-top: 3em; } - #sponsors img { width: 100%; - z-index: 10; } #spinner { height: 1em; z-index:10; -} \ No newline at end of file +} + +.dropdown-body { + font-size: 0.8rem; + background-color: #444; +} + diff --git a/apps/wolnelektury_core/static/js/book_text/menu.js b/apps/wolnelektury_core/static/js/book_text/menu.js index 79dc00190..5bbc1a8d8 100644 --- a/apps/wolnelektury_core/static/js/book_text/menu.js +++ b/apps/wolnelektury_core/static/js/book_text/menu.js @@ -6,6 +6,9 @@ function hide_menu_boxes() { $("#menu .active").each(function() { $(this).removeClass("active"); $("#" + $(this).attr("data-box")).hide(); + if ($(this).hasClass('dropdown')) { + $($(this).attr('href')).slideUp('fast'); + } }); $("#box-underlay").hide(); } @@ -64,7 +67,20 @@ $("#menu a").each(function() { } }); } - else { + else if ($(this).hasClass('dropdown')) { + $(this).click(function(e) { + e.preventDefault(); + var showing = $(this).hasClass("active"); + hide_menu_boxes(); + if (!showing) { + $("body").addClass("menu-showed"); + $("#sponsors:not(:hidden)").fadeOut(); + $(this).addClass("active"); + $($(this).attr('href')).slideDown('fast'); + } + }); + } + else if (!$(this).hasClass('button')) { $(this).click(release_menu); } }); diff --git a/apps/wolnelektury_core/static/js/picture.js b/apps/wolnelektury_core/static/js/picture.js index 174a9ffa4..7c5ff9c39 100644 --- a/apps/wolnelektury_core/static/js/picture.js +++ b/apps/wolnelektury_core/static/js/picture.js @@ -24,7 +24,7 @@ self._zoom = 0; self._ratio = 1.0; - self.original = self.element.find('img.original').eq(0); + self.original = $(''); self._original_avaialble = self.ORIGINAL_LOADING; function original_loaded() { @@ -236,31 +236,14 @@ $(document).ready(function() { $.highlightFade.defaults.speed = 3000; - $('.toolbar a.dropdown').each(function() { + $('#menu .dropdown').each(function() { $t = $(this); $($t.attr('href')).hide().insertAfter(this); }); - function closeDD() { - $(this).removeClass('selected'); - $($(this).attr('href')).slideUp('fast'); - - } - $('.toolbar a.dropdown').click(function(ev) { - $("#sponsors:not(:hidden)").fadeOut(); - ev.preventDefault(); - if ($(this).hasClass('selected')) { - closeDD.call(this); - } else { - $(this).addClass('selected'); - $($(this).attr('href')).slideDown('fast'); - $(this).parent().siblings(".button:has(.dropdown)").children(".dropdown").each(closeDD); - } - }); - $(".picture-wrap").pictureviewer({ - plus_button: $(".toolbar .button.plus"), - minus_button: $(".toolbar .button.minus"), + plus_button: $(".button.plus"), + minus_button: $(".button.minus"), areas_links: $("#picture-objects a, #picture-themes a"), }); diff --git a/apps/wolnelektury_core/static/scss/book_text.scss b/apps/wolnelektury_core/static/scss/book_text.scss index 4459aa4c7..566ee4804 100644 --- a/apps/wolnelektury_core/static/scss/book_text.scss +++ b/apps/wolnelektury_core/static/scss/book_text.scss @@ -13,6 +13,7 @@ @import "book_text/toc"; @import "main/book_box"; +@import "main/picture_box"; @import "book_text/book_box"; @import "main/auth"; diff --git a/apps/wolnelektury_core/static/scss/book_text/body.scss b/apps/wolnelektury_core/static/scss/book_text/body.scss index 2454f0c78..2f1710dbf 100644 --- a/apps/wolnelektury_core/static/scss/book_text/body.scss +++ b/apps/wolnelektury_core/static/scss/book_text/body.scss @@ -6,6 +6,7 @@ display: flex; flex-direction: row; justify-content: left; + position: relative; @include min-screen($W_BOOK_TEXT_MAX) { justify-content: center; } @@ -21,6 +22,30 @@ } } +#picture-viewer #big-pane { + @include size(margin-left, $W_NONUMBERS_TINY); + + @include min-screen($S_NONUMBERS_TINY_MAX) { + @include size(margin-left, $W_NONUMBERS); + } + + @include min-screen($S_NUMBERS) { + @include size(margin-left, 44px); + } +} + +@include min-screen($S_MENU) { + #picture-viewer #big-pane { + @include size(margin-left, $W_MENU); + } + .menu-hidden { + #big-pane { + margin-left: 44px; + } + } +} + + /* diff --git a/apps/wolnelektury_core/static/scss/book_text/menu.scss b/apps/wolnelektury_core/static/scss/book_text/menu.scss index ec6cc1e2a..1a555733b 100644 --- a/apps/wolnelektury_core/static/scss/book_text/menu.scss +++ b/apps/wolnelektury_core/static/scss/book_text/menu.scss @@ -11,18 +11,8 @@ } } -/* Button for showing menu */ -#menu-toggle-on { - @extend %menu-toggle; +#no-menu { @include size(width, $W_NONUMBERS_TINY); - position: fixed; - top: 0; - left: 0; - background: #191919; - color: #ddd; - text-align: center; - z-index: 100; - @include size(height, 44px); @include min-screen($S_NONUMBERS_TINY_MAX) { @include size(width, $W_NONUMBERS); @@ -32,12 +22,24 @@ @include size(width, 44px); } - &:before { - left: 5px; - right: 5px; - @include min-screen(240px) { - left: 8px; - right: 8px; + /* Button for showing menu */ + #menu-toggle-on { + @extend %menu-toggle; + display: block; + background: #191919; + color: #ddd; + text-align: center; + z-index: 100; + @include size(height, 44px); + padding: 0; + + &:before { + left: 5px; + right: 5px; + @include min-screen(240px) { + left: 8px; + right: 8px; + } } } } @@ -54,17 +56,19 @@ #menu { display: none; - z-index: 101; - width: 80px; + height: 100%; +} + +#menu, #no-menu { + z-index: 101; position: fixed; top: 0; left: 0; text-align: center; - background: #191919; - height: 100%; - line-height: 1.1em; + background: #191919; + color: #ddd; ul { list-style: none; @@ -95,8 +99,13 @@ } /* body class for showing menu */ -.menu-showed #menu { - display: block; +.menu-showed { + #menu { + display: block; + } + #no-menu { + display: none; + } } /* menu showing by default */ @@ -104,8 +113,16 @@ #menu { display: block; } - /* body class for hiding menu */ - .menu-hidden #menu { + #no-menu { display: none; } + /* body class for hiding menu */ + .menu-hidden { + #menu { + display: none; + } + #no-menu { + display: block; + } + } } diff --git a/apps/wolnelektury_core/static/scss/main.scss b/apps/wolnelektury_core/static/scss/main.scss index bc1ef5fc1..5a480073c 100644 --- a/apps/wolnelektury_core/static/scss/main.scss +++ b/apps/wolnelektury_core/static/scss/main.scss @@ -16,6 +16,7 @@ @import "main/main_content"; @import "main/main_page"; @import "main/menu"; +@import "main/picture_box"; @import "main/search"; @import "main/tag"; diff --git a/apps/wolnelektury_core/static/scss/main/base.scss b/apps/wolnelektury_core/static/scss/main/base.scss index d9d523769..1f1021a9f 100755 --- a/apps/wolnelektury_core/static/scss/main/base.scss +++ b/apps/wolnelektury_core/static/scss/main/base.scss @@ -52,6 +52,11 @@ h3 { .normal-text { line-height: 1.3em; + @include size(margin, 0 5px); + + @media screen and (min-width: 62.5em) { + margin: 0; + } } .white-box { diff --git a/apps/wolnelektury_core/static/scss/main/book_box.scss b/apps/wolnelektury_core/static/scss/main/book_box.scss index 4655a3cd5..cca6e4a53 100755 --- a/apps/wolnelektury_core/static/scss/main/book_box.scss +++ b/apps/wolnelektury_core/static/scss/main/book_box.scss @@ -364,18 +364,29 @@ position: relative; z-index: 101; - &.downarrow { - color: black; - - @include min-screen($S_BOOK_SHORT_FULL) { - color: #0D7E85; + @mixin downarrow { + 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; + display: inline; + } + } + &.downarrow { + @include downarrow; + &.hoverclick { + color: black; &:before { - content: url("/static/img/download.png"); - @include size(font-size, 25px); - @include size(margin-right, 3.71px); - vertical-align: middle; - font-weight: normal; + display: none; + } + + @include min-screen($S_BOOK_SHORT_FULL) { + @include downarrow; } } } diff --git a/apps/wolnelektury_core/static/scss/main/picture_box.scss b/apps/wolnelektury_core/static/scss/main/picture_box.scss new file mode 100644 index 000000000..26adc58f2 --- /dev/null +++ b/apps/wolnelektury_core/static/scss/main/picture_box.scss @@ -0,0 +1,33 @@ +.picture { + &.book-wide-box { + img.cover { + width: 53.5em; + height: auto; + } + + .book-box-tools { + margin-left: 50em; // 535px image + 15px margin @ 11pt + } + + .other-tools { + margin: 5em 0 0 0; + } + #theme-list-wrapper { + margin-left: 55em; + } + } + + li.book-box-download { + width: 15em; + } +} + + +.work-list { + .Picture-item { + @include min-screen($S_BOOK_SHORT_FULL) { + display: inline-block; + } + vertical-align: top; + } +} diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py index a6f5d1b98..472b2e978 100644 --- a/wolnelektury/settings/static.py +++ b/wolnelektury/settings/static.py @@ -44,6 +44,8 @@ PIPELINE_CSS = { 'source_filenames': [ 'scss/book_text.scss', 'css/new.book.css', + + 'css/master.picture.css', ], 'output_filename': 'css/compressed/book_text.css', }, @@ -108,10 +110,10 @@ PIPELINE_JS = { 'js/jquery.highlightfade.js', 'js/book_text/other.js', 'js/book.js', - 'js/picture.js', + 'js/raphael-min.js', - 'player/openplayer.js', 'js/progressSpin.min.js', + 'js/picture.js', ], 'output_filename': 'js/book.min.js', }, @@ -122,6 +124,12 @@ PIPELINE_JS = { 'js/book_text/*.js', 'js/locale.js', 'js/dialogs.js', + + 'js/jquery.highlightfade.js', + 'js/raphael-min.js', + 'player/openplayer.js', + 'js/progressSpin.min.js', + 'js/picture.js', ], 'output_filename': 'js/book_text.js', }, -- 2.20.1