mirror of
https://github.com/JonasunderscoreJones/jonasjones.dev.git
synced 2025-10-23 08:59:19 +02:00
added support for mobile view
This commit is contained in:
Jonas_Jones
parent
47068de76d
commit
f50efb78ab
4 changed files with 261 additions and 14 deletions
|
|
@ -1,4 +1,10 @@
|
|||
<div class="navbar">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="hamburger-menu {showMenu ? 'open' : ''}" on:click={toggleMenu}>
|
||||
<div class="hamburger-line line-1"></div>
|
||||
<div class="hamburger-line line-2"></div>
|
||||
<div class="hamburger-line line-3"></div>
|
||||
</div>
|
||||
<div class="logo">
|
||||
<a href="/">
|
||||
<img src="/icon_80x80.webp" alt="Logo" class="logo">
|
||||
|
|
@ -26,10 +32,35 @@
|
|||
<p id="lastfm_artist"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="navigation-menu {showMenu ? 'show' : ''}">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div class="hamburger-menu close-button {showMenu ? 'open' : ''}" on:click={toggleMenu}>
|
||||
<div class="hamburger-line line-1"></div>
|
||||
<div class="hamburger-line line-2"></div>
|
||||
<div class="hamburger-line line-3"></div>
|
||||
</div>
|
||||
<ul class="links">
|
||||
{#each navLinks as link}
|
||||
<li><a href={link.url} on:click={toggleMenu}>{link.name}</a></li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<TooSmallDimsOverlay />
|
||||
|
||||
|
||||
<script>
|
||||
let showMenu = false;
|
||||
|
||||
function toggleMenu() {
|
||||
showMenu = !showMenu;
|
||||
}
|
||||
|
||||
import TooSmallDimsOverlay from './TooSmallDimsOverlay.svelte';
|
||||
|
||||
let navLinks = [
|
||||
{ name: 'Home', url: '/' },
|
||||
{ name: 'Projects', url: '/projects'},
|
||||
|
|
@ -44,12 +75,26 @@
|
|||
]
|
||||
const fetch_url = "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=Jonas_Jones&api_key=57c0ca64285c7ca676bb8c2acf320f41&format=json&limit=1"
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
*/
|
||||
function truncateString(str) {
|
||||
if (str.length > 30) {
|
||||
return str.slice(0, 30) + "...";
|
||||
} else {
|
||||
return str;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
async function fetchLastFmData() {
|
||||
let response = await fetch(fetch_url);
|
||||
let data = await response.json();
|
||||
let album_cover = data.recenttracks.track[0].image[1]['\#text'];
|
||||
let song_title = data.recenttracks.track[0].name;
|
||||
let artist = data.recenttracks.track[0].artist['\#text'];
|
||||
let song_title = truncateString(data.recenttracks.track[0].name);
|
||||
//let song_title = truncateString("WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWw");
|
||||
let artist = truncateString(data.recenttracks.track[0].artist['\#text']);
|
||||
|
||||
try {
|
||||
// @ts-ignore
|
||||
|
|
@ -83,6 +128,96 @@
|
|||
|
||||
|
||||
<style>
|
||||
.hamburger-menu {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 21.5px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
margin: 16px;
|
||||
}
|
||||
|
||||
.hamburger-line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
.hamburger-line:nth-child(2) {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.hamburger-line:nth-child(3) {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu.open .line-1 {
|
||||
transform: rotate(-45deg) translate(-6px, 6px);
|
||||
}
|
||||
|
||||
.hamburger-menu.open .line-2 {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hamburger-menu.open .line-3 {
|
||||
transform: rotate(45deg) translate(-6px, -6px);
|
||||
}
|
||||
|
||||
.navigation-menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.navigation-menu.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
font-size: 24px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.links {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.links li {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.navbar {
|
||||
background-color: #2023247c;
|
||||
padding: 10px;
|
||||
|
|
@ -90,6 +225,7 @@
|
|||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 58px;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -99,7 +235,7 @@
|
|||
.logo {
|
||||
height: 45px;
|
||||
border-radius: 10px;
|
||||
margin-top: 2px;
|
||||
margin-top: 3.5px;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
|
|
@ -108,15 +244,14 @@
|
|||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.navbar {
|
||||
flex-direction: column;
|
||||
.lastfm {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
margin-top: 10px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
nav {
|
||||
padding: 10px;
|
||||
justify-content: center;
|
||||
|
|
@ -149,6 +284,7 @@
|
|||
.lastfm {
|
||||
padding: 3px;
|
||||
padding-right: 10px;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
justify-content: right;
|
||||
justify-self: right;
|
||||
|
|
@ -157,8 +293,11 @@
|
|||
display: flex;
|
||||
position: relative;
|
||||
right: 3px;
|
||||
top: 3px;
|
||||
top: 3.5px;
|
||||
border-radius: 5px;
|
||||
max-width:300px;
|
||||
height: 43px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.lastfm:hover {
|
||||
background-color: #202324;
|
||||
|
|
@ -184,12 +323,14 @@
|
|||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
.lastfm #lastfm_title {
|
||||
font-size: 19px;
|
||||
text-align: left;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
}
|
||||
.lastfm #lastfm_logo_overlay {
|
||||
width: 40px;
|
||||
|
|
@ -206,5 +347,59 @@
|
|||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 900px) and (min-width: 650px) {
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.navigation-menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 650px) and (min-width: 375px) {
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: flex;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 375px) and (min-width: 300px) {
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 300px) and (min-width: 0px) {
|
||||
.lastfm #lastfm_title, .lastfm #lastfm_artist {
|
||||
display: none;
|
||||
}
|
||||
.nav-links {
|
||||
display: none;
|
||||
}
|
||||
.hamburger-menu {
|
||||
display: block;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue