From 9589035c6dee7a0ee7517fb50ffc8efa84f23c12 Mon Sep 17 00:00:00 2001 From: davidhernandez Date: Tue, 7 Feb 2017 00:32:08 +0000 Subject: [PATCH] Redoing the responsive setup for the blog view listing, taxonomy term page, featured blog posts paragraph --- .../install/views.view.listing_blog_posts.yml | 7 +++- themes/openy_themes/openy_rose/css/styles.css | 17 ++------- .../openy_rose/scss/modules/_blog.scss | 16 ++------ .../openy_rose/scss/modules/_paragraphs.scss | 8 +--- ...ld--paragraph--field-fblog-posts.html.twig | 6 +-- ...scroll-pager--listing-blog-posts.html.twig | 14 +++++++ ...atted--listing-blog-posts--block.html.twig | 38 +++++++++++++++++++ ...-view-unformatted--taxonomy_term.html.twig | 4 ++ 8 files changed, 73 insertions(+), 37 deletions(-) create mode 100644 themes/openy_themes/openy_rose/templates/views/views-infinite-scroll-pager--listing-blog-posts.html.twig create mode 100755 themes/openy_themes/openy_rose/templates/views/views-view-unformatted--listing-blog-posts--block.html.twig diff --git a/modules/openy_features/openy_prgf/modules/openy_prgf_blog_listing/config/install/views.view.listing_blog_posts.yml b/modules/openy_features/openy_prgf/modules/openy_prgf_blog_listing/config/install/views.view.listing_blog_posts.yml index 4b1dff308e..6fb83f2b25 100644 --- a/modules/openy_features/openy_prgf/modules/openy_prgf_blog_listing/config/install/views.view.listing_blog_posts.yml +++ b/modules/openy_features/openy_prgf/modules/openy_prgf_blog_listing/config/install/views.view.listing_blog_posts.yml @@ -73,7 +73,11 @@ display: button_text: 'Load More' automatically_load_content: false style: - type: grid + type: default + options: + row_class: '' + default_row_class: true + uses_fields: false row: type: 'entity:node' options: @@ -324,6 +328,7 @@ display: operator: AND groups: 1: AND + css_class: blog-more-teaser cache_metadata: max-age: -1 contexts: diff --git a/themes/openy_themes/openy_rose/css/styles.css b/themes/openy_themes/openy_rose/css/styles.css index d30c372a63..410d3e3763 100644 --- a/themes/openy_themes/openy_rose/css/styles.css +++ b/themes/openy_themes/openy_rose/css/styles.css @@ -1920,9 +1920,6 @@ body { } } @media (min-width: 48em) { - .paragraph--type--featured-blogs .field-fblog-posts { - margin-bottom: 30px; - } .paragraph--type--featured-blogs .description { margin-left: -15px; margin-right: -15px; @@ -1933,13 +1930,10 @@ body { margin-bottom: 30px; } @media (min-width: 48em) { - .paragraph--type--blog-posts-listing .views-view-grid > div { + .paragraph--type--blog-posts-listing .blog-more-teaser-results-wrapper { margin-left: -15px; margin-right: -15px; } - .paragraph--type--blog-posts-listing .views-col { - margin-bottom: 30px; - } } .site-alert { @@ -3908,19 +3902,16 @@ html.js .branch__updates_queue__button { margin-top: 1em; } .node--type-blog.node--view-mode-teaser { + margin: auto; + max-width: 373px; width: 100%; - max-width: 100%; } .node--type-blog.node--view-mode-teaser .inner-wrapper { + margin: 15px 0; position: relative; overflow: hidden; height: 250px; } -@media (min-width: 0) and (max-width: 48em) { - .node--type-blog.node--view-mode-teaser .inner-wrapper { - margin: 0 auto; - } -} .node--type-blog.node--view-mode-teaser img { height: auto; max-width: inherit; diff --git a/themes/openy_themes/openy_rose/scss/modules/_blog.scss b/themes/openy_themes/openy_rose/scss/modules/_blog.scss index f7d5c4a95e..b0f1e1f2fe 100644 --- a/themes/openy_themes/openy_rose/scss/modules/_blog.scss +++ b/themes/openy_themes/openy_rose/scss/modules/_blog.scss @@ -30,17 +30,15 @@ } &.node--view-mode-teaser { + margin: auto; + max-width: 373px; width: 100%; - max-width: 100%; .inner-wrapper { + margin: 15px 0; position: relative; overflow: hidden; height: 250px; - - @include breakpoint(0 $screen-sm) { - margin: 0 auto; - } } img { @@ -180,18 +178,10 @@ .blog-more-teaser { margin-top: 40px; - @media (min-width: 1024px) { - - } - .h1 { padding-bottom: 0; } - h2 { - - } - .views-view-grid { text-align: center; diff --git a/themes/openy_themes/openy_rose/scss/modules/_paragraphs.scss b/themes/openy_themes/openy_rose/scss/modules/_paragraphs.scss index efc04d5d96..8d3de2d734 100644 --- a/themes/openy_themes/openy_rose/scss/modules/_paragraphs.scss +++ b/themes/openy_themes/openy_rose/scss/modules/_paragraphs.scss @@ -764,9 +764,6 @@ } } @include breakpoint($screen-sm) { - .field-fblog-posts { - margin-bottom: 30px; - } .description { margin-left: -15px; margin-right: -15px; @@ -779,12 +776,9 @@ margin-bottom: 30px; } @include breakpoint($screen-sm) { - .views-view-grid > div { + .blog-more-teaser-results-wrapper { margin-left: -15px; margin-right: -15px; } - .views-col { - margin-bottom: 30px; - } } } \ No newline at end of file diff --git a/themes/openy_themes/openy_rose/templates/field/field--paragraph--field-fblog-posts.html.twig b/themes/openy_themes/openy_rose/templates/field/field--paragraph--field-fblog-posts.html.twig index 61384363ac..f41c01cdd9 100644 --- a/themes/openy_themes/openy_rose/templates/field/field--paragraph--field-fblog-posts.html.twig +++ b/themes/openy_themes/openy_rose/templates/field/field--paragraph--field-fblog-posts.html.twig @@ -43,12 +43,12 @@ {% if multiple %} {% for item in items %} - {{ item.content }} + {{ item.content }} {% endfor %} {% else %} {% for item in items %} - {{ item.content }} + {{ item.content }} {% endfor %} {% endif %} {% else %} @@ -58,7 +58,7 @@
{% endif %} {% for item in items %} - {{ item.content }}
+ {{ item.content }} {% endfor %} {% if multiple %} diff --git a/themes/openy_themes/openy_rose/templates/views/views-infinite-scroll-pager--listing-blog-posts.html.twig b/themes/openy_themes/openy_rose/templates/views/views-infinite-scroll-pager--listing-blog-posts.html.twig new file mode 100644 index 0000000000..1d6a457658 --- /dev/null +++ b/themes/openy_themes/openy_rose/templates/views/views-infinite-scroll-pager--listing-blog-posts.html.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * The views infinite scroll pager template. + */ +#} + +{% if items.next %} + +
  • + +
    • + +{% endif %} diff --git a/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--listing-blog-posts--block.html.twig b/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--listing-blog-posts--block.html.twig new file mode 100755 index 0000000000..804e28dc82 --- /dev/null +++ b/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--listing-blog-posts--block.html.twig @@ -0,0 +1,38 @@ +{# +/** + * @file + * Default theme implementation to display a view of unformatted rows. + * + * Available variables: + * - title: The title of this group of rows. May be empty. + * - rows: A list of the view's row items. + * - attributes: The row's HTML attributes. + * - content: The row's content. + * - view: The view object. + * - default_row_class: A flag indicating whether default classes should be + * used on rows. + * + * @see template_preprocess_views_view_unformatted() + * + * @ingroup themeable + */ +#} +{% if title %} +

    {{ title }}

    +{% endif %} +
    +{% for row in rows %} + {% + set row_classes = [ + default_row_class ? 'views-row', + 'col-xs-12', + 'col-sm-6', + 'col-md-4', + 'row-eq-height', + ] + %} + + {{ row.content }} +
    +{% endfor %} + \ No newline at end of file diff --git a/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--taxonomy_term.html.twig b/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--taxonomy_term.html.twig index 6857e8a89f..300a2fa758 100644 --- a/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--taxonomy_term.html.twig +++ b/themes/openy_themes/openy_rose/templates/views/views-view-unformatted--taxonomy_term.html.twig @@ -28,6 +28,10 @@ {% set row_classes = [ default_row_class ? 'views-row', + 'col-xs-12', + 'col-sm-6', + 'col-md-4', + 'row-eq-height', ] %}