Merge pull request 'Change layout' (#40) from change-layout into main

Reviewed-on: https://codeberg.org/macchiato/pages/pulls/40
3 years ago · e79c300c7d
parent b84b850d5a 59fdcf9310
commit e79c300c7d
4 changed files with 35 additions and 28 deletions
--- a/components/layout.js
+++ b/components/layout.js
@ -12,8 +12,14 @@ export class Layout extends HTMLElement {
      :host {
        display: flex;
        flex-direction: column;
+        align-items: stretch;
+        height: 100vh;
+        min-height: 100vh;
+        max-height: 100vh;
+        overflow-y: hidden;
+        position: relative;
      }
-      .m-page {
+      m-page {
        flex-grow: 1;
      }
    `
@ -45,11 +51,11 @@ export class Layout extends HTMLElement {

  get path() {
    const hash = (
-      window.location.hash.slice(1) || '/'
+      location.hash.slice(1) || '/'
    )
    return hash.startsWith('/') ? new URL(
      hash,
-      window.location
+      location.href
    ).pathname : hash
  }

--- a/components/page.js
+++ b/components/page.js
@ -42,9 +42,8 @@ addEventListener('message', event => {
 export class Page extends HTMLElement {
  constructor() {
    super()
-    const shadow = this.attachShadow({mode: 'open'})
+    this.attachShadow({mode: 'open'})
    this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
-    //this.editing = false
    this.textArea = document.createElement('textarea')
    this.textArea.addEventListener('input', e => {
      this.body = e.target.value
@ -52,7 +51,7 @@ export class Page extends HTMLElement {
    const div = document.createElement('div')
    div.classList.add('twrap')
    div.appendChild(this.textArea)
-    shadow.appendChild(div)
+    this.shadowRoot.appendChild(div)
  }

  connectedCallback() {
@ -60,8 +59,10 @@ export class Page extends HTMLElement {
    const style = document.createElement('style')
    style.textContent = `
      :host {
-        overflow-y: auto;
-        display: flex;
+        display: grid;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+        grid-template-areas: "main";
        flex-direction: column;
        align-items: stretch;
      }
@ -70,16 +71,22 @@ export class Page extends HTMLElement {
        display: flex;
        align-items: stretch;
        flex-direction: column;
+        grid-area: main;
      }
      textarea {
        padding: 5px 10px;
        font-size: 0.90em;
-        height: 50vh;
+        height: 100%;
+      }
+      textarea:focus {
+        height: 45vh;
      }
      iframe {
        border: none;
+        margin: 0;
+        padding: 0;
+        grid-area: main;
        width: 100%;
-        height: 90dvh;
      }
      :host(.editing) iframe {
        display: none;
@ -94,8 +101,6 @@ export class Page extends HTMLElement {
  }

  initFrame() {
-    const wrap = document.createElement('div')
-    this.shadowRoot.appendChild(wrap)
    const frame = document.createElement('iframe')
    if (this.csp !== undefined) {
      frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
@ -112,8 +117,8 @@ export class Page extends HTMLElement {
    frame.addEventListener('load', () => {
      this.display(this.body)
    })
-    wrap.appendChild(frame)
    this.frame = frame
+    this.shadowRoot.append(frame)
    this.textArea.addEventListener('blur', e => {
      this.display(e.target.value)
    })
--- a/index.html
+++ b/index.html
@ -4,20 +4,16 @@
    <title>macchiato.dev</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <style type="text/css">
-      html, body {
-        padding: 0;
-      }
-      html {
-        box-sizing: border-box;
-      }
-      body {
-        height: 100dvh;
-        max-width: 800px;
-        margin: 0 auto;
-      }
-      *, *:before, *:after {
-        box-sizing: inherit;
-      }
+html, body {
+  margin: 0;
+  padding: 0;
+}
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
    </style>
  </head>
  <body>
--- a/sw.js
+++ b/sw.js
@ -11,7 +11,7 @@ async function initCache() {
    '/components/dialog.js',
    '/forms/button-group.js',
    '/menu/dropdown.js',
-  ]) //1
+  ]) //2
 }

 self.addEventListener("install", event => {