#simeox Finalise news page, improve "read more" link and animations. #372 @1h30

diff --git a/framework/application/Simeox/News.php b/framework/application/Simeox/News.php
index 5b54c578c14fef42169a47fc7489654310a7f81e..b5f20eaa051e81d4f853c31c2f04f2c3cc600dfd 100644 (file)
--- a/framework/application/Simeox/News.php
+++ b/framework/application/Simeox/News.php
@@ -7,7 +7,7 @@ class Simeox_News {
     public static function getNews($page = 1, $perPage = 3) {
 
         //###TEMPORARY! Produce endless stream of data for testing infinite scroll
-        //$page = ($page > 1) ? 1 : $page;
+        $page = ($page > 1) ? 1 : $page;
         //fb('Fetching page #'. $page);
 
 

diff --git a/js/news.js b/js/news.js
index fb19d315d62611be6800e5dfe9ec5820c50eb2c6..825837d4259574c6de17249e7ede9697bfdfe04b 100644 (file)
--- a/js/news.js
+++ b/js/news.js
@@ -33,16 +33,19 @@ function load_newsfeed() {
     //-- Handle show/hide link clicks
     $(document).on('click', 'a.read-more', function() {
 
-        var content = $(this).siblings('.news-content');
+        var content = $(this).siblings('.news-content-wrapper');
 
-        if (content.hasClass('open')) {
-            content.removeClass('open');
+        if ($(this).hasClass('open')) {
+            content.attr('style', ''); // Reset height
             $(this).text($(this).data('closed'));
         } else {
-            content.addClass('open');
+            var h = content.find('.news-content').height();
+            content.css('height', h);
             $(this).text($(this).data('open'));
         }
 
+        $(this).toggleClass('open');
+
         return false;
     });
 }
@@ -52,7 +55,7 @@ function fillPage() {
     // If we don't have a full window of content, the scroll
     // trigger won't fire, so load more content until it can
     if ($(document).height() <= $(window).height()) {
-        console.info('fillpage ' + currentPage);
+        fb('fillpage ' + currentPage);
         loadMoreContent(fillPage);
     }
 }
@@ -90,7 +93,7 @@ function loadMoreContent(callback) {
                 res += '<div class="news-body">';
                 res += '<time class="news-date">' + data.date + '</time>';
                 res += '<h3 class="news-headline">' + data.headline + '</h3>';
-                res += data.content; // MarkupDotClear view helper already wraps content in a div
+                res += '<div class="news-content-wrapper">' + data.content + '</div>';
 
                 // Add the open/close link
                 res += '<a href="#" class="read-more" data-closed="'+ readMoreClosed +'" data-open="'+ readMoreOpen +'">'+ readMoreClosed +'</a>';
@@ -107,6 +110,14 @@ function loadMoreContent(callback) {
             // Add new items to container and update Masonry
             $container.append(elems);
 
+            // Now that elements have been added, check to see
+            // if any are too short to need a "read more" link
+            $('.news-content').each(function() {
+                if ($(this).height() <= 48) {
+                    $(this).parent().siblings('.read-more').hide();
+                }
+            });
+
             currentPage++;
 
             if (typeof callback === "function") {

diff --git a/less/navigation.less b/less/navigation.less
index 4cd7aef038d0285559230f5e2268483533ec1be7..8faa1df0e56d493c456c6aafc801441beff43557 100644 (file)
--- a/less/navigation.less
+++ b/less/navigation.less
@@ -40,7 +40,7 @@ nav.locale {
        right: 0;
        top: 15px;
        opacity: 1;
-       transition: opacity 0.1s ease-in;
+       transition: all 0.1s ease-in 0s;
        backface-visibility: hidden;
 
        .small & {

diff --git a/less/news.less b/less/news.less
index bc4e5e61a3a05e2c836817c5c2ca1c193cd9ebe1..362d91159d8dee4803bab2ac7b72e6cc7b363211 100644 (file)
--- a/less/news.less
+++ b/less/news.less
@@ -1,5 +1,5 @@
 .page-heading {
-  margin-bottom: 110px;
+  margin: 60px 0 110px;
 }
 
 .news-item {
@@ -32,18 +32,20 @@
   margin: 15px 0 25px;
 }
 
-.news-content {
+.news-content-wrapper {
   overflow: hidden;
-  max-height: 3em; // Line height is 1.5 so 3em = 2 lines visible
-
-  &.open {
-    max-height: none;
-  }
+  height: 3em; // Line height is 1.5 so 3em = 2 lines visible
+  transition: height 0.3s ease-in;
+}
 
+.news-content {
   p {
     &:first-of-type {
       padding-top: 0;
     }
+    &:last-of-type {
+      padding-bottom: 0;
+    }
   }
 }
 
@@ -51,8 +53,21 @@
   font-size: 16px;
   font-weight: 600;
   color: #000;
-  display: block;
+  display: inline-block;
   margin-top: 1em;
+
+  &.open:after {
+    transform: rotate(180deg);
+  }
+  
+  &:after {
+    content: '';
+    width: 15px;
+    height: 14px;
+    display: inline-block;
+    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAOCAYAAADwikbvAAABQElEQVQoU6WTsVKDQBCG/1WwThm7pKC3dMJl5lLGSt8geQBxbOmldcSepDaFqaSUGSC1PUV8hMxIZdB1Dj1UcMQZt4E79v9272ePUAshhARezwCSADrMeCTiB2DnKkmS6Gs66YWUsrPdbi+JMKkDP9e8NIy9aRRFG7VXiYWw7wGoai3ByyRZnVTi4XAwYaZZm0x/J+JpHK/mZWXbttdE6Kl3y7KQZVmD0+3uI8+fkOc5lA9pmvZJysNeUeyudXYcJ/A8D2F4VwEU0Pev4TinFdgwXvr07i6r85YxHh/Bdd0KoIW+738DAjRqiDXAcRwogXouFjcIgqB2FBo12q53EIYhPO+i4UHZdt2wvzheGaaS//WrFECIwS1Ax+2Va0OiBGo8i+J59huAGXPTNM8b46kr6ovBTAcfg7MBOPrpYrwBbS+Up/n+Zr4AAAAASUVORK5CYII=');
+    margin-left: 5px;
+  }
 }