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

Change BuildingCard to generic ItemCard

This commit is contained in:
Aelita4 2024-08-23 17:12:45 +02:00
parent 7bd5a055e2
commit f97d394eb4
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/BuildingCard.astro → src/components/ItemCard.astro
View File

@ -6,23 +6,25 @@ interface Props {
name: string; name: string;
description: string; description: string;
image: string; image: string;
button_type: string;
button_name: string;
} }
const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language'))); const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.headers.get('accept-language')));
--- ---
<div class="building-card" data-id={Astro.props.id}> <div class="item-card" data-id={Astro.props.id}>
<img class="building-card-image" src={Astro.props.image} /> <img class="item-card-image" src={Astro.props.image} />
<div class="building-card-main-field"> <div class="item-card-main-field">
<div class="building-card-name">{Astro.props.name}</div> <div class="item-card-name">{Astro.props.name}</div>
<div class="building-card-description">{Astro.props.description}</div> <div class="item-card-description">{Astro.props.description}</div>
<a id={`build_${Astro.props.id}`} href="#" class="building-card-build">{getName(lang, "general", "nav-build")}</a> <a id={`button_${Astro.props.id}`} href="#" class="item-card-build">{getName(lang, Astro.props.button_type, Astro.props.button_name)}</a>
<div class="building-card-info-button">i</div> <div class="item-card-info-button">i</div>
</div> </div>
</div> </div>
<style> <style>
.building-card { .item-card {
background-color: #fff; background-color: #fff;
color: #333; color: #333;
border-radius: 8px; border-radius: 8px;
@ -35,11 +37,11 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
width: 49%; width: 49%;
} }
.building-card-expanded { .item-card-expanded {
height: auto; height: auto;
} }
.building-card-image { .item-card-image {
width: 150px; width: 150px;
height: 150px; height: 150px;
margin: 4px; margin: 4px;
@ -47,7 +49,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
object-fit: cover; object-fit: cover;
} }
.building-card-main-field { .item-card-main-field {
background-color: #ccc; background-color: #ccc;
width: 100%; width: 100%;
margin: 4px; margin: 4px;
@ -56,17 +58,17 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
padding-right: 100px; padding-right: 100px;
} }
.building-card-name { .item-card-name {
font-size: 48px; font-size: 48px;
} }
.building-card-description { .item-card-description {
font-size: 24px; font-size: 24px;
margin-top: 16px; margin-top: 16px;
margin-bottom: 16px; margin-bottom: 16px;
} }
.building-card-build { .item-card-build {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
border-radius: 8px; border-radius: 8px;
@ -78,7 +80,7 @@ const lang = await getLocales(await getHighestWeightedLanguage(Astro.request.hea
right: 16px; right: 16px;
} }
.building-card-info-button { .item-card-info-button {
background-color: #333; background-color: #333;
color: #fff; color: #fff;
border-radius: 50%; border-radius: 50%;

6
src/pages/game/buildings.astro
View File

@ -1,7 +1,7 @@
--- ---
import Layout from '../../layouts/Layout.astro'; import Layout from '../../layouts/Layout.astro';
import NavBar from '../../components/NavBar.astro'; import NavBar from '../../components/NavBar.astro';
import BuildingCard from '../../components/BuildingCard.astro'; import BuildingCard from '../../components/ItemCard.astro';
import { getUserByAccessToken } from '../../lib/db/users'; import { getUserByAccessToken } from '../../lib/db/users';
import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver'; import { getHighestWeightedLanguage, getLocales, getName, getObj } from '../../lib/utils/langDriver';
import ResourceBar from '../../components/ResourceBar.astro'; import ResourceBar from '../../components/ResourceBar.astro';
@ -62,7 +62,9 @@ const buildingsByCategory = buildingsList.reduce((acc: { [key: string]: DBBuildi
id={building.id} id={building.id}
name={getObj(lang, "buildings", building.id).name} name={getObj(lang, "buildings", building.id).name}
description={getObj(lang, "buildings", building.id).description ?? ""} description={getObj(lang, "buildings", building.id).description ?? ""}
image={`/images/buildings/${building.id}.jpeg`} /> image={`/images/buildings/${building.id}.jpeg`}
button_type="general"
button_name="nav-build" />
))} ))}
</div> </div>
</>)} </>)}