From eeb2784da77939ce30f7695f06f385fe506a0d95 Mon Sep 17 00:00:00 2001 From: nazeh Date: Fri, 30 Aug 2024 11:11:02 +0300 Subject: [PATCH] examples(authz): style fixes --- examples/authz/3rd-party-app/src/js/main.js | 69 --------- .../3rd-party-app/src/pubky-auth-widget.js | 48 +++++-- .../authz/3rd-party-app/src/styles/style.css | 134 ------------------ 3 files changed, 35 insertions(+), 216 deletions(-) delete mode 100644 examples/authz/3rd-party-app/src/js/main.js delete mode 100644 examples/authz/3rd-party-app/src/styles/style.css diff --git a/examples/authz/3rd-party-app/src/js/main.js b/examples/authz/3rd-party-app/src/js/main.js deleted file mode 100644 index 77ebca1..0000000 --- a/examples/authz/3rd-party-app/src/js/main.js +++ /dev/null @@ -1,69 +0,0 @@ -import 'the-new-css-reset/css/reset.css'; -import '../styles/style.css'; -import QRCode from 'qrcode'; - -globalThis.pubkyAuthWidgetState = { - open: false, - qr: false -}; - -render(); - -function widget() { - return ` -
- -
-

Scan or copy Pubky auth URL

-
- -

pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5

- - -
-
- `; -} - -globalThis.flip = () => { - globalThis.pubkyAuthWidgetState.open = - !globalThis.pubkyAuthWidgetState.open; - - - const widget = document.querySelector("#widget"); - widget.classList = widget.classList.contains("open") - ? [...widget.classList].filter(n => n !== "open") - : [...widget.classList, "open"]; - - if (!globalThis.pubkyAuthWidgetState.qr) { - let qrURL = "pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5"; - - const canvas = document.getElementById("qr"); - console.log({ qrURL, canvas }) - - QRCode.toCanvas(canvas, qrURL, { - margin: 2, - scale: 8, - - color: { - light: '#fff', - dark: '#000', - }, - }); - - globalThis.pubkyAuthWidgetState.qr = true - } -}; - -function render() { - document.querySelector('#app').innerHTML = ` -
-

Third Party app!

-

You are NOT logged in.

-
- ${widget()} -`; -} diff --git a/examples/authz/3rd-party-app/src/pubky-auth-widget.js b/examples/authz/3rd-party-app/src/pubky-auth-widget.js index 1c94053..29f291f 100644 --- a/examples/authz/3rd-party-app/src/pubky-auth-widget.js +++ b/examples/authz/3rd-party-app/src/pubky-auth-widget.js @@ -65,6 +65,16 @@ export class PubkyAuthWidget extends LitElement { static get styles() { return css` + * { + box-sizing: border-box; + } + + :host { + --full-width: 22rem; + --full-height: 31rem; + --header-height: 3rem; + } + button { background: none; border: none; @@ -79,7 +89,6 @@ export class PubkyAuthWidget extends LitElement { /** End reset */ #widget { - font-size: 10px; color: white; position: fixed; @@ -97,8 +106,8 @@ export class PubkyAuthWidget extends LitElement { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); - width: 10em; - height: 4em; + width: 7rem; + height: var(--header-height); will-change: height,width; transition-property: height, width; @@ -107,42 +116,54 @@ export class PubkyAuthWidget extends LitElement { } #widget.open{ - width: 35em; - height: 47em; + width: var(--full-width); + height: var(--full-height); } .header { width: 100%; - padding: 1em; + height: var(--header-height); + display: flex; + justify-content: center; + align-items: center; } #widget-content{ - padding: 1.6em + width: var(--full-width); + padding: 0 1rem } #widget p { - font-size: 1.4em; - line-height: 1em; + font-size: .87rem; + line-height: 1rem; text-align: center; color: #fff; opacity: .3; + + /* Fix flash wrap in open animation */ + text-wrap: nowrap; } #qr { - width: 30em !important; - height: 30em !important; + width: 18em !important; + height: 18em !important; } .card { background: #3b3b3b; border-radius: 5px; - padding: 1em; - margin-top: 1em; + padding: 1rem; + margin-top: 1rem; display: flex; justify-content: center; align-items: center; } + .card.url { + padding: .625rem; + justify-content: space-between; + } + .url p { display: flex; align-items: center; @@ -158,6 +179,7 @@ export class PubkyAuthWidget extends LitElement { height: 1px; background-color: #3b3b3b; flex: 1 1; + margin-bottom: 1rem; } ` } diff --git a/examples/authz/3rd-party-app/src/styles/style.css b/examples/authz/3rd-party-app/src/styles/style.css deleted file mode 100644 index 0a8a075..0000000 --- a/examples/authz/3rd-party-app/src/styles/style.css +++ /dev/null @@ -1,134 +0,0 @@ -:root { - font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', - Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - color: white; - - background: radial-gradient( - circle, - transparent 20%, - #151718 20%, - #151718 80%, - transparent 80%, - transparent - ), - radial-gradient( - circle, - transparent 20%, - #151718 20%, - #151718 80%, - transparent 80%, - transparent - ) - 25px 25px, - linear-gradient(#202020 1px, transparent 2px) 0 -1px, - linear-gradient(90deg, #202020 1px, #151718 2px) -1px 0; - background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px; -} - -body { - margin: 0; - display: flex; - place-items: center; - min-width: 20rem; - min-height: 100vh; - font-family: var(--font-family); -} - -h1 { - font-weight: bold; - font-size: 3.2rem; - line-height: 1.1; -} - -button { - cursor: pointer -} - -#app { - max-width: 80rem; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -#widget { - position: fixed; - top: 1rem; - right: 1rem; - - background-color:red; - - z-index: 99999; - overflow: hidden; - background: rgba(43, 43, 43, .7372549019607844); - border: 1px solid #3c3c3c; - box-shadow: 0 10px 34px -10px rgba(236, 243, 222, .05); - border-radius: 8px; - padding: 1rem; - -webkit-backdrop-filter: blur(8px); - backdrop-filter: blur(8px); - - width: 8rem; - height: 3.31rem; - - will-change: height,width; - transition-property: height, width; - transition-duration: 200ms; - transition-timing-function: ease-in; -} - -#widget.open{ - width: 22rem; - height: 30.3rem; -} - - -#widget #widget-content{ - display: none -} - -#widget.open #widget-content{ - display: block -} - -#widget p { - font-size: 0.8rem; - line-height: 1.6rem; - text-align: center; - color: #fff; - opacity: .3; -} - -.card { - background: #3b3b3b; - border-radius: 5px; - padding: .625rem; - margin-top: 1rem; - display: flex; - justify-content: space-between; -} - -.url p { - display: flex; - align-items: center; - - line-height: 1!important; - width: 90%; - overflow: hidden; - text-overflow: ellipsis; - text-wrap: nowrap; -} - -@media (prefers-color-scheme: light) { - :root { - color: var(--color-dark); - background-color: var(--color-light); - } - .author:hover { - color: var(--color-primary-hover); - } - button, - .gitRepo { - background-color: var(--color-button-light); - } -}