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';
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')));
---
<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">
<form method="post">
<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 { Image } from 'astro:assets';
import { checkForUnreadMails } from '../lib/db/mails';
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"><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"><a href="/game/mail"><img src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} class="mail-icon" /></a></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"><Image src={`/mail${hasUnreadMail ? "-notif" : ""}.svg?${new Date().getTime()}`} alt="mail" width={800} height={800} class="mail-icon" /></a></li> : ""}
</ul>
</div>
<div class="row">
@ -225,6 +226,7 @@ nav ul {
}
.avatar-icon {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid white;
@ -233,6 +235,7 @@ nav ul {
}
.mail-icon {
width: 50px;
height: 50px;
border-radius: 50%;
/* border: 1px solid white; */

7
src/components/ResourceBar.astro
View File

@ -1,5 +1,6 @@
---
import { ObjectId } from 'mongodb';
import { Image } from 'astro:assets';
import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/langDriver';
import { getAllResources } from '../lib/db/resources';
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-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}>
<span class="line1">{getName(lang, 'resources', res.id)}</span>
<span class="line2"></span>
@ -133,10 +134,6 @@ for(const key of planet.resources.resources) {
margin-bottom: 8px;
}
.resourcebar-item-icon img {
width: 100%;
}
.resourcebar-item-text-wrapper {
display: flex;
flex-direction: column;