From: Radek Czajka Date: Thu, 25 Aug 2022 13:36:44 +0000 (+0200) Subject: Author page. X-Git-Url: https://git.mdrn.pl/wolnelektury.git/commitdiff_plain/592c9401b18118e01de250d44878b9289b138f9c Author page. --- diff --git a/src/catalogue/models/book.py b/src/catalogue/models/book.py index 6b9fd72b3..b624abcad 100644 --- a/src/catalogue/models/book.py +++ b/src/catalogue/models/book.py @@ -139,6 +139,8 @@ class Book(models.Model): SORT_KEY_SEP = '$' + is_book = True + class AlreadyExists(Exception): pass diff --git a/src/catalogue/static/2022/book/filter.js b/src/catalogue/static/2022/book/filter.js new file mode 100644 index 000000000..e4538ce4f --- /dev/null +++ b/src/catalogue/static/2022/book/filter.js @@ -0,0 +1,48 @@ +(function($) { + + $(".quick-filter").each(function() { + let bookList = $('#' + $(this).data('for')); + $(this).on('input propertychange', function() { + let search = $(this).val().toLowerCase(); + bookList.children().each(function() { + found = !search || $("h2", this).text().toLowerCase().search(search) != -1; + if (found) + $(this).fadeIn(); + else + $(this).fadeOut(); + }); + }); + }); + + $(".l-books__sorting button").on('click', function() { + if ($(this).hasClass('is-active')) return; + $(".is-active", $(this).parent()).removeClass("is-active"); + $(this).addClass("is-active"); + let prop = $(this).attr('data-order'); + $(".l-books__item").css('opacity', '0'); + setTimeout(function() { + if (prop) { + $(".l-books__item").each(function() { + $(this).css('order', $(this).attr(prop)); + }); + } else { + $(".l-books__item").css('order', ''); + } + setTimeout(function() { + $(".l-books__item").css('opacity', '100%'); + }, 200); + }, 200); + }); + $("#sort-popular").on('click', function() { + $(".l-books__item").each(function() { + $(this).css('order', $(this).attr('data-pop')); + }); + }); + $("#sort-popular").on('click', function() { + $(".l-books__item").each(function() { + $(this).css('order', $(this).attr('data-pop')); + }); + }); + + +})(jQuery); diff --git a/src/catalogue/templates/catalogue/2022/author_box.html b/src/catalogue/templates/catalogue/2022/author_box.html new file mode 100644 index 000000000..499a2a030 --- /dev/null +++ b/src/catalogue/templates/catalogue/2022/author_box.html @@ -0,0 +1,20 @@ +
+

O autorze

+
+ {% if author.photo %} +
+ {{ author.name }} +
+ {{ author.photo_attribution|safe }} +
+
+ {% endif %} + +
+
diff --git a/src/catalogue/templates/catalogue/2022/author_detail.html b/src/catalogue/templates/catalogue/2022/author_detail.html new file mode 100644 index 000000000..39b2d11eb --- /dev/null +++ b/src/catalogue/templates/catalogue/2022/author_detail.html @@ -0,0 +1,76 @@ +{% extends '2022/base_real.html' %} + +{% load choose_cites from social_tags %} + +{% block content %} +
+
+ Strona główna + Katalog + Autor +
+
+ +
+ +
+
+ {% if tags.0.photo %} +
+ {{ tags.0.name }} +
+ {% endif %} +

{{ tags.0.name }}

+
+
+ +
+
+
+ + +
+
+ Sortuj: +
+ + + +
+
+
+
+ +
+
+ {% for book in object_list %} + {% include "catalogue/2022/book_box.html" %} + {% endfor %} +
+
+ +
+
+ {% with author=tags.0 %} + {% include 'catalogue/2022/author_box.html' %} + {% endwith %} + {% choose_cites 3 author=tags.0 as cites %} + {% if cites %} +
+
+
+ + {% for fragment in cites %} +
+ {% include "catalogue/2022/fragment_box.html" %} +
+ {% endfor %} + +
+
+
+ {% endif %} +
+
+
+{% endblock %} diff --git a/src/catalogue/templates/catalogue/2022/book_box.html b/src/catalogue/templates/catalogue/2022/book_box.html new file mode 100644 index 000000000..83b415744 --- /dev/null +++ b/src/catalogue/templates/catalogue/2022/book_box.html @@ -0,0 +1,37 @@ +{% load sorl_thumbnail %} + +
+
+ + {% if book.is_picture %} + {% if book.image_file %} + {% thumbnail book.image_file "170x170" as im %} + + {% endthumbnail %} + {% endif %} + {% else %} + {% if book.cover_clean %} + {{ book.title }} + {% endif %} + {% endif %} + +
+
+ {% if book.is_book %} + + {% endif %} + {% if book.has_mp3 %} + + {% endif %} + {% if book.is_picture %} + + {% endif %} + +
+

+ {% for author in book.authors %} + {{ author }}{% if not forloop.last %}, {% endif %} + {% endfor %} +

+

{{ book.title }}

+
diff --git a/src/catalogue/templates/catalogue/2022/book_detail.html b/src/catalogue/templates/catalogue/2022/book_detail.html index 052782354..ea967becf 100644 --- a/src/catalogue/templates/catalogue/2022/book_detail.html +++ b/src/catalogue/templates/catalogue/2022/book_detail.html @@ -309,40 +309,15 @@ {% for author in book.authors %}
-
-

O autorze

-
- {% if author.photo %} -
- {{ author.name }} -
- {{ author.photo_attribution|safe }} -
-
- {% endif %} - -
-
+ {% include 'catalogue/2022/author_box.html' %} - {% choose_cites book 3 as cites %} + {% choose_cites 3 book=book as cites %} {% if cites %}
{% for fragment in cites %} - - - - {{ fragment.short_text|safe }} - -

{{ fragment.book.pretty_title }}

- + {% include "catalogue/2022/fragment_box.html" %} {% endfor %}
diff --git a/src/catalogue/templates/catalogue/2022/fragment_box.html b/src/catalogue/templates/catalogue/2022/fragment_box.html new file mode 100644 index 000000000..f98d0b5ac --- /dev/null +++ b/src/catalogue/templates/catalogue/2022/fragment_box.html @@ -0,0 +1,6 @@ + + + {{ fragment.short_text|safe }} + +

{{ fragment.book.pretty_title }}

+ diff --git a/src/catalogue/views.py b/src/catalogue/views.py index 037345bf1..6edbbd6a4 100644 --- a/src/catalogue/views.py +++ b/src/catalogue/views.py @@ -142,9 +142,16 @@ def object_list(request, objects, fragments=None, related_tags=None, tags=None, } if extra: result.update(extra) + + is_author = len(tags) == 1 and tags[0].category == 'author' + new_layout = request.EXPERIMENTS['layout'] + if is_author and new_layout.value: + template = 'catalogue/2022/author_detail.html' + else: + template = 'catalogue/tagged_object_list.html' + return render( - request, - 'catalogue/tagged_object_list.html', result, + request, template, result, ) diff --git a/src/newtagging/locale/jp/LC_MESSAGES/django.po b/src/newtagging/locale/jp/LC_MESSAGES/django.po index 7ea964955..bced7a5b6 100644 --- a/src/newtagging/locale/jp/LC_MESSAGES/django.po +++ b/src/newtagging/locale/jp/LC_MESSAGES/django.po @@ -8,7 +8,6 @@ msgid "" msgstr "" "Project-Id-Version: PACKAGE VERSION\n" "Report-Msgid-Bugs-To: \n" -"POT-Creation-Date: 2013-12-16 09:20+0100\n" "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n" "Last-Translator: FULL NAME \n" "Language-Team: LANGUAGE \n" diff --git a/src/picture/models.py b/src/picture/models.py index 3a05ad8dc..7ccd97c0c 100644 --- a/src/picture/models.py +++ b/src/picture/models.py @@ -101,6 +101,8 @@ class Picture(models.Model): short_html_url_name = 'picture_short' + is_picture = True + class AlreadyExists(Exception): pass diff --git a/src/picture/views.py b/src/picture/views.py index f42b0bb8d..e40e0ab41 100644 --- a/src/picture/views.py +++ b/src/picture/views.py @@ -95,7 +95,7 @@ def import_picture(request): exception = pprint.pformat(info[1]) tb = '\n'.join(traceback.format_tb(info[2])) return HttpResponse(_("An error occurred: %(exception)s\n\n%(tb)s") % - {'exception': exception, 'tb': tb}, mimetype='text/plain') + {'exception': exception, 'tb': tb}, content_type='text/plain') return HttpResponse(_("Picture imported successfully")) else: return HttpResponse(_("Error importing file: %r") % import_form.errors) diff --git a/src/social/templatetags/social_tags.py b/src/social/templatetags/social_tags.py index 0135792ce..88d6771db 100644 --- a/src/social/templatetags/social_tags.py +++ b/src/social/templatetags/social_tags.py @@ -5,7 +5,7 @@ import re from django import template from django.utils.functional import lazy from django.utils.cache import add_never_cache_headers -from catalogue.models import Book +from catalogue.models import Book, Fragment from social.utils import likes, get_or_choose_cite, choose_cite as cs from ..models import Carousel, Cite @@ -25,8 +25,11 @@ def choose_cite(context, book_id=None, tag_ids=None): @register.simple_tag -def choose_cites(book, number): - return book.choose_fragments(number) # todo: cites? +def choose_cites(number, book=None, author=None): + if book is not None: + return book.choose_fragments(number) # todo: cites? + elif author is not None: + return Fragment.tagged.with_all([author]).order_by('?')[:number] @register.simple_tag(takes_context=True) diff --git a/src/wolnelektury/settings/static.py b/src/wolnelektury/settings/static.py index 7dded3e52..2469532d9 100644 --- a/src/wolnelektury/settings/static.py +++ b/src/wolnelektury/settings/static.py @@ -26,7 +26,7 @@ PIPELINE = { 'source_filenames': [ 'contrib/jquery-ui-1.13.1.custom/jquery-ui.css', '2022/styles/main.scss', - '2022/more.scss', + '2022/more.scss', ], 'output_filename': 'css/compressed/2022.css', }, @@ -140,6 +140,7 @@ PIPELINE = { 'contrib/jquery-ui-1.13.1.custom/jquery-ui.js', 'js/search.js', 'js/2022.js', + '2022/book/filter.js', ], 'output_filename': 'js/2022.min.js' }, diff --git a/src/wolnelektury/static/2021/scripts/main.js b/src/wolnelektury/static/2021/scripts/main.js index 4d177715c..99a7fc7a6 100644 --- a/src/wolnelektury/static/2021/scripts/main.js +++ b/src/wolnelektury/static/2021/scripts/main.js @@ -1,7 +1,7 @@ // JS Menu (function () { let button = $('.js-menu'); - let menu = $('.l-navigation__menu'); + let menu = $('.l-navigation'); let menuLinks = menu.find('a'); button.on('click', function() { @@ -154,14 +154,31 @@ let $switchMonthly = $('#switch-monthly'); $switchMonthly.on('click', function() { - $('.l-checkout__payments__box').removeClass('once'); + $('.payments-once').hide(); + $('.payments-recurring').show(); }); $switchOnce.on('click', function() { - $('.l-checkout__payments__box').addClass('once'); + $('.payments-recurring').hide(); + $('.payments-once').show(); }); })(); + +(function() { + + $('.l-checkout__payments__box button').on('click', function() { + let container = $(this).closest('.l-checkout__payments'); + $('input', container).val($(this).attr('data-amount')); + $('.is-active', container).removeClass('is-active'); + $(this).closest('.l-checkout__payments__box').addClass('is-active'); + $('#kwota').val(''); + return false; + }); + +})(); + + //Copy function (function() { let $copy = $('.js-copy'); diff --git a/src/wolnelektury/static/2022/fonts/wl.svg b/src/wolnelektury/static/2022/fonts/wl.svg index 284c0f8cb..fd9687efb 100644 --- a/src/wolnelektury/static/2022/fonts/wl.svg +++ b/src/wolnelektury/static/2022/fonts/wl.svg @@ -6,10 +6,10 @@ - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/wolnelektury/static/2022/fonts/wl.ttf b/src/wolnelektury/static/2022/fonts/wl.ttf index afc780698..b527ae552 100644 Binary files a/src/wolnelektury/static/2022/fonts/wl.ttf and b/src/wolnelektury/static/2022/fonts/wl.ttf differ diff --git a/src/wolnelektury/static/2022/fonts/wl.woff b/src/wolnelektury/static/2022/fonts/wl.woff index ec958c571..23c0a9925 100644 Binary files a/src/wolnelektury/static/2022/fonts/wl.woff and b/src/wolnelektury/static/2022/fonts/wl.woff differ diff --git a/src/wolnelektury/static/2022/images/approval.svg b/src/wolnelektury/static/2022/images/approval.svg new file mode 100644 index 000000000..1f27888af --- /dev/null +++ b/src/wolnelektury/static/2022/images/approval.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/wolnelektury/static/2022/images/check.svg b/src/wolnelektury/static/2022/images/check.svg new file mode 100644 index 000000000..7c9cb2a31 --- /dev/null +++ b/src/wolnelektury/static/2022/images/check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/wolnelektury/static/2022/images/checkout-footer.png b/src/wolnelektury/static/2022/images/checkout-footer.png new file mode 100644 index 000000000..6a9ce698b Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-footer.png differ diff --git a/src/wolnelektury/static/2022/images/checkout-img-1.jpg b/src/wolnelektury/static/2022/images/checkout-img-1.jpg new file mode 100644 index 000000000..06b120be0 Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-1.jpg differ diff --git a/src/wolnelektury/static/2022/images/checkout-img-2.jpg b/src/wolnelektury/static/2022/images/checkout-img-2.jpg new file mode 100644 index 000000000..5ad3ae7b0 Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-2.jpg differ diff --git a/src/wolnelektury/static/2022/images/checkout-img-3.jpg b/src/wolnelektury/static/2022/images/checkout-img-3.jpg new file mode 100644 index 000000000..d3bac011f Binary files /dev/null and b/src/wolnelektury/static/2022/images/checkout-img-3.jpg differ diff --git a/src/wolnelektury/static/2022/images/copy.svg b/src/wolnelektury/static/2022/images/copy.svg new file mode 100644 index 000000000..42a5a58b4 --- /dev/null +++ b/src/wolnelektury/static/2022/images/copy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/wolnelektury/static/2022/more.scss b/src/wolnelektury/static/2022/more.scss index 604c24d38..fcde582ef 100644 --- a/src/wolnelektury/static/2022/more.scss +++ b/src/wolnelektury/static/2022/more.scss @@ -1,3 +1,21 @@ +.l-books { + margin-right: -17px; +} +.l-books__grid { + margin-right: -17px; +} + .l-books__item { width: 212px; + + margin-right: 17px !important; // reverse the 5n+5 rule. + + transition: opacity .1s, all cubic-bezier(0.25, 1, 0.5, 1) 350ms; +} + + +.by-popularity { + .l-books__item { + order: attr(data-pop); + } } diff --git a/src/wolnelektury/static/2022/styles/base/_icons.scss b/src/wolnelektury/static/2022/styles/base/_icons.scss index 4ba192488..924484f87 100644 --- a/src/wolnelektury/static/2022/styles/base/_icons.scss +++ b/src/wolnelektury/static/2022/styles/base/_icons.scss @@ -5,26 +5,36 @@ $icomoon-font-family: "wl" !default; $icomoon-font-path: "../fonts" !default; -$icon-liked: "\e900"; -$icon-audio: "\e903"; -$icon-book: "\e904"; -$icon-eye: "\e905"; -$icon-prev: "\e901"; -$icon-next: "\e902"; -$icon-play: "\e906"; -$icon-pause: "\e907"; -$icon-volume: "\e908"; -$icon-mute: "\e909"; -$icon-quote: "\e90a"; -$icon-search: "\e90b"; -$icon-acc-1: "\e90c"; -$icon-acc-2: "\e90d"; -$icon-acc-3: "\e90e"; -$icon-all: "\e90f"; -$icon-arrow-right: "\e910"; -$icon-arrow-up: "\e911"; -$icon-arrow-down: "\e912"; -$icon-close: "\e913"; +$icon-lang: "\e900"; +$icon-tt: "\e901"; +$icon-yt: "\e902"; +$icon-ig: "\e903"; +$icon-fb: "\e904"; +$icon-filter: "\e905"; +$icon-like: "\e906"; +$icon-liked: "\e907"; +$icon-prev: "\e908"; +$icon-next: "\e909"; +$icon-audio: "\e90a"; +$icon-picture: "\e90b"; +$icon-book: "\e90c"; +$icon-book-alt: "\e90d"; +$icon-eye: "\e90e"; +$icon-play: "\e90f"; +$icon-pause: "\e910"; +$icon-volume: "\e911"; +$icon-mute: "\e912"; +$icon-quote: "\e913"; +$icon-search: "\e914"; +$icon-acc-1: "\e915"; +$icon-acc-2: "\e916"; +$icon-acc-3: "\e917"; +$icon-all: "\e918"; +$icon-arrow-left: "\e919"; +$icon-arrow-right: "\e91a"; +$icon-arrow-up: "\e91b"; +$icon-arrow-down: "\e91c"; +$icon-close: "\e91d"; @font-face { font-family: '#{$icomoon-font-family}'; @@ -52,24 +62,44 @@ $icon-close: "\e913"; -moz-osx-font-smoothing: grayscale; } -.icon-liked { +.icon-lang { &:before { - content: $icon-liked; + content: $icon-lang; } } -.icon-audio { +.icon-tt { &:before { - content: $icon-audio; + content: $icon-tt; } } -.icon-book { +.icon-yt { &:before { - content: $icon-book; + content: $icon-yt; } } -.icon-eye { +.icon-ig { &:before { - content: $icon-eye; + content: $icon-ig; + } +} +.icon-fb { + &:before { + content: $icon-fb; + } +} +.icon-filter { + &:before { + content: $icon-filter; + } +} +.icon-like { + &:before { + content: $icon-like; + } +} +.icon-liked { + &:before { + content: $icon-liked; } } .icon-prev { @@ -82,12 +112,36 @@ $icon-close: "\e913"; content: $icon-next; } } +.icon-audio { + &:before { + content: $icon-audio; + } +} +.icon-picture { + &:before { + content: $icon-picture; + } +} +.icon-book { + &:before { + content: $icon-book; + } +} +.icon-book-alt { + &:before { + content: $icon-book-alt; + } +} +.icon-eye { + &:before { + content: $icon-eye; + } +} .icon-play { &:before { content: $icon-play; } } -.jp-state-playing .icon-play, .icon-pause { &:before { content: $icon-pause; @@ -98,7 +152,6 @@ $icon-close: "\e913"; content: $icon-volume; } } -.jp-state-muted .icon-volume, .icon-mute { &:before { content: $icon-mute; @@ -134,6 +187,11 @@ $icon-close: "\e913"; content: $icon-all; } } +.icon-arrow-left { + &:before { + content: $icon-arrow-left; + } +} .icon-arrow-right { &:before { content: $icon-arrow-right; diff --git a/src/wolnelektury/static/2022/styles/components/_checkbox.scss b/src/wolnelektury/static/2022/styles/components/_checkbox.scss new file mode 100644 index 000000000..ad093a67f --- /dev/null +++ b/src/wolnelektury/static/2022/styles/components/_checkbox.scss @@ -0,0 +1,54 @@ +/* ------------------------------ + Component: Checkbox +------------------------------ */ + +.c-checkbox { + display: flex; + margin-bottom: 14px; + + input { + opacity: 0; + width: 0; height: 0; + position: absolute; + visibility: hidden; + } + + input + label { + &:before { + content: ''; + margin-top: 2px; + vertical-align: middle; + width: 20px; + min-width: 20px; + height: 20px; + margin-right: 20px; + text-align: center; + display: block; + background: #E1F1F2; + border: 2px solid #083F4D; + box-sizing: border-box; + border-radius: 3px; + } + } + + input:checked + label { + &:before { + background: #083F4D url(../images/check.svg) center no-repeat; + background-size: 12px; + } + } + + label { + display: flex; + cursor: pointer; + + p { + margin-top: 0; + color: #083F4D; + @include font-size(15px); + line-height: 150%; + span {color: #FF4C54; margin-left: -10px;} + } + } +} + diff --git a/src/wolnelektury/static/2022/styles/components/_lang.scss b/src/wolnelektury/static/2022/styles/components/_lang.scss new file mode 100644 index 000000000..7ca9114cb --- /dev/null +++ b/src/wolnelektury/static/2022/styles/components/_lang.scss @@ -0,0 +1,65 @@ +.c-lang { + position: absolute; + top: 23px; + margin-right: 217px; + opacity: 0; + pointer-events: none; + transition: opacity 350ms $ease-out; + z-index: $master-layer + 1; + + &.is-open { + .c-lang__button { + .icon-arrow-down { + transform: rotate(-180deg); + } + } + .c-lang__list { + transform: none; + opacity: 1; + pointer-events: all; + } + } +} + +.c-lang__button { + display: flex; + align-items: center; + color: $color-white; + cursor: pointer; + + .icon-lang { + color: #92BD39; + @include font-size(26px); + margin-right: 8px; + } + + .icon-arrow-down { + margin-left: 8px; + transition: transform 350ms $ease-out; + } +} + +.c-lang__list { + margin-top: 10px; + border-radius: 10px; + background-color: #F7BA00; + overflow: hidden; + transform: translateY(-10px); + opacity: 0; + transition: all 350ms $ease-out; + pointer-events: none; + a { + display: block; + padding: 9px 20px; + color: #474747; + + &:hover { + background-color: #EDAA00; + } + + &.is-active { + font-weight: $semibold; + background-color: #EDAA00; + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/components/_module.scss b/src/wolnelektury/static/2022/styles/components/_module.scss index dfbb20939..d0ce78b65 100644 --- a/src/wolnelektury/static/2022/styles/components/_module.scss +++ b/src/wolnelektury/static/2022/styles/components/_module.scss @@ -8,5 +8,6 @@ @import "media"; @import "player"; @import "support"; -//@import "checkbox"; +@import "checkbox"; @import "select"; +@import "lang"; diff --git a/src/wolnelektury/static/2022/styles/layout/_author.scss b/src/wolnelektury/static/2022/styles/layout/_author.scss index 55483bf62..1156cdd4c 100644 --- a/src/wolnelektury/static/2022/styles/layout/_author.scss +++ b/src/wolnelektury/static/2022/styles/layout/_author.scss @@ -180,3 +180,42 @@ max-width: 336px; outline: 0; } + + +.l-author__header { + display: flex; + align-items: center; + width: 100%; + border-bottom: 1px solid #D9D9D9; + padding-bottom: 22px; + + figure { + padding: 0; + font-size: 0; + width: 40px; + height: 40px; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + margin: 0 12px 0 0; + + img { + max-width: 100%; + } + } + + h1 { + font-weight: $bold; + font-size: 37px; + line-height: 130%; + letter-spacing: -0.01em; + color: #083F4D; + margin: 0; + + span { + font-weight: $regular; + } + } +} diff --git a/src/wolnelektury/static/2022/styles/layout/_books.scss b/src/wolnelektury/static/2022/styles/layout/_books.scss index ba191a827..70a6e315c 100644 --- a/src/wolnelektury/static/2022/styles/layout/_books.scss +++ b/src/wolnelektury/static/2022/styles/layout/_books.scss @@ -26,16 +26,16 @@ background: #FFFFFF; border-radius: 9px; padding: 21px; - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0); transition: all $ease-dynamic 350ms; &:not(:last-child) { - margin-right: 20px; + margin-right: 17px; } &:hover { - box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.25); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); } &.l-books__item--link { @@ -92,12 +92,183 @@ } .l-books__item__img { - margin: 0; font-size: 0; - margin-bottom: 11px; + margin: 0 0 11px; - a {} img { max-width: 170px; } } + +.l-books__item__actions { + display: flex; + align-content: center; + justify-content: flex-start; + margin-bottom: 5px; + + .icon { + color: #083F4D; + margin-right: 10px; + @include font-size(16px); + + &.icon-like, + &.icon-liked { + color: #FF4C54; + @include font-size(19px); + margin-right: 0; + margin-left: auto; + } + + &:hover { + text-decoration: none; + } + } +} + +.l-books__header { + width: 100%; + display: flex; + margin-top: 34px; + align-items: center; + justify-content: space-between; +} + +.l-books__input { + position: relative; + display: flex; + align-content: center; + width: 560px; + + .icon { + @include font-size(22px); + color: #083F4D; + position: absolute; + margin: auto; + top: 0; + bottom: 0; + left: 19px; + display: flex; + align-items: center; + justify-content: center; + pointer-events: none; + } + + input { + font-family: $base-font; + font-size: 18px; + font-style: italic; + padding: 10px 20px 10px 50px; + border-radius: 52px; + border: 1px solid #D9D9D9; + width: 100%; + max-width: 580px; + outline: 0; + transition: border $ease-out 350ms; + + &:focus { + border-color: #007880; + } + } +} + +.l-books__sorting { + display: flex; + align-content: center; + + span { + font-weight: $bold; + @include font-size(18px); + line-height: 150%; + color: #083F4D; + } + + div { + display: flex; + align-content: center; + + button { + border: 0; + padding: 0; + margin: 0 0 0 30px; + background-color: transparent; + outline: 0; + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + color: #808080; + cursor: pointer; + + &.is-active { + color: #083F4D; + font-weight: $semibold; + } + } + } +} + +.l-books__grid { + display: flex; + flex-wrap: wrap; + margin-top: 34px; + + .l-books__item { + border: 1px solid #D9D9D9; + margin-bottom: 17px; + + &:nth-child(5n + 5) { + margin-right: 0; + } + } +} + +.l-books__col { + display: flex; + flex-direction: column; + margin-top: 34px; + + .l-books__item { + width: 705px; + border: 1px solid #D9D9D9; + margin-bottom: 17px; + display: flex; + + .l-books__item__img { + margin-bottom: 0; + } + } +} + +.l-books__item__content { + padding-left: 40px; + position: relative; + + .l-books__item__actions { + position: absolute; + right: 0; + } + + h2 { + font-weight: $semibold; + @include font-size(21px); + line-height: 140%; + letter-spacing: -0.01em; + } + + p { + max-width: 390px; + margin-top: 20px; + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + color: #474747; + } + + & > a { + display: block; + margin-top: 20px; + font-weight: $regular; + @include font-size(18px); + line-height: 150%; + color: #007880; + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/layout/_checkout.scss b/src/wolnelektury/static/2022/styles/layout/_checkout.scss new file mode 100644 index 000000000..5266a7230 --- /dev/null +++ b/src/wolnelektury/static/2022/styles/layout/_checkout.scss @@ -0,0 +1,793 @@ +//Support bar +.l-checkout__support { + margin-bottom: 22px; +} + +.l-checkout__support__bar { + background: #E6F0F1 url(../images/approval.svg) center right 5px no-repeat; + border-radius: 10px; + width: 100%; height: 34px; + position: relative; + span { + position: absolute; + top: 0; left: 0; + height: 100%; + background: #92BD39; + border-radius: 10px; + &:after { + margin: auto; + position: absolute; + top: 0; right: 13px; bottom: 2px; + content: attr(data-label); + font-weight: bold; + font-size: 15px; + color: #FFFFFF; + display: flex; + align-items: center; + justify-content: center; + } + } +} + +.l-checkout__support__footer { + display: flex; + margin-top: 7px; + justify-content: space-between; + align-items: center; + p { + margin: 0; + font-weight: normal; + font-size: 15px; + line-height: 150%; + color: #083F4D; + } +} + +//Box +.l-checkout__box { + background: #E1F1F2; + border-radius: 10px; + padding-bottom: 30px; + overflow: hidden; +} + +.l-checkout__box__header { + display: flex; + background: #083F4D; +} + +.l-checkout__box__header__content h1 { + font-style: italic; + font-weight: 300; + font-size: 48px; + line-height: 55px; + letter-spacing: -0.02em; + color: #92BD39; + margin: 0; +} + +.l-checkout__box__header__content p:first-of-type { + font-style: normal; + font-weight: 600; + font-size: 21.5px; + line-height: 140%; + letter-spacing: -0.01em; + color: #FFFFFF; + margin-top: 23px; +} + +.l-checkout__box__header__content p { + font-weight: normal; + font-size: 18px; + line-height: 150%; + color: #FFFFFF; + margin-top: 8px; + max-width: 410px; +} + +.l-checkout__box__header__content { + padding: 32px 45px; +} + +//Steps +.l-checkout__steps { + display: flex; + padding: 0 125px; + justify-content: space-between; + margin-top: -24px; + + div { + width: 145px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + span { + width: 46px; + height: 46px; + background: #86AD34; + color: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 21px; + line-height: 140%; + letter-spacing: -0.01em; + } + + p { + margin-top: 4px; + font-weight: 600; + font-size: 21px; + line-height: 140%; + text-align: center; + letter-spacing: -0.01em; + color: #083F4D; + } + + &.is-completed { + span { + overflow: hidden; + text-indent: -999px; + background: #86AD34 url(../images/check.svg) center no-repeat; + } + } + + &.is-inactive { + span { + background: #ffffff; + color: #003C3C; + } + p { + color: #74BDC2; + font-weight: normal; + } + } + } +} + +//Switch +.l-switch__wrapper { + display: flex; + align-items: center; + justify-content: center; + margin-top: 35px; +} + +.l-switch { + background: #fff; + display: block; + position: relative; + height: 26px; + width: 77px; + border-radius: 4px; +} + +.l-switch label { + color: #fff; + font-weight: 600; + font-size: 21.5px; + line-height: 26px; + transition: color .2s ease; + width: 122px; + cursor: pointer; +} + +.l-switch label:nth-of-type(1) { + left: -175%; + position: absolute; + text-align: right; +} + +.l-switch label:nth-of-type(2) { + position: absolute; + right: -175%; + text-align: left; +} + +.l-switch input { + left: 0; + opacity: 0; + position: absolute; + top: 0; + height: 26px; + width: 77px; + z-index: 2; +} + +.l-switch input:checked~label:nth-of-type(1) { color: #003C3C; } +.l-switch input:checked~label:nth-of-type(2) { color: #74BDC2; } + +.l-switch input~:checked~label:nth-of-type(1) { color: #74BDC2; } +.l-switch input~:checked~label:nth-of-type(2) { color: #003C3C; } + +.l-switch input:checked~.toggle { + left: 5px; +} + +.l-switch input~:checked~.toggle { + left: 39px; +} + +.l-switch input:checked { + z-index: 0; +} + +.toggle { + background: #003C3C; + left: 0; + position: absolute; + top: 5px; + transition: left .2s ease; + height: 16px; + width: 33px; + z-index: 1; + border-radius: 2px; + cursor: pointer; +} + +//Payments +.l-checkout__payments { + display: flex; + padding: 0 30px; + margin-top: 34px; + margin-bottom: 0; + flex-wrap: wrap; + justify-content: flex-start; +} + +.l-checkout__payments__box { + display: flex; + flex-direction: column; + width: calc(33.333% - 20px); + background: #FFFFFF; + border-radius: 10px; + overflow: hidden; + transition: box-shadow $ease-out 250ms; + box-shadow: 0px 0px 0px rgba(55, 170, 156, 0); + margin-bottom: 30px; + margin-right: 30px; + + &:nth-child(3) { + margin-right: 0; + } + + &:nth-child(5) { + margin-right: 0; + width: calc(67.4% - 20px); + } + + h3 { + margin: 0; + font-weight: bold; + font-size: 44px; + line-height: 130%; + letter-spacing: -0.01em; + color: #083F4D; + height: 90px; + display: flex; + align-items: center; + justify-content: center; + transition: all $ease-out 250ms; + + span { + font-weight: 600; + font-size: 25px; + line-height: 140%; + letter-spacing: -0.01em; + color: #92BD39; + margin-left: 10px; + transition: opacity $ease-out 250ms; + } + } + .l-checkout__payments__box__btn-wrp { + padding: 20px; + margin-bottom: 0; + margin-top: auto; + } + p { + margin-top: 0; + font-weight: normal; + font-size: 16px; + line-height: 150%; + color: #474747; + padding: 20px; + strong { + font-weight: 600; + } + } + button { + height: 56px; + background: #FFFFFF; + border: 1px solid #92BD39; + border-radius: 3px; + width: 100%; + outline: 0; + cursor: pointer; + font-weight: 600; + font-size: 20px; + line-height: 25px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: #083F4D; + transition: background $ease-out 250ms; + + &:hover { + background: rgba(#92BD39, 0.75); + } + } + + &.is-active { + box-shadow: 0px 0px 20px rgba(55, 170, 156, 0.35); + + h3 { + color: white; + background: #083F4D; + } + + button { + background: #92BD39; + &:hover { + background: #83AD2B; + } + } + } + + &.l-checkout__payments__box--xl { + flex-direction: row; + & > div { + display: flex; + &:first-child { + width: 50%; + flex-wrap: wrap; + max-width: 340px; + margin-right: 20px; + } + + &:last-child { + width: 49%; + align-items: center; + justify-content: center; + } + } + + h3 { + width: 100%; + } + + .l-checkout__payments__box__btn-wrp { + width: 100%; + } + + button { + border-color: #FFA500; + background-color: #FFA500; + &:hover { + background: darken(#FFA500, 5%); + } + } + + &.once { + h3 { + text-indent: 0; + padding-left: 0; + } + } + } +} + +//Amount +.l-checkout__amount { + display: flex; + align-items: flex-end; + justify-content: flex-end; + padding-right: 30px; + + button { + border: none; + height: 56px; + background: #083F4D; + border-radius: 3px; + font-weight: 600; + font-size: 20px; + line-height: 25px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin-left: 32px; + color: #FFFFFF; + width: 340px; + } + + .l-checkout__input { + width: 340px; + } +} + +//Input +.l-checkout__input { + display: flex; + flex-direction: column; + + label { + font-style: normal; + font-weight: 600; + font-size: 15px; + line-height: 160%; + color: #083F4D; + span { color: #FF4C54; } + } + input, select, textarea { + height: 56px; + background: #FFFFFF; + border: 1px solid #D5ECED; + border-radius: 3px; + transition: all $ease-out 250ms; + padding: 10px; + outline: 0; + + &:focus { + border: 1px solid #007880; + } + } + + button { + height: 56px; + background: #083F4D; + border-radius: 3px; + font-weight: 600; + font-size: 20px; + line-height: 25px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + margin-left: 32px; + color: #FFFFFF; + width: 340px; + } +} + +//Cols +.l-checkout__cols { + display: flex; + padding: 0 30px; + margin-top: 50px; + + &.bt-w { + margin-top: 30px; + padding-top: 20px; + border-top: 1px solid white; + } +} + +.l-checkout__col { + &:nth-child(1) { + width: 402px; + padding-right: 62px; + .l-checkout__payments__box { + width: 100%; + } + } + &:nth-child(2) { + width: calc(100% - 340px); + } + &.full { + width: 100%; + padding-right: 0; + + .l-checkout__form__row.full { + flex-direction: row; + + & > h3 { + margin-top: 22px; + } + + .l-checkout__info { + width: 100%; + padding-left: 100px; + } + } + } +} + +.l-checkout__footer__img { + display: flex; + margin-right: 30px; + margin-left: auto; + margin-top: 30px; +} + +//Form +.l-checkout__form { + display: flex; + width: 100%; + flex-direction: column; +} + +.l-checkout__form__row { + display: flex; + margin-bottom: 24px; + + &:nth-child(4) { + .l-checkout__input { + &:nth-child(1) { width: 172px; } + &:nth-child(2) { width: calc(100% - 172px); } + } + } + + &.full { + flex-direction: column; + + .l-checkout__input { + &:nth-child(1) { + padding-right: 0; + } + &:nth-child(2) { + padding-left: 0; + } + } + } + + h3 { + margin-top: 0; + font-weight: 600; + font-size: 21.5px; + line-height: 140%; + letter-spacing: -0.01em; + color: #083F4D; + } + + .iframe { + margin-top: 16px; + } + + .l-checkout__input { + width: 100%; + &:nth-child(1) { + padding-right: 10px; + } + &:nth-child(2) { + padding-left: 10px; + } + } + + & > a { + font-weight: 600; + font-size: 20px; + line-height: 25px; + color: #74BDC2; + transition: all $ease-out 250ms; + + &:hover { + color: #007880; + } + } + + &.confirm { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + + .l-checkout__input { + width: auto; + } + } + .errorlist { + padding: 0; + margin: 0; + list-style: none; + color: #FF4C54; + li:before { + content: '⚠ '; + } + } +} + +//Info +.l-checkout__info__item { + position: relative; + display: flex; + align-items: center; + justify-content: space-between; + transition: all $ease-out 250ms; + width: 100%; + overflow: hidden; + margin-top: 15px; + + &:hover { + background-color: darken(#E1F1F2, 2%); + } + + div { + font-weight: normal; + font-size: 15px; + line-height: 150%; + color: #083F4D; + width: 100px; + } + + h3 { + width: 426px; + font-weight: 500; + font-size: 18px; + line-height: 150%; + color: #083F4D; + padding-left: 30px; + } + + button { + outline: 0; + background: transparent; + border: 0; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + margin-right: 0; + margin-left: auto; + &:hover { + opacity: 0.75; + } + } + input { + top: 0; + left: 0; + position: absolute; + transform: translate(-100%,-100%); + } +} + +//Completed +.l-checkout__completed { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + margin: auto; + padding: 140px 0; + background: url(../images/checkout-bg.png) no-repeat center; + + .l-checkout__completed__wrapper { + max-width: 580px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + } + + h1 { + margin-top: 0; + font-style: italic; + font-weight: 300; + font-size: 58px; + line-height: 55px; + letter-spacing: -0.02em; + color: #083F4D; + } + p { + margin-top: 30px; + font-weight: normal; + font-size: 21.5px; + line-height: 140%; + text-align: center; + letter-spacing: -0.01em; + color: #007880; + } + a { + margin-top: 50px; + font-weight: 600; + font-size: 20px; + line-height: 25px; + display: flex; + align-items: center; + justify-content: center; + background: #083F4D; + border-radius: 3px; + height: 56px; + text-align: center; + color: #FFFFFF; + width: 340px; + } +} + +//Footer +.l-checkout__footer { + display: flex; + flex-wrap: wrap; + margin-top: 12px; + margin-bottom: 52px; +} + +.l-checkout__footer > img { + margin-right: 0; + margin-left: auto; +} + +.l-checkout__footer__content { + display: flex; + flex-direction: column; +} + +.l-checkout__footer__content__item { + display: flex; + + &:not(:last-child) { + padding-bottom: 30px; + margin-bottom: 30px; + border-bottom: 1px solid #E1F1F2; + } +} + +.l-checkout__footer__content h3 { + font-weight: 600; + font-size: 21.5px; + line-height: 140%; + letter-spacing: -0.01em; + color: #083F4D; + width: 318px; +} + +.l-checkout__footer__content__item > div { + width: 100%; + padding-left: 120px; +} + +.l-checkout__footer__content__item > div p { + font-weight: normal; + font-size: 15px; + line-height: 150%; + color: #808080; +} + +.l-checkout__footer__content__item > div p a { + color: #007880; + &:hover { + text-decoration: underline; + } +} + +.l-checkout__footer__content { + .l-article__read-more { + margin-top: 20px; + font-size: 15px; + &:after { + margin-left: 5px; + display: inline-block; + transform: rotate(180deg); + content: $icon-arrow-up; + font-family: '#{$icomoon-font-family}' !important; + font-size: 12px; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + } + + .l-article__overlay { + &:after { + display: none; + } + &.is-clicked { + & + .l-article__read-more { + &:after { + transform: none; + } + } + } + } +} diff --git a/src/wolnelektury/static/2022/styles/layout/_module.scss b/src/wolnelektury/static/2022/styles/layout/_module.scss index 84cf5326e..df1474178 100644 --- a/src/wolnelektury/static/2022/styles/layout/_module.scss +++ b/src/wolnelektury/static/2022/styles/layout/_module.scss @@ -18,3 +18,4 @@ @import "container"; @import "breadcrumb"; @import "content"; +@import "checkout"; diff --git a/src/wolnelektury/static/2022/styles/layout/_navigation.scss b/src/wolnelektury/static/2022/styles/layout/_navigation.scss index 51a9420da..a61b7ae6a 100644 --- a/src/wolnelektury/static/2022/styles/layout/_navigation.scss +++ b/src/wolnelektury/static/2022/styles/layout/_navigation.scss @@ -1,6 +1,3 @@ -$teal: #007880; - - .l-navigation { max-width: 100%; margin: 0 auto; @@ -16,6 +13,29 @@ $teal: #007880; align-items: center; justify-content: space-between; } + + &.is-open { + position: fixed; + top: 0; left: 0; + width: 100%; + z-index: $master-layer; + .l-navigation__menu { + opacity: 1; + pointer-events: all; + } + + .c-lang { + opacity: 1; + .c-lang__button { + pointer-events: all; + } + } + } +} + +.l-navigation__logo { + position: relative; + z-index: $master-layer + 1; } .l-navigation__button { @@ -25,6 +45,8 @@ $teal: #007880; padding: 0; margin: 0; outline: 0; + position: relative; + z-index: $master-layer + 1; } .l-naviagion__search { @@ -38,7 +60,7 @@ $teal: #007880; font-size: 18px; font-style: italic; border: 0; - padding: 10px; + padding: 10px 20px; border-radius: 52px; width: 100%; max-width: 580px; @@ -92,10 +114,6 @@ $teal: #007880; color: #333333; margin: 0; max-width: 590px; - - a { - color: $teal; - } } } @@ -112,9 +130,143 @@ $teal: #007880; cursor: pointer; } +.l-navigation__menu { + position: fixed; + top: 0; left: 0; + width: 100%; height: 100%; + background-color: #083F4D; + z-index: $master-layer; + padding-top: 93px; + opacity: 0; + pointer-events: none; + transition: opacity 350ms $ease-out; + + .l-container { + display: flex; + flex-direction: column; + } +} + +.l-navigation__menu__links { + width: 100%; + display: flex; + justify-content: space-between; + + ul { + margin: 0; + padding: 0; + list-style: none; + max-width: 212px; + + li { + font-weight: $regular; + @include font-size(18px); + line-height: 100%; + padding-top: 16px; + strong { + color: #92BD39; + font-weight: $semibold; + @include font-size(21px); + line-height: 140%; + letter-spacing: -0.01em; + } -.ui-autocomplete a { - display: block; - transition: none; + a { + color: $color-white; + &:hover { + text-decoration: underline; + } + } + + hr { + width: 34px; + height: 1px; + background: #007880; + margin-left: 0; + border: 0; + } + } + } } + +.l-navigation__menu__info { + display: flex; + width: 100%; + padding-top: 58px; + justify-content: space-between; + align-items: flex-end; +} + +.l-navigation__menu__book { + p { + color: $color-white; + @include font-size(21px); + line-height: 140%; + strong { + color: #92BD39; + letter-spacing: -0.01em; + font-weight: $semibold; + } + } +} + +.l-navigation__menu__book__info { + display: flex; + margin-top: 20px; + align-items: flex-start; + padding: 12px; + background-color: $color-white; + border-radius: 6px; + color: #808080; + + img { + margin-right: 10px; + } + + h3 { + margin: 0; + font-weight: $regular; + @include font-size(15px); + line-height: 120%; + width: 150px; + strong { + display: block; + font-weight: $semibold; + @include font-size(18px); + line-height: 130%; + } + } + + p { + margin: 0; + width: 427px; + font-weight: $regular; + @include font-size(15px); + line-height: 130%; + color: #808080; + } +} + +.l-navigation__menu__social { + ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; + li { + &:not(:last-child) { + margin-right: 36px; + } + a { + color: $color-white; + &:hover { + color: #92BD39; + } + } + .icon { + @include font-size(28px); + } + } + } +} \ No newline at end of file diff --git a/src/wolnelektury/static/2022/styles/local.scss b/src/wolnelektury/static/2022/styles/local.scss new file mode 100644 index 000000000..a8185cd6b --- /dev/null +++ b/src/wolnelektury/static/2022/styles/local.scss @@ -0,0 +1,39 @@ +$teal: #007880; + + +.l-change-pop { + transition: 350ms all; + + p { + a { + color: $teal; + } + } +} + + +.is-open .l-change-pop { + height: 0; + margin-top: 0; + margin-bottom: 0; + padding-top: 0; + padding-bottom: 0; +} + + +.ui-autocomplete a { + display: block; + transition: none; +} + + +.jp-state-playing .icon-play { + &:before { + content: $icon-pause; + } +} +.jp-state-muted .icon-volume { + &:before { + content: $icon-mute; + } +} diff --git a/src/wolnelektury/static/2022/styles/main.scss b/src/wolnelektury/static/2022/styles/main.scss index d800a3ac5..182dc3888 100644 --- a/src/wolnelektury/static/2022/styles/main.scss +++ b/src/wolnelektury/static/2022/styles/main.scss @@ -28,3 +28,4 @@ @import "layout/module"; @import "components/module"; @import "pages/module"; +@import "local";