From 9f4f697f0c6fe9a9d55bb45aaa93c804992f3339 Mon Sep 17 00:00:00 2001 From: Radek Czajka Date: Fri, 5 Jul 2013 16:57:25 +0200 Subject: [PATCH] There's some work on book page left. --- .../templates/catalogue/book_detail.html | 4 +- .../templates/catalogue/book_list.html | 14 +- .../templates/catalogue/book_short.html | 57 ++-- apps/wolnelektury_core/static/css/auth.css | 67 ---- apps/wolnelektury_core/static/css/base.css | 116 ------- .../wolnelektury_core/static/css/book_box.css | 124 ------- .../static/css/catalogue.css | 155 --------- apps/wolnelektury_core/static/css/cite.css | 43 --- apps/wolnelektury_core/static/css/form.css | 1 - apps/wolnelektury_core/static/css/header.css | 12 - apps/wolnelektury_core/static/css/ie.css | 9 - .../static/css/main/_tools.scss | 18 +- .../static/css/main/auth.scss | 48 +++ .../static/css/main/base.scss | 57 ++++ .../static/css/main/book_box.scss | 312 ++++++++++++++---- .../static/css/main/book_list.scss | 102 ++++++ .../static/css/main/catalogue.scss | 31 ++ .../static/css/main/cite.scss | 30 +- .../static/css/{ => main}/form.scss | 0 .../static/css/main/fragment.scss | 19 ++ .../static/css/main/hidden.scss | 14 +- .../static/css/main/main_content.scss | 6 +- .../static/css/main/menu.scss | 3 +- .../static/css/main/search.scss | 90 +++++ .../static/css/main/tag.scss | 104 ++++++ .../static/css/picture_box.css | 2 + apps/wolnelektury_core/static/css/screen.css | 81 ----- apps/wolnelektury_core/static/css/simple.css | 2 + apps/wolnelektury_core/static/js/base.js | 4 + .../templates/superbase.html | 4 - wolnelektury/settings/static.py | 12 +- 31 files changed, 818 insertions(+), 723 deletions(-) delete mode 100644 apps/wolnelektury_core/static/css/auth.css delete mode 100755 apps/wolnelektury_core/static/css/base.css delete mode 100755 apps/wolnelektury_core/static/css/book_box.css delete mode 100755 apps/wolnelektury_core/static/css/catalogue.css delete mode 100755 apps/wolnelektury_core/static/css/cite.css delete mode 100644 apps/wolnelektury_core/static/css/form.css delete mode 100755 apps/wolnelektury_core/static/css/header.css delete mode 100644 apps/wolnelektury_core/static/css/ie.css create mode 100755 apps/wolnelektury_core/static/css/main/auth.scss create mode 100755 apps/wolnelektury_core/static/css/main/book_list.scss create mode 100755 apps/wolnelektury_core/static/css/main/catalogue.scss rename apps/wolnelektury_core/static/css/{ => main}/form.scss (100%) mode change 100644 => 100755 create mode 100755 apps/wolnelektury_core/static/css/main/fragment.scss create mode 100755 apps/wolnelektury_core/static/css/main/search.scss create mode 100755 apps/wolnelektury_core/static/css/main/tag.scss delete mode 100644 apps/wolnelektury_core/static/css/screen.css diff --git a/apps/catalogue/templates/catalogue/book_detail.html b/apps/catalogue/templates/catalogue/book_detail.html index 4c14158ef..bf8a726f1 100644 --- a/apps/catalogue/templates/catalogue/book_detail.html +++ b/apps/catalogue/templates/catalogue/book_detail.html @@ -17,7 +17,9 @@ {% work_list book_children %} -

{% trans "See also" %}:

+
+

{% trans "See also" %}:

{% related_books book %} +
{% endblock %} diff --git a/apps/catalogue/templates/catalogue/book_list.html b/apps/catalogue/templates/catalogue/book_list.html index ddeb3ce3f..00088a58e 100644 --- a/apps/catalogue/templates/catalogue/book_list.html +++ b/apps/catalogue/templates/catalogue/book_list.html @@ -17,16 +17,16 @@ -
- {% trans "Table of Content" %} - {{ rendered_nav }} +
+

{% trans "Table of Content" %}

+
+ {{ rendered_nav }} +
-
+
{% block book_list %} {{ rendered_book_list }} {% endblock %}
- + {% trans "↑ top ↑" %} {% endblock %} diff --git a/apps/catalogue/templates/catalogue/book_short.html b/apps/catalogue/templates/catalogue/book_short.html index 73e5cb8fb..c8fb9520b 100644 --- a/apps/catalogue/templates/catalogue/book_short.html +++ b/apps/catalogue/templates/catalogue/book_short.html @@ -2,23 +2,10 @@ {% load catalogue_tags social_tags %} {% load thumbnail %}
-
+
+
-
- {% if book.cover %} - {% if main_link %}{% endif %} - Cover - {% if main_link %}{% endif %} - {% endif %} - {% block cover-area-extra %}{% endblock %} -
@@ -40,7 +27,7 @@
-
+
{% for name, slug in related.tags.author %} {{ name }}{% if not forloop.last %}, {% endif %}{% endfor %}{% for title, slug in related.parents %}, @@ -53,29 +40,46 @@
+
+ {% if book.cover %} + {% if main_link %}{% endif %} + Cover + {% if main_link %}{% endif %} + {% endif %} + {% block cover-area-extra %}{% endblock %} +
{% spaceless %} + {% trans "Epoch" %}:  {% for name, slug in related.tags.epoch %} {{ name }} - {% if not forloop.last %}, {% endif %} + {% if not forloop.last %}, {% endif %} {% endfor %} - + + {% trans "Kind" %}:  {% for name, slug in related.tags.kind %} {{ name }} - {% if not forloop.last %}, {% endif %} + {% if not forloop.last %}, {% endif %} {% endfor %} - + + {% trans "Genre" %}:  {% for name, slug in related.tags.genre %} {{ name }} - {% if not forloop.last %}, {% endif %} + {% if not forloop.last %}, {% endif %} {% endfor %} - + {% endspaceless %}
@@ -85,12 +89,12 @@ {% block book-box-extra-info %}{% endblock %} {% block box-append %} {% endblock %} +
{% block right-column %} {% endblock %}
diff --git a/apps/wolnelektury_core/static/css/auth.css b/apps/wolnelektury_core/static/css/auth.css deleted file mode 100644 index 2979d0d98..000000000 --- a/apps/wolnelektury_core/static/css/auth.css +++ /dev/null @@ -1,67 +0,0 @@ -#auth-page #main-content p { - font-size: 1.2em; -} -#auth-page #main-content h2 { - font-size: 2em; - margin-top: 1em; -} - -.uniForm { - font-size: 1.2em; -} -.uniForm fieldset { - border: none; - margin: .5em 0; -} -.uniForm .ctrlHolder { - margin: .5em 0; -} - -.inlineLabels label { - width: 8em; - display: inline-block; -} -.inlineLabels .buttonHolder, .inlineLabels .formHint { - margin-left: 8em; -} - - - -.email_list .verified { - display: inline-block; - margin-left: 2em; - font-style: italic; -} -.email_list .unverified { - display: inline-block; - margin-left: 2em; - color: #717171; - font-style: italic; -} -.email_list .primary { - display: inline-block; - margin-left: 2em; - font-weight: bold; -} -.socialaccount_provider { - display: inline-block; - background-repeat: no-repeat; - color: transparent; - height: 40px; - width: 40px; - vertical-align: middle; -} -.socialaccount_provider.google { - background-image: url(/static/img/auth/google.png); -} - - -.socialaccount_providers { - margin: 1em 0; - padding: 0; -} -.socialaccount_providers li { - display: inline; - list-style: none; - margin-right: 1em; -} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/css/base.css b/apps/wolnelektury_core/static/css/base.css deleted file mode 100755 index 76c0e4311..000000000 --- a/apps/wolnelektury_core/static/css/base.css +++ /dev/null @@ -1,116 +0,0 @@ -/* jquery UI overrides us */ -.ui-menu .ui-menu-item a { - color: #0d7e85 !important; - line-height: 1.636em !important; -} - -.ui-widget { - font-family: Georgia !important; - font-size: 1em !important; -} - -.ui-widget-content { - background: #EEEEEE !important; /* #E2E2E2 ? */ - border-radius: 0px !important; -} - - - - - - - - -ul.plain { - list-style:none; - margin: 0; - padding: 0; -} - - - - - -h2 { - font-size: 2em; - font-weight: normal; -} - -h2.plain { - margin: 0; - font-size: 1em; -} - -h3 { - font-size: 1.5em; - font-weight: normal; -} - -.accent1 { - color: #191919; -} - -.accent2 { - color: #242424; -} - -.accent3 { - color: #575c63; -} - - -.accent4 { - color: #707b7a; -} - -.contrast { - #1199a2; -} - -/* #281d1c */ - - - -.white-box { - border: 1px solid #ddd; - padding: 1em; - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; -} - -.page-desc { - margin-left: 1.5em; -} - -.inline-tag-lists p span:first-child { - color: #281d1c; -} - -.inline-tag-lists { - font-size: 1.1em; -} - -.theme-list-link:after { - padding-left: 1em; - content: url("/static/img/arrow-teal.png"); - vertical-align: middle; -} -.theme-list-link { - font-size: 1.1em; -} - - -.pagination { - display: block; - font-size: 1.2em; - padding: .5em; - text-align:center; -} - -/* just on search page */ -.top-tag-list { - margin-top: 2.2em; - margin-bottom: 1.6em; -} diff --git a/apps/wolnelektury_core/static/css/book_box.css b/apps/wolnelektury_core/static/css/book_box.css deleted file mode 100755 index c9037c231..000000000 --- a/apps/wolnelektury_core/static/css/book_box.css +++ /dev/null @@ -1,124 +0,0 @@ -.book-wide-box { - margin: 0; - vertical-align: top; -} -.book-wide-box { - /** This is a fullpage box, it must be aligned with the top menu. - This corresponds to a .1em margin below **/ - margin-left: -0.1em; -} - - - - - -/* - * A mini-box wraps it's contents (image + label) in an - * other boxes have an inner box as a wrapper. - */ -.book-wide-box .book-box-inner { - /* min, so it can grow */ - min-height: 24.4em; -} - -.search-result .book-box-body { - width: 31em; -} - -.book-list-header { - padding: 0em; - margin-left: -0.1em; -} - -.book-list-header .book-box-inner { - min-height: 1em; -} - -.book-list-header p { - font-size: 2.4em; - margin: 0.5em; -} - - -/* - * ingenous float containment hack - * http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/ - */ -/* -.search-result .book-box-inner { - height: 1%; - overflow: hidden; -} -*/ - -.book-wide-box .book-box-body { - min-height: 17em; -} - -.book-wide-box { - min-width: 48.75em; -} -.book-wide-box .book-box-tools { - margin-left: 14em; - width: 32em; -} - -.book-wide-box #theme-list-wrapper { - margin-left: 15.4em; - margin-bottom: 3em; - width: 30em; -} - - - -ul.inline-items, ul.inline-items li { - margin: 0; - padding: 0; -} - -ul.inline-items li { - display: inline-block; -} - -.book-wide-box .other-tools { - float: left; - width: 14.5em; - margin: 5em 0 0 1.5em; - -} - -.book-wide-box .other-download { - float: left; - width: 22em; - margin: 5em 1.5em 0em 1.5em; -} -.book-wide-box .other-tools h2, -.book-wide-box .other-download h2, -.book-wide-box .other-tools ul, -.book-wide-box .other-download ul { - font-size: 1.1em; -} -.book-wide-box .other-tools h2, -.book-wide-box .other-download h2 { - margin: 0; -} - - - -.book-wide-box .license-icon { - display:block; - margin-top: .5em -} - - - -.snippets .snippet-text { - background: #f7f7f7; - font-size: 1.2em; - margin: 1.083em 0em; - padding: 1em; -} - -.snippets .anchor { - display: none; -} diff --git a/apps/wolnelektury_core/static/css/catalogue.css b/apps/wolnelektury_core/static/css/catalogue.css deleted file mode 100755 index e4f6816b5..000000000 --- a/apps/wolnelektury_core/static/css/catalogue.css +++ /dev/null @@ -1,155 +0,0 @@ -.work-item { - margin: 0; - padding: 0; -} - -.books .work-item { - display: inline-block; -} - - -/* listing of all books */ -#book-list { - padding-left: 50px; -} -/* FIXME: MEDIA? - * -#book-list-nav { - position: absolute; - right: 50px; - width: 200px; - border-left: 1px #cfcfcf solid; - padding: 10px; - font-size: 1.2em; -} - */ - -#book-list-nav ul { - list-style-type: none; - margin: 5px; - padding: 0; -} - -.book-list-show-index { - display: none; - margin: 0; - padding: 0; -} - - -#book-a-list #book-list ol { - padding-left: 1em; - margin: 0.3em 0 1.2em 0; - list-style: none; -} - -#book-a-list #book-list h2 { - font-size: 1em; - margin: 0; -} - -#book-a-list #book-list h2 a { - color: black; -} - -#book-list-up { - position: fixed; - bottom: 50px; - right: 50px; - border-left: 1px #cfcfcf solid; - padding: 10px; - background-color: white; -} - - - -.catalogue-catalogue h2 { - font-size: 2em; - margin: 0; -} -.catalogue-catalogue ul { - column-width: 30em; - -moz-column-width: 30em; - -webkit-column-width: 30em; -} - - -#description { - margin-bottom: 2em; - cursor: pointer; -} -#description dl { - margin-top: 0; -} -#description dt { - display: inline; - font-weight: bold; - margin: 0; -} -#description dd { - display: inline; - margin: 0; -} -#description p { - margin-top: 0; -} -#description .meta { - list-style: none; - padding: 0; - margin: 0; -} -#description .meta li { - text-align:right; - color: #666; - font-size: .9em; -} - -.inline-header { - display: inline-block; - vertical-align: top; - width: 7em; -} -.inline-body { - display: inline-block; - vertical-align: top; - margin-bottom: .5em; -} -.inline-body ul { - list-style: none; - padding: 0; - margin: 0; -} -.inline-body li { - display: inline-block; - margin-right: 1em; -} - - -.see-also { - margin-left: 8em; - float: left; - width: 14.3em; -} -.download { - margin-left: 2em; - float: left; -} - -.see-also, .download { - margin-top: 2em; - margin-bottom: 2em; -} -.see-also h2, .download h2 { - font-size: 1.1em; - margin: 0; -} -.see-also ul, .download ul { - list-style: none; - padding: 0; - margin: 0; - font-size: 1.1em; -} - -.left-column .see-also { - margin-left: 0; -} diff --git a/apps/wolnelektury_core/static/css/cite.css b/apps/wolnelektury_core/static/css/cite.css deleted file mode 100755 index 8084befd3..000000000 --- a/apps/wolnelektury_core/static/css/cite.css +++ /dev/null @@ -1,43 +0,0 @@ -.book-wide-box .cite-body, -#tagged-object-list .cite-body - { - font-size: 1.8em; - line-height: 1.3em; -} -.book-wide-box .source, -#tagged-object-list .source -{ - color: #444; - font-size: 1.1em; - margin-top: 1.6em; -} -.book-wide-box .cite { - position: relative; - top: -1em; - right: -1em; - background-color: #f7f7f7; - vertical-align: middle; - width: 39.5em; - margin: 0; - padding: 1em; -} - - -.Fragment-item .fragment { - color: black; - display: block; -} -.Fragment-item .toggle { - font-size: 1.1em; - display:block; - padding: .5em 0; -} -.Fragment-item { - margin-bottom: 2em; - /* white-box */ - border: 1px solid #ddd; - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; -} diff --git a/apps/wolnelektury_core/static/css/form.css b/apps/wolnelektury_core/static/css/form.css deleted file mode 100644 index 65d0482ef..000000000 --- a/apps/wolnelektury_core/static/css/form.css +++ /dev/null @@ -1 +0,0 @@ -form table th{vertical-align:top;text-align:left;font-weight:normal}form table td{padding-bottom:1em}form table .required th:after{content:" *"}form table .errorlist{color:red;margin:0;padding:0;list-style:none}form table .helptext{color:#888;font-size:.9em;font-style:italic} \ No newline at end of file diff --git a/apps/wolnelektury_core/static/css/header.css b/apps/wolnelektury_core/static/css/header.css deleted file mode 100755 index a7f934141..000000000 --- a/apps/wolnelektury_core/static/css/header.css +++ /dev/null @@ -1,12 +0,0 @@ -.search-hint-label { - display: inline-block; - width: 25em; - font-size: 1.1em; - line-height: 1.636em; -} - -.search-hint-category { - font-size: 1.1em; - line-height: 1.636em; - -} diff --git a/apps/wolnelektury_core/static/css/ie.css b/apps/wolnelektury_core/static/css/ie.css deleted file mode 100644 index ff6b41242..000000000 --- a/apps/wolnelektury_core/static/css/ie.css +++ /dev/null @@ -1,9 +0,0 @@ -#logo { - margin-top: 2.7em; - width: 17em; - height: 10em; - overflow: hidden; -} -#logo a { - padding-top: 3em; -} diff --git a/apps/wolnelektury_core/static/css/main/_tools.scss b/apps/wolnelektury_core/static/css/main/_tools.scss index cb67ddab3..b3441eff7 100755 --- a/apps/wolnelektury_core/static/css/main/_tools.scss +++ b/apps/wolnelektury_core/static/css/main/_tools.scss @@ -2,16 +2,28 @@ #{$name}: $size + px; #{$name}: ($size / 16) + rem; } -@mixin font-size-px($size) { - @include size-px(font-size, $size); -} @mixin mono { font-family: "Andale Mono", "Lucida Sans Typewriter", "Courier New"; } + @mixin hidden-label { display: block; width: 1px; height: 1px; overflow:hidden; } + +@mixin white-box { + border-color: #ddd; + border-style: solid; + @include size-px(border-width, 1); + background: #fff; + + -moz-box-shadow: 2px 2px 2px #ddd; + -webkit-box-shadow: 2px 2px 2px #ddd; + box-shadow: 2px 2px 2px #ddd; + -moz-box-shadow: .125rem .125rem .125rem #ddd; + -webkit-box-shadow: .125rem .125rem .125rem #ddd; + box-shadow: .125rem .125rem .125rem #ddd; +} diff --git a/apps/wolnelektury_core/static/css/main/auth.scss b/apps/wolnelektury_core/static/css/main/auth.scss new file mode 100755 index 000000000..8a88e12bb --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/auth.scss @@ -0,0 +1,48 @@ +@import "tools"; + +.email_list { + .verified { + display: inline-block; + margin-left: 2em; + font-style: italic; + } + .unverified { + display: inline-block; + margin-left: 2em; + color: #717171; + font-style: italic; + } + .primary { + display: inline-block; + margin-left: 2em; + font-weight: bold; + } +} + +.socialaccount_provider { + display: inline-block; + background-repeat: no-repeat; + color: transparent; + + @include size-px(height, 40); + @include size-px(width, 40); + vertical-align: middle; + + &.google { + background-image: url(/static/img/auth/google.png); + } +} + + +.socialaccount_providers { + margin: 0; + @include size-px(margin-top, 10); + @include size-px(margin-bottom, 10); + padding: 0; + + li { + display: inline; + list-style: none; + @include size-px(margin-right, 10); + } +} diff --git a/apps/wolnelektury_core/static/css/main/base.scss b/apps/wolnelektury_core/static/css/main/base.scss index 51089817d..0926569fc 100755 --- a/apps/wolnelektury_core/static/css/main/base.scss +++ b/apps/wolnelektury_core/static/css/main/base.scss @@ -42,6 +42,63 @@ h1 { } } +h2 { + @include size-px(font-size, 20); + font-weight: normal; +} + +h3 { + @include size-px(font-size, 15); + font-weight: normal; +} + + .normal-text { line-height: 1.3em; } + +.white-box { + @include size-px(padding, 10); + @include white-box; +} + + +ul.plain { + list-style:none; + margin: 0; + padding: 0; +} + + +.theme-list-link { + @include mono; + @include size-px(font-size, 11); + + &:after { + @include size-px(padding-left, 11); + content: url("/static/img/arrow-teal.png"); + vertical-align: middle; + } +} + + +.left-column, .right-column { + @include size-px(max-width, 600); +} +@media screen and (min-width: 62.5em) { + .left-column { + @include size-px(width, 470); + float: left; + } + .right-column { + @include size-px(width, 470); + float:right; + } +} + +.pagination { + display: block; + @include size-px(font-size, 12); + @include size-px(padding, 6); + text-align:center; +} diff --git a/apps/wolnelektury_core/static/css/main/book_box.scss b/apps/wolnelektury_core/static/css/main/book_box.scss index 1eecec254..02de7a230 100755 --- a/apps/wolnelektury_core/static/css/main/book_box.scss +++ b/apps/wolnelektury_core/static/css/main/book_box.scss @@ -3,29 +3,44 @@ @mixin inner-box { display: block; color: black; - border-style: solid; - border-color: #ddd; - @include size-px(border-width, 1); @include size-px(margin, 1); @include size-px(padding-top, 8); @include size-px(padding-bottom, 8); @include size-px(padding-left, 10); @include size-px(padding-right, 10); - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; + + @include white-box; } -img.cover { - @include size-px(height, 193); - @include size-px(width, 139); +.book-mini-box img.cover { + @include size-px(height, 193); + @include size-px(width, 139); } + + .cover-area { float: left; @include size-px(margin-right, 15); -} + @include size-px(margin-bottom, 5); + + + @media screen and (min-width: 32em) { + position: absolute; + top: 0; + left: 0; + margin-right: 0; + } + img.cover { + @include size-px(height, 193 / 2); + @include size-px(width, 139 / 2); + + @media screen and (min-width: 20em) { + @include size-px(height, 193); + @include size-px(width, 139); + } + } +} .book-mini-box { @include size-px(width, 161.5); @@ -67,58 +82,188 @@ img.cover { list-style: none; .Book-item { - display: inline-block; + @media screen and (min-width: 32em) { + display: inline-block; + } vertical-align: top; } } + .book-box { - @include size-px(width, 487.5); margin: 0; vertical-align: top; + @media screen and (min-width: 32em) { + @include size-px(width, 487.5); + } + .book-box-inner { + position: relative; @include inner-box; @include size-px(min-height, 197.5); } } + +.book-wide-box { + margin: 0; + vertical-align: top; + + @media screen and (min-width: 62.5em) { + @include size-px(width, 975); + } + + .book-box-inner { + position: relative; + @include size-px(min-height, 244); + @include inner-box; + @include size-px(margin-left, 0); + @include size-px(margin-right, 0); + + .book-left-column { /* FIXME */ + @include size-px(max-width, 600); + + @media screen and (min-width: 62.5em) { + float: left; + @include size-px(width, 536); + } + } + + .license-icon { + display: block; + @include size-px(margin-top, 5); + } + + @media screen and (min-width: 62.5em) { + .book-box-head, + .tags, + .book-box-tools { + @include size-px(width, 382); + } + } + + #theme-list-wrapper { + @include size-px(margin-left, 154); + margin-bottom: 0; + @include size-px(width, 300); + + p { + @include size-px(margin-top, 10); + @include size-px(margin-bottom, 10); + } + } + + .right-column { + @include size-px(margin-top, 16); + + @media screen and (min-width: 62.5em) { + @include size-px(width, 415); + // Eat the padding + @include size-px(margin-top, -8); + @include size-px(margin-right, -10); + } + + .other-tools, + .other-download { + float: left; + @include size-px(width, 145); + @include size-px(margin-top, 50); + @include size-px(margin-bottom, 0); + @include size-px(margin-left, 5); + @include size-px(margin-right, 0); + @include size-px(font-size, 11); + + h2 { + margin: 0; + @include size-px(font-size, 11); + @include mono; + } + } + .other-download { + @include size-px(margin-left, 15); + @include size-px(width, 220); + } + } + } +} + + .book-box-body { - @include size-px(height, 170); - overflow:hidden; + margin-bottom: 1em; + @media screen and (min-width: 32em) { + margin-bottom: 0; + @include size-px(height, 170); + } position: relative; .book-box-head { - @include size-px(min-height, 70); @include size-px(padding-top, 14); @include size-px(margin-bottom, 10); + @media screen and (min-width: 32em) { + @include size-px(min-height, 70); + @include size-px(width, 310); + float: right; + } + a { color: black; } .author { @include size-px(font-size, 11); - @include size-px(max-width, 264); @include mono; + line-height: 1.2em; + max-height: 2.4em; + overflow: hidden; + + @media screen and (min-width: 32em) { + @include size-px(max-width, 264); + } } .title { @include size-px(font-size, 24); - @include size-px(height, 57.6); + line-height: 1.2em; @include size-px(margin-top, 7.2); - overflow:hidden; + margin-bottom: .5em; + + @media screen and (min-width: 32em) { + margin-bottom: 0; + height: 2.4em; + overflow: hidden; + } } } .tags { @include size-px(font-size, 11); - - .mono { - @include mono; + line-height: 1.2em; + + @media screen and (min-width: 32em) { + @include size-px(width, 310); + float: right; + clear: right; + max-height: 4.8em; + overflow: hidden; } - .book-box-tag { - @include size-px(margin-left, 4.4); - @include size-px(margin-right, 5.5); + .category { + display: block; + margin-top: .5em; + margin-bottom: .5em; + + @media screen and (min-width: 32em) { + display: inline; + } + + .mono { + @include mono; + } + + .book-box-tag { + @include size-px(margin-left, 4.4); + @include size-px(margin-right, 5.5); + } } } @@ -128,17 +273,35 @@ img.cover { .book-box-tools { @include size-px(font-size, 11); - @include size-px(width, 506); margin: 0; padding: 0; - @include mono; + list-style: none; + + clear: left; + + @media screen and (min-width: 20em) { + clear: none; + @include size-px(margin-left, 139 + 15); + } + + @media screen and (min-width: 32em) { + @include size-px(width, 310); + float: right; + clear: right; + } li { - display: inline-block; + @include mono; + + @media screen and (min-width: 32em) { + display: inline-block; + } } .book-box-read { - @include size-px(width, 126.5); + @media screen and (min-width: 32em) { + @include size-px(width, 126.5); + } a { @include mono; @@ -155,48 +318,63 @@ img.cover { .book-box-download { position: relative; - @include size-px(width, 93.5); + + @media screen and (min-width: 32em) { + @include size-px(width, 93.5); + } a { position: relative; z-index: 101; - &.downarrow:before { - content: url("/static/img/download.png"); - @include size-px(font-size, 25); - @include size-px(margin-right, 3.71); - vertical-align: middle; - font-weight: normal; + &.downarrow { + color: black; + + @media screen and (min-width: 32em) { + color: #0D7E85; + } + + &:before { + content: url("/static/img/download.png"); + @include size-px(font-size, 25); + @include size-px(margin-right, 3.71); + vertical-align: middle; + font-weight: normal; + } } } .book-box-formats { - display: none; - position: absolute; - - @include size-px(width, 180); - border-color: #ddd; - border-style: solid; - @include size-px(border-width, 1); - @include size-px(padding-top, 38); - @include size-px(padding-bottom, 9); - @include size-px(padding-left, 19); - @include size-px(padding-right, 19); - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; + @include size-px(padding-left, 25); + + @media screen and (min-width: 32em) { + display: none; + position: absolute; + + @include size-px(width, 180); + @include size-px(padding-top, 38); + @include size-px(padding-bottom, 9); + @include size-px(padding-left, 19); + @include size-px(padding-right, 19); - z-index: 100; + @include white-box; - @include size-px(top, -16); - @include size-px(left, -19); + z-index: 100; + + @include size-px(top, -16); + @include size-px(left, -19); + } span { display: block; + @include size-px(margin-top, 16); + + @media screen and (min-width: 32em) { + @include size-px(margin-top, 0); - &:first-child { - @include size-px(margin-top, 16); + &:first-child { + @include size-px(margin-top, 16); + } } } } @@ -208,7 +386,9 @@ img.cover { } .book-box-audiobook { - @include size-px(width, 77); + @media screen and (min-width: 32em) { + @include size-px(width, 77); + } a:before { content: url("/static/img/listen.png"); @@ -255,3 +435,21 @@ img.cover { .unlike .if-like { display: none; } + + +#book-detail .see-also { + h1 { + @include size-px(height, 32); + margin: 0; + @include size-px(padding-top, 19); + @include size-px(padding-left, 10); + + @include size-px(font-size, 11); + @include mono; + font-weight: normal; + + @media screen and (min-width: 33em) { + @include size-px(padding-left, 19); + } + } +} diff --git a/apps/wolnelektury_core/static/css/main/book_list.scss b/apps/wolnelektury_core/static/css/main/book_list.scss new file mode 100755 index 000000000..fc2c1343b --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/book_list.scss @@ -0,0 +1,102 @@ +/* listing of all books */ + +@import "tools"; + +#book-a-list { + #book-list-nav { + @include size-px(border-width, 0); + @include size-px(border-bottom-width, 1); + border-style: solid; + border-color: #CFCFCF; + @include size-px(padding, 9.75); + line-height: 2em; + + @media screen and (min-width: 30em) { + @include size-px(border-bottom-width, 0); + @include size-px(border-left-width, 1); + float: right; + width: 50%; + } + + @media screen and (min-width: 62.5em) { + line-height: 1.3em; + } + + h2 { + cursor: pointer; + + &:after { + @include size-px(padding-left, 10); + content: url("/static/img/arrow-gray.png"); + vertical-align: top; + } + + @media screen and (min-width: 30em) { + font-size: 1em; + margin: 0; + cursor: regular; + + &:after { + display: none; + } + } + } + + #book-list-nav-index { + display: none; + @media screen and (min-width: 30em) { + display: block !important; + } + } + + ul { + list-style-type: none; + @include size-px(margin, 5); + padding: 0; + } + .book-list-show-index { + display: none; + } + } + + #book-list { + @include size-px(padding-left, 5); + line-height: 2em; + + @media screen and (min-width: 62.5em) { + @include size-px(padding-left, 50); + line-height: 1.3em; + } + + ol { + @include size-px(padding-left, 13); + @include size-px(margin-top, 4); + @include size-px(margin-bottom, 15.6); + @include size-px(margin-left, 0); + @include size-px(margin-right, 0); + list-style: none; + } + h2 { + @include size-px(font-size, 13); + margin: 0; + a { + color: black; + } + } + } + + #book-list-up { + display: block; + position: fixed; + @include size-px(bottom, 50); + @include size-px(right, 50); + @include size-px(border-left-width, 1); + border-left-style: solid; + border-left-color: #CFCFCF; + @include size-px(padding-top, 20); + @include size-px(padding-bottom, 20); + @include size-px(padding-left, 10); + @include size-px(padding-right, 10); + background-color: white; + } +} diff --git a/apps/wolnelektury_core/static/css/main/catalogue.scss b/apps/wolnelektury_core/static/css/main/catalogue.scss new file mode 100755 index 000000000..4a08b4657 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/catalogue.scss @@ -0,0 +1,31 @@ +/* listing of all books */ + +@import "tools"; + +.catalogue-catalogue { + ul { + column-width: 25em; + -moz-column-width: 25em; + -webkit-column-width: 25em; + + @include size-px(padding-left, 10); + + @media screen and (min-width: 20em) { + @include size-px(padding-left, 40); + } + + li { + margin-bottom: 1em; + + @media screen and (min-width: 62.5em) { + margin-bottom: .5em; + } + } + } + + h2 { + @include size-px(font-size, 26); + margin: 0; + @include size-px(padding, 26); + } +} diff --git a/apps/wolnelektury_core/static/css/main/cite.scss b/apps/wolnelektury_core/static/css/main/cite.scss index 598d21ea8..d15faaaa9 100755 --- a/apps/wolnelektury_core/static/css/main/cite.scss +++ b/apps/wolnelektury_core/static/css/main/cite.scss @@ -9,6 +9,17 @@ @include size-px(padding-left, 80); @include size-px(padding-right, 20); + .vip { + margin: 0; + color: #575C63; + @include size-px(font-size, 11); + } + + .cite-body { + @include size-px(font-size, 18); + line-height: 1.3em; + } + blockquote { padding: 0; margin: 0; @@ -18,9 +29,22 @@ } } - .vip { - margin: 0; - color: #575C63; + .source + { + color: #444; + @include mono; @include size-px(font-size, 11); + @include size-px(margin-top, 16); } } + + + + +.book-wide-box .cite { + background-color: #f7f7f7; + vertical-align: middle; + @include size-px(width, 395); + margin: 0; + @include size-px(padding, 10); +} diff --git a/apps/wolnelektury_core/static/css/form.scss b/apps/wolnelektury_core/static/css/main/form.scss old mode 100644 new mode 100755 similarity index 100% rename from apps/wolnelektury_core/static/css/form.scss rename to apps/wolnelektury_core/static/css/main/form.scss diff --git a/apps/wolnelektury_core/static/css/main/fragment.scss b/apps/wolnelektury_core/static/css/main/fragment.scss new file mode 100755 index 000000000..f82d50a4e --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/fragment.scss @@ -0,0 +1,19 @@ +@import "tools"; + +.Fragment-item { + @include size-px(margin-bottom, 20); + @include white-box; + + .fragment { + color: black; + display: block; + } + .toggle { + @include size-px(font-size, 11); + display: block; + @include size-px(padding-top, 5); + @include size-px(padding-bottom, 5); + @include size-px(padding-left, 0); + @include size-px(padding-right, 0); + } +} diff --git a/apps/wolnelektury_core/static/css/main/hidden.scss b/apps/wolnelektury_core/static/css/main/hidden.scss index 9e437e82e..a5596882d 100755 --- a/apps/wolnelektury_core/static/css/main/hidden.scss +++ b/apps/wolnelektury_core/static/css/main/hidden.scss @@ -7,12 +7,9 @@ position: absolute; left: 0; display: none; - border: 1px solid #ddd; padding: 1em 1em .5em 1em; - background: #fff; - -moz-box-shadow: 2px 2px 2px #ddd; - -webkit-box-shadow: 2px 2px 2px #ddd; - box-shadow: 2px 2px 2px #ddd; + @include white-box; + z-index: 500; ul { @@ -49,3 +46,10 @@ } } } + +@media screen and (min-width: 24em) { + #menu-collections ul { + @include size-px(width, 180); + } +} + diff --git a/apps/wolnelektury_core/static/css/main/main_content.scss b/apps/wolnelektury_core/static/css/main/main_content.scss index 58b7b2c64..7d1aad43b 100755 --- a/apps/wolnelektury_core/static/css/main/main_content.scss +++ b/apps/wolnelektury_core/static/css/main/main_content.scss @@ -1,7 +1,9 @@ @import "tools"; -@media screen and (min-width: 62.5em) { - #main-content { +#main-content { + position: relative; + + @media screen and (min-width: 62.5em) { @include size-px(width, 975); margin: auto; } diff --git a/apps/wolnelektury_core/static/css/main/menu.scss b/apps/wolnelektury_core/static/css/main/menu.scss index ad6483b0d..496b805e9 100755 --- a/apps/wolnelektury_core/static/css/main/menu.scss +++ b/apps/wolnelektury_core/static/css/main/menu.scss @@ -51,13 +51,14 @@ top: 49px; left: 0; right: 10px; + z-index: 400; @media screen and (min-width: 24em) { right: auto; } @media screen and (min-width: 53em) { - display: block; + display: block !important; position: static; @include size-px(margin-left, 6); } diff --git a/apps/wolnelektury_core/static/css/main/search.scss b/apps/wolnelektury_core/static/css/main/search.scss new file mode 100755 index 000000000..2b96361b0 --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/search.scss @@ -0,0 +1,90 @@ +@import "tools"; + +/* jquery UI overrides us */ +.ui-menu .ui-menu-item a { + color: #0d7e85 !important; + line-height: 1.636em !important; +} + +.ui-widget { + font-family: Georgia !important; + font-size: 10px !important; + font-size: .625rem !important; +} + +.ui-widget-content { + background: #EEEEEE !important; /* #E2E2E2 ? */ + border-radius: 0px !important; +} + + + +.inline-tag-lists p span:first-child { + color: #281d1c; +} + +/* just on search page */ +.top-tag-list { + @include size-px(margin-top, 22); + @include size-px(margin-bottom, 16); +} + + +.search-result { + @include size-px(width, 975); + + .book-box-body { + @include size-px(width, 310); + } +} + + + +.book-list-header { + @include size-px(width, 975); + padding: 0em; + @include size-px(margin-left, -1); + + .book-box-inner { + min-height: 1em; + } + + p { + @include size-px(font-size, 24); + @include size-px(margin, 5); + } +} + +.snippets { + @include size-px(width, 440); + float: right; + @include size-px(margin-top, -200); + + .snippet-text { + @include size-px(font-size, 12); + @include size-px(margin-top, 13); + @include size-px(margin-bottom, 13); + @include size-px(margin-left, 0); + @include size-px(margin-right, 0); + @include size-px(padding, 12); + background: #f7f7f7; + } + + .anchor { + display: none; + } +} + + +.search-hint-label { + display: inline-block; + @include size-px(font-size, 11); + @include size-px(width, 275); + line-height: 1.636em; +} + +.search-hint-category { + @include size-px(font-size, 11); + line-height: 1.636em; +} + diff --git a/apps/wolnelektury_core/static/css/main/tag.scss b/apps/wolnelektury_core/static/css/main/tag.scss new file mode 100755 index 000000000..a06e0b59f --- /dev/null +++ b/apps/wolnelektury_core/static/css/main/tag.scss @@ -0,0 +1,104 @@ +@import "tools"; + +.page-desc { + @include size-px(margin-left, 15); +} + +#tagged-object-list { + @media screen and (min-width: 62.5em) { + .left-column, .right-column { + @include size-px(width, 480); + } + } + + .see-also, .download { + float: left; + @include size-px(margin-top, 20); + @include size-px(margin-bottom, 20); + + h2 { + @include mono; + @include size-px(font-size, 11); + margin: 0; + } + + ul { + @include size-px(font-size, 11); + list-style: none; + padding: 0; + margin: 0; + } + } + + .see-also { + @include size-px(margin-left, 80); + @include size-px(width, 143); + } + .download { + @include size-px(margin-left, 20); + } + + .left-column .see-also { + margin-left: 0; + } +} + +#description { + @include size-px(margin-bottom, 26); + cursor: pointer; + + dl { + margin-top: 0; + } + dt { + display: inline; + font-weight: bold; + margin: 0; + } + dd { + display: inline; + margin: 0; + } + p { + margin-top: 0; + } + #description .meta { + list-style: none; + padding: 0; + margin: 0; + } + #description .meta li { + text-align: right; + color: #666; + @include size-px(font-size, 11.7); + } +} + +.inline-tag-lists { + @include size-px(font-size, 11); + + .inline-header { + @include mono; + display: inline-block; + vertical-align: top; + @include size-px(width, 77); + } + + .inline-body { + display: inline-block; + vertical-align: top; + @include size-px(margin-bottom, 5.5); + @include size-px(width, 385); + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + display: inline-block; + @include size-px(margin-right, 11); + } + } + } +} diff --git a/apps/wolnelektury_core/static/css/picture_box.css b/apps/wolnelektury_core/static/css/picture_box.css index 83022eb77..e77ced239 100755 --- a/apps/wolnelektury_core/static/css/picture_box.css +++ b/apps/wolnelektury_core/static/css/picture_box.css @@ -1,3 +1,5 @@ +/* This need reviewing and updating before any pictures are published. */ + .picture-mini-box, .picture-box { display: inline-block; margin: 0; diff --git a/apps/wolnelektury_core/static/css/screen.css b/apps/wolnelektury_core/static/css/screen.css deleted file mode 100644 index 3d34fdda8..000000000 --- a/apps/wolnelektury_core/static/css/screen.css +++ /dev/null @@ -1,81 +0,0 @@ -/* - * Should only be applied for big-screen pc-like devices. - */ - -.left-column { - width: 47em; - float: left; -} -.right-column { - float:right; - width: 47em; -} - - -#menu-collections ul { - width: 18em; -} - - - - - - - -.book-wide-box { - width: 97.5em; -} -.book-wide-box .book-box-body { - width: 38.2em; -} - - -#tagged-object-list .left-column, #tagged-object-list .right-column { - width: 48em; -} - - - - -.inline-body { - width: 35em; -} - - -.search-result { - width: 97.5em; -} - - -.book-list-header { - width: 97.5em; -} - -.book-wide-box .right-column { - width: 41.5em; - margin-top: -23em; -} - -.book-wide-box #theme-list-wrapper { - margin-bottom: 0; -} - -.snippets { - width: 44em; - float: right; - margin-top: -20em; -} - - - - - -/* Book list */ - -#book-list-nav { - border-left: 1px solid #CFCFCF; - padding: .75em; - position: absolute; - right: 4em; - width: 25em; -} diff --git a/apps/wolnelektury_core/static/css/simple.css b/apps/wolnelektury_core/static/css/simple.css index 6b8a54cc9..f723889a2 100755 --- a/apps/wolnelektury_core/static/css/simple.css +++ b/apps/wolnelektury_core/static/css/simple.css @@ -1,3 +1,5 @@ +/* Legacy simple style for some very old pages. */ + html { margin: 0; } diff --git a/apps/wolnelektury_core/static/js/base.js b/apps/wolnelektury_core/static/js/base.js index 5c7dc1129..7db29ab24 100755 --- a/apps/wolnelektury_core/static/js/base.js +++ b/apps/wolnelektury_core/static/js/base.js @@ -105,6 +105,10 @@ $('#show-menu').click(function(event) { event.preventDefault(); $('#menu').toggle('slow'); }); +$('#book-list-nav h2').click(function(event) { + event.preventDefault(); + $('#book-list-nav-index').toggle(); +}); $('#themes-list-toggle').click(function(event) { diff --git a/apps/wolnelektury_core/templates/superbase.html b/apps/wolnelektury_core/templates/superbase.html index 12be5d46a..65b9e0a82 100644 --- a/apps/wolnelektury_core/templates/superbase.html +++ b/apps/wolnelektury_core/templates/superbase.html @@ -22,10 +22,6 @@ {% compressed_css "main" %} - - {% block extrahead %} {% endblock %} diff --git a/wolnelektury/settings/static.py b/wolnelektury/settings/static.py index 9c30dea8d..e7cceed20 100644 --- a/wolnelektury/settings/static.py +++ b/wolnelektury/settings/static.py @@ -29,16 +29,14 @@ PIPELINE_CSS = { 'polls/polls.scss', 'css/social/shelf_tags.css', + + 'uni_form/uni-form.css', + 'uni_form/default.uni-form.css', + 'css/ui-lightness/jquery-ui-1.8.16.custom.css', ], 'output_filename': 'css/compressed/main.css', }, - 'ie': { - 'source_filenames': [ - 'css/ie.css', - ], - 'output_filename': 'css/compressed/ie.css', - }, 'book': { 'source_filenames': [ 'css/master.book.css', @@ -79,6 +77,8 @@ PIPELINE_JS = { 'player/openplayer.js', 'js/search.js', 'funding/funding.js', + + 'uni_form/uni-form.js', ), 'output_filename': 'js/base.min.js', }, -- 2.20.1