UX: Dim visited post info along with title

UX: Dim visited post info along with title
From 547eaa6060e779ac5a9c10b96952affc383e523f Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 7 Dec 2018 11:09:56 -0500
Subject: [PATCH] UX: Dim visited post info along with title


diff --git a/app/assets/stylesheets/common/base/_topic-list.scss b/app/assets/stylesheets/common/base/_topic-list.scss
index 9d63ce3..ef9421a 100644
--- a/app/assets/stylesheets/common/base/_topic-list.scss
+++ b/app/assets/stylesheets/common/base/_topic-list.scss
@@ -50,6 +50,9 @@
   a.title:not(.badge-notification) {
     color: $primary-medium;
   }
+  .link-bottom-line {
+    opacity: 0.6;
+  }
 }
 
 .topic-list-main-link {
@@ -156,13 +159,6 @@
   .topic-statuses:empty {
     display: none;
   }
-  .topic-status {
-    margin-right: 4px;
-    padding: 0;
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
 
   .num {
     text-align: center;
diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
index 49cc6f9..6bc1abf 100644
--- a/app/assets/stylesheets/mobile/topic-list.scss
+++ b/app/assets/stylesheets/mobile/topic-list.scss
@@ -208,6 +208,10 @@
     }
   }
 
+  .visited .topic-item-stats {
+    opacity: 0.6;
+  }
+
   .age {
     white-space: nowrap;
     a {

GitHub

Also removed an unneeded style

1 Like

Whole row is way too much cause there is no contrast left on date and tags

OK, I’ll move it to categories-only — the tags had more contrast than faded out titles which bothered me a bit, but they are smaller, so I guess that trade-off is fine.

Also be sure to handle mobile, it dims dates now on mobile

1 Like

This is super tricky, it does not work for anon cause it does not have :visited pseudo class, try clicking on topic on the page and then going back …

Don’t we add the .visited class though? This is what I see

I am getting this in chrome anon:

I think you need to “reload” for it to happen. It gets the styling due to

.anon .topic-list-main-link a.title:visited:not(.badge-notification), .anon .topic-list .main-link a.title:visited:not(.badge-notification), .topic-list .anon .main-link a.title:visited:not(.badge-notification), .anon .latest-topic-list-item .main-link a.title:visited:not(.badge-notification), .latest-topic-list-item .anon .main-link a.title:visited:not(.badge-notification)

Very very tricky to fix this thing.

2 Likes