diff --git a/src/components/GatheringNode.vue b/src/components/GatheringNode.vue index 8ccc4e0..cc3eee0 100644 --- a/src/components/GatheringNode.vue +++ b/src/components/GatheringNode.vue @@ -3,51 +3,53 @@ class="node" :class="{active: gatheringNode.isActive(eorzeaTime)}" > -
-
- {{ - prettyTimer(secondsToNextActiveTime) - }} -
-
-
-
- Active -
+
+
+
{{ - prettyTimer(secondsToNextInactiveTime) + prettyTimer(secondsToNextActiveTime) }}
-
-
-
- +
+
+ Active +
+ {{ + prettyTimer(secondsToNextInactiveTime) + }} +
+
-
-
- - Aetheryte icon - -
- {{ zones[gatheringNode.nearestAetheryte.position.zone]?.name?.en }} - {{ gatheringNode.nearestAetheryte.name.en }} - {{ - gatheringNode.nearestAetheryte.position.x.toFixed(1) - }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }} +
+
+ +
+
+
+ + Aetheryte icon + +
+ {{ zones[gatheringNode.location.zone]?.name?.en }} + {{ gatheringNode.nearestAetheryte.name.en }} + {{ + gatheringNode.nearestAetheryte.position.x.toFixed(1) + }}, {{ gatheringNode.nearestAetheryte.position.y.toFixed(1) }} +
@@ -139,6 +141,14 @@ export default defineComponent({ border-radius: 0.25rem; content-visibility: auto; + .location-info { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; + align-items: center; + } + &.active { animation: infinite pulsing 6s; } @@ -172,7 +182,7 @@ export default defineComponent({ .aetheryte { display: flex; flex-direction: row; - justify-content: center; + justify-content: flex-start; align-items: center; gap: 0.25rem; font-size: 1.5rem; @@ -196,6 +206,17 @@ export default defineComponent({ justify-content: center; align-items: start; gap: 0.1rem; + line-height: 1; + + .zone-name { + font-size: 0.75rem; + } + .aetheryte-name { + font-size: 1.1rem; + } + .coords { + padding-top: 0.15rem; + } } }