Use BBUI components instead of raw HTML.
This commit is contained in:
parent
3550ae8c1a
commit
19803f9182
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { MaintenanceType } from "@budibase/types"
|
||||
import { Heading, Body, Button, Layout } from "@budibase/bbui"
|
||||
import { admin } from "stores/portal"
|
||||
import BudibaseLogo from "../portal/_components/BudibaseLogo.svelte"
|
||||
</script>
|
||||
|
@ -9,25 +10,26 @@
|
|||
<div class="hero">
|
||||
<BudibaseLogo />
|
||||
</div>
|
||||
<div>
|
||||
<div class="inner-content">
|
||||
{#each $admin.maintenance as maintenance}
|
||||
{#if maintenance.type === MaintenanceType.SQS_MISSING}
|
||||
<h1 class="title">Please upgrade your Budibase installation</h1>
|
||||
<p>
|
||||
We've detected that the version of Budibase you're using depends on
|
||||
a more recent version of the CouchDB database than what you have
|
||||
installed.
|
||||
</p>
|
||||
<p>
|
||||
To resolve this, you can either rollback to a previous version of
|
||||
Budibase, or follow the migration guide to update to a later version
|
||||
of CouchDB.
|
||||
</p>
|
||||
<div class="buttons">
|
||||
<a class="button" href="https://docs.budibase.com"
|
||||
>Migration guide</a
|
||||
>
|
||||
</div>
|
||||
<Layout>
|
||||
<Heading>Please upgrade your Budibase installation</Heading>
|
||||
<Body>
|
||||
We've detected that the version of Budibase you're using depends
|
||||
on a more recent version of the CouchDB database than what you
|
||||
have installed.
|
||||
</Body>
|
||||
<Body>
|
||||
To resolve this, you can either rollback to a previous version of
|
||||
Budibase, or follow the migration guide to update to a later
|
||||
version of CouchDB.
|
||||
</Body>
|
||||
</Layout>
|
||||
<Button
|
||||
on:click={() => (window.location = "https://docs.budibase.com")}
|
||||
>Migration guide</Button
|
||||
>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
@ -35,27 +37,7 @@
|
|||
</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;
|
||||
|
@ -63,37 +45,23 @@
|
|||
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;
|
||||
margin: var(--spacing-l);
|
||||
}
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
gap: 1em;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
h1 {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.inner-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
|
|
@ -45,6 +45,9 @@ export const fetch = async (ctx: Ctx) => {
|
|||
maintenance: [],
|
||||
}
|
||||
|
||||
// TODO: remove
|
||||
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })
|
||||
|
||||
if (env.SELF_HOSTED) {
|
||||
if (await isSqsMissing()) {
|
||||
ctx.body.maintenance.push({ type: MaintenanceType.SQS_MISSING })
|
||||
|
|
Loading…
Reference in New Issue