nathanwoodburn/Nathanwoodburn.github.io
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Animation for spotify toggle
All checks were successful
Build Docker / BuildImage (push) Successful in 2m8s
Details

Browse Source
This commit is contained in:
Nathan Woodburn
2025-10-28 14:46:09 +11:00
parent 4ae6f7bb99
commit 332c408b89
1 changed files with 10 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
templates/index.html
View File

@@ -294,7 +294,7 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM11 6C11 5.44772 10.5523 5 10 5C9.44771 5 9 5.44772 9 6V10C9 10.2652 9.10536 10.5196 9.29289 10.7071L12.1213 13.5355C12.5118 13.9261 13.145 13.9261 13.5355 13.5355C13.9261 13.145 13.9261 12.5118 13.5355 12.1213L11 9.58579V6Z" fill="currentColor"></path>
</svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div><!-- Pop-out button for mobile --> </svg><span style="margin-left: 10px;font-family: 'Anonymous Pro', monospace;">{{time|safe}}</span></div><!-- Pop-out button for mobile -->
<button id="spotify-toggle" style=" <button id="spotify-toggle" style="
display: none; display: block;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
@@ -305,6 +305,8 @@ Check them out here!</blockquote><img class="img-fluid" src="/assets/img/pfront.
background: none; background: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
transition: transform 0.5s ease;
transform: translateX(200%); /* start hidden off-screen *
"> ">
<img src="/assets/img/external/spotify.png" alt="Spotify" style=" <img src="/assets/img/external/spotify.png" alt="Spotify" style="
width: 100%; width: 100%;
@@ -374,16 +376,17 @@ function isMobile() {
function updateVisibility() { function updateVisibility() {
if(isMobile()){ if(isMobile()){
widget.style.transform = 'translateX(120%)'; // hidden off-screen widget.style.transform = 'translateX(120%)'; // hidden off-screen
toggleBtn.style.display = 'block'; toggleBtn.style.transform = 'translateX(0)'; // visible
} else { } else {
widget.style.transform = 'translateX(0)'; // visible widget.style.transform = 'translateX(0)'; // visible
toggleBtn.style.display = 'none'; toggleBtn.style.transform = 'translateX(200%)'; // hidden off-screen
} }
} }
// Toggle widget slide in/out on mobile // Toggle widget slide in/out on mobile
toggleBtn.addEventListener('click', (e) => { toggleBtn.addEventListener('click', (e) => {
widget.style.transform = 'translateX(0)'; // slide in widget.style.transform = 'translateX(0)'; // slide in
toggleBtn.style.transform = 'translateX(200%)'; // hide button
e.stopPropagation(); e.stopPropagation();
}); });
@@ -392,6 +395,7 @@ document.addEventListener('click', (e) => {
if(isMobile()){ if(isMobile()){
if(!widget.contains(e.target) && e.target !== toggleBtn){ if(!widget.contains(e.target) && e.target !== toggleBtn){
widget.style.transform = 'translateX(120%)'; // slide out widget.style.transform = 'translateX(120%)'; // slide out
toggleBtn.style.transform = 'translateX(0)'; // show button
} }
} }
}); });
@@ -434,8 +438,10 @@ async function updateSpotifyWidget() {
document.getElementById('spotify-song').textContent = track.song_name; document.getElementById('spotify-song').textContent = track.song_name;
document.getElementById('spotify-artist').textContent = track.artist; document.getElementById('spotify-artist').textContent = track.artist;
document.getElementById('spotify-album').textContent = track.album_name; document.getElementById('spotify-album').textContent = track.album_name;
// If first load and desktop, slide in the widget
if (firstLoad) { if (firstLoad) {
widget.style.transform = 'translateX(0)'; // slide in on first load updateVisibility();
} }
} catch (err) { } catch (err) {