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]
{% load thumbnail %}
<div class="book-mini-box">
+ <div class="book-mini-box-inner">
+ {% if with_link %}
<a href="{{ book.get_absolute_url }}">
+ {% endif %}
{% if book.cover %}
<img src="
{% thumbnail book.cover "139x193" as thumb %}
{% endthumbnail %}
" alt="{{ author_str }} – {{ book.title }}" class="cover" />
{% endif %}
+ {% if show_lang %}
+ <span class="language" title="{{ book.language_name }}">{{ book.language_code }}</span>
+ {% endif %}
<div class="desc">
<span class="mono author">{{ author_str }}</span>
<span class="title">{{ book.title }}</span>
</div>
+ {% if with_link %}
</a>
+ {% endif %}
+ </div>
</div>
{% endfor %}
</span></span>
+ {% if show_lang %}
+ <span class="category">
+ <span class="mono"> {% trans "Language" %}:</span> <span class="book-box-tag">
+ <a>{{ book.language_name }}</a>
+ </span></span>
+ {% endif %}
+
{% endspaceless %}
</div>
</div>
+<!DOCTYPE html>
{% load i18n %}
{% load static from staticfiles %}
{% load chunks compressed catalogue_tags %}
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml">
+{% load thumbnail %}
+<html class="no-js">
<head>
- <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
- <title>{% trans "Wolne Lektury" %} :: {{ book.pretty_title }}</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+ <title>{{ book.pretty_title }} :: {% trans "Wolne Lektury" %}</title>
<link rel="icon" href="{% static "img/favicon.png" %}" type="image/x-icon" />
- {% compressed_css "book" %}
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- {% compressed_js "book" %}
- <!--[if IE]>
- {% compressed_js "book_ie" %}
- <![endif]-->
-
+ {% compressed_css "book_text" %}
</head>
<body>
- <div id="menu">
- <ul>
- <li><a class="menu" href="#toc">{% trans "Table of contents" %}</a></li>
- <li><a class="menu" href="#themes">{% trans "Themes" %}</a></li>
- <li><a class="menu" href="#nota_red">{% trans "Edit. note" %}</a></li>
- <li><a class="menu" href="#info">{% trans "Infobox" %}</a></li>
- <li><a href="{{ book.get_absolute_url }}">{% trans "Book's page" %}</a></li>
- <li><a class="menu" href="#download">{% trans "Download" %}</a></li>
- {% if related.media.mp3 or related.media.ogg %}
- <li><a class="open-player" target="_blank" href="{% url "book_player" book.slug %}">
- {% trans "Listen" %}</a></li>
- {% endif %}
- {% if book.other_versions.exists %}
- <li><a class="menu" href="#other-versions">Inne wersje</a></li>
- {% endif %}
- </ul>
- </div>
- <div id="info">
- {% book_info book %}
- </div>
- <div id="download">
- <ul>
- {% if book.pdf_file %}
- <li><a href="{{ book.pdf_file.url}}">PDF</a> {% trans "to print" %}</li>
- {% endif %}
- {% if book.epub_file %}
- <li><a href="{{ book.epub_file.url}}">EPUB</a> {% trans "for a reader" %}</li>
- {% endif %}
- {% if book.mobi_file %}
- <li><a href="{{ book.mobi_file.url}}">MOBI</a> {% trans "for Kindle" %}</li>
- {% endif %}
- {% if book.fb2_file %}
- <li><a href="{{ book.fb2_file.url}}">FB2</a> {% trans "FictionBook" %}</li>
- {% endif %}
- {% if book.txt_file %}
- <li><a href="{{ book.txt_file.url}}">TXT</a> {% trans "for advanced usage" %}</li>
- {% endif %}
- {% custom_pdf_link_li book %}
- {% if related.media.mp3 or related.media.ogg or related.media.daisy %}
- <li>{% trans "Download all audiobooks for this book" %}:
- {% download_audio book %}</li>
- {% endif %}
- </ul>
- </div>
- {% if book.other_versions.exists %}
- <div id="other-versions">
- <ul>
- {% for version in book.other_versions %}
- <li>{{ version.pretty_title }}:
- <br/><a href="#" class="display-other" data-other="{{ version.html_file.url }}">porównaj</a>,
- <a href="{{ version.get_absolute_url }}">przejdź</a>.
+ <a href="#" id="menu-toggle-on"></a>
+ <nav id="menu"><ul>
+ <li><a href="#" id="menu-toggle-off"></a></li>
+
+ <li><a href="/">
+ <img src="{% static 'img/logo-neon.png' %}" width="80"
+ alt="Wolne Lektury"
+ title="Wolne Lektury">
+ </a></li>
+
+ <li><a href="{{ book.get_absolute_url }}" id="menu-book" data-box="book-short">
+ <img src="{% thumbnail book.cover '80x111' as thumb %}{{ thumb.url }}{% empty %}{{ book.cover.url }}{% endthumbnail %}"
+ width="80" height="111"
+ alt="{{ book.pretty_title }}"
+ title="{{ book.pretty_title }}">
+ </a></li>
+
+ {% if book.other_versions.exists %}
+ <li id="menu-other"><a href="#" data-box="other">
+ <span class="label">{% trans "Other versions" %}</span>
+ </a>
</li>
- {% endfor %}
- </ul>
- </div>
- {% endif %}
- <div id="header">
- <a href="/"><img src="{% static "img/logo-220.png" %}" alt="Wolne Lektury" /></a>
- </div>
+ {% endif %}
+
+ <li id="menu-toc"><a href="#" data-box="toc">
+ <span class="label">{% trans "Table of contents" %}</span>
+ </a></li>
+
+ <li id="menu-themes"><a href="#" data-box="themes">
+ <span class="label">{% trans "Themes" %}</span>
+ </a></li>
+
+ <li id="menu-settings"><a href="#" data-box="settings">
+ <span class="label">{% trans "Settings" %}</span>
+ </a></li>
+
+ <li id="menu-nota_red"><a href="#" data-box="nota_red">
+ <span class="label">{% trans "Edit. note" %}</span>
+ </a></li>
- <div style="position:relative; margin: 4.5em 0">
+ <li id="menu-info"><a href="#info" data-box="info">
+ <span class="label">{% trans "Infobox" %}</span>
+ </a></li>
+
+ </ul></nav>
+ <div id="big-pane">
+
+ <article id="main-text">
{{ book.html_file.read|safe }}
- <div id="other-text"
- style="display:none;position: absolute; top: 0; left: 780px; border-left: 1px solid #ddd">
- <a id="other-text-close" href="#" style="position: absolute; top: -1.5em;">(zamknij)</a>
- <div id="other-text-waiter">wait...</div>
- <div id="other-text-body" style="display: none;"></div>
+ </article>
+
+
+ <article id="other-text">
+ <a class="other-text-close" href="#">{% trans "Close" %}</a>
+ <div id="other-text-waiter">{% trans "Please wait..." %}</div>
+ <div id="other-text-body" style="display: none;"></div>
+ </article>
+
+
+ <footer>
+
+ <div id="info" class="box">
+ {% book_info book %}
+ </div>
+
+ {% if book.other_versions.exists %}
+ <div class="box" id="other">
+ <h2>{% trans "Other versions of the book" %}</h2>
+ <a class="other-text-close" href="#">{% trans "Close the other version" %}</a>
+ <ul>
+ {% spaceless %}
+ {% for other_version in book.other_versions %}
+ <li><a class="display-other"
+ data-other="{{ other_version.html_file.url }}"
+ href="{% url 'book_text' other_version.slug %}">
+ {% book_mini other_version with_link=False %}
+ </a>
+ </li>
+ {% endfor %}
+ {% endspaceless %}
+ </ul>
+ </div>
+ {% endif %}
+
+ <div class="box" id="settings">
+ <h2>{% trans "Settings" %}</h2>
+ <a href="#" class="settings-switch" id="settings-line-numbers" data-setting="always-hide-line-numbers">{% trans "Display line numbers" %}</a><br/>
+ <a href="#" class="settings-switch" id="settings-themes" data-setting="always-hide-themes">{% trans "Display themes" %}</a><br/>
+ <a href="#" class="settings-switch" id="settings-annotations" data-setting="no-annotations">{% trans "Display footnotes" %}</a><br/>
+ </div>
+
+ <div class="box" id="book-short">
+ {% book_short book %}
+ </div>
+
+ <div id="box-underlay"></div>
+
+ {# template #}
+ <div id="ajaxable-window" class='dialog-window'>
+ <div class="header"><a href="#" class="jqmClose">{% trans "Close" %}</a></div>
+ <div class="target">
+ <p><img src="{% static "img/indicator.gif" %}" alt="*"/> {% trans "Loading" %}</p>
+ </div>
</div>
+ </footer>
+
</div>
- {{ piwik_tag|safe }}
+
+ <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script type="text/javascript">
+ var LANGUAGE_CODE = "{{ LANGUAGE_CODE }}";
+ var STATIC_URL = "{{ STATIC_URL }}";
+ </script>
+ {% compressed_js "book_text" %}
+ <script src="{% static "js/modernizr.custom.19652.js" %}"></script>
</body>
</html>
+++ /dev/null
-<!DOCTYPE html>
-{% load i18n %}
-{% load static from staticfiles %}
-{% load chunks compressed catalogue_tags %}
-{% load thumbnail %}
-<html class="no-js">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <title>{{ book.pretty_title }} :: {% trans "Wolne Lektury" %}</title>
- <link rel="icon" href="{% static "img/favicon.png" %}" type="image/x-icon" />
- {% compressed_css "book_text" %}
- </head>
- <body>
- <a href="#" id="menu-toggle-on">
- >
- </a>
- <nav id="menu"><ul>
- <li><a href="#" id="menu-toggle-off">
- <
- </a></li>
-
- <li><a href="/">
- <img src="{% static 'img/favicon.png' %}"
- alt="Wolne Lektury"
- title="Wolne Lektury">
- <span class="label">Wolne Lektury</span>
- </a></li>
-
- <li><a href="{{ book.get_absolute_url }}" id="menu-book">
- <img src="{% thumbnail book.cover "46x64" as thumb %}{{ thumb.url }}{% empty %}{{ book.cover.url }}{% endthumbnail %}"
- alt="Książka"
- title="Książka">
- </a></li>
-
- {% if book.other_versions.exists %}
- <li id="menu-other"><a href="#" data-box="other">
- <span class="label">Inne wersje</span>
- </a>
- </li>
- {% endif %}
-
- <li id="menu-toc"><a href="#" data-box="toc">
- <span class="label">Spis treści</span>
- </a></li>
-
- <li id="menu-themes"><a href="#" data-box="themes">
- <span class="label">Motywy</span>
- </a></li>
-
- <li><a href="#footnotes">
- <span class="label">Przypisy</span>
- </a></li>
-
- <li id="menu-settings"><a href="#" data-box="settings">
- <span class="label">Ustawienia</span>
- </a></li>
-
- <li id="menu-nota_red"><a href="#" data-box="nota_red">
- <span class="label">Nota red.</span>
- </a></li>
-
- <li id="menu-info"><a href="#info" data-box="info">
- <span class="label">Informacje</span>
- </a></li>
-
- </ul></nav>
- <div id="big-pane">
-
- <article id="main-text">
- {{ book.html_file.read|safe }}
- </article>
-
-
- <article id="other-text">
- <a id="other-text-close" href="#" style="position: absolute; top: 0;">(zamknij)</a>
- <div id="other-text-waiter">wait...</div>
- <div id="other-text-body" style="display: none;"></div>
- </article>
-
-
- <footer>
-
- <div id="info" class="box">
- {% book_info book %}
- </div>
-
- {% if book.other_versions.exists %}
- <div class="box" id="other">
- <h2>Inne wersje utworu</h2>
- <ul>
- {% for other_version in book.other_versions %}
- <li>{{ other_version.pretty_title }}
- <a class="display-other" data-other="{{ other_version.html_file.url }}" href="#">Porównaj</a>
- </li>
- {% endfor %}
- </ul>
- </div>
- {% endif %}
-
- <div class="box" id="settings">
- <h2>Ustawienia</h2>
- <a href="#" class="settings-switch" id="settings-line-numbers" data-setting="always-hide-line-numbers">Wyświetlanie numerów linii</a><br/>
- <a href="#" class="settings-switch" id="settings-themes" data-setting="always-hide-themes">Wyświetlanie motywów</a><br/>
- <a href="#" class="settings-switch" id="settings-annotations" data-setting="no-annotations">Wyświetlanie przypisów</a><br/>
- </div>
-
- </footer>
-
- </div>
-
- <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- {% compressed_js "book_text" %}
- </body>
-</html>
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()
'hide_about': hide_about,
'themes': book_themes,
'request': context.get('request'),
+ 'show_lang': book.language_code() != settings.LANGUAGE_CODE,
}
'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,
}
# Public interface. Do not change this URLs.
url(r'^lektura/(?P<slug>%s)\.html$' % SLUG, 'book_text', name='book_text'),
- url(r'^lektura/(?P<slug>%s)\.html2$' % SLUG, 'book_text2'),
url(r'^lektura/(?P<slug>%s)/audiobook/$' % SLUG, 'player', name='book_player'),
url(r'^lektura/(?P<slug>%s)/$' % SLUG, 'book_detail', name='book_detail'),
url(r'^lektura/(?P<slug>%s)/motyw/(?P<theme_slug>[a-zA-Z0-9-]+)/$' % 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))
# ==========
style="text-align: center; background-size: {{ percentage|stringformat:'.2f' }}% 1px;"
>
{% if sum %}
- <span class="piece" style="float:left">{% trans "collected" %}: {{ sum }} zł</span>
+ <span class="piece progress-collected">{% trans "collected" %}: {{ sum }} zł</span>
{% endif %}
{% if not is_win %}
- <span class="piece" style="float: right">{% trans "needed" %}: {{ offer.target }} zł</span>
+ <span class="piece progress-target"><span class="{% if sum %}progress-extralabel{% endif %}">{% trans "needed" %}: </span>{{ offer.target }} zł</span>
{% endif %}
{% if is_current %}
- <span class="piece" style="display:inline-block;margin-right: 0em;">{% trans "until fundraiser end" %}:
+ <span class="piece progress-until"><span class="progress-extralabel">{% trans "until fundraiser end" %}:</span>
<span class="countdown inline" data-until='{{ offer.end|date_to_utc:True|utc_for_js }}'></span>
</span>
{% else %}
body {
font-size: 16px;
- font: Georgia, "Times New Roman", serif;
+ font-family: Georgia, "Times New Roman", serif;
line-height: 1.5em;
margin: 0;
}
}
#info p {
- text-align: justify;
- margin: 1.5em 0 0;
+ margin: 1em 0 0;
}
/* =================================================== */
.annotation {
font-style: normal;
font-weight: normal;
- font-size: 12px;
+ font-size: .75em;
padding-left: 2px;
position: relative;
top: -4px;
+++ /dev/null
-$(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();
- }
- });
- });
-});
(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);
+++ /dev/null
-(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);
+++ /dev/null
-(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);
@import "tools";
+@import "book_text/const";
@import "book_text/body";
@import "book_text/box";
@import "book_text/info";
@import "book_text/themes";
@import "book_text/toc";
+@import "main/book_box";
+@import "book_text/book_box";
+
+@import "main/auth";
+@import "main/dialogs";
* #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 {
*/
@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;
+ }
}
}
--- /dev/null
+#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;
+ }
+}
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;
}
--- /dev/null
+$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;
+%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;
background: #191919;
height: 100%;
+ line-height: 1.1em;
+
ul {
list-style: none;
margin: 0;
@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;
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;
}
}
}
.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;
}
}
-@include min-screen(320px) {
+@include min-screen($S_NUMBERS) {
.always-hide-line-numbers {
/* Cancel showing line numbers. */
.anchor {
}
-#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;
}
}
@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 {
}
-
-
@mixin theme-hidden {
width: 20px;
height: 20px;
&:before {
content: "▲";
color: #ccc;
- text-align: center;
+ text-align: center;
display: block;
}
width: 44px;
margin-right: -44px;
&:before {
- font-size: 3em;
+ font-size: 2.5em;
}
}
height: auto;
overflow: visible;
margin-left: 30px;
+ font-size: .9em;
border-left: 1px solid #DDDDDD;
color: #777;
.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;
}
-@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;
}
}
}
@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 {
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;
.funding-title {
@include size(font-size, 11px);
+ display: block;
+ @include min-screen(640px) {
+ display: inline;
+ }
}
.funding-title-strong {
@extend .funding-title;
@import "tools";
+@import "main/const";
@import "main/auth";
@import "main/base";
@import "main/book_box";
}
.book-mini-box img.cover {
- @include size(height, 193px);
- @include size(width, 139px);
+ @include size(height, 193px);
+ @include size(width, 139px);
}
@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;
@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);
}
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;
}
list-style: none;
.Book-item {
- @media screen and (min-width: 32em) {
+ @include min-screen($S_BOOK_SHORT_FULL) {
display: inline-block;
}
vertical-align: top;
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 {
@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);
@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);
.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);
+ }
}
}
}
.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 {
@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);
}
}
@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;
@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;
@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;
}
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);
}
.book-box-download {
position: relative;
- @media screen and (min-width: 32em) {
+ @include min-screen($S_BOOK_SHORT_FULL) {
@include size(width, 93.5px);
}
&.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;
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;
+ }
}
}
}
}
.book-box-audiobook {
- @media screen and (min-width: 32em) {
+ @include min-screen($S_BOOK_SHORT_FULL) {
@include size(width, 77px);
}
.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);
}
--- /dev/null
+$S_BOOK_SHORT_MEDIUM: 320px;
+$S_BOOK_SHORT_FULL: 512px;
+$W_BOOK_SHORT_FULL: 487.5px;
@media screen and (min-width: 24em) {
@include size(padding-top, 6px);
@include size(font-size, 13px);
+ @include size(margin-left, 180px);
text-align: right;
}
@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) {
display: block;
float: right;
- @include size(padding-left, 25px);
- @include size(padding-right, 20px);
background: #f7f7f7;
@include mono;
}
#lang-button {
+ @include size(padding-left, 25px);
+ @include size(padding-right, 20px);
+
display:block;
@include size(line-height, 17px);
@include size(padding-top, 16px);
},
'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',
},
fnp / wolnelektury.git / commitdiff