From c72a52519fd8f5329f21186ed61ead6276ebea20 Mon Sep 17 00:00:00 2001 From: cweave_ Date: Fri, 7 Oct 2022 19:58:39 -0400 Subject: [PATCH 1/4] #1160 add styling to popular tags --- _includes/scripts.html | 6 +++--- javascripts/dark-mode.js | 1 + javascripts/main.js | 2 +- stylesheets/stylesheet.css | 37 ++++++++++++++++++++++++++++--------- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/_includes/scripts.html b/_includes/scripts.html index d9881d5435a..cddd1028661 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -46,11 +46,11 @@
- +
<% let count=0 %> diff --git a/javascripts/dark-mode.js b/javascripts/dark-mode.js index c39347111c0..58b2c7126c7 100644 --- 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 index c1144a406a5..56f6fe01202 100644 --- a/javascripts/main.js +++ b/javascripts/main.js @@ -154,7 +154,7 @@ define([ }); projectsPanel - .find('ul.popular-tags') + .find('div.popular-tags') .children() .each((i, elem) => { $(elem).on('click', function () { diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index ddeece8c80f..41c68c61652 100644 --- 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,33 @@ form { width: 16px; } -.popular-tags li { - display: inline-block; - font-size: 18px; - padding-left: 0; - font-size: 16px; +.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 li::before { - content: ' '; - margin-right: 12px; +.popular-tags a:not(:last-of-type) { + margin-right: 0.35em; +} + +.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) { From dd588b4b6671e1d37c3c337f76f5871f6246c6e0 Mon Sep 17 00:00:00 2001 From: cweave_ Date: Fri, 7 Oct 2022 20:14:42 -0400 Subject: [PATCH 2/4] #1160 adjust popular tags container for better responsive styling --- stylesheets/stylesheet.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index 41c68c61652..824925c60b9 100644 --- a/stylesheets/stylesheet.css +++ b/stylesheets/stylesheet.css @@ -868,6 +868,12 @@ form { width: 16px; } +.popular-tags { + display: flex; + flex-wrap: wrap; + gap: 1em 0.5em; +} + .popular-tags a { display: inline-flex; align-content: center; @@ -879,10 +885,6 @@ form { transition: all 0.3s; } -.popular-tags a:not(:last-of-type) { - margin-right: 0.35em; -} - .popular-tags a:hover, .popular-tags a:focus, .popular-tags a:focus-within { From 1c2b7eddcd6fb764b911dca46e6c7e23f8c2e702 Mon Sep 17 00:00:00 2001 From: cweave_ Date: Mon, 10 Oct 2022 21:11:24 -0400 Subject: [PATCH 3/4] #1160 reinclude list for popular tags rendering --- _includes/scripts.html | 8 +++++--- stylesheets/stylesheet.css | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/_includes/scripts.html b/_includes/scripts.html index cddd1028661..ddf2b804caf 100644 --- a/_includes/scripts.html +++ b/_includes/scripts.html @@ -46,11 +46,13 @@
-
+
+
<% let count=0 %> diff --git a/stylesheets/stylesheet.css b/stylesheets/stylesheet.css index 824925c60b9..969135c15b1 100644 --- a/stylesheets/stylesheet.css +++ b/stylesheets/stylesheet.css @@ -874,6 +874,11 @@ form { gap: 1em 0.5em; } +ul.popular-tags li { + list-style: none; + padding-left: 0; +} + .popular-tags a { display: inline-flex; align-content: center; From d6fad2b2db1eb82b9612a7dee19797d5432e1996 Mon Sep 17 00:00:00 2001 From: cweave_ Date: Sat, 22 Oct 2022 23:52:46 -0400 Subject: [PATCH 4/4] #1160 update selector in main.js to selector link (update from div restructure) --- javascripts/main.js | 37 +++++++++++++++++-------------------- 1 file changed, 17 insertions(+), 20 deletions(-) diff --git a/javascripts/main.js b/javascripts/main.js index 56f6fe01202..fe92797b8bf 100644 --- a/javascripts/main.js +++ b/javascripts/main.js @@ -153,28 +153,25 @@ define([ ); }); - projectsPanel - .find('div.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) + ); } - }); + } }); + }); }; /*