CombinedSearch: Add 'visited' state for search result links.

Simplify the css a bit by making all links the same link color and adding a purple link color for :visited and .visited links. Also adds posts clicked on from the new search results page to the 'Recently Viewed Links' widget.
reddit-archive · Jun 10, 2015 · 32db797 · 32db797
1 parent 9c78287
commit 32db797
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 7 deletions.
diff --git a/r2/r2/public/static/css/components/colors.less b/r2/r2/public/static/css/components/colors.less
@@ -16,7 +16,9 @@
 @color-green: #7CD344;
 @color-teal: #25B79F;
 @color-dark-teal: #008985;
-@color-link-blue: #24A0ED;
+@color-light-blue: #24A0ED;
+@color-link-blue: #333df5;
+@color-link-purple: #551a8b;
 @color-periwinkle: #9494FF;
 @color-white: #FFFFFF;
 @color-off-white: #FCFCF7;

diff --git a/r2/r2/public/static/css/search.less b/r2/r2/public/static/css/search.less
@@ -1,12 +1,13 @@
 @color-body: @color-text-grey;
 @color-meta: @color-dark-grey;
-@color-link: @color-alien-blue;
+@color-link: darken(@color-alien-blue, 5%);
+@color-link-visited: @color-link-purple;
+
 @color-unsubscribe: darken(@color-warning-red, 10%);
 @color-subscribe: darken(@color-green, 10%);
 @color-subscribe-button-focus: @color-white;
 @color-group-header-border: @color-pale-grey;
 
-@color-title: darken(@color-link, 5%);
 @color-subreddit: @color-meta;
 
 @max-width: 750px;
@@ -31,11 +32,30 @@
     .md-base-font-size(@search-font-base);
   }
 
+  .search-result.visited {
+    .search-title,
+    .search-link {
+      &, > mark {
+        color: @color-link-visited;
+      }
+    }
+  }
 
   .search-result {
     margin-bottom: @margin-x-large * 1px;
     margin-top: @margin-small * 1px;
 
+    a {
+      &, > mark {
+        color: @color-link;
+      }
+
+      &:visited,
+      &:visited > mark {
+        color: @color-link-visited;
+      }
+    }
+
     &.has-thumbnail {
       .display-flex();
 
@@ -76,8 +96,11 @@
 
       .search-title {
         font-size: @search-font-large * 1px;
-        color: @color-title;
         margin-right: @margin-x-small * 1px;
+
+        > mark {
+          vertical-align: middle;
+        }
       }
 
       .search-subreddit-link {
@@ -149,7 +172,6 @@
       white-space: nowrap;
 
       .search-link {
-        color: @color-link;
         margin-left: @margin-x-small * 1px;
       }
     }
@@ -158,6 +180,7 @@
       background-color: transparent;
       color: inherit;
       font-weight: bold;
+      line-height: 1em;
     }
   }
 
@@ -192,6 +215,7 @@
       }
 
       .add, .remove {
+        color: @color-white;
         text-align: center;
         transform: scale(1, 1);
         transition: all 0.15s;

diff --git a/r2/r2/public/static/js/reddit.js b/r2/r2/public/static/js/reddit.js
@@ -1205,6 +1205,14 @@ $(function() {
           .find('.search-title, .search-link, .search-subreddit-link, .search-result-body')
           .highlight(query);
 
+        // add new search page links to the 'recently viewed' links...
+        $(".search-result-link").find("a.search-title, a.thumbnail").mousedown(function() {
+            var fullname = $(this).closest('[data-fullname]').data('fullname');
+            if (fullname) {
+                add_thing_id_to_cookie(fullname, "recentclicks2");
+            }
+        });
+
         /* Select shortlink text on click */
         $("#shortlink-text").click(function() {
             $(this).select();

diff --git a/r2/r2/templates/searchresultbase.html b/r2/r2/templates/searchresultbase.html
@@ -20,7 +20,7 @@
 ## reddit Inc. All Rights Reserved.
 ###############################################################################
 
-<div class="${self.search_result_css_class()}">
+<div class="${self.search_result_css_class()}" data-fullname="${thing.fullname}">
   ${self.search_result_content()}
 </div>
 

diff --git a/r2/r2/templates/searchresultlink.html b/r2/r2/templates/searchresultlink.html
@@ -38,8 +38,9 @@
   <%
     has_thumbnail_class = "has-thumbnail" if thing.thumbnail else ""
     linkflair_classes = get_linkflair_css_classes(thing)
+    visited_class = 'visited' if thing.visited else ''
   %>
-  ${parent.search_result_css_class()} search-result-link ${has_thumbnail_class} ${linkflair_classes}
+  ${parent.search_result_css_class()} search-result-link ${has_thumbnail_class} ${linkflair_classes} ${visited_class}
 </%def>
 
 <%def name="search_result_content()">