hawk / commit
Moved the intro paragraph into a collapsible "What is this?" section.
public/index.html | 9 ++++++--- public/js/collapsible.js | 22 ++++++++++++++++++++++ public/styles/collapsible.css | 30 ++++++++++++++++++++++++++++++ public/styles/style.css | 3 ++- 4 files changed, 60 insertions(+), 4 deletions(-) diff --git a/public/index.html b/public/index.html index 508d9bb..767bc76 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,7 @@ <title>Hawk</title> <link rel="icon" type="image/png" href="images/favicon.png"> <link rel="stylesheet" href="styles/style.css"> + <link rel="stylesheet" href="styles/collapsible.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> </head> @@ -25,10 +26,11 @@ </div> <!-- INTRO --> - <div id="intro"> + <button type="button" class="collapsible">What is this?</button> + <div id="intro" class="content active"> <div> - You can specify a duration (for example, "5:32"), and <b>Hawk</b> will find a song in your Spotify library + Specify a duration like "5:32", and <b>Hawk</b> will find all the songs in your Spotify library with that length, and with a single click you can start playing that song. </div> <div> @@ -43,7 +45,7 @@ </div> <div> Found an issue? Please report it by <a href="https://gitlab.com/PavelSafronov/hawk/-/issues/new" - target="_blank">creating an issue</a>. + target="_blank">creating an issue</a> </div> </div> @@ -122,6 +124,7 @@ <script src="js/db.js"></script> <script src="js/api.js"></script> <script src="js/template.js"></script> + <script src="js/collapsible.js"></script> <script src="js/main.js"></script> <!-- TEMPLATES --> diff --git a/public/js/collapsible.js b/public/js/collapsible.js new file mode 100644 index 0000000..1ea7fa1 --- /dev/null +++ b/public/js/collapsible.js @@ -0,0 +1,22 @@ +var coll = document.getElementsByClassName("collapsible"); +var i; + +for (i = 0; i < coll.length; i++) { + const item = coll[i]; + if (item.classList.contains("active")) { + const content = item.nextElementSibling; + content.style.maxHeight = content.scrollHeight + "px"; + item.after = "▼" + } + item.addEventListener("click", function () { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.maxHeight) { + content.style.maxHeight = null; + item.after = "▶" + } else { + content.style.maxHeight = content.scrollHeight + "px"; + item.after = "▼" + } + }); +} \ No newline at end of file diff --git a/public/styles/collapsible.css b/public/styles/collapsible.css new file mode 100644 index 0000000..4ec9940 --- /dev/null +++ b/public/styles/collapsible.css @@ -0,0 +1,30 @@ +.collapsible { + background-color: #777; + color: white; + cursor: pointer; + padding: 1rem; + width: 100%; + border: none; + outline: none; + text-align: left; + outline: none; +} + +.active, +.collapsible:hover { + background-color: #555; +} + +.content { + padding: 0 1.5rem; + overflow: hidden; + background-color: #f1f1f1; + max-height: 0; + transition: max-height 0.2s ease-out; +} + +.collapsible:after { + color: white; + float: right; + margin-left: .5em; +} \ No newline at end of file diff --git a/public/styles/style.css b/public/styles/style.css index a7741e1..e25ef72 100644 --- a/public/styles/style.css +++ b/public/styles/style.css @@ -147,4 +147,5 @@ button { -moz-appearance: none; appearance: none; width: 100%; -} \ No newline at end of file +} +