#1160 add styling to popular tags (#3460)

* #1160 add styling to popular tags * #1160 adjust popular tags container for better responsive styling * #1160 reinclude list for popular tags rendering * #1160 update selector in main.js to selector link (update from div restructure)
up-for-grabs · Dec 19, 2022 · a6a3178 · a6a3178
1 parent 318f6cf
commit a6a3178
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 29 deletions.
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -48,7 +48,9 @@
     <label class="filter-label" >Popular tags:</label>
     <ul class="popular-tags">
     <% _.each(popularTags, function(entry, key){ %>
-      <li><a><%-entry.name%></a> (<%-entry.frequency%>)</li>
+      <li>
+        <a title="Popular Tag: <%-entry.name%>" tabindex="0"><%-entry.name%> <span class="popular-tags__frequency">(<%-entry.frequency%>)</span></a>
+      </li>
     <% }) %>
     </ul>
   </div>

diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js
@@ -25,6 +25,7 @@ define([], () => {
     root.style.setProperty('--box-shadow-color', 'rgba(27, 30, 33, 0.5)');
     root.style.setProperty('--heading-color', '#7bc6f2');
     root.style.setProperty('--container-border', 'transparent');
+    root.style.setProperty('--container-border-alt', '#dbdbdb');
     root.style.setProperty('--databox-bg', '#32404d');
     root.style.setProperty('--databox-text', '#7bceff');
 

diff --git a/javascripts/main.js b/javascripts/main.js
@@ -153,28 +153,25 @@ define([
         );
       });
 
-    projectsPanel
-      .find('ul.popular-tags')
-      .children()
-      .each((i, elem) => {
-        $(elem).on('click', function () {
-          selTags = $('.tags-filter').val() || [];
-          selectedTag = preparePopTagName($(this).text() || '');
-          if (selectedTag) {
-            tagID = allTags
-              .map((tag) => tag.name.toLowerCase())
-              .indexOf(selectedTag);
-            if (tagID !== -1) {
-              selTags.push(selectedTag);
-              location.href = updateQueryStringParameter(
-                getFilterUrl(),
-                'tags',
-                encodeURIComponent(selTags)
-              );
-            }
+    projectsPanel.find('ul.popular-tags li a').each((i, elem) => {
+      $(elem).on('click', function () {
+        selTags = $('.tags-filter').val() || [];
+        selectedTag = preparePopTagName($(this).text() || '');
+        if (selectedTag) {
+          tagID = allTags
+            .map((tag) => tag.name.toLowerCase())
+            .indexOf(selectedTag);
+          if (tagID !== -1) {
+            selTags.push(selectedTag);
+            location.href = updateQueryStringParameter(
+              getFilterUrl(),
+              'tags',
+              encodeURIComponent(selTags)
+            );
           }
-        });
+        }
       });
+    });
   };
 
   /*

diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css
@@ -27,7 +27,9 @@ MeyerWeb Reset
   --abs: #FFF;
   --view-mode: true;
   --heading-color: #005485;
-  --container-border: #dbdbdb;
+  --container-rgb: 219, 219, 219;
+  --container-border: rgb(var(--container-rgb));
+  --container-border-alt: #303030;
   --databox-bg: #fff;
   --databox-text: #2e7ba9;
 }
@@ -866,16 +868,40 @@ form {
   width: 16px;
 }
 
-.popular-tags li {
-  display: inline-block;
-  font-size: 18px;
+.popular-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1em 0.5em;
+}
+
+ul.popular-tags li {
+  list-style: none;
   padding-left: 0;
-  font-size: 16px;
 }
 
-.popular-tags li::before {
-  content: ' ';
-  margin-right: 12px;
+.popular-tags a {
+  display: inline-flex;
+  align-content: center;
+  padding: 0.5em 0.75em;
+  font-size: 15px;
+  border: 1px solid var(--container-border-alt, transparent);
+  border-radius: 1em;
+  text-decoration: none;
+  transition: all 0.3s;
+}
+
+.popular-tags a:hover,
+.popular-tags a:focus,
+.popular-tags a:focus-within {
+  background-color: rgba(var(--container-rgb), 0.2);
+  border-color: var(--databox-text);
+  color: var(--databox-text);
+}
+
+.popular-tags a span.popular-tags__frequency {
+  margin-left: 0.45em;
+  font-size: 10px;
+  color: var(--body-color);
 }
 
 @media (max-width: 768px) {