From 16642918fa4a2142c0332f8f05a9e428dc9665a0 Mon Sep 17 00:00:00 2001 From: Effie Date: Wed, 12 Jul 2023 19:08:27 +1000 Subject: [PATCH] adds buttons to search bars --- .gitignore | 3 +- app.py | 8 ++- static/script.js | 47 ++++++++++++++--- static/style.css | 80 +++++++++++++++++++++-------- suggestions.csv | 4 -- templates/nav.html | 11 ++-- templates/suggest.html | 54 +++++++++++-------- templates/suggestsearchresults.html | 27 +++++----- 8 files changed, 159 insertions(+), 75 deletions(-) delete mode 100644 suggestions.csv diff --git a/.gitignore b/.gitignore index 0ae6422..483bbbe 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ /songbook.sqlite /static/clip/ -/__pycache__/ \ No newline at end of file +/__pycache__/ +/suggestions.csv diff --git a/app.py b/app.py index b2c826b..06f49cf 100644 --- a/app.py +++ b/app.py @@ -419,11 +419,17 @@ def suggestpage(): @app.route('/sent', methods=['POST']) def sentpage(): + print(flask.request.headers) + with open ('suggestions.csv', 'a', newline='') as suggestlog: logwriter = csv.writer(suggestlog) logwriter.writerow([ datetime.datetime.now().isoformat(), - flask.request.form['suggest-description'], + flask.request.form['connection-0-desc'][:4], + flask.request.form['connection-0-id'][:4], + flask.request.form['connection-1-desc'][:4], + flask.request.form['connection-1-id'][:4], + flask.request.form['suggest-description'][:10_000], ]) return flask.render_template('sent.html', ) diff --git a/static/script.js b/static/script.js index 471174b..f562b12 100644 --- a/static/script.js +++ b/static/script.js @@ -13,12 +13,14 @@ window.addEventListener('load', (event) => { function albumselect(code){ const albumheader = document.getElementById(code); + const searchbar = document.getElementById('search-input'); for (const other of document.querySelectorAll('.sort-header.album.open')){ other.classList.remove('open'); } albumheader.classList.add('open'); - document.getElementById('search-input').value = ''; - document.getElementById('search-results').replaceChildren(); + searchbar.value = ''; + searchbar.dispatchEvent(new Event('input')); + document.getElementById('search-results-header').replaceChildren(); } // Toggle header when clicked @@ -39,11 +41,16 @@ function albumHeaderClick(clickevent){ } // Fill out form with suggest search result -function suggestform1(id, desc){ - document.getElementById('connection-1').valueAsNumber = id; - document.getElementById('connection-1-desc').valueAsNumber = desc; - document.getElementById('search-input-suggest-1').value = ''; - document.getElementById('search-results-1').replaceChildren(); +function suggestform(id, desc, clickevent){ + const searchresults = clickevent.target.parentElement.parentElement; + const form = searchresults.dataset.form; + const searchbar = document.getElementById(`search-input-suggest-${form}`) + document.getElementById(`connection-${form}`).innerHTML = clickevent.target.innerHTML; + document.getElementById(`connection-${form}-id`).value = id; + document.getElementById(`connection-${form}-desc`).value = desc; + searchbar.value = ''; + searchbar.dispatchEvent(new Event('input')); + searchresults.replaceChildren(); } // Mutually exclusive audio playback @@ -61,4 +68,28 @@ function onlyPlayOneIn(container) { document.addEventListener("DOMContentLoaded", function() { onlyPlayOneIn(document.body); -}); \ No newline at end of file +}); + +// Search clear button +function searchIconChange(event, buttonid, barid) { + const searchbutton = document.getElementById(buttonid); + const searchicon = document.getElementById(barid); + + if (event.target.value.length !== 0) { + searchbutton.classList.remove('hidden'); + searchicon.classList.remove('search-empty'); + } + else { + searchbutton.classList.add('hidden'); + searchicon.classList.add('search-empty'); + } +} + +function clearSearch(searchid, resultid, clickevent) { + const searchbar = document.getElementById(searchid); + const searchresults = document.getElementById(resultid); + searchbar.value = ''; + searchresults.replaceChildren(); + searchbar.dispatchEvent(new Event('input')); + clickevent.preventDefault(); +} \ No newline at end of file diff --git a/static/style.css b/static/style.css index 26f0dfc..42c8665 100644 --- a/static/style.css +++ b/static/style.css @@ -52,6 +52,12 @@ span{ color: var(--text); } +p{ + margin-left: 1.2rem; + margin-right: 1.2rem; + text-align: center; +} + /* HEADER */ header{ @@ -199,39 +205,52 @@ header{ /* SEARCH BAR */ .search-bar{ - display: flex; flex-shrink: 0; flex-direction: column; justify-content: center; align-items: center; + display: flex; justify-content: center; align-items: center; flex-wrap: wrap; max-width: 64rem; width: 100%; - height: 3.6rem; margin-left: auto; margin-right: auto; background-color: var(--block); - border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px; + padding-top: .6rem; padding-bottom: .6rem; + /* border-style: solid; border-top: 0; border-left: 0; border-right: 0; border-color: var(--thin-border); border-width: 1px; */ } .search-items{ position: relative; height: 2.4rem; - width: 80%; + width: calc(100% - 3.6rem); + margin-right: 1.2rem; + margin-left: .6rem; } -.search-items input{ - /* all:unset; */ +.search-bar.search-empty::before, .suggest input::before{ + content: "🔎︎"; + width: 1.2rem; + text-align: center; + margin-left: .6rem; +} + +.search-items input, .suggest input{ + all: unset; font: unset; color: unset; background-color: var(--search-back); width: 100%; height: 2.4rem; border-style: solid; border-color: var(--thin-border); border-width: 1px; + padding: 0; +} + +.search-icon{ + height: 100%; + content: "🔎︎"; +} + +.search-clear.hidden{ + display: none; } /* SEARCH RESULTS */ -.search-results{ - display: flex; flex-direction: column; - width: 100%; - cursor: pointer; -} - .search-results h2{ display: none; } @@ -243,9 +262,13 @@ header{ list-style: none; z-index: 1; border-style: solid; border-color: var(--thin-border); border-width: 1px; border-top: 0; border-bottom: 0; + position: absolute; + width: 100%; + cursor: pointer; + overflow: hidden; } -.search-results li{ +.search-results li, .suggest-search-results{ display: flex; align-items: center; min-height: 2.4rem; border-style: solid; border-width: 1px; border-color: var(--thin-border); border-left: 0; border-top: 0; border-right: 0; @@ -255,7 +278,7 @@ header{ text-decoration: none; } -.search-icon{ +.search-results .search-icon{ min-width: 2.6rem; } @@ -636,13 +659,16 @@ footer{ /* SUGGEST PAGE */ .suggestbox{ - display: flex; flex-wrap: wrap; justify-content: center; gap: 4.8rem; + display: flex; flex-wrap: wrap; align-items: center; gap: 2.4rem; flex-direction: column; margin-top: 2.4rem; + overflow: hidden; + height: 36rem; } .suggestbox h2{ width: 100%; text-align: center; + text-decoration: underline; } .search-items.suggest{ @@ -654,17 +680,31 @@ footer{ } .suggest-desc textarea{ - width: 100%; + width: calc(100% - 8px); + resize: none; } .suggest-button{ - width: 100%; + margin-bottom: 2.4rem; } -#connection-1{ - display: none; +.suggest-selection{ + display: flex; + justify-content: center; + border-style: none; } -#connection-1-desc{ +.suggest{ + width: clamp(24rem, 24rem, 100%); +} + +.suggest-search{ + display: flex; justify-content: center; flex-wrap: wrap; gap: 2.4rem; align-items: center; + margin-left: 1.2rem; + margin-right: 1.2rem; + width: 80%; +} + +.search-number{ display: none; } \ No newline at end of file diff --git a/suggestions.csv b/suggestions.csv deleted file mode 100644 index 304928f..0000000 --- a/suggestions.csv +++ /dev/null @@ -1,4 +0,0 @@ -2023-06-27T15:35:08.245616,Testing the form -2023-06-27T15:35:34.195039,testing again -2023-06-27T21:54:35.835288,"Hello from Moss and Nat's - " diff --git a/templates/nav.html b/templates/nav.html index c8f7416..24deaf4 100644 --- a/templates/nav.html +++ b/templates/nav.html @@ -22,17 +22,20 @@ -
+