From 6028df66dc167011795b34b2cfa3a08a568de48f Mon Sep 17 00:00:00 2001 From: Oleg Lavrovsky Date: Mon, 12 Aug 2019 17:28:31 +0200 Subject: [PATCH] Blog layout and functions --- feedler/templates/feedler/feed_page.html | 3 - .../home/templates/home/article_page.html | 4 +- .../home/templates/home/home_page.html | 4 +- publichealth/home/templates/puput/base.html | 124 ++-- .../home/templates/puput/blog_page.html | 1 - .../home/templates/puput/entry_page.html | 20 +- .../templates/puput/entry_page_header.html | 6 - publichealth/static/css/main.scss | 11 + publichealth/static/css/modules/_blog.scss | 632 ++++++++++++++++++ publichealth/static/css/modules/_modules.scss | 1 + publichealth/templates/base.html | 2 +- 11 files changed, 716 insertions(+), 92 deletions(-) delete mode 100644 publichealth/home/templates/puput/entry_page_header.html create mode 100644 publichealth/static/css/modules/_blog.scss diff --git a/feedler/templates/feedler/feed_page.html b/feedler/templates/feedler/feed_page.html index 34ed625..172a07b 100644 --- a/feedler/templates/feedler/feed_page.html +++ b/feedler/templates/feedler/feed_page.html @@ -3,9 +3,6 @@ {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} -{% block extra_css %} -{% endblock %} - {% block title %}Feeds{% endblock %} {% block content %} diff --git a/publichealth/home/templates/home/article_page.html b/publichealth/home/templates/home/article_page.html index a7960cb..8e43f0f 100644 --- a/publichealth/home/templates/home/article_page.html +++ b/publichealth/home/templates/home/article_page.html @@ -1,12 +1,14 @@ {% extends "base.html" %} -{% load static wagtailcore_tags %} +{% load static compress wagtailcore_tags %} {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} {% block extra_css %} + {% compress css %} + {% endcompress %} {% endblock %} {% block content %} diff --git a/publichealth/home/templates/home/home_page.html b/publichealth/home/templates/home/home_page.html index df0d537..7feef0f 100644 --- a/publichealth/home/templates/home/home_page.html +++ b/publichealth/home/templates/home/home_page.html @@ -1,11 +1,13 @@ {% extends "base.html" %} -{% load static wagtailcore_tags %} +{% load static compress wagtailcore_tags %} {% block body_class %}template-{{ self.get_verbose_name|slugify }}{% endblock %} {% block extra_css %} + {% compress css %} + {% endcompress %} {% endblock %} {% block content %} diff --git a/publichealth/home/templates/puput/base.html b/publichealth/home/templates/puput/base.html index 8de714b..792c5fc 100644 --- a/publichealth/home/templates/puput/base.html +++ b/publichealth/home/templates/puput/base.html @@ -16,8 +16,11 @@ content="{% block meta_description %} {{ blog_page.search_description }} {% endblock meta_description %}"/> + {% block social_share %}{% endblock social_share %} + + - + + +{% endblock %} + +{% block extra_js %} {% endblock %} {% block content %} + +{% if blog_page.header_image %} + + {% image blog_page.header_image fill-1500x360 as header_image %} + {{ blog_page.header_image.title }} + +{% endif %} +
- {% if blog_page.header_image %} - - {% image blog_page.header_image fill-1500x120 as header_image %} - {{ blog_page.header_image.title }} - - {% endif %} -
-
-

- {{ blog_page.title }} -

- {% if not blog_page.header_image %} -

{{ blog_page.description }}

- {% endif %} -
+
+

+ {{ blog_page.title }} +

+

{{ blog_page.description }}

-
- {% block blog_content %}{% endblock blog_content %} - {% block extra_content %}{% endblock extra_content %} -
- -
-
-
- - {% trans 'Feed RSS' %} - -
-
-
- - - - -
-
- - {% if blog_page.display_last_entries %} -
    -

    {% trans 'Last Entries' %}

    - {% recent_entries blog_page.num_last_entries %} -
- {% endif %} - {% if blog_page.display_popular_entries %} -
    -

    {% trans 'Popular Entries' %}

    - {% popular_entries blog_page.num_popular_entries %} -
- {% endif %} - {% if blog_page.display_categories %} -
    -

    {% trans 'Categories' %}

    - {% categories_list %} -
- {% endif %} - {% if blog_page.display_tags %} -
    -

    {% trans 'Tags' %}

    - {% tags_list %} -
- {% endif %} - {% if blog_page.display_archive %} -
    -

    {% trans 'Archive' %}

    - {% archives_list %} -
- {% endif %} -
-
+ {% block blog_content %}{% endblock blog_content %} + {% block extra_content %}{% endblock extra_content %} +
+
+ {% if blog_page.display_last_entries %} +
    +

    {% trans 'Last Entries' %}

    + {% recent_entries blog_page.num_last_entries %} +
+ {% endif %} + {% if blog_page.display_popular_entries %} +
    +

    {% trans 'Popular Entries' %}

    + {% popular_entries blog_page.num_popular_entries %} +
+ {% endif %} + {% if blog_page.display_categories %} +
    +

    {% trans 'Categories' %}

    + {% categories_list %} +
+ {% endif %} + {% if blog_page.display_tags %} +
    +

    {% trans 'Tags' %}

    + {% tags_list %} +
+ {% endif %} + {% if blog_page.display_archive %} +
    +

    {% trans 'Archive' %}

    + {% archives_list %} +
+ {% endif %}
diff --git a/publichealth/home/templates/puput/blog_page.html b/publichealth/home/templates/puput/blog_page.html index 3cbe09b..2da980c 100644 --- a/publichealth/home/templates/puput/blog_page.html +++ b/publichealth/home/templates/puput/blog_page.html @@ -52,7 +52,6 @@ {% for entry in entries %} {% entry_url entry blog_page as post_url %}
- {% include 'puput/entry_page_header.html' %}
{% if entry.header_image %} diff --git a/publichealth/home/templates/puput/entry_page.html b/publichealth/home/templates/puput/entry_page.html index 0597970..74a71e0 100644 --- a/publichealth/home/templates/puput/entry_page.html +++ b/publichealth/home/templates/puput/entry_page.html @@ -42,18 +42,18 @@ {% endblock social_share %} {% block blog_content %} + +{% if self.header_image %} +
+ {% image self.header_image fill-940x400 class="img-responsive" %} +
+{% endif %} + +

{{ self.title }}

+
- {% include 'puput/entry_page_header.html' with entry=self %} - {% if self.header_image %} -
- - {% image self.header_image fill-800x450 as header_image %} - {{ self.header_image.title }} - - {% include 'puput/entry_links.html' with entry=self %} -
- {% endif %} + {% include 'puput/entry_links.html' with entry=self %}
{{ self.body|richtext}}
diff --git a/publichealth/home/templates/puput/entry_page_header.html b/publichealth/home/templates/puput/entry_page_header.html deleted file mode 100644 index 39577fe..0000000 --- a/publichealth/home/templates/puput/entry_page_header.html +++ /dev/null @@ -1,6 +0,0 @@ -{% load puput_tags %} -
-

- {{ entry.title }} -

-
\ No newline at end of file diff --git a/publichealth/static/css/main.scss b/publichealth/static/css/main.scss index 91755c1..d683e1b 100644 --- a/publichealth/static/css/main.scss +++ b/publichealth/static/css/main.scss @@ -55,4 +55,15 @@ $slider-nav: 200px; // Language menu hack, until this is configurable nav .language-nav a[lang='en'] { display: none; } +// Disable meta infos in blog sidepanels +.blog-header a { color: white !important; + text-shadow: 1px 1px 2px black; } +.blog-page .sidebar .meta { display: none; } +.blog-page section { padding: 0; } +.blog-page .blog-tags ul { padding: 0; } +.blog-page .social-item { + font-size: 70%; background: #2643A9 !important; +} +.blog-page ul.sidebar { min-height: 12em; } + @import "subsites"; diff --git a/publichealth/static/css/modules/_blog.scss b/publichealth/static/css/modules/_blog.scss new file mode 100644 index 0000000..c57c9aa --- /dev/null +++ b/publichealth/static/css/modules/_blog.scss @@ -0,0 +1,632 @@ +.blog-page { + +.transform { + transform: rotate(7deg); + -ms-transform: rotate(7deg); + /* IE 9 */ + -moz-transform: rotate(7deg); + /* Firefox */ + -webkit-transform: rotate(7deg); + /* Safari and Chrome */ + -o-transform: rotate(7deg); + /* Opera */ +} + +ul.links { + margin: 0px 0 25px 0; + border-bottom: 0; + padding: 5px 0; +} + +ul.links li { + font-size: 12px; + margin-right: 13px; + font-weight: 300; + color: #666666; + display: inline-block; +} + +ul.links li i { + color: var(--main-color); +} + +ul.links li a { + color: #666666; + font-weight: 300; +} + +ul.links li ul { + display: inline; + padding: 0; +} + +ul.sidebar { + border-top: 2px solid var(--main-color); + background-color: #ededed; + padding: 20px; + margin-bottom: 50px; + list-style: none; +} + +ul.sidebar h4 { + font-size: 16px; + font-weight: 500; + color: #333333; + margin-bottom: 20px; +} + +ul.sidebar li { + margin: 0 4px 10px 0; + list-style: none; +} + +ul.sidebar li.tag { + display: inline-block; + background-color: var(--main-color); + padding: 3px 10px; +} + +ul.sidebar li.tag a { + color: #FFF; + font-size: 12px; +} + +ul.sidebar li a { + font-size: 14px; + font-weight: 300; + color: #666666; +} + +ul.sidebar ul li i { + color: var(--main-color); +} + +ul.sidebar li > ul{ + padding-left: 0; +} + +ul.sidebar ul li > ul li { + padding-left: 20px; +} + + +.blog_btn { + border-radius: 0; + font-weight: 300; +} + +.blog_btn.continue, +.blog_btn.back { + display: block; + text-align: right; + background-color: transparent; + color: var(--main-color); + padding: 10px 0; +} + +.blog_btn.back { + text-align: left; +} + +.blog_btn.continue:hover, +.blog_btn.continue:focus, +.blog_btn.back:hover, +.blog_btn.back:focus { + text-decoration: none; +} + +.blog_btn.continue:active, +.blog_btn.back:active { + outline: inherit; +} + +span img { + width: 100%; + margin-bottom: 15px; +} + +.page-content h2.post_title { + text-transform: uppercase; + font-size: 22px; +} +.page-content h2.post_title a:before { + font-family: FontAwesome; + content: '\f02e'; + color: var(--main-color); + font-size: 17px; + margin-right: 9px; +} +.page-content h2.post_title a:hover { + text-decoration: none; + color: #666666; +} + +.page-content .social-share-all { + margin-bottom: 25px; +} +.page-content .social-share-all li.social-item { + display: inline-block; + width: 25px; + height: 25px; + background: #ededed; + margin-right: 3px; + margin-top: 5px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +.page-content .social-share-all li.social-item i { + color: #fff; + text-align: center; + width: 100%; + margin-top: 6px; +} +.page-content .social-share-all li.social-item:hover { + background-color: #333; +} +.page-content .social-share-all:before { + background: #ededed; + display: block; + height: 1px; + width: 78%; + position: absolute; + top: 19px; + left: 7px; + content: ""; + text-indent: -9999em; +} + + +.responsive-object{ + padding-bottom: 10px !important; +} + +.about { + background: var(--main-color) none repeat scroll 0 0; + margin-bottom: 4em; +} + +.about .title-section { + padding: 30px 0 20px; +} + +.about .title-section-image { + padding: 0; +} + +.about .title-section h1 { + font-weight: 400; +} + + +.about .title-section-image h1 { + margin-top: 0; + font-weight: 400; + font-size: 30px; +} + +.about .title-section h2 { + color: #ededed; +} + +.about .title-header a { + color: #FFF; +} + +.about .title-header a:hover, +.about .title-header a:focus { + color: #FFF; + text-decoration: none; +} + +.blog_sidebar { + padding: 5px 20px 0 45px; +} + +.blog_sidebar ul > ul { + padding: 0; +} + +.blog_sidebar form.search_form { + margin-bottom: 30px; +} + +.blog_sidebar form.search_form input[type="search"] { + width: 100%; + border: 1px solid #f0f0f0; + padding: 6px 10px; +} + +.blog_sidebar .input-group-btn { + background: var(--main-color); + -webkit-border-radius: 0 5px 5px 0; + -moz-border-radius: 0 5px 5px 0; + border-radius: 0 5px 5px 0; +} + +.blog_sidebar .input-group-btn .btn.btn-default { + border-color: transparent; + background-color: transparent; +} + +.blog_sidebar .input-group-btn .btn.btn-default i { + color: #FFF; +} + +.blog_sidebar .rss-sitemap { + margin-bottom: 15px; + text-align: right; +} + +.blog_sidebar .rss-sitemap a { + color: #999; + font-size: 12px; + text-decoration: none; +} + +.blog_sidebar .rss-sitemap i { + color: var(--main-color); +} + +.blog_sidebar .rss-sitemap span { + font-size: 12px; + color: #999; +} + +.post-summary { + margin-bottom: 20px; +} + +.post-summary ul { + padding: 0; +} + +.post-summary ul li { + margin-bottom: 0; +} + +.relatedPosts { + margin: 50px 0 100px 0; +} + +.relatedPosts img { + width: 100%; + height: auto; + margin-bottom: 15px; +} + +/*RIGHT SIDE*/ +.lateralPosts h4 { + font-weight: 300; + margin: 0; +} + +.lateralPosts .boxCircle { + width: 80px; + height: 80px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} + +.lateralPosts li { + font-size: 0.7em; + display: inline-block; + color: var(--main-color); +} + +.searchTerm { + margin: 10px 0 30px 0; + padding: 20px; + background-color: #ededed; + color: #666; +} + +.page-content, +.blog_grid { + position: relative; + border-bottom: 0; + padding: 10px 20px 20px 20px; + background: #f8f8f8; + margin-bottom: 20px; +} + +.blog_grid p { + color: #666666; + font-size: 1em; + line-height: 1.5em; + margin-top: 1em; +} + +.blog_grid h2 { + text-align: center; + margin-top: 10px; +} + +.blog_grid h2 a:after { + content: ''; + width: 25px; + height: 4px; + display: block; + margin: 0 auto; + background-color: var(--main-color); + margin-top: 7px; +} + +.blog_grid .article .social-share li { + float: left; +} +.blog_grid .article .social-share li.social-item { + display: inline-block; + width: 25px; + height: 25px; + background: #ededed; + margin-top: 5px; + margin-right: 3px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} +.blog_grid .article .social-share li.social-item i { + color: #fff; + text-align: center; + width: 100%; + margin-top: 6px; +} +.blog_grid .article .social-share li.social-item:hover { + background-color: #333; +} +.blog_grid .article .social-share:after { + background: #ededed; + display: block; + height: 1px; + width: 78%; + position: absolute; + top: 19px; + right: 0; + content: ""; + text-indent: -9999em; +} + +.rich-text { + margin-bottom: 5%; + margin-top: 10px; +} + +.rich-text h3 { + margin-bottom: 10px; +} + +.itemPosts { + margin-top: 10px; + padding-top: 15px; + border-top: 1px dotted var(--main-color); +} + +.itemPosts h3 { + font-size: 16px; + margin-bottom: 5px; +} + +.itemPosts p { + font-size: 15px; +} + +.itemPosts .box.feature a { + color: var(--main-color); +} + +.pagination { + width: 100%; + margin: 30px 0; + text-align: center; +} + +.pagination .endless_separator { + background: transparent; + color: var(--main-color); + font-size: 18px; +} + +.pagination span.endless_page_current, +.pagination .endless_page_link { + padding: 7px 11px; + color: var(--main-color); +} + +.pagination .endless_page_current:active, +.pagination .endless_page_link:active { + background: var(--main-color); +} + +.pagination span { + background: var(--main-color); +} + +.pagination span strong { + color: #FFF; +} + +.footer_bottom { + background-color: var(--main-color); + padding: 20px 40px; +} + +.footer_bottom .copy p { + text-align: center; + color: #d1d1d1; +} + +.footer_bottom .copy p a { + color: #FFF; +} + +/* Menu */ +.menu li { + margin: 0 0 3px; +} + +.menu ul { + padding-left: 0; +} + +.menu li a { + background-color: #f2f2f2; + background-color: rgba(0, 0, 0, .05); + color: #1e1e1e; + display: block; + padding: 9px 9px 9px 60px; + position: relative; + text-decoration: none; + -webkit-transition: all .2s linear; + transition: all .2s linear; +} + +.menu li a:before { + background: #e1e1e1; + background: rgba(255, 255, 255, .4); + bottom: 0; + content: ""; + display: block; + left: 45px; + position: absolute; + top: 0; + width: 1px; +} + +.menu li a:hover { + background-color: #e9e9e9; + background-color: rgba(0, 0, 0, .1); + -webkit-transition: all .2s linear; + transition: all .2s linear; +} + +.menu li.active > a { + background-color: var(--main-color); + color: #fff; + -webkit-transition: all .2s linear; + transition: all .2s linear; +} + +.menu li.active > a:before { + background: #444; + background: rgba(255, 255, 255, .2); +} + +.menu li.parent > a .open-sub { + bottom: 0; + display: block; + left: 0; + position: absolute; + top: 0; + width: 45px; +} + +.menu li.parent > a .open-sub:before, +.menu li.parent > a .open-sub:after { + background: var(--main-color); + content: ""; + display: block; + height: 2px; + left: 0; + margin: 19px 0 0 15px; + position: absolute; + top: 0; + width: 16px; +} + +.menu li.parent > a .open-sub:after { + height: 16px; + margin: 12px 0 0 22px; + width: 2px; +} + +.menu li.parent.active > a .open-sub:before, +.menu li.parent.active > a .open-sub:after { + background: #fff; +} + +.menu li.parent.active > a .open-sub:after { + display: none; +} + +.menu .sub { + background-color: #f2f2f2; + background-color: rgba(0, 0, 0, .05); + padding: 7px 0 4px 5px; +} + +.menu .sub li { + margin: 0; +} + +.menu .sub a { + background: none; + color: #7f7f7f; + margin: 0; + padding: 4px 9px 4px 60px; +} + +.menu .sub a:before { + display: none; +} + +.menu .sub a:hover { + background-color: #e9e9e9; + background-color: rgba(0, 0, 0, .05); +} + +.menu .sub .active > a { + background: none; + color: #000; +} + +.menu .sub .sub { + background: none; +} + +.menu .sub li.parent > a .open-sub { + left: 10px; +} + +.menu .sub li.parent > a .open-sub:before, +.menu .sub li.parent > a .open-sub:after { + background: #7f7f7f; + margin: 14px 0 0 22px; + width: 12px; +} + +.menu .sub li.parent > a .open-sub:after { + height: 12px; + margin: 9px 0 0 27px; + width: 2px; +} + +.menu .sub li { + padding: 0; +} + +.menu li > a .item-icon { + left: 15px; + position: absolute; + top: 13px; +} + +.menu li:not(.active) > a .item-icon { + opacity: .5; + filter: alpha(opacity=50); +} + +} // - blog-page + +@media (max-width: 991px) { + .blog_sidebar { + padding: 5px 5px 0 20px; + } +} + +@media (max-width: 768px) { + .blog_sidebar { + padding: 5px 10px 0 10px; + } +} diff --git a/publichealth/static/css/modules/_modules.scss b/publichealth/static/css/modules/_modules.scss index cbd4df5..5b03309 100644 --- a/publichealth/static/css/modules/_modules.scss +++ b/publichealth/static/css/modules/_modules.scss @@ -5,3 +5,4 @@ @import "news"; @import "forms"; @import "articles"; +@import "blog"; diff --git a/publichealth/templates/base.html b/publichealth/templates/base.html index 349d8e2..98565b2 100644 --- a/publichealth/templates/base.html +++ b/publichealth/templates/base.html @@ -9,8 +9,8 @@ + {% block extra_css %}{% endblock %} {% compress css %} - {% block extra_css %}{% endblock %} {% endcompress %}