Move transport icons to bottom of HubCard
Some checks failed
Build Docker Image / build (push) Failing after 7m41s
Some checks failed
Build Docker Image / build (push) Failing after 7m41s
This commit is contained in:
@@ -16,16 +16,8 @@
|
||||
]"
|
||||
>
|
||||
<div class="flex flex-col gap-1">
|
||||
<!-- Title + Transport icons -->
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<!-- Title -->
|
||||
<Text size="base" weight="semibold" class="truncate">{{ hub.name }}</Text>
|
||||
<div v-if="hub.transportTypes?.length" class="flex items-center gap-1 shrink-0">
|
||||
<Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Country left, distance right -->
|
||||
<div class="flex items-center justify-between">
|
||||
<Text tone="muted" size="sm">
|
||||
@@ -35,6 +27,13 @@
|
||||
{{ hub.distance }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- Transport icons bottom -->
|
||||
<div v-if="hub.transportTypes?.length" class="flex items-center gap-1 pt-1">
|
||||
<Icon v-if="hasTransport('auto')" name="lucide:truck" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('rail')" name="lucide:train-front" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('sea')" name="lucide:ship" size="14" class="text-base-content/50" />
|
||||
<Icon v-if="hasTransport('air')" name="lucide:plane" size="14" class="text-base-content/50" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</component>
|
||||
|
||||
Reference in New Issue
Block a user