macchiato
/
pages
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: https://codeberg.org/macchiato/pages/pulls/40
file-group-page
bat 3 years ago
parent b84b850d5a 59fdcf9310
commit e79c300c7d
4 changed files with 35 additions and 28 deletions
Show Stats Download Patch File Download Diff File

12
components/layout.js
Unescape Escape View File

@ -12,8 +12,14 @@ export class Layout extends HTMLElement {
:host { :host {
display: flex; display: flex;
flex-direction: column; 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; flex-grow: 1;
} }
` `
@ -45,11 +51,11 @@ export class Layout extends HTMLElement {
get path() { get path() {
const hash = ( const hash = (
window.location.hash.slice(1) || '/' location.hash.slice(1) || '/'
) )
return hash.startsWith('/') ? new URL( return hash.startsWith('/') ? new URL(
hash, hash,
window.location location.href
).pathname : hash ).pathname : hash
} }

25
components/page.js
Unescape Escape View File

@ -42,9 +42,8 @@ addEventListener('message', event => {
export class Page extends HTMLElement { export class Page extends HTMLElement {
constructor() { constructor() {
super() super()
const shadow = this.attachShadow({mode: 'open'}) this.attachShadow({mode: 'open'})
this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'" this.csp = "default-src 'self' 'unsafe-inline' 'unsafe-eval'"
//this.editing = false
this.textArea = document.createElement('textarea') this.textArea = document.createElement('textarea')
this.textArea.addEventListener('input', e => { this.textArea.addEventListener('input', e => {
this.body = e.target.value this.body = e.target.value
@ -52,7 +51,7 @@ export class Page extends HTMLElement {
const div = document.createElement('div') const div = document.createElement('div')
div.classList.add('twrap') div.classList.add('twrap')
div.appendChild(this.textArea) div.appendChild(this.textArea)
shadow.appendChild(div) this.shadowRoot.appendChild(div)
} }
connectedCallback() { connectedCallback() {
@ -60,8 +59,10 @@ export class Page extends HTMLElement {
const style = document.createElement('style') const style = document.createElement('style')
style.textContent = ` style.textContent = `
:host { :host {
overflow-y: auto; display: grid;
display: flex; grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-template-areas: "main";
flex-direction: column; flex-direction: column;
align-items: stretch; align-items: stretch;
} }
@ -70,16 +71,22 @@ export class Page extends HTMLElement {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column; flex-direction: column;
grid-area: main;
} }
textarea { textarea {
padding: 5px 10px; padding: 5px 10px;
font-size: 0.90em; font-size: 0.90em;
height: 50vh; height: 100%;
}
textarea:focus {
height: 45vh;
} }
iframe { iframe {
border: none; border: none;
margin: 0;
padding: 0;
grid-area: main;
width: 100%; width: 100%;
height: 90dvh;
} }
:host(.editing) iframe { :host(.editing) iframe {
display: none; display: none;
@ -94,8 +101,6 @@ export class Page extends HTMLElement {
} }
initFrame() { initFrame() {
const wrap = document.createElement('div')
this.shadowRoot.appendChild(wrap)
const frame = document.createElement('iframe') const frame = document.createElement('iframe')
if (this.csp !== undefined) { if (this.csp !== undefined) {
frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation" frame.sandbox = "allow-same-origin allow-scripts allow-top-navigation"
@ -112,8 +117,8 @@ export class Page extends HTMLElement {
frame.addEventListener('load', () => { frame.addEventListener('load', () => {
this.display(this.body) this.display(this.body)
}) })
wrap.appendChild(frame)
this.frame = frame this.frame = frame
this.shadowRoot.append(frame)
this.textArea.addEventListener('blur', e => { this.textArea.addEventListener('blur', e => {
this.display(e.target.value) this.display(e.target.value)
}) })

24
index.html
Unescape Escape View File

@ -4,20 +4,16 @@
<title>macchiato.dev</title> <title>macchiato.dev</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css"> <style type="text/css">
html, body { html, body {
padding: 0; margin: 0;
} padding: 0;
html { }
box-sizing: border-box; html {
} box-sizing: border-box;
body { }
height: 100dvh; *, *:before, *:after {
max-width: 800px; box-sizing: inherit;
margin: 0 auto; }
}
*, *:before, *:after {
box-sizing: inherit;
}
</style> </style>
</head> </head>
<body> <body>

2
sw.js
Unescape Escape View File

@ -11,7 +11,7 @@ async function initCache() {
'/components/dialog.js', '/components/dialog.js',
'/forms/button-group.js', '/forms/button-group.js',
'/menu/dropdown.js', '/menu/dropdown.js',
]) //1 ]) //2
} }
self.addEventListener("install", event => { self.addEventListener("install", event => {

Write Preview
Loading…
Cancel
Save