From 7ed86a992d24de08cb6cc63fae434d942c2b18ab Mon Sep 17 00:00:00 2001 From: Sean Cross Date: Sat, 2 Dec 2023 19:25:12 +0800 Subject: [PATCH] dashboard: wip getting dashboard working Signed-off-by: Sean Cross --- src/interface/dashboard.ts | 57 ++++--- static/css/desktop.css | 105 +++++++++++- static/css/fancy.css | 334 ------------------------------------- static/index.html | 3 +- 4 files changed, 130 insertions(+), 369 deletions(-) delete mode 100644 static/css/fancy.css diff --git a/src/interface/dashboard.ts b/src/interface/dashboard.ts index c01e0d1..2c33f6c 100644 --- a/src/interface/dashboard.ts +++ b/src/interface/dashboard.ts @@ -11,36 +11,39 @@ class DashboardItem { } render(): HTMLElement { var field: HTMLElement = document.createElement("div"); - field.classList.add("fieldset-item"); + field.classList.add("dashboard-item"); - var navViewIcon = document.createElement("span"); - navViewIcon.setAttribute("aria-hidden", "true"); - navViewIcon.classList.add("las"); - navViewIcon.classList.add("la-3x"); - navViewIcon.classList.add("la-" + this.id); - navViewIcon.classList.add("icon"); + var itemTitle = document.createElement("span"); + itemTitle.classList.add("dashboard-item-title"); + itemTitle.innerText = this.name; + // itemTitle.setAttribute("aria-hidden", "true"); + // itemTitle.classList.add("las"); + // itemTitle.classList.add("la-3x"); + // itemTitle.classList.add("la-" + this.id); + // itemTitle.classList.add("icon"); - var inputStack: HTMLElement = document.createElement("div"); - inputStack.classList.add("input-stack"); + var itemValue: HTMLElement = document.createElement("span"); + itemValue.classList.add("dashboard-item-value"); + itemValue.innerHTML = this.value; - var label: HTMLElement = document.createElement("label"); - label.setAttribute("for", this.id); - label.setAttribute("id", this.id); - label.setAttribute("aria-hidden", "true"); - label.innerText = this.name; + // // var label: HTMLElement = document.createElement("label"); + // // label.setAttribute("for", this.id); + // // label.setAttribute("id", this.id); + // // label.setAttribute("aria-hidden", "true"); + // // label.innerText = this.name; - var input: HTMLElement = document.createElement("input"); - input.setAttribute("name", this.id); - input.setAttribute("aria-labelledby", this.id); - input.setAttribute("type", "range"); - input.setAttribute("value", this.value); - input.setAttribute("max", "10"); - input.setAttribute("style", "--track-fill: 30%"); + // var input: HTMLElement = document.createElement("input"); + // input.setAttribute("name", this.id); + // input.setAttribute("aria-labelledby", this.id); + // input.setAttribute("type", "range"); + // input.setAttribute("value", this.value); + // input.setAttribute("max", "10"); + // input.setAttribute("style", "--track-fill: 30%"); - inputStack.appendChild(label); - inputStack.appendChild(input); - field.appendChild(navViewIcon); - field.appendChild(inputStack); + // inputStack.appendChild(label); + // inputStack.appendChild(input); + field.appendChild(itemTitle); + field.appendChild(itemValue); return field; } @@ -61,10 +64,13 @@ class DashboardSection { var header: HTMLElement = document.createElement("header"); var h2: HTMLElement = document.createElement("h2"); h2.innerText = this.name; + header.classList.add("dashboard-section-header"); header.appendChild(h2); + root.classList.add("dashboard-section"); root.appendChild(header); var fieldset: HTMLElement = document.createElement("fieldset"); + fieldset.classList.add("dashboard-section"); for (var i = 0; i < this.items.length; i++) { fieldset.appendChild(this.items[i].render()); } @@ -118,6 +124,7 @@ export class DashboardWidget implements FarpatchWidget { } onInit(): void { + this.view.classList.add("dashboard-view"); for (var i = 0; i < this.sections.length; i++) { this.view.appendChild(this.sections[i].render()); } diff --git a/static/css/desktop.css b/static/css/desktop.css index 4772307..75f21cb 100644 --- a/static/css/desktop.css +++ b/static/css/desktop.css @@ -1,3 +1,48 @@ +:root { + --surface1: lch(90 0 0); + --surface2: lch(100 0 0); + --surface3: lch(98 0 0); + --surface4: lch(85 0 0); + + --text1: lch(20 0 0); + --text2: lch(40 0 0); + + --thumb-highlight-color: lch(0 0 0 / 20%); + + --space-xxs: .25rem; + --space-xs: .5rem; + --space-sm: 1rem; + --space-md: 0.5rem; + --space-lg: 8rem; + --space-xl: 3rem; + --space-xxl: 6rem; + + --dashboard-section-width: 45ch; + + --isLTR: 1; + --isRTL: -1; + + &:dir(rtl) { + --isLTR: -1; + --isRTL: 1; + } + + /* @media (prefers-color-scheme: dark) { + & { + --surface1: lch(10 0 0); + --surface2: lch(15 0 0); + --surface3: lch(20 0 0); + --surface4: lch(25 0 0); + + --text1: lch(95 0 0); + --text2: lch(75 0 0); + + --thumb-highlight-color: lch(100 0 0 / 20%); + } + } */ +} + + body { padding: 0; margin: 0; @@ -87,12 +132,56 @@ main { height: 100%; width: 100%; } -/* .sidenav-item-toggle { - position: absolute; - bottom: 0; -} */ -/* .sidenav-item-toggle { - content: ''; - flex-grow: 1; -} */ +/* Dashboard Settings */ +.dashboard-section { + display: grid; + gap: var(--space-md); +} + +.dashboard-section-header { + display: grid; + gap: var(--space-xxs); +} + +.dashboard-view { + max-width: 89vw; + display: grid; + gap: var(--space-xl) var(--space-xxl); + --repeat: auto-fit; + grid-template-columns: + repeat(var(--repeat), minmax(min(10ch, 100%), var(--dashboard-section-width))); + align-items: flex-start; + + @media (orientation: landscape) and (width >=640px) { + & { + --repeat: 2; + } + } +} + +.dashboard-item { + background: var(--surface3); + transition: background .2s ease; + + display: grid; + grid-template-columns: var(--space-lg) 1fr; + gap: var(--space-md); + + padding-block: var(--space-sm); + padding-inline: var(--space-md); +} + +.dashboard-section { + border: 1px solid var(--surface4); + background: var(--surface4); + padding: 0; + margin: 0; + display: grid; + gap: 1px; + border-radius: var(--space-sm); + overflow: hidden; + transition: box-shadow 0.3s ease; +} + +.dashboard-item-title {} diff --git a/static/css/fancy.css b/static/css/fancy.css deleted file mode 100644 index 928b852..0000000 --- a/static/css/fancy.css +++ /dev/null @@ -1,334 +0,0 @@ -@custom-media --motionOK (prefers-reduced-motion: no-preference); - -:root { - --surface1: lch(10 0 0); - --surface2: lch(15 0 0); - --surface3: lch(20 0 0); - --surface4: lch(25 0 0); - - --text1: lch(95 0 0); - --text2: lch(75 0 0); - - --brand: lch(64 20 237); - --brand-bg1: lch(70 64 349); - --brand-bg2: lch(60 84 300); - - --brand-bg-gradient: linear-gradient( - to bottom, - var(--brand-bg1), - var(--brand-bg2) - ); - - --thumb-highlight-color: lch(100 0 0 / 20%); - - --space-xxs: .25rem; - --space-xs: .5rem; - --space-sm: 1rem; - --space-md: 1.5rem; - --space-lg: 2rem; - --space-xl: 3rem; - --space-xxl: 6rem; - - --isLTR: 1; - --isRTL: -1; - - &:dir(rtl) { - --isLTR: -1; - --isRTL: 1; - } - - @media (prefers-color-scheme: light) { - & { - --surface1: lch(90 0 0); - --surface2: lch(100 0 0); - --surface3: lch(98 0 0); - --surface4: lch(85 0 0); - - --text1: lch(20 0 0); - --text2: lch(40 0 0); - - --brand: lch(64 40 237); - --brand-bg1: lch(50 64 349); - --brand-bg2: lch(40 84 300); - - --thumb-highlight-color: lch(0 0 0 / 20%); - } - } -} - -form { - max-width: 89vw; - display: grid; - gap: var(--space-xl) var(--space-xxl); - --repeat: auto-fit; - grid-template-columns: - repeat(var(--repeat), minmax(min(10ch, 100%), 35ch)); - align-items: flex-start; - - @media (orientation: landscape) and (width >= 640px) { & { - --repeat: 2; - }} - } - - section { - display: grid; - gap: var(--space-md); - } - - header { - display: grid; - gap: var(--space-xxs); - } - - fieldset { - border: 1px solid var(--surface4); - background: var(--surface4); - padding: 0; - margin: 0; - display: grid; - gap: 1px; - border-radius: var(--space-sm); - overflow: hidden; - transition: box-shadow .3s ease; - - &:focus-within { - box-shadow: 0 5px 20px -10px hsl(0 0% 0% / 50%); - } - } - - input[type="range"] { - --track-height: .5ex; - --track-fill: 0%; - --thumb-size: 3ex; - --thumb-offset: -1.25ex; - --thumb-highlight-size: 0px; - - display: block; - inline-size: 100%; - margin: 1ex 0; - appearance: none; - background: transparent; - outline-offset: 5px; - - @media (hover: none) { - & { - --thumb-size: 30px; - --thumb-offset: -14px; - } - } - - &::-webkit-slider-runnable-track { - appearance: none; - block-size: var(--track-height); - border-radius: 5ex; - background: - linear-gradient( - to right, - transparent var(--track-fill), - var(--surface1) 0% - ), - var(--brand-bg-gradient) fixed; - } - - &::-moz-range-track { - appearance: none; - block-size: var(--track-height); - border-radius: 5ex; - background: - linear-gradient( - to right, - transparent var(--track-fill), - var(--surface1) 0% - ), - var(--brand-bg-gradient) fixed; - } - - &::-webkit-slider-thumb { - appearance: none; - cursor: ew-resize; - border: 3px solid var(--surface3); - block-size: var(--thumb-size); - inline-size: var(--thumb-size); - margin-block-start: var(--thumb-offset); - border-radius: 50%; - background: var(--brand-bg-gradient) fixed; - box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color); - - @media (--motionOK) { - & { - transition: box-shadow .1s ease; - } - } - - @nest .fieldset-item:focus-within & { - border-color: var(--surface2); - } - } - - &::-moz-range-thumb { - appearance: none; - cursor: ew-resize; - border: 3px solid var(--surface3); - block-size: var(--thumb-size); - inline-size: var(--thumb-size); - margin-block-start: var(--thumb-offset); - border-radius: 50%; - background: var(--brand-bg-gradient) fixed; - box-shadow: 0 0 0 var(--thumb-highlight-size) var(--thumb-highlight-color); - - @media (--motionOK) { - & { - transition: box-shadow .1s ease; - } - } - - @nest .fieldset-item:focus-within & { - border-color: var(--surface2); - } - } - - &:is(:hover,:active) { - --thumb-highlight-size: 10px; - } - } - - input[type="checkbox"] { - inline-size: var(--space-sm); - block-size: var(--space-sm); - margin: 0; - outline-offset: 5px; - accent-color: var(--brand); - position: relative; - transform-style: preserve-3d; - cursor: pointer; - - &:hover::before { - --thumb-scale: 1; - } - - @media (hover: none) { - & { - inline-size: var(--space-md); - block-size: var(--space-md); - } - } - - &::before { - --thumb-scale: .01; - --thumb-highlight-size: var(--space-xl); - - content: ""; - inline-size: var(--thumb-highlight-size); - block-size: var(--thumb-highlight-size); - clip-path: circle(50%); - position: absolute; - inset-block-start: 50%; - inset-inline-start: 50%; - background: var(--thumb-highlight-color); - transform-origin: center center; - transform: - translateX(calc(var(--isRTL) * 50%)) - translateY(-50%) - translateZ(-1px) - scale(var(--thumb-scale)) - ; - will-change: transform; - - @media (--motionOK) { - & { - transition: transform .2s ease; - } - } - } - } - - .fieldset-item { - background: var(--surface3); - transition: background .2s ease; - - display: grid; - grid-template-columns: var(--space-lg) 1fr; - gap: var(--space-md); - - padding-block: var(--space-sm); - padding-inline: var(--space-md); - - @media (width >= 540px) { - grid-template-columns: var(--space-xxl) 1fr; - gap: var(--space-xs); - padding-block: var(--space-md); - padding-inline: 0 var(--space-xl); - } - - &:focus-within { - background: var(--surface2); - - & svg { - fill: white; - } - - & picture { - clip-path: circle(50%); - background: var(--brand-bg-gradient) fixed; - } - } - - & > :is(.input-stack, label) { - display: grid; - gap: var(--space-xs); - } - - & > .input-stack > label { - display: contents; - } - - & > picture { - block-size: var(--space-xl); - inline-size: var(--space-xl); - clip-path: circle(40%); - display: inline-grid; - place-content: center; - background: var(--surface3) fixed; - - @media (--motionOK) { - & { - transition: clip-path .3s ease; - } - } - } - - & svg { - fill: var(--text2); - block-size: var(--space-md); - } - - & > :is(picture, input[type="checkbox"]) { - place-self: center; - } - } - - small { - color: var(--text2); - line-height: 1.5; - } - - .github-corner { - color: var(--surface1); - fill: var(--surface3); - - &:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out - } - } - - @keyframes octocat-wave{ - 0%,100% { - transform: rotate(0) - } - 20%,60% { - transform: rotate(-25deg) - } - 40%,80% { - transform: rotate(10deg) - } - } \ No newline at end of file diff --git a/static/index.html b/static/index.html index ac759a4..15d6374 100644 --- a/static/index.html +++ b/static/index.html @@ -7,7 +7,6 @@ - Farpatch @@ -16,4 +15,4 @@ - \ No newline at end of file +