34 lines
770 B
Svelte
34 lines
770 B
Svelte
<script lang="ts">
|
|
import type { UiTelemetryCard } from "../types";
|
|
import TelemetryCard from "./TelemetryCard.svelte";
|
|
|
|
let { cards }: { cards: UiTelemetryCard[] } = $props();
|
|
</script>
|
|
|
|
<section class="telemetry-grid" aria-label="Telemetry">
|
|
{#each cards as card (card.id)}
|
|
<TelemetryCard {card} />
|
|
{/each}
|
|
</section>
|
|
|
|
<style>
|
|
.telemetry-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, minmax(0, 1fr));
|
|
gap: 1px;
|
|
border: var(--ui-border);
|
|
background: var(--ui-color-line);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.telemetry-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.telemetry-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
</style>
|