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,5 +1,5 @@
|
|||
<div class="footer">
|
||||
<p>Website by Jonas_Jones @ jonasjones.dev. 2021 - 2023</p>
|
||||
<p>Website by Jonas_Jones 2021 - 2023</p>
|
||||
</div>
|
||||
<style>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
</style>
|
||||
|
||||
@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>
|
||||
|
|
|
|||
33
src/components/TooSmallDimsOverlay.svelte
Normal file
33
src/components/TooSmallDimsOverlay.svelte
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<style>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
@media (min-width: 299.99px) {
|
||||
.overlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.notice {
|
||||
background-color: #1f1f1f;
|
||||
padding: 20px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<div class="overlay">
|
||||
<div class="notice">
|
||||
<p>Your screen resolution isn't supported by this website. if You're on a computer, try zooming out or resizing the window.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1,14 +1,32 @@
|
|||
<script lang="ts">
|
||||
<script script lang="ts" async>
|
||||
import { select_option } from "svelte/internal";
|
||||
import FontAwesome from "../../components/FontAwesome.svelte";
|
||||
import Footer from "../../components/Footer.svelte";
|
||||
import NavBar from "../../components/NavBar.svelte";
|
||||
import ParallaxBg from "../../components/ParallaxBg.svelte";
|
||||
import Padding from "../../components/padding.svelte";
|
||||
|
||||
import projects from "./projects.json";
|
||||
// fetch data from https://cdn.jonasjones.dev/api/projects/projects.json
|
||||
// and store it in a variable called projects
|
||||
|
||||
let searchResults = [];
|
||||
|
||||
var searchResults = projects;
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch('https://cdn.jonasjones.dev/api/projects/projects.json');
|
||||
console.log(response);
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch projects data');
|
||||
}
|
||||
projects = await response.json().then(uwu => console.log(projects));
|
||||
searchResults = projects;
|
||||
return projects;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
let projects = fetchProjects();
|
||||
console.log(projects);
|
||||
|
||||
var searchtext = '';
|
||||
var searchcategory = '';
|
||||
|
|
@ -17,6 +35,7 @@ import Footer from "../../components/Footer.svelte";
|
|||
|
||||
function handleSearchText(event) {
|
||||
searchtext = event.target.value.toLowerCase();
|
||||
console.log(projects)
|
||||
handleSearch()
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue