Run npm format
This commit is contained in:
@@ -1,133 +1,128 @@
|
||||
<script lang="ts">
|
||||
import { components } from '$lib/mapRegistry';
|
||||
import { components } from '$lib/mapRegistry';
|
||||
|
||||
export let feature: any; // Raw Object
|
||||
export let activeElec: string; // Active Electrification Type
|
||||
export let reversed: boolean = false;
|
||||
export let feature: any; // Raw Object
|
||||
export let activeElec: string; // Active Electrification Type
|
||||
export let reversed: boolean = false;
|
||||
|
||||
$: Icon = components[feature.type] || components.default;
|
||||
$: Icon = components[feature.type] || components.default;
|
||||
</script>
|
||||
|
||||
<div class="row-container">
|
||||
<div class="mileage-col">
|
||||
<span class="miles">{feature.miles + "m" || "" }</span>
|
||||
<span class="chains">{feature.chains + "ch" || "" }</span>
|
||||
</div>
|
||||
<div class="mileage-col">
|
||||
<span class="miles">{feature.miles + 'm' || ''}</span>
|
||||
<span class="chains">{feature.chains + 'ch' || ''}</span>
|
||||
</div>
|
||||
|
||||
<div class="icon-col">
|
||||
<svelte:component
|
||||
this={Icon}
|
||||
{feature}
|
||||
{activeElec}
|
||||
{reversed}
|
||||
/>
|
||||
</div>
|
||||
<div class="icon-col">
|
||||
<svelte:component this={Icon} {feature} {activeElec} {reversed} />
|
||||
</div>
|
||||
|
||||
<div class="label-col">
|
||||
{#if feature.name}
|
||||
<div class="feature-name">{feature.name}</div>
|
||||
{/if}
|
||||
{#if feature.description}
|
||||
<div class="feature-desc">{feature.description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="label-col">
|
||||
{#if feature.name}
|
||||
<div class="feature-name">{feature.name}</div>
|
||||
{/if}
|
||||
{#if feature.description}
|
||||
<div class="feature-desc">{feature.description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.row-container {
|
||||
display: grid;
|
||||
/* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
|
||||
grid-template-columns: 3.5rem 64px 1fr;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.row-container {
|
||||
display: grid;
|
||||
/* Balanced columns: 1fr on both sides keeps the 64px icon in the dead center */
|
||||
grid-template-columns: 3.5rem 64px 1fr;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mileage-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding-right: 12px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #64748b; /* Adjusted slightly for contrast */
|
||||
}
|
||||
.mileage-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
padding-right: 12px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 0.85rem;
|
||||
color: #64748b; /* Adjusted slightly for contrast */
|
||||
}
|
||||
|
||||
.miles {
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
.miles {
|
||||
font-weight: bold;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.chains {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
.chains {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.icon-col {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
/* Ensure the icon itself is centered if the SVG is smaller than 64px */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.icon-col {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
/* Ensure the icon itself is centered if the SVG is smaller than 64px */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label-col {
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
/* FIX: Allow children to manage their own wrapping */
|
||||
overflow: hidden;
|
||||
/* min-width: 0 is critical for flex children to allow truncation */
|
||||
min-width: 0;
|
||||
}
|
||||
.label-col {
|
||||
padding-left: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
.feature-name {
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
|
||||
/* Allow the title to wrap naturally onto multiple lines */
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
/* FIX: Allow children to manage their own wrapping */
|
||||
overflow: hidden;
|
||||
/* min-width: 0 is critical for flex children to allow truncation */
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
|
||||
/* Firefox Fix: Ensure white-space is normal here too */
|
||||
white-space: normal;
|
||||
|
||||
line-height: 1.2rem;
|
||||
max-height: 2.4rem;
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
word-break: break-word;
|
||||
}
|
||||
.feature-name {
|
||||
font-weight: 700;
|
||||
color: #1e293b;
|
||||
font-size: 0.8rem;
|
||||
text-transform: capitalize;
|
||||
|
||||
/* Tablet and Desktop scaling */
|
||||
@media (min-width: 480px) {
|
||||
.feature-name {
|
||||
font-size: 1rem; /* The larger title you requested */
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
/* Allow the title to wrap naturally onto multiple lines */
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 0.85rem; /* Slightly larger desc to match */
|
||||
line-height: 1.3rem;
|
||||
max-height: 2.6rem;
|
||||
}
|
||||
.feature-desc {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
|
||||
.label-col {
|
||||
padding-left: 24px; /* More "breathing room" on big screens */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
/* Firefox Fix: Ensure white-space is normal here too */
|
||||
white-space: normal;
|
||||
|
||||
line-height: 1.2rem;
|
||||
max-height: 2.4rem;
|
||||
font-size: 0.75rem;
|
||||
color: #64748b;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Tablet and Desktop scaling */
|
||||
@media (min-width: 480px) {
|
||||
.feature-name {
|
||||
font-size: 1rem; /* The larger title you requested */
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 0.85rem; /* Slightly larger desc to match */
|
||||
line-height: 1.3rem;
|
||||
max-height: 2.6rem;
|
||||
}
|
||||
|
||||
.label-col {
|
||||
padding-left: 24px; /* More "breathing room" on big screens */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user