Notoric
/
FEWD-CTEC3905
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added better resizing for tablet, phone and pc

This commit is contained in:
Notoric 2024-04-15 20:26:18 +01:00
parent caf9ec9187
commit 616acf0074
2 changed files with 153 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

157
css/styles.css
View File

@ -206,16 +206,25 @@ h3 {
} }
#fullscreen.visible { #fullscreen.visible {
display: block; display: flex;
} }
#pokemon-display { #pokemon-display {
height: calc(100% - 70px); height: calc(100% - 90px);
width: calc(100% - 70px); width: calc(100% - 90px);
background: white; background: white;
margin: 35px; margin: auto;
align-self: center;
display: flex; 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 { #fullscreen #close-button {
@ -232,9 +241,52 @@ h3 {
text-shadow: black 1px 1px 3px; 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-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 { #statblock .stat-empty {
@ -258,7 +310,7 @@ h3 {
} }
#statblock #special-defense .stat-filled { #statblock #special-defense .stat-filled {
color: #a030ff; color: #6b30ff;
} }
#statblock #speed .stat-filled { #statblock #speed .stat-filled {
@ -273,6 +325,7 @@ h3 {
align-items: center; align-items: center;
padding: 10px; padding: 10px;
height: fit-content; height: fit-content;
border-radius: 15px;
} }
.stat-bar { .stat-bar {
@ -300,6 +353,12 @@ h3 {
margin: 0; margin: 0;
} }
#image-and-stats {
width: 100%;
display: flex;
flex-direction: column;
}
/* POKEDEX STYLES */ /* POKEDEX STYLES */
#pokedex { #pokedex {
@ -739,6 +798,44 @@ h3 {
/* applies to screens wider than 499px */ /* 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 */ /* FULLSCREEN STYLES */
#pokemon-display { #pokemon-display {
height: calc(100% - 200px); border-radius: 35px;
width: calc(100% - 200px); padding: 20px;
margin: 100px; max-height: 755px;
border-radius: 60px; max-width: 1120px;
} }
#fullscreen #close-button { #fullscreen #close-button {
@ -801,11 +898,45 @@ h3 {
right: 20px; right: 20px;
height: 60px; height: 60px;
width: 60px; width: 60px;
border-radius: 60px;
font-size: 2em; 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 */ /* BELOW LANDING STYLES */

11
js/scripts.js
View File

@ -446,6 +446,9 @@ async function createPokemonDisplay(id) {
const pokemonImg = document.createElement("img"); const pokemonImg = document.createElement("img");
pokemonImg.src = data.sprites.other["official-artwork"].front_default; pokemonImg.src = data.sprites.other["official-artwork"].front_default;
pokemonImg.alt = data.name; pokemonImg.alt = data.name;
const pokemonImgContainer = document.createElement("div");
pokemonImgContainer.id = "image-container";
pokemonImgContainer.appendChild(pokemonImg);
const pokemonStatblock = document.createElement("div"); const pokemonStatblock = document.createElement("div");
pokemonStatblock.id = "statblock"; pokemonStatblock.id = "statblock";
@ -492,10 +495,14 @@ async function createPokemonDisplay(id) {
pokemonStatblock.appendChild(statBar); pokemonStatblock.appendChild(statBar);
}); });
const imageAndStats = document.createElement("div");
imageAndStats.id = "image-and-stats";
imageAndStats.appendChild(pokemonImgContainer);
imageAndStats.appendChild(pokemonStatblock);
pokemonDisplay.appendChild(pokemonName); pokemonDisplay.appendChild(pokemonName);
pokemonDisplay.appendChild(pokemonId); pokemonDisplay.appendChild(pokemonId);
pokemonDisplay.appendChild(pokemonImg); pokemonDisplay.appendChild(imageAndStats);
pokemonDisplay.appendChild(pokemonStatblock);
fullscreenContainer.appendChild(pokemonDisplay); fullscreenContainer.appendChild(pokemonDisplay);
fullscreenContainer.appendChild(closeButton); fullscreenContainer.appendChild(closeButton);