Aelita4
/
AstroCol
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Optimize images

This commit is contained in:
Aelita4 2025-01-14 22:34:30 +01:00
parent 5caf20c680
commit d6c6327661
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ItemCard.astro
View File

@ -1,4 +1,5 @@
--- ---
import { Image } from 'astro:assets';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver'; import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
interface Props { interface Props {
@ -16,7 +17,7 @@ interface Props {
const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'))); const lang = await getLocales(Astro.cookies.get('language')?.value ?? await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
--- ---
<div class="item-card" data-id={Astro.props.id}> <div class="item-card" data-id={Astro.props.id}>
<img class="item-card-image" src={Astro.props.image} /> <Image class="item-card-image" src={Astro.props.image} alt={Astro.props.id} width={512} height={512} />
<div class="item-card-main-field"> <div class="item-card-main-field">
<form method="post"> <form method="post">
<input type="hidden" name="id" value={Astro.props.id} /> <input type="hidden" name="id" value={Astro.props.id} />

7
src/components/NavBar.astro
View File

@ -1,5 +1,6 @@
--- ---
import { ObjectId } from 'mongodb'; import { ObjectId } from 'mongodb';
import { Image } from 'astro:assets';
import { checkForUnreadMails } from '../lib/db/mails'; import { checkForUnreadMails } from '../lib/db/mails';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver'; import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
@ -160,8 +161,8 @@ const hasUnreadMail = await checkForUnreadMails(new ObjectId(userId));
<li class="nav-item"><a href={element.url} class={`nav-url ${active === element.id ? "active" : ""}`}>{element.title}</a></li> <li class="nav-item"><a href={element.url} class={`nav-url ${active === element.id ? "active" : ""}`}>{element.title}</a></li>
)} )}
<li class="nav-item"><span class="nav-username nav-keep-right">{username}</span></li> <li class="nav-item"><span class="nav-username nav-keep-right">{username}</span></li>
{loggedIn === "true" ? <li class="nav-item"><img src="/gargamel.png" class="avatar-icon" /></li> : ""} {loggedIn === "true" ? <li class="nav-item"><Image src="/gargamel.png" alt="profile-pic" width={179} height={178} class="avatar-icon" /></li> : ""}
{loggedIn === "true" ? <li class="nav-item"><a href="/game/mail"><img src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} class="mail-icon" /></a></li> : ""} {loggedIn === "true" ? <li class="nav-item"><a href="/game/mail"><Image src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} alt="mail" width={800} height={800} class="mail-icon" /></a></li> : ""}
</ul> </ul>
</div> </div>
<div class="row"> <div class="row">
@ -225,6 +226,7 @@ nav ul {
} }
.avatar-icon { .avatar-icon {
width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
border: 1px solid white; border: 1px solid white;
@ -233,6 +235,7 @@ nav ul {
} }
.mail-icon { .mail-icon {
width: 50px;
height: 50px; height: 50px;
border-radius: 50%; border-radius: 50%;
/* border: 1px solid white; */ /* border: 1px solid white; */

7
src/components/ResourceBar.astro
View File

@ -1,5 +1,6 @@
--- ---
import { ObjectId } from 'mongodb'; import { ObjectId } from 'mongodb';
import { Image } from 'astro:assets';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver'; import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
import { getAllResources } from '../lib/db/resources'; import { getAllResources } from '../lib/db/resources';
import locationManager from '../lib/classes/managers/LocationManager'; import locationManager from '../lib/classes/managers/LocationManager';
@ -30,7 +31,7 @@ for(const key of planet.resources.resources) {
data-res-amount={res.amount} data-res-amount={res.amount}
data-res-mining-rate={res.perHourMiningRate} data-res-mining-rate={res.perHourMiningRate}
> >
<img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" /> <Image src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" width={32} height={32} />
<div class="text" data-resname={res.id}> <div class="text" data-resname={res.id}>
<span class="line1">{getName(lang, 'resources', res.id)}</span> <span class="line1">{getName(lang, 'resources', res.id)}</span>
<span class="line2"></span> <span class="line2"></span>
@ -133,10 +134,6 @@ for(const key of planet.resources.resources) {
margin-bottom: 8px; margin-bottom: 8px;
} }
.resourcebar-item-icon img {
width: 100%;
}
.resourcebar-item-text-wrapper { .resourcebar-item-text-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;