fix zone name display

This commit is contained in:
2025-12-21 01:13:32 +01:00
parent af8a6cab1d
commit 92fc068fda
+62 -41
View File
@@ -3,51 +3,53 @@
class="node" class="node"
:class="{active: gatheringNode.isActive(eorzeaTime)}" :class="{active: gatheringNode.isActive(eorzeaTime)}"
> >
<div <div class="location-info">
v-if="!gatheringNode.isActive(eorzeaTime)" <div
> v-if="!gatheringNode.isActive(eorzeaTime)"
<div class="timer"> >
{{ <div class="timer">
prettyTimer(secondsToNextActiveTime)
}}
</div>
</div>
<div
v-else
>
<div class="timer">
Active
<div class="countdown">
{{ {{
prettyTimer(secondsToNextInactiveTime) prettyTimer(secondsToNextActiveTime)
}} }}
</div> </div>
</div> </div>
</div> <div
<div class="job"> v-else
<div class="icon"> >
<img <div class="timer">
:alt="gatheringNode.job" Active
:src="`https://xivapi.com/cj/1/${gatheringNode.job}.png`" <div class="countdown">
:title="gatheringNode.job" {{
draggable="false" prettyTimer(secondsToNextInactiveTime)
> }}
</div>
</div>
</div> </div>
</div> <div class="job">
<div class="aetheryte"> <div class="icon">
<span class="icon"> <img
<img :alt="gatheringNode.job"
src="https://xivapi.com/img-misc/mappy/aetheryte.png" :src="`https://xivapi.com/cj/1/${gatheringNode.job}.png`"
alt="Aetheryte icon" :title="gatheringNode.job"
draggable="false" draggable="false"
> >
</span> </div>
<div class="info"> </div>
<span>{{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }}</span> <div class="aetheryte">
<span>{{ gatheringNode.nearestAetheryte.name.en }}</span> <span class="icon">
<span>{{ <img
gatheringNode.nearestAetheryte.position.x.toFixed(1) src="https://xivapi.com/img-misc/mappy/aetheryte.png"
}}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span> alt="Aetheryte icon"
draggable="false"
>
</span>
<div class="info">
<span class="zone-name">{{ zones[gatheringNode.location.zone]?.name?.en }}</span>
<span class="aetheryte-name">{{ gatheringNode.nearestAetheryte.name.en }}</span>
<span class="coords">{{
gatheringNode.nearestAetheryte.position.x.toFixed(1)
}}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }}</span>
</div>
</div> </div>
</div> </div>
<div class="items"> <div class="items">
@@ -139,6 +141,14 @@ export default defineComponent({
border-radius: 0.25rem; border-radius: 0.25rem;
content-visibility: auto; content-visibility: auto;
.location-info {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
&.active { &.active {
animation: infinite pulsing 6s; animation: infinite pulsing 6s;
} }
@@ -172,7 +182,7 @@ export default defineComponent({
.aetheryte { .aetheryte {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: flex-start;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
font-size: 1.5rem; font-size: 1.5rem;
@@ -196,6 +206,17 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: start; align-items: start;
gap: 0.1rem; gap: 0.1rem;
line-height: 1;
.zone-name {
font-size: 0.75rem;
}
.aetheryte-name {
font-size: 1.1rem;
}
.coords {
padding-top: 0.15rem;
}
} }
} }