From f50efb78ab143bdc3ab752c1b284c4379aa3b962 Mon Sep 17 00:00:00 2001
From: Jonas_Jones <91549607+J-onasJones@users.noreply.github.com>
Date: Mon, 24 Jul 2023 02:38:28 +0200
Subject: [PATCH] added support for mobile view

---
 src/components/Footer.svelte              |   2 +-
 src/components/NavBar.svelte              | 215 +++++++++++++++++++++-
 src/components/TooSmallDimsOverlay.svelte |  33 ++++
 src/routes/projects/+page.svelte          |  25 ++-
 4 files changed, 261 insertions(+), 14 deletions(-)
 create mode 100644 src/components/TooSmallDimsOverlay.svelte

diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 8d0f496..7e9f3be 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -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>
 
diff --git a/src/components/NavBar.svelte b/src/components/NavBar.svelte
index e6ccddf..25c9aae 100644
--- a/src/components/NavBar.svelte
+++ b/src/components/NavBar.svelte
@@ -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>
-  
\ No newline at end of file
diff --git a/src/components/TooSmallDimsOverlay.svelte b/src/components/TooSmallDimsOverlay.svelte
new file mode 100644
index 0000000..6c35c23
--- /dev/null
+++ b/src/components/TooSmallDimsOverlay.svelte
@@ -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>
+  
\ No newline at end of file
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index f88939d..36d9780 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -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()
   }