diff --git a/studio-frontend/src/app/app.element.scss b/studio-frontend/src/app/app.element.scss index cfaee13..d803121 100644 --- a/studio-frontend/src/app/app.element.scss +++ b/studio-frontend/src/app/app.element.scss @@ -4,19 +4,26 @@ pointer-events: none; } -.btn-help { +// Layout utilities +.v-start { position: absolute; top: 16px; - right: 16px; +} +.v-after-toolbar { + position: absolute; + top: 60px; +} +.h-start { left: 16px } +.h-end { right: 16px } +.h-center { + left: 50%; + transform: translateX(-50%); } +// Toolbar stuff (TODO: Move this) .toolbar { display: flex; gap: 16px; - position: absolute; - top: 16px; - left: 50%; - transform: translateX(-50%); } .toolbar-group { @@ -91,16 +98,8 @@ } } -.help { - position: absolute; - top: 60px; - right: 16px; -} - +// Hierarchy (TODO: Probably move this) .hierarchy { - position: absolute; - top: 16px; - left: 16px; overflow: auto; box-sizing: border-box; diff --git a/studio-frontend/src/app/app.element.ts b/studio-frontend/src/app/app.element.ts index 54e5ed1..a2f869c 100644 --- a/studio-frontend/src/app/app.element.ts +++ b/studio-frontend/src/app/app.element.ts @@ -12,7 +12,6 @@ import { import { match } from "@storyteller/utility"; import { LitElement, html, unsafeCSS } from "lit"; import { customElement, state } from "lit/decorators.js"; -import { classMap } from "lit/directives/class-map.js"; import "./button.element"; import "./help.element"; @@ -188,8 +187,17 @@ export class AppElement extends LitElement { } protected override render = () => html` +
+ + Help + +
+ -