hawk / commit
Simplified how signed-in/signed-out stuff shows up or is hidden.
public/index.html | 57 +++++++++++++++++++++++++++++-------------------------- public/main.js | 29 +++++++++++++++------------- public/style.css | 3 ++- 3 files changed, 48 insertions(+), 41 deletions(-) diff --git a/public/index.html b/public/index.html index 7f828ee..2f0d466 100644 --- a/public/index.html +++ b/public/index.html @@ -42,18 +42,20 @@ </div> <div id="main"> - <div> - While in development mode, you'll need to have your Spotify profile added to the list of users that can - access this app. - <a href="mailto:hawk@fuzzyworld.net">Please email me</a> if you'd like to be added. - </div> - <button id="signin"> - <div class="icon-and-label"> - <img id="spotify-icon" src="Spotify_Icon_RGB_Black.png" /> - Sign In + <div class="signedout"> + <div> + While in development mode, you'll need to have your Spotify profile added to the list of users that can + access this app. + <a href="mailto:hawk@fuzzyworld.net">Please email me</a> if you'd like to be added. </div> - </button> - <div id="controls"> + <button id="signin" onclick="signIn()"> + <div class="icon-and-label"> + <img id="spotify-icon" src="Spotify_Icon_RGB_Black.png" /> + Sign In + </div> + </button> + </div> + <div class="signedin"> <div> <h3>Search for a song by duration:</h3> </div> @@ -85,23 +87,24 @@ </div> </div> - <hr /> - <div id="footer"> - <button id="signout" onclick="signOut()">Sign Out</button> - <button id="clear-cache" onclick="clearDb()">Clear Cache</button> - <div> - Hawk version <span id="version"></span> - </div> - <div> - Updated on <span id="updated"></span> - </div> - <div> - <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> - </div> - <div> - <a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a> - </div> + </div> + <hr /> + <div id="footer"> + <button id="signout" class="signedin" onclick="signOut()">Sign Out</button> + <button id="clear-cache" class="signedin" onclick="clearDb()">Clear Cache</button> + <div> + Hawk version <span id="version"></span> + </div> + <div> + Updated on <span id="updated"></span> </div> + <div> + <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> + </div> + <div> + <a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a> + </div> + </div> </div> <script src="version.js"></script> <script src="signin.js"></script> diff --git a/public/main.js b/public/main.js index 1f1ce6e..6f31943 100644 --- a/public/main.js +++ b/public/main.js @@ -18,21 +18,24 @@ if (code) { const accessToken = localStorage.getItem('access_token'); const showSignInButton = !accessToken -const signInButton = document.getElementById('signin'); -const signOutButton = document.getElementById('signout'); -const controlsDiv = document.getElementById('controls'); -const clearCacheButton = document.getElementById('clear-cache'); +const hideOrShow = function (elementClass, show) { + const elements = document.getElementsByClassName(elementClass); + for (let i = 0; i < elements.length; i++) { + const element = elements[i]; + if (show) { + element.setAttribute('style', 'display: block'); + } else { + element.setAttribute('style', 'display: none'); + } + } +} + if (showSignInButton) { - signInButton.setAttribute('style', 'display: block'); - signInButton.addEventListener('click', signIn); - signOutButton.setAttribute('style', 'display: none'); - clearCacheButton.setAttribute('style', 'display: none'); - controlsDiv.setAttribute('style', 'display: none'); + hideOrShow('signedin', false); + hideOrShow('signedout', true); } else { - signInButton.setAttribute('style', 'display: none'); - controlsDiv.setAttribute('style', 'display: block'); - signOutButton.setAttribute('style', 'display: block'); - clearCacheButton.setAttribute('style', 'display: block'); + hideOrShow('signedin', true); + hideOrShow('signedout', false); setCurrentPlayingSong(); setInterval(setCurrentPlayingSong, 5 * 1000); } diff --git a/public/style.css b/public/style.css index 539db6e..a98e196 100644 --- a/public/style.css +++ b/public/style.css @@ -26,7 +26,7 @@ body { div { /* margin-left: 0.5em; */ /* margin-right: 0.5em; */ - padding: 0.5em; + padding: 0.5em 0; } #header { @@ -81,6 +81,7 @@ button { /* border 1px black */ border: 2px solid black; margin: .5em; + padding: .5em; } #search,