Restyle maintenance page.

This commit is contained in:
Sam Rose 2024-02-21 11:03:58 +00:00
parent 5c2a93a956
commit 5dbe68a9b1
No known key found for this signature in database
1 changed files with 102 additions and 21 deletions

View File

@ -1,27 +1,108 @@
<script> <script>
import { Page, Layout, Heading, Body, Link } from "@budibase/bbui"
import { MaintenanceType } from "@budibase/types" import { MaintenanceType } from "@budibase/types"
import { admin } from "stores/portal" import { admin } from "stores/portal"
import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte" import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
</script> </script>
{#each $admin.maintenance as maintenance} <div class="main">
{#if maintenance.type === MaintenanceType.SQS_MISSING} <div class="content">
<Page> <div class="hero">
<Layout> <BudibaseLogo />
<BudibaseLogo /> </div>
<Heading>Please upgrade your Budibase installation</Heading> <div>
<Body> {#each $admin.maintenance as maintenance}
We've detected that the version of Budibase you're using depends on a {#if maintenance.type === MaintenanceType.SQS_MISSING}
more recent version of the CouchDB database than what you have <h1 class="title">Please upgrade your Budibase installation</h1>
installed. <p>
</Body> We've detected that the version of Budibase you're using depends on
<Body> a more recent version of the CouchDB database than what you have
To resolve this, you can either rollback to a previous version of installed.
Budibase, or follow the migration guide <Link href="#">here</Link> </p>
to update to a later version of CouchDB. <p>
</Body> To resolve this, you can either rollback to a previous version of
</Layout> Budibase, or follow the migration guide to update to a later version
</Page> of CouchDB.
{/if} </p>
{/each} <div class="buttons">
<a class="button" href="https://docs.budibase.com"
>Migration guide</a
>
</div>
{/if}
{/each}
</div>
</div>
</div>
<style>
:root {
--spectrum-global-color-gray-600: rgb(144, 144, 144);
--spectrum-global-color-gray-900: rgb(255, 255, 255);
--spectrum-global-color-gray-800: rgb(227, 227, 227);
--bb-indigo: #6e56ff;
--bb-indigo-light: #9f8fff;
}
a {
color: #e7e7e7;
font-family: "Roboto", sans-serif;
border: none;
font-size: 15px;
border-radius: 15px;
padding: 8px 22px;
}
a:hover {
cursor: pointer;
}
.main {
font-size: 1.5em;
max-width: 700px;
margin: auto;
height: 100vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 1em;
}
.title {
font-weight: 400;
color: var(--spectrum-global-color-gray-900);
}
.buttons {
display: flex;
flex-direction: row;
justify-content: flex-start;
margin-top: 15px;
}
.button {
background-color: var(--bb-indigo);
}
.button:hover {
background-color: var(--bb-indigo-light);
}
.hero {
height: 60px;
margin: 10px 40px 10px 0;
}
.content {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: center;
gap: 1em;
}
h1 {
margin-bottom: 10px;
}
@media only screen and (max-width: 600px) {
.content {
flex-direction: column;
align-items: flex-start;
}
.main {
height: auto;
}
}
</style>