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 @@
-