From 6a58e75cd29db31837630d6532aec8d6ccbd6234 Mon Sep 17 00:00:00 2001 From: Thomas Chaplin Date: Fri, 26 Jan 2024 13:41:31 +0000 Subject: [PATCH] Add show more/less toggle --- css/main.scss | 18 +++++++++++++++++- index.html | 5 ++++- js/search.js | 17 +++++++++++++++++ 3 files changed, 38 insertions(+), 2 deletions(-) diff --git a/css/main.scss b/css/main.scss index 9f03d66..449ca9f 100644 --- a/css/main.scss +++ b/css/main.scss @@ -39,8 +39,24 @@ form { .all_tags{ padding-top: 10px; - line-height: 1.5; + line-height: 28px; text-align: center; + overflow: scroll; + + &.short_view { + max-height: 125px; + } +} + +.centered { + padding-top: 10px; + text-align: center; + width: 100%; +} + +button.show_more_toggle { + color: blue; + } input[type="text"] { diff --git a/index.html b/index.html index bc9c581..1894814 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,7 @@

-
+
All tags:
{% capture tags_content %}{% include_relative metadata/all-tags.txt %}{% endcapture %} @@ -37,6 +37,9 @@

{% endif %} {% endfor %}

+
+ +
diff --git a/js/search.js b/js/search.js index 14e0118..2a9d9b9 100644 --- a/js/search.js +++ b/js/search.js @@ -171,6 +171,22 @@ function SETUP() { document.getElementById('search-box').focus(); } + function attachShowMoreListener() { + const button = document.getElementById("show_more_toggle") + const all_tags = document.getElementById("all_tags") + button.onclick = (e) => { + e.preventDefault(); + const is_short_view = all_tags.classList.contains("short_view") + if (is_short_view) { + all_tags.classList.remove("short_view") + button.textContent = "↑ Show less ↑" + } else { + all_tags.classList.add("short_view") + button.textContent = "↓ Show more ↓" + } + } + } + return Promise.all([ setInitialQuery(), buildShadow(), @@ -178,6 +194,7 @@ function SETUP() { getTags(), focusSearchBox(), attachSearchCallback(), + attachShowMoreListener() ]); }