hawk / commit
Minor UI rework, moved the sign-out button into the footer.
public/index.html | 9 ++++----- public/main.js | 4 +++- public/style.css | 4 ++-- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/public/index.html b/public/index.html index c7cb1eb..300fcdc 100644 --- a/public/index.html +++ b/public/index.html @@ -52,9 +52,7 @@ weird, but it's also a fun movie, so check it out. </div> <div id="main"> - <div id="sign-in-div"> - <button id="signin">Sign In to Spotify</button> - </div> + <button id="signin">Sign In to Spotify</button> <div id="controls"> <div> <h3>Currently playing: @@ -90,9 +88,10 @@ <div id="results"></div> </div> - <button id="signout">Sign Out</button> </div> + <hr /> <div id="footer"> + <button id="signout">Sign Out</button> <div> Hawk version <span id="version"></span> </div> @@ -103,7 +102,7 @@ <a href="https://gitlab.com/PavelSafronov/hawk" target="_blank">Source</a> </div> <div> - <a href="https://www.vecteezy.com/free-vector/hawk">Hawk Vectors by Vecteezy</a> + <a href="https://www.vecteezy.com/free-vector/hawk" target="_blank">Hawk Vectors by Vecteezy</a> </div> </div> </div> diff --git a/public/main.js b/public/main.js index a1a931c..c3c1c25 100644 --- a/public/main.js +++ b/public/main.js @@ -19,19 +19,21 @@ const accessToken = localStorage.getItem('access_token'); const showSignInButton = !accessToken const signInButton = document.getElementById('signin'); +const signOutButton = document.getElementById('signout'); const controlsDiv = document.getElementById('controls'); if (showSignInButton) { signInButton.setAttribute('style', 'display: block'); signInButton.addEventListener('click', signIn); + signOutButton.setAttribute('style', 'display: none'); controlsDiv.setAttribute('style', 'display: none'); } else { signInButton.setAttribute('style', 'display: none'); controlsDiv.setAttribute('style', 'display: block'); + signOutButton.setAttribute('style', 'display: block'); setCurrentPlayingSong(); setInterval(setCurrentPlayingSong, 5 * 1000); } -const signOutButton = document.getElementById('signout'); signOutButton.addEventListener('click', signOut); async function setCurrentPlayingSong() { diff --git a/public/style.css b/public/style.css index 4d6ba02..dca9ebe 100644 --- a/public/style.css +++ b/public/style.css @@ -102,7 +102,7 @@ div { #signout, #signin { border: 2px solid black; - padding: 1em; - margin: 1em; + padding: .5em; + margin: .5em; font-size: 1em; } \ No newline at end of file