Add home page sidebar subtabs for reading list and fortify readinglist (#61)

* Add home page sidebar subtabs for reading list and fortify readinglist

app/assets/javascripts/initializers/initializeReadingListPage.js.erb

@@ -6,22 +6,25 @@ function initializeReadingListPage(){
     var params = getQueryParams(document.location.search);
     document.getElementById('substories').dataset.tabs = '{"v": "'+(params.v || '')+'", "t": "'+(params.t || '')+'" }'
     postCommentFilter();
-    if (params.v === "comments") {
-      getArticles("***onlytags***");
-    }
+    getArticles("***onlytags***");
+  }
+  document.getElementById("load-more-cta").onclick = function(event) {
+    event.target.classList.remove("showing");
+    getArticles("");
   }
 }
 
 
 
-function getArticles(tag){
+function getArticles(tag, num){
     var user = userData();
     var substoriesDiv = document.getElementById("substories");
     var algoliaIds = user.reading_list_ids.map(function(id){return "articles-"+id});
     var resultDivs = []
     var tags = {}
     articlesIndex.getObjects(algoliaIds, function(err, content) {
-      content.results.forEach(function(story){
+      var results = num ? content.results.slice(0, num) : content.results ;
+      results.forEach(function(story, i){
         if (story) {
           if (tag == "" || story.tag_list.indexOf(tag) > -1){
             resultDivs.push(buildArticleHTML(story));
@@ -41,8 +44,12 @@ function getArticles(tag){
           var message = "<div style='text-align:left;margin-top:20px;'>This is where to find your bookmarked posts, but it looks like you have not bookmarked anything.</div>"
           substoriesDiv.innerHTML = message;
         }
+      } else {
+        if (results.lenth > 35) {
+          document.getElementById("load-more-cta").classList.add("showing");
+        }
+        renderTags(tags);
       }
-      renderTags(tags)
       initializeReadingListIcons();
     });
 }
@@ -163,7 +170,7 @@ function getStories(){
   if (tabsObj["v"] == "comments") {
     getComments(tabsObj["t"] || "");
   } else {
-    getArticles(tabsObj["t"] || "");
+    getArticles(tabsObj["t"] || "", 45);
   }
 }
 

app/assets/javascripts/serviceworker.js.erb

@@ -1,4 +1,4 @@
-var CACHE_VERSION = 'v2.4.7';
+var CACHE_VERSION = 'v2.4.8';
 var CACHE_NAME = CACHE_VERSION + ':sw-cache::';
 var REQUESTS_LIMIT = 70;
 

app/assets/stylesheets/articles.scss

@@ -731,9 +731,31 @@
             font-family: $helvetica-condensed;
             font-stretch:condensed;
             font-size:1.1em;
-          }
-          &:hover{
-            background:$light-gray;
+            .sidebar-nav-link{
+              &:hover{
+                background: $light-purple;
+              }
+            }
+            .readinglist-sidebar-subcat{
+              font-weight: bold;
+              font-size: 0.78em;
+              font-family: $helvetica;
+              padding-bottom: 10px;
+              a{
+                color: $medium-gray;
+                padding: 7px 13px;
+                display: inline-block;
+                &:hover{
+                  background: darken($light-green, 5%);
+                  color: $dark-gray;
+                }
+              }
+              .separator{
+                border-left: 2px solid $light-medium-gray;
+                padding:4px 0px;
+                margin: 0px 4px;
+              }
+            }
           }
           @media screen and ( min-width: 950px ){
             .sidebar-nav-link-follow{
@@ -1169,3 +1191,15 @@
     background-color:rgb(102, 226, 213);
   }
 }
+
+.load-more-cta{
+  margin: 35px auto;
+  border: 0px;
+  font-size: 20px;
+  padding: 5px 10px;
+  border-radius: 3px;
+  display: none;
+  &.showing {
+    display:block;
+  }
+}

app/views/articles/_sidebar_nav.html.erb

@@ -20,6 +20,9 @@
           <img src="<%=asset_path("readinglist-button.png")%>" /> MY READING LIST
           <span id="reading-list-count"></span>
         </a>
+        <div class="readinglist-sidebar-subcat">
+          <a href="/readinglist">Saved Posts</a><span class="separator"></span><a href="/readinglist?v=comments">Comment Activity</a>
+        </div>
       </div>
     </div>
   <% end %>

app/views/reading_list_items/index.html.erb

@@ -37,8 +37,8 @@
           </div>
         </div>
         <div class="widget" id="tag-filter-widget">
-          <button class="query-filter-button query-type-filter-button" data-type="posts">Posts</button>
-          <button class="query-filter-button query-type-filter-button" data-type="comments">Comments</button>
+          <button class="query-filter-button query-type-filter-button" data-type="posts">Saved Posts</button>
+          <button class="query-filter-button query-type-filter-button" data-type="comments">Comment Activity</button>
           <hr/>
           <div class="widget-body body-scrollable" id="tag-filters" style="margin-bottom:16px;">
           </div>
@@ -50,6 +50,7 @@
           <div class="comments-container" id="comments-container">
             <div class="substories" id="substories" data-tabs="{}">
             </div>
+            <button class="load-more-cta cta" id="load-more-cta">LOAD MORE POSTS</a>
           </div>
         <% else %>
           <script>