From: stephen@cubedesigners.com <stephen@cubedesigners.com@f5622870-0f3c-0410-866d-9cb505b7a8ef>
Date: Fri, 29 Jun 2018 14:54:13 +0000 (+0000)
Subject: Blog responsive fixes, menu adjustments and other bug fixes. Done #1912 @5.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=02e059026a2452255be6411b83dea721f1028a5c;p=physioassist-wordpress.git

Blog responsive fixes, menu adjustments and other bug fixes. Done #1912 @5.5
---

diff --git a/local-config.php b/local-config.php
deleted file mode 100644
index e577799a..00000000
--- a/local-config.php
+++ /dev/null
@@ -1,8 +0,0 @@
-<?php
-
-define('DB_NAME', 'physioassist');
-define('DB_USER', 'root');
-define('DB_PASSWORD', '');
-define('DB_HOST', 'localhost');
-
-define('WP_DEBUG', true);
diff --git a/wp-content/themes/physioassist/app/filters.php b/wp-content/themes/physioassist/app/filters.php
index bcdbc634..066cb0e2 100644
--- a/wp-content/themes/physioassist/app/filters.php
+++ b/wp-content/themes/physioassist/app/filters.php
@@ -69,3 +69,14 @@ add_filter('comments_template', function ($comments_template) {
     );
     return template_path(locate_template(["views/{$comments_template}", $comments_template]) ?: $comments_template);
 });
+
+
+/**
+ * Add classes to next/prev posts links
+ */
+add_filter('next_posts_link_attributes', function() {
+    return 'class="arrow-link older-posts"';
+});
+add_filter('previous_posts_link_attributes', function() {
+    return 'class="arrow-link newer-posts"';
+});
diff --git a/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js b/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js
index ba58d7ce..6d3dab22 100644
--- a/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js
+++ b/wp-content/themes/physioassist/resources/assets/scripts/profile-grid.js
@@ -1,6 +1,15 @@
 import trunk8 from 'trunk8'; // eslint-disable-line
 import debounce from 'lodash.debounce';
 
+var text_selector = '.profile-grid-body',
+    svg_arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.247 119.388">
+                    <path d="M11.506,119.388c-3.253,0-6.485-1.372-8.76-4.043c-4.119-4.835-3.538-12.093,1.297-16.211l46.299-39.44
+                    L4.043,20.254C-0.792,16.136-1.373,8.878,2.746,4.043c4.119-4.835,11.377-5.416,16.212-1.297l47.791,40.71
+                    c4.765,4.058,7.499,9.977,7.499,16.237c0,6.262-2.734,12.181-7.5,16.239l-47.79,40.709
+                    C16.793,118.486,14.142,119.388,11.506,119.388z M51.834,60.965h0.01H51.834z"/>
+                 </svg>`;
+
+
 (function($) {
 
   // ELEMENTOR Trigger
@@ -13,36 +22,7 @@ import debounce from 'lodash.debounce';
         return;
       }
 
-      var text_selector = '.profile-grid-body',
-          $text = $scope.find(text_selector),
-          num_lines = $text.data('truncate-lines') || 5,
-          read_more = $text.data('read-more'),
-          read_less = $text.data('read-less'),
-          svg_arrow = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 74.247 119.388">
-                          <path d="M11.506,119.388c-3.253,0-6.485-1.372-8.76-4.043c-4.119-4.835-3.538-12.093,1.297-16.211l46.299-39.44
-                          L4.043,20.254C-0.792,16.136-1.373,8.878,2.746,4.043c4.119-4.835,11.377-5.416,16.212-1.297l47.791,40.71
-                          c4.765,4.058,7.499,9.977,7.499,16.237c0,6.262-2.734,12.181-7.5,16.239l-47.79,40.709
-                          C16.793,118.486,14.142,119.388,11.506,119.388z M51.834,60.965h0.01H51.834z"/>
-                       </svg>`;
-
-      setTimeout(function() {
-        $text.trunk8({
-          lines: num_lines,
-          fill: `... <a class="profile-grid-read-more arrow-link" href="#">${svg_arrow} ${read_more}</a>`,
-        });
-      }, 100); // Small timeout needed or Trunk8 doesn't always fire on frontend
-
-
-      $(document).on('click', '.profile-grid-read-more', function (event) {
-        $(this).parents(text_selector).trunk8('revert').append(`<a class="profile-grid-read-less arrow-link" href="#">${svg_arrow} ${read_less}</a>`);
-        event.preventDefault();
-      });
-
-      $(document).on('click', '.profile-grid-read-less', function (event) {
-        $(this).parent().trunk8();
-        event.preventDefault();
-      });
-
+      truncateText();
 
     });
   });
@@ -55,8 +35,33 @@ import debounce from 'lodash.debounce';
   $(window).on('resize', debounce(truncateText, 250));
 
 
+  $(document).on('click', '.profile-grid-read-more', function (event) {
+
+    // A bit messy but get the translated label text from the parent
+    var read_less = $(this).parents('[data-read-less]').data('read-less');
+
+    $(this).parents(text_selector).trunk8('revert').append(`<a class="profile-grid-read-less arrow-link" href="#">${svg_arrow} ${read_less}</a>`);
+    event.preventDefault();
+  });
+
+  $(document).on('click', '.profile-grid-read-less', function (event) {
+    $(this).parent().trunk8();
+    event.preventDefault();
+  });
+
+
 })(jQuery);
 
 function truncateText() {
-  $('.truncate-text .profile-grid-body').trunk8();
+
+  $(`.truncate-text ${text_selector}`).each(function() {
+    var $this = $(this),
+        read_more = $this.data('read-more'),
+        num_lines = $this.data('truncate-lines') || 5;
+
+    $this.trunk8({
+      lines: num_lines + 2, // Adding 2 lines to account for linebreak + "read more" link...
+      fill: `... <a class="profile-grid-read-more arrow-link" href="#">${svg_arrow} ${read_more}</a>`,
+    });
+  });
 }
diff --git a/wp-content/themes/physioassist/resources/assets/styles/common/variables.styl b/wp-content/themes/physioassist/resources/assets/styles/common/variables.styl
index 9cb89257..e9caf96c 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/common/variables.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/common/variables.styl
@@ -19,7 +19,7 @@ $font-size-small  = 12px
 rupture.scale        = 0 400px   768px   1024px
 rupture.scale-names  = 'small' 'medium' 'large'
 rupture.anti-overlap = -1px // Results in +below(1000px) being max-width: 999px and +above(1000px) being min-width: 1000px
-$breakpoint-menu     = 1200px
+$breakpoint-menu     = 1280px
 
 // Colours - available as .color-{name} class to set the color of the element
 $colors = {
diff --git a/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl b/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
index cb01fafc..8ec0574c 100644
--- a/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
+++ b/wp-content/themes/physioassist/resources/assets/styles/layouts/posts.styl
@@ -1,6 +1,11 @@
+$breakpoint-blog = 768px
+
 .blog-list
   vertical-spacing(1.5vw)
 
+  +below($breakpoint-menu)
+    padding-left: 0
+
 // Individual post on index/archive pages + single view
 .blog-post
   display: flex
@@ -8,10 +13,16 @@
   &:not(:last-of-type)
     constrain(margin-bottom, 4vw)
 
+  +below($breakpoint-blog)
+    flex-wrap: wrap
+
 .blog-post-featured-image
   flex: 0 1 30%
   max-width: 237px
 
+  +below($breakpoint-blog)
+    flex-basis: 100%
+
   &-inner
     background-size: cover
     background-color: #eee
@@ -21,6 +32,11 @@
   flex: 1 1 70%
   constrain(padding-left, 2.5vw)
 
+  +below($breakpoint-blog)
+    flex-basis: 100%
+    margin: 1em 0 2em 0
+    padding-left: 0
+
 
 .entry-title
   color: $colors.headings
@@ -28,6 +44,11 @@
   line-height: 1.1
   margin-bottom: 0.5em
 
+  +below($breakpoint-menu)
+    font-size: 36px
+  +below($breakpoint-blog)
+    font-size: 26px
+
   a
     color: currentColor
 
@@ -45,3 +66,31 @@
 // Back home link
 .blog-back-link
   margin-top: 1.5em
+
+
+.blog-posts-nav
+  position: relative
+  min-height: 1em
+  margin: 2em 0 0 0
+
+  .arrow-link
+    position: absolute
+    top: 0
+
+    svg
+      margin: 0 8px
+
+    +below(500px)
+      position: relative
+      display: block
+      margin: 1em 0
+      text-align: center
+
+  .newer-posts
+    right: -8px
+
+  .older-posts
+    left: -8px
+
+    svg
+      transform: rotate(180deg)
diff --git a/wp-content/themes/physioassist/resources/views/index.blade.php b/wp-content/themes/physioassist/resources/views/index.blade.php
index 8f27562d..1516f466 100644
--- a/wp-content/themes/physioassist/resources/views/index.blade.php
+++ b/wp-content/themes/physioassist/resources/views/index.blade.php
@@ -20,7 +20,14 @@
         @include('partials.content-'.get_post_type())
       @endwhile
 
-      {!! get_the_posts_navigation() !!}
+      <div class="blog-posts-nav">
+          <?php
+            $arrow = \BladeSvgSage\svg_image('arrow')->toHtml();
+            next_posts_link($arrow . __('Older posts'));
+            previous_posts_link(__('Newer posts') . $arrow);
+          ?>
+      </div>
+
     </div>