From 616acf0074fb0c52976be1319b574d925df39cea Mon Sep 17 00:00:00 2001
From: Notoric <tom@acornes.com>
Date: Mon, 15 Apr 2024 20:26:18 +0100
Subject: [PATCH] Added better resizing for tablet, phone and pc

---
 css/styles.css | 157 +++++++++++++++++++++++++++++++++++++++++++++----
 js/scripts.js  |  11 +++-
 2 files changed, 153 insertions(+), 15 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index e99600a..521cb6c 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -206,16 +206,25 @@ h3 {
 }
 
 #fullscreen.visible {
-  display: block;
+  display: flex;
 }
 
 #pokemon-display {
-  height: calc(100% - 70px);
-  width: calc(100% - 70px);
+  height: calc(100% - 90px);
+  width: calc(100% - 90px);
   background: white;
-  margin: 35px;
+  margin: auto;
+  align-self: center;
   display: flex;
-  border-radius: 25px;
+  flex-direction: column;
+  border-radius: 26px;
+  padding: 10px;
+  overflow-y: scroll;
+  min-width: 260px;
+}
+
+#pokemon-display::-webkit-scrollbar {
+  display: none;
 }
 
 #fullscreen #close-button {
@@ -232,9 +241,52 @@ h3 {
   text-shadow: black 1px 1px 3px;
 }
 
-#pokemon-display img {
+#pokemon-display #image-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   max-height: 475px;
-  max-width: 475px;
+  background: #ddd;
+  background-image: linear-gradient(to right, transparent 0px, #999 1px, transparent 2px), linear-gradient(to bottom, transparent 0px, #999 1px, transparent 2px);
+  background-size: 35px 35px;
+  animation: transform 2.5s infinite;
+  animation-timing-function: linear;
+  border-radius: 15px;
+  margin-bottom: 8px;
+}
+
+#pokemon-display img {
+  width: 100%;
+}
+
+@keyframes transform {
+  from {
+    background-position: 0px 0px;
+  }
+  to {
+    background-position: 35px 35px;
+  }
+}
+
+#pokemon-display .pokemon-name {
+  font-size: 1.2em;
+  font-weight: 500;
+  margin: 0;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+#pokemon-display .pokemon-id {
+  font-size: 1.6em;
+  font-weight: 150;
+  margin: 0;
+  margin-left: 10px;
+  position: relative;
+  overflow: visible;
+  height: 0;
+  width: 0;
+  text-shadow: #fff 0px 0px 5px;
 }
 
 #statblock .stat-empty {
@@ -258,7 +310,7 @@ h3 {
 }
 
 #statblock #special-defense .stat-filled {
-  color: #a030ff;
+  color: #6b30ff;
 }
 
 #statblock #speed .stat-filled {
@@ -273,6 +325,7 @@ h3 {
   align-items: center;
   padding: 10px;
   height: fit-content;
+  border-radius: 15px;
 }
 
 .stat-bar {
@@ -300,6 +353,12 @@ h3 {
   margin: 0;
 }
 
+#image-and-stats {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
 /* POKEDEX STYLES */
 
 #pokedex {
@@ -739,6 +798,44 @@ h3 {
 
   /* applies to screens wider than 499px */
 
+  /* FULLSCREEN STYLES */
+  #pokemon-display {
+    height: calc(100% - 120px);
+    width: calc(100% - 120px);
+    border-radius: 30px;
+    padding: 20px;
+    max-height: 600px;
+    max-width: 900px;
+  }
+
+  #image-and-stats {
+    width: 100%;
+    display: grid;
+    grid-template-columns: 1fr 280px;
+
+  }
+
+  #pokemon-display img {
+    grid-column: 1;
+    max-height: 440px;
+    max-width: 440px;
+    justify-self: center;
+  }
+
+  #pokemon-display #image-container {
+    display: flex;
+    grid-column: 1;
+    width: calc(100% - 10px);
+    justify-content: center;
+    margin: 0;
+    margin-right: 10px;
+  }
+
+  #statblock {
+    grid-column: 2;
+    width: 260px;
+  }
+
 }
 
 
@@ -790,10 +887,10 @@ h3 {
   /* FULLSCREEN STYLES */
 
   #pokemon-display {
-    height: calc(100% - 200px);
-    width: calc(100% - 200px);
-    margin: 100px;
-    border-radius: 60px;
+    border-radius: 35px;
+    padding: 20px;
+    max-height: 755px;
+    max-width: 1120px;
   }
 
   #fullscreen #close-button {
@@ -801,11 +898,45 @@ h3 {
     right: 20px;
     height: 60px;
     width: 60px;
-    border-radius: 60px;
     font-size: 2em;
   }
 
+  #pokemon-display .pokemon-name {
+    font-size: 2.2em;
+    text-align: left;
+    margin-bottom: 5px;
+    transform: translate(0px, -8px);
+  }
 
+  #pokemon-display .pokemon-id {
+    font-size: 2.5em;
+  }
+
+  #pokemon-display img {
+    max-height: 475px;
+    max-width: 475px;
+    height: 475px;
+    width: 475px;
+  }
+
+  #pokemon-display #image-container {
+    max-height: 475px;
+    max-width: 475px;
+    height: 475px;
+    width: 475px;
+    margin: 0;
+    margin-bottom: 8px;
+  }
+
+  #statblock {
+    flex-direction: row;
+    flex-wrap: wrap;
+    width: 455px;
+    font-size: 0.85em !important;
+    justify-content: space-between;
+    grid-column: 1;
+    grid-row: 2;
+  }
 
   /* BELOW LANDING STYLES */
 
diff --git a/js/scripts.js b/js/scripts.js
index 1632c99..f402600 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -446,6 +446,9 @@ async function createPokemonDisplay(id) {
     const pokemonImg = document.createElement("img");
     pokemonImg.src = data.sprites.other["official-artwork"].front_default;
     pokemonImg.alt = data.name;
+    const pokemonImgContainer = document.createElement("div");
+    pokemonImgContainer.id = "image-container";
+    pokemonImgContainer.appendChild(pokemonImg);
 
     const pokemonStatblock = document.createElement("div");
     pokemonStatblock.id = "statblock";
@@ -492,10 +495,14 @@ async function createPokemonDisplay(id) {
         pokemonStatblock.appendChild(statBar);
     });
 
+    const imageAndStats = document.createElement("div");
+    imageAndStats.id = "image-and-stats";
+    imageAndStats.appendChild(pokemonImgContainer);
+    imageAndStats.appendChild(pokemonStatblock);
+
     pokemonDisplay.appendChild(pokemonName);
     pokemonDisplay.appendChild(pokemonId);
-    pokemonDisplay.appendChild(pokemonImg);
-    pokemonDisplay.appendChild(pokemonStatblock);
+    pokemonDisplay.appendChild(imageAndStats);
 
     fullscreenContainer.appendChild(pokemonDisplay);
     fullscreenContainer.appendChild(closeButton);