Redoing the responsive setup for the blog view listing, taxonomy term…

… page, featured blog posts paragraph

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:

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;
 

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;
- }
  }
 }

themes/openy_themes/openy_rose/templates/field/field--paragraph--field-fblog-posts.html.twig

@@ -43,12 +43,12 @@
  {% if multiple %}
  <div{{ attributes.addClass('wrapper-' ~ field_name|clean_class, 'description', 'slick-mobile') }}>
  {% for item in items %}
- <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-4', 'row-eq-height').removeClass('wrapper-' ~ field_name|clean_class, 'description', 'slick-mobile') }}>{{ item.content }}</div>
+ <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-6', 'col-md-4', 'row-eq-height').removeClass('wrapper-' ~ field_name|clean_class, 'description', 'slick-mobile') }}>{{ item.content }}</div>
  {% endfor %}
  </div>
  {% else %}
  {% for item in items %}
- <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-4', 'row-eq-height') }}>{{ item.content }}</div>
+ <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-6', 'col-md-4', 'row-eq-height') }}>{{ item.content }}</div>
  {% endfor %}
  {% endif %}
 {% else %}
@@ -58,7 +58,7 @@
  <div class="description slick-mobile">
  {% endif %}
  {% for item in items %}
- <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-4', 'row-eq-height').removeClass('wrapper-' ~ field_name|clean_class, 'description', 'slick-mobile') }}>{{ item.content }}</div>
+ <div{{ attributes.addClass(field_name|clean_class, 'col-xs-12', 'col-sm-6', 'col-md-4', 'row-eq-height').removeClass('wrapper-' ~ field_name|clean_class, 'description', 'slick-mobile') }}>{{ item.content }}</div>
  {% endfor %}
  {% if multiple %}
  </div>

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 %}
+<ul{{ attributes }}>
+ <li class="pager__item load_more_button">
+ <a class="button blue" href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next">{{ options.button_text }}</a>
+ </li>
+</ul>
+{% endif %}

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 %}
+ <h3>{{ title }}</h3>
+{% endif %}
+<div class="blog-more-teaser-results-wrapper clearfix">
+{% for row in rows %}
+ {%
+ set row_classes = [
+ default_row_class ? 'views-row',
+ 'col-xs-12',
+ 'col-sm-6',
+ 'col-md-4',
+ 'row-eq-height',
+ ]
+ %}
+ <div{{ row.attributes.addClass(row_classes) }}>
+ {{ row.content }}
+ </div>
+{% endfor %}
+ </div>

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',
  ]
  %}
  <div{{ row.attributes.addClass(row_classes) }}>