From ab4affcc688eda032387d24cffa411bc6b128c63 Mon Sep 17 00:00:00 2001 From: jojobyte <184880+jojobyte@users.noreply.github.com> Date: Sun, 7 Apr 2024 15:17:14 -0600 Subject: [PATCH] style(ui): :sparkles: add placeholders for transactions & integrations --- src/components/contacts-list.js | 29 ++++--- src/index.css | 11 ++- src/main.js | 39 ++++++++- src/styles/components.css | 139 ++++++++++++++++++++++---------- src/styles/dialog.css | 10 ++- src/styles/form.css | 19 +++-- src/styles/nav.css | 5 +- src/styles/theme.css | 28 ++++--- 8 files changed, 202 insertions(+), 78 deletions(-) diff --git a/src/components/contacts-list.js b/src/components/contacts-list.js index bdce221..307f4eb 100644 --- a/src/components/contacts-list.js +++ b/src/components/contacts-list.js @@ -134,6 +134,22 @@ const initialState = { let itemSub = inId ? `href="/#!/contact/${atUser || inId}" data-id="${inId}"` : '' + let itemCtrls = paired + ? html`` + : '' + + itemCtrls = '' // temp override return html` @@ -142,18 +158,7 @@ const initialState = {

${itemAlias}

${itemName}
- + ${itemCtrls} ` }, diff --git a/src/index.css b/src/index.css index 2b9b83c..22374d6 100644 --- a/src/index.css +++ b/src/index.css @@ -31,7 +31,7 @@ main h1 { text-align: center; } main header { margin: 2.5rem auto 0; - padding: 0 2rem; + padding: 0 1rem; /* max-width: 1100px; */ min-height: 85px; width: 100%; @@ -458,6 +458,10 @@ main > header + section button { } @media (min-width: 650px) { + main { + max-width: 60rem; + padding: 0 1rem; + } main header { padding: 0; } @@ -486,4 +490,9 @@ main > header + section button { header { flex-direction: row; } +} +@media (min-width: 980px) { + main { + padding: 0; + } } \ No newline at end of file diff --git a/src/main.js b/src/main.js index 859bffb..eae2f7d 100644 --- a/src/main.js +++ b/src/main.js @@ -148,12 +148,22 @@ let bodyNav let dashBalance let mainApp = document.querySelector('main#app') +mainApp.insertAdjacentHTML('afterbegin', html` +
+
+
+
+`) + +let integrationsSection = mainApp.querySelector('.integration-sect') +let mainAppGrid = mainApp.querySelector('.main-sect') + // init components let mainFtr = await setupMainFooter(mainApp) let sendRequestBtn = await setupSendRequestBtns(mainApp) let svgSprite = await setupSVGSprite(mainApp) let contactsList = await setupContactsList( - mainApp, + mainAppGrid, { events: { handleClick: state => async event => { @@ -805,6 +815,33 @@ async function main() { }) sendRequestBtn.render() + integrationsSection.insertAdjacentHTML('beforeend', html` +
+
+
Coming soon
+

Earn interest with

+
+
+ + + + + + +
+
+ `) + mainAppGrid.insertAdjacentHTML('beforeend', html` +
+
+
Transactions
+
+
+ Coming soon +
+
+ `) + document.addEventListener('click', async event => { let { // @ts-ignore diff --git a/src/styles/components.css b/src/styles/components.css index cc131c6..1a1243a 100644 --- a/src/styles/components.css +++ b/src/styles/components.css @@ -1,42 +1,31 @@ -.contacts { - gap: .25rem; - padding: 0 1rem; -} -.contacts > div { - flex: 1 1 auto; - height: 30rem; - border-radius: 1rem; - overflow: auto; +.cols { display: flex; + gap: 1rem; flex-direction: column; } -.contacts > div:has(> span) { - justify-content: center; - align-items: center; +.cols > section { + flex: 1 1 auto; + gap: .25rem; + padding: 0 1rem; } -.contacts > header { +.cols > section > header { flex-direction: row; align-items: center; margin: 0; padding: 0; min-height: initial; + height: 2rem; } -.contacts > header > button, -.contacts > header > div > button, -.contacts > header > form > button { - color: var(--dark-200); - - font-size: 0.75rem; - font-style: normal; - font-weight: 700; - line-height: normal; -} -.contacts > header > form, -.contacts > header > div { +.cols > section > div { + flex: 1 1 auto; + height: 30rem; + border-radius: 1rem; + overflow: auto; display: flex; + flex-direction: column; } -.contacts > div > a, -.contacts > div > article { +.cols > section > div > a, +.cols > section > div > article { display: flex; padding: 1.25rem 1.5rem; /* justify-content: space-between; */ @@ -47,10 +36,14 @@ cursor: pointer; text-decoration: none; } +.cols > section > div:has(> span) { + justify-content: center; + align-items: center; +} -.contacts h4, -.contacts h5, -.contacts h6 { +.cols h4, +.cols h5, +.cols h6 { padding: 0; margin: 0; font-style: normal; @@ -58,16 +51,31 @@ line-height: 2; font-size: .75rem; } -.contacts h4 { +.cols h4 { color: var(--dark-100); font-size: .875rem; } -.contacts h5 { +.cols h5 { color: var(--dark-400); } -.contacts h6 { +.cols h6 { color: var(--dark-200); } +.cols > section > div > a > address, +.cols > section > div > article > address { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 0.375rem; + font-style: normal; + flex: 1 1 auto; +} +.cols > section > div > a > aside { + display: flex; +} +.cols > section > div > a > aside > button { + padding: 0.5rem; +} .avatar { display: flex; @@ -84,26 +92,69 @@ background-repeat: no-repeat; } -.contacts > div > a > address, -.contacts > div > article > address { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 0.375rem; +.contacts { +} +.contacts > div { +} +.contacts > div:has(> span) { +} +.contacts > header { +} +.contacts > header > button, +.contacts > header > div > button, +.contacts > header > form > button { + color: var(--dark-200); + + font-size: 0.75rem; font-style: normal; - flex: 1 1 auto; + font-weight: 700; + line-height: normal; } -.contacts > div > a > aside { +.contacts > header > form, +.contacts > header > div { display: flex; } -.contacts > div > a > aside > button { - padding: 0.5rem; + +.integration-sect > section > header { + flex-direction: column; + align-items: start; + height: 3rem; +} +.integration-sect > section > div { + background-color: transparent; + flex-direction: row; + height: auto; + gap: 1rem; + border-radius: 0; +} +.integration-sect > section > div > a, +.integration-sect > section > div > article { + padding: 1rem 0; + /* justify-content: space-between; */ + align-items: center; + align-self: stretch; + gap: 1rem; + user-select: none; + cursor: pointer; + text-decoration: none; } + @media (min-width: 650px) { - .contacts { + .cols { + /* flex-direction: row; */ + } + .cols > section { padding: 0; } } +@media (min-width: 980px) { + .cols { + flex-direction: row; + } + .cols > section:last-of-type:not(:first-of-type) { + flex: 0 0 20rem; + } +} diff --git a/src/styles/dialog.css b/src/styles/dialog.css index 0613752..74c3442 100644 --- a/src/styles/dialog.css +++ b/src/styles/dialog.css @@ -414,14 +414,12 @@ dialog.responsive fieldset.share section { gap: 1rem; display: flex; flex-direction: column; + width: 100%; } dialog.responsive fieldset.share section article { flex-direction: column; align-items: stretch; } -dialog.responsive fieldset.share:not(.solo) { - min-width: 44rem; -} dialog.responsive fieldset.contact .avatar { @@ -516,6 +514,12 @@ dialog .txid { dialog.responsive fieldset:last-of-type:not(:first-of-type) { flex: none; } + dialog.responsive fieldset.share:not(.solo) { + min-width: 44rem; + } + dialog.responsive fieldset.share section { + width: auto; + } /* dialog.responsive button[type="submit"] { flex: none; } */ diff --git a/src/styles/form.css b/src/styles/form.css index a091082..c7739f9 100644 --- a/src/styles/form.css +++ b/src/styles/form.css @@ -1,7 +1,7 @@ main form { display: flex; gap: .5rem; - padding: 0 2rem; + padding: 0 1rem; /* flex-direction: column; */ /* margin: 0 auto; justify-content: center; */ @@ -267,9 +267,9 @@ form > article > figure figcaption + div sub { form fieldset.share { /* flex-direction: row-reverse; */ - flex-direction: row; + /* flex-direction: row; */ align-items: center; - flex: none; + flex: 1 1 auto; margin: 0; } form fieldset.share aside { @@ -286,9 +286,7 @@ form fieldset.share aside input:read-only { text-align: center; } form fieldset.share section + aside { - max-width: 16rem; - /* max-width: 305px; */ - border-left: 1px solid var(--dark-600); + border-top: 1px solid var(--dark-600); } form fieldset.share aside label { display: block; @@ -754,10 +752,19 @@ form[name="network"] { padding: 1rem; position: relative; } + form fieldset.share { + flex-direction: row; + } form fieldset.share aside { padding-left: 2rem; padding-right: 1rem; } + form fieldset.share section + aside { + max-width: 16rem; + /* max-width: 305px; */ + border-top: 0 solid transparent; + border-left: 1px solid var(--dark-600); + } /* form aside > article > figure figcaption + div.mid, form > article > figure figcaption + div.mid { font-size: 1.5rem; diff --git a/src/styles/nav.css b/src/styles/nav.css index b9b79ea..205acb4 100644 --- a/src/styles/nav.css +++ b/src/styles/nav.css @@ -97,7 +97,8 @@ nav a sub { align-self: center; } nav a svg { - margin: 0 auto; + margin: 0; + margin-left: 1.25rem; display: block; height: 100%; max-width: 50%; @@ -108,7 +109,7 @@ nav .alias { font-weight: 400; line-height: 1; padding: 1rem; - margin-right: 2.5rem; + margin-right: 1.25rem; } nav .alias span { padding: 1rem; diff --git a/src/styles/theme.css b/src/styles/theme.css index 7237c27..e7e1d50 100644 --- a/src/styles/theme.css +++ b/src/styles/theme.css @@ -455,28 +455,38 @@ th { border-radius: 6.25rem; } -.contacts > div { +.cols > section > div { background-color: var(--nav-bg); } -.contacts > div > span { +.cols > section > div > span { color: var(--dark-400); } -.contacts > div > a, -.contacts > div > article { +.cols > section > div > a, +.cols > section > div > article { border-bottom: 3px solid var(--bgc); transition: background-color var(--ease); } -.contacts > div > a:focus, -.contacts > div > a:hover, -.contacts > div > article:focus, -.contacts > div > article:hover { +.cols > section > div > a:focus, +.cols > section > div > a:hover, +.cols > section > div > article:focus, +.cols > section > div > article:hover { background-color: var(--dark-600); } -.contacts > div .pill:not(:disabled):hover { +.cols > section > div .pill:not(:disabled):hover { background-color: var(--dark-500); } +.cols > .transactions { + opacity: 0.4; + cursor: not-allowed; + cursor: wait; + user-select: none; +} +/* .cols > .transactions > div { + background-color: var(--dark-500); +} */ + .avatar { background-color: var(--dark-500); color: var(--dark-100);