ClusterCockpit/cc-backend
1
0
Fork 0
mirror of https://github.com/ClusterCockpit/cc-backend synced 2024-11-10 08:57:25 +01:00
Code Issues Packages Releases Activity

fix: correct status view columns on mobile displays

Browse Source
This commit is contained in:
Christoph Kluge 2024-05-22 14:21:54 +02:00
parent dff7aeefb8
commit b48d1b8ad6
1 changed files with 21 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/frontend/src/Status.root.svelte
View File

@ -315,20 +315,11 @@
<!-- Loading indicator & Refresh --> <!-- Loading indicator & Refresh -->
<Row cols={3}> <Row cols={{ lg: 3, md: 3, sm: 1 }}>
<Col xs="auto" style="align-self: flex-end;"> <Col style="">
<h4 class="mb-0">Current utilization of cluster "{cluster}"</h4> <h4 class="mb-0">Current utilization of cluster "{cluster}"</h4>
</Col> </Col>
<Col xs="auto" style="margin-left: 0.25rem;"> <Col class="mt-2 mt-md-0 text-md-end">
{#if $initq.fetching || $mainQuery.fetching}
<Spinner />
{:else if $initq.error}
<Card body color="danger">{$initq.error.message}</Card>
{:else}
<!-- ... -->
{/if}
</Col>
<Col xs="auto" style="margin-left: auto;">
<Button <Button
outline outline
color="secondary" color="secondary"
@ -337,7 +328,7 @@
<Icon name="bar-chart-line" /> Select Histograms <Icon name="bar-chart-line" /> Select Histograms
</Button> </Button>
</Col> </Col>
<Col xs="auto" style="margin-left: 0.25rem;"> <Col class="mt-2 mt-md-0">
<Refresher <Refresher
initially={120} initially={120}
on:reload={() => { on:reload={() => {
@ -347,6 +338,17 @@
/> />
</Col> </Col>
</Row> </Row>
<Row cols={1} class="text-center mt-3">
<Col>
{#if $initq.fetching || $mainQuery.fetching}
<Spinner />
{:else if $initq.error}
<Card body color="danger">{$initq.error.message}</Card>
{:else}
<!-- ... -->
{/if}
</Col>
</Row>
{#if $mainQuery.error} {#if $mainQuery.error}
<Row cols={1}> <Row cols={1}>
<Col> <Col>
@ -361,8 +363,8 @@
{#if $initq.data && $mainQuery.data} {#if $initq.data && $mainQuery.data}
{#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i} {#each $initq.data.clusters.find((c) => c.name == cluster).subClusters as subCluster, i}
<Row cols={2} class="mb-3 justify-content-center"> <Row cols={{ lg: 2, md: 1 , sm: 1}} class="mb-3 justify-content-center">
<Col md="4" class="px-3"> <Col class="px-3">
<Card class="h-auto mt-1"> <Card class="h-auto mt-1">
<CardHeader> <CardHeader>
<CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle> <CardTitle class="mb-0">SubCluster "{subCluster.name}"</CardTitle>
@ -433,7 +435,7 @@
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>
<Col class="px-3"> <Col class="px-3 mt-2 mt-lg-0">
<div bind:clientWidth={plotWidths[i]}> <div bind:clientWidth={plotWidths[i]}>
{#key $mainQuery.data.nodeMetrics} {#key $mainQuery.data.nodeMetrics}
<Roofline <Roofline
@ -457,7 +459,7 @@
<!-- Usage Stats as Histograms --> <!-- Usage Stats as Histograms -->
<Row cols={4}> <Row cols={{ lg: 4, md: 2, sm: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth1}> <div bind:clientWidth={colWidth1}>
<h4 class="text-center"> <h4 class="text-center">
@ -580,7 +582,7 @@
</Col> </Col>
</Row> </Row>
<hr class="my-2" /> <hr class="my-2" />
<Row cols={2}> <Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> <div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}
@ -610,7 +612,7 @@
{/key} {/key}
</Col> </Col>
</Row> </Row>
<Row cols={2}> <Row cols={{ lg: 2, md: 1 }}>
<Col class="p-2"> <Col class="p-2">
<div bind:clientWidth={colWidth2}> <div bind:clientWidth={colWidth2}>
{#key $mainQuery.data.stats} {#key $mainQuery.data.stats}