style(ui): ✨ add placeholders for transactions & integrations

dashhive · Apr 7, 2024 · ab4affc · ab4affc
1 parent c4e3017
commit ab4affc
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 78 deletions.
diff --git 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`<aside class="inline row">
+        <button class="pill rounded">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <use xlink:href="#icon-arrow-circle-up"></use>
+          </svg>
+        </button>
+        <button class="pill rounded">
+          <svg width="24" height="24" viewBox="0 0 24 24">
+            <use xlink:href="#icon-arrow-circle-down"></use>
+          </svg>
+        </button>
+      </aside>`
+      : ''
+
+    itemCtrls = '' // temp override
 
     return html`
       <a ${itemSub}>
@@ -142,18 +158,7 @@ const initialState = {
           <h4>${itemAlias}</h4>
           <h5>${itemName}</h5>
         </address>
-        <!-- <aside class="inline row">
-          <button class="pill rounded">
-            <svg width="24" height="24" viewBox="0 0 24 24">
-              <use xlink:href="#icon-arrow-circle-up"></use>
-            </svg>
-          </button>
-          <button class="pill rounded">
-            <svg width="24" height="24" viewBox="0 0 24 24">
-              <use xlink:href="#icon-arrow-circle-down"></use>
-            </svg>
-          </button>
-        </aside> -->
+        ${itemCtrls}
       </a>
     `
   },

diff --git 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;
+  }
 }
diff --git 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`
+  <div class="cols integration-sect">
+  </div>
+  <div class="cols main-sect">
+  </div>
+`)
+
+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`
+    <section>
+      <header>
+        <h5 class="lh-2">Coming soon</h5>
+        <h4 class="lh-2">Earn interest with</h4>
+      </header>
+      <div>
+        <a href="https://app.crowdnode.io/" target="_blank" rel="noreferrer">
+          <img src="/public/icons/crowdnode-logo-1000.png" height="50" />
+        </a>
+        <a href="https://www.mayascan.org/earn" target="_blank" rel="noreferrer">
+          <img src="/public/icons/maya-protocol.png" height="50" />
+        </a>
+      </div>
+    </section>
+  `)
+  mainAppGrid.insertAdjacentHTML('beforeend', html`
+    <section class="transactions">
+      <header>
+        <h5 class="lh-2">Transactions</h5>
+      </header>
+      <div>
+      <span class="flex flex-fill center">Coming soon</span>
+      </div>
+    </section>
+  `)
+
   document.addEventListener('click', async event => {
     let {
       // @ts-ignore

diff --git 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,27 +36,46 @@
   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;
   font-weight: 500;
   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
@@ -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;
   } */