Make apps table in portal mobile friendly

This commit is contained in:
Andrew Kingston 2021-09-14 16:21:30 +01:00
parent cc64b3f9b8
commit b3fa4e61e3
2 changed files with 15 additions and 3 deletions

View File

@ -28,7 +28,7 @@
</Heading> </Heading>
</div> </div>
</div> </div>
<div> <div class="desktop">
{#if app.updatedAt} {#if app.updatedAt}
{processStringSync("Updated {{ duration time 'millisecond' }} ago", { {processStringSync("Updated {{ duration time 'millisecond' }} ago", {
time: new Date().getTime() - new Date(app.updatedAt).getTime(), time: new Date().getTime() - new Date(app.updatedAt).getTime(),
@ -37,7 +37,7 @@
Never updated Never updated
{/if} {/if}
</div> </div>
<div> <div class="desktop">
<StatusLight <StatusLight
positive={!app.lockedYou && !app.lockedOther} positive={!app.lockedYou && !app.lockedOther}
notice={app.lockedYou} notice={app.lockedYou}
@ -52,7 +52,7 @@
{/if} {/if}
</StatusLight> </StatusLight>
</div> </div>
<div> <div class="desktop">
<StatusLight active={app.deployed} neutral={!app.deployed}> <StatusLight active={app.deployed} neutral={!app.deployed}>
{#if app.deployed}Published{:else}Unpublished{/if} {#if app.deployed}Published{:else}Unpublished{/if}
</StatusLight> </StatusLight>
@ -109,4 +109,10 @@
cursor: pointer; cursor: pointer;
transition: color 130ms ease; transition: color 130ms ease;
} }
@media (max-width: 640px) {
.desktop {
display: none !important;
}
}
</style> </style>

View File

@ -347,4 +347,10 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
@media (max-width: 640px) {
.appTable {
grid-template-columns: 1fr auto;
}
}
</style> </style>