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