diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts
index 4e720e41cc..bd9ad2bdc7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/umb-backoffice.element.ts
@@ -12,7 +12,7 @@ export class UmbBackoffice extends LitElement {
:host {
display: flex;
flex-direction: column;
- min-height: 100%;
+ height: 100%;
width: 100%;
color: var(--uui-color-text);
font-size: 14px;
@@ -35,19 +35,19 @@ export class UmbBackoffice extends LitElement {
--uui-tab-text-hover: var(--uui-color-current-emphasis);
}
#main {
- width: 100%;
- height: calc(100% - 48px);
display: flex;
- box-sizing: border-box;
+ flex: 1;
+ overflow: hidden;
}
#nav-side-bar {
- width: 400px;
+ width: 300px;
background-color: var(--uui-color-surface);
height: 100%;
border-right: 1px solid var(--uui-color-border);
font-weight: 500;
display: flex;
flex-direction: column;
+ flex-shrink: 0;
}
#nav-side-bar b {
padding: var(--uui-size-6) var(--uui-size-8);
@@ -63,6 +63,7 @@ export class UmbBackoffice extends LitElement {
background-color: var(--uui-color-surface);
width: 100%;
display: flex;
+ flex: none;
gap: 16px;
align-items: center;
border-bottom: 1px solid var(--uui-color-border);
@@ -79,29 +80,11 @@ export class UmbBackoffice extends LitElement {
}
#editor-content {
padding: var(--uui-size-6);
- height: 100%;
display: flex;
+ flex: 1;
flex-direction: column;
gap: 16px;
}
- .editor-property {
- display: grid;
- grid-template-columns: 200px 600px;
- gap: 32px;
- }
- .editor-property uui-input,
- .editor-property uui-textarea {
- width: 100%;
- }
-
- uui-box hr {
- margin-bottom: var(--uui-size-6);
- }
-
- hr {
- border: 0;
- border-top: 1px solid var(--uui-color-border-alt);
- }
uui-tab {
font-size: 0.8rem;
@@ -109,6 +92,7 @@ export class UmbBackoffice extends LitElement {
#editor-bottom {
display: flex;
+ flex: none;
justify-content: end;
align-items: center;
height: 70px;
@@ -178,151 +162,7 @@ export class UmbBackoffice extends LitElement {
-
- Hero
-
-
-
Header
-
This is the main headline for the hero area on the Homepage
-
-
-
-
-
-
-
-
Description
-
Write something nice
-
-
-
I should probably write some more
-
- Warning, the operation you're about to perform might influence other part of
- Project Name. as well as other projects
-
-
-
Options
-
-
-
Disabled
-
This is the main headline for the hero area on the Homepage
-
-
-
-
-
-
-
-
Header
-
This is the main headline for the hero area on the Homepage
-
-
-
-
- Warning, the operation you're about to perform might influence other part of
- Project Name. as well as other projects
-
-
-
-
-
-
Options
-
This will show some options
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
-
-
-
Buttons
-
-
- Primary
-
-
-
- Button
- Button
- Button
- Button
- Button
-
-
-
-
-
- Positive
-
-
-
- Button
- Button
- Button
- Button
- Button
-
-
-
-
-
- Warning
-
-
-
- Button
- Button
- Button
- Button
- Button
-
-
-
-
-
- Danger
-
-
-
- Button
- Button
- Button
- Button
- Button
-
-
-
-
-
- Disabled
-
-
-
- Button
- Button
- Button
- Button
- Button
-
-
-
Save and preview
diff --git a/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts b/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts
index 5e46348369..a6fddb345f 100644
--- a/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts
+++ b/src/Umbraco.Web.UI.Client/src/mocks/handlers.ts
@@ -7,7 +7,7 @@ export const handlers = [
ctx.status(200),
ctx.json({
version: 'x.x.x',
- installed: false,
+ installed: true,
})
);
}),
diff --git a/src/Umbraco.Web.UI.Client/src/umb-app.ts b/src/Umbraco.Web.UI.Client/src/umb-app.ts
index ee9a9ab72b..e173027547 100644
--- a/src/Umbraco.Web.UI.Client/src/umb-app.ts
+++ b/src/Umbraco.Web.UI.Client/src/umb-app.ts
@@ -15,15 +15,15 @@ import { UmbRouter, UmbRoute } from './core/router';
const routes: Array = [
{
path: '/login',
- elementName: 'umb-login'
+ elementName: 'umb-login',
},
{
path: '/install',
- elementName: 'umb-installer'
+ elementName: 'umb-installer',
},
{
path: '/content',
- elementName: 'umb-backoffice'
+ elementName: 'umb-backoffice',
},
];
@@ -31,7 +31,9 @@ const routes: Array = [
@customElement('umb-app')
export class UmbApp extends LitElement {
static styles = css`
- :host {
+ :host,
+ #outlet {
+ display: block;
width: 100vw;
height: 100vh;
}
@@ -71,13 +73,12 @@ export class UmbApp extends LitElement {
this._router.push('/install');
return;
}
-
+
if (!this._authorized) {
this._router.push('/login');
} else {
this._router.push('/content');
}
-
} catch (error) {
console.log(error);
}