Skip to content

Commit ab4affc

Browse files
jojobytejojobyte
committed
style(ui): ✨ add placeholders for transactions & integrations
1 parent c4e3017 commit ab4affc

File tree

8 files changed

+202
-78
lines changed

8 files changed

+202
-78
lines changed

‎src/components/contacts-list.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,22 @@ const initialState = {
134134
let itemSub = inId
135135
? `href="/#!/contact/${atUser || inId}" data-id="${inId}"`
136136
: ''
137+
let itemCtrls = paired
138+
? html`<aside class="inline row">
139+
<button class="pill rounded">
140+
<svg width="24" height="24" viewBox="0 0 24 24">
141+
<use xlink:href="#icon-arrow-circle-up"></use>
142+
</svg>
143+
</button>
144+
<button class="pill rounded">
145+
<svg width="24" height="24" viewBox="0 0 24 24">
146+
<use xlink:href="#icon-arrow-circle-down"></use>
147+
</svg>
148+
</button>
149+
</aside>`
150+
: ''
151+
152+
itemCtrls = '' // temp override
137153

138154
return html`
139155
<a ${itemSub}>
@@ -142,18 +158,7 @@ const initialState = {
142158
<h4>${itemAlias}</h4>
143159
<h5>${itemName}</h5>
144160
</address>
145-
<!-- <aside class="inline row">
146-
<button class="pill rounded">
147-
<svg width="24" height="24" viewBox="0 0 24 24">
148-
<use xlink:href="#icon-arrow-circle-up"></use>
149-
</svg>
150-
</button>
151-
<button class="pill rounded">
152-
<svg width="24" height="24" viewBox="0 0 24 24">
153-
<use xlink:href="#icon-arrow-circle-down"></use>
154-
</svg>
155-
</button>
156-
</aside> -->
161+
${itemCtrls}
157162
</a>
158163
`
159164
},

‎src/index.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ main h1 { text-align: center; }
3131

3232
main header {
3333
margin: 2.5rem auto 0;
34-
padding: 0 2rem;
34+
padding: 0 1rem;
3535
/* max-width: 1100px; */
3636
min-height: 85px;
3737
width: 100%;
@@ -458,6 +458,10 @@ main > header + section button {
458458
}
459459

460460
@media (min-width: 650px) {
461+
main {
462+
max-width: 60rem;
463+
padding: 0 1rem;
464+
}
461465
main header {
462466
padding: 0;
463467
}
@@ -486,4 +490,9 @@ main > header + section button {
486490
header {
487491
flex-direction: row;
488492
}
493+
}
494+
@media (min-width: 980px) {
495+
main {
496+
padding: 0;
497+
}
489498
}

‎src/main.js‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -148,12 +148,22 @@ let bodyNav
148148
let dashBalance
149149
let mainApp = document.querySelector('main#app')
150150

151+
mainApp.insertAdjacentHTML('afterbegin', html`
152+
<div class="cols integration-sect">
153+
</div>
154+
<div class="cols main-sect">
155+
</div>
156+
`)
157+
158+
let integrationsSection = mainApp.querySelector('.integration-sect')
159+
let mainAppGrid = mainApp.querySelector('.main-sect')
160+
151161
// init components
152162
let mainFtr = await setupMainFooter(mainApp)
153163
let sendRequestBtn = await setupSendRequestBtns(mainApp)
154164
let svgSprite = await setupSVGSprite(mainApp)
155165
let contactsList = await setupContactsList(
156-
mainApp,
166+
mainAppGrid,
157167
{
158168
events: {
159169
handleClick: state => async event => {
@@ -805,6 +815,33 @@ async function main() {
805815
})
806816
sendRequestBtn.render()
807817

818+
integrationsSection.insertAdjacentHTML('beforeend', html`
819+
<section>
820+
<header>
821+
<h5 class="lh-2">Coming soon</h5>
822+
<h4 class="lh-2">Earn interest with</h4>
823+
</header>
824+
<div>
825+
<a href="https://app.crowdnode.io/" target="_blank" rel="noreferrer">
826+
<img src="/public/icons/crowdnode-logo-1000.png" height="50" />
827+
</a>
828+
<a href="https://www.mayascan.org/earn" target="_blank" rel="noreferrer">
829+
<img src="/public/icons/maya-protocol.png" height="50" />
830+
</a>
831+
</div>
832+
</section>
833+
`)
834+
mainAppGrid.insertAdjacentHTML('beforeend', html`
835+
<section class="transactions">
836+
<header>
837+
<h5 class="lh-2">Transactions</h5>
838+
</header>
839+
<div>
840+
<span class="flex flex-fill center">Coming soon</span>
841+
</div>
842+
</section>
843+
`)
844+
808845
document.addEventListener('click', async event => {
809846
let {
810847
// @ts-ignore

‎src/styles/components.css‎

Lines changed: 95 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,31 @@
1-
.contacts {
2-
gap: .25rem;
3-
padding: 0 1rem;
4-
}
5-
.contacts > div {
6-
flex: 1 1 auto;
7-
height: 30rem;
8-
border-radius: 1rem;
9-
overflow: auto;
1+
.cols {
102
display: flex;
3+
gap: 1rem;
114
flex-direction: column;
125
}
13-
.contacts > div:has(> span) {
14-
justify-content: center;
15-
align-items: center;
6+
.cols > section {
7+
flex: 1 1 auto;
8+
gap: .25rem;
9+
padding: 0 1rem;
1610
}
17-
.contacts > header {
11+
.cols > section > header {
1812
flex-direction: row;
1913
align-items: center;
2014
margin: 0;
2115
padding: 0;
2216
min-height: initial;
17+
height: 2rem;
2318
}
24-
.contacts > header > button,
25-
.contacts > header > div > button,
26-
.contacts > header > form > button {
27-
color: var(--dark-200);
28-
29-
font-size: 0.75rem;
30-
font-style: normal;
31-
font-weight: 700;
32-
line-height: normal;
33-
}
34-
.contacts > header > form,
35-
.contacts > header > div {
19+
.cols > section > div {
20+
flex: 1 1 auto;
21+
height: 30rem;
22+
border-radius: 1rem;
23+
overflow: auto;
3624
display: flex;
25+
flex-direction: column;
3726
}
38-
.contacts > div > a,
39-
.contacts > div > article {
27+
.cols > section > div > a,
28+
.cols > section > div > article {
4029
display: flex;
4130
padding: 1.25rem 1.5rem;
4231
/* justify-content: space-between; */
@@ -47,27 +36,46 @@
4736
cursor: pointer;
4837
text-decoration: none;
4938
}
39+
.cols > section > div:has(> span) {
40+
justify-content: center;
41+
align-items: center;
42+
}
5043

51-
.contacts h4,
52-
.contacts h5,
53-
.contacts h6 {
44+
.cols h4,
45+
.cols h5,
46+
.cols h6 {
5447
padding: 0;
5548
margin: 0;
5649
font-style: normal;
5750
font-weight: 500;
5851
line-height: 2;
5952
font-size: .75rem;
6053
}
61-
.contacts h4 {
54+
.cols h4 {
6255
color: var(--dark-100);
6356
font-size: .875rem;
6457
}
65-
.contacts h5 {
58+
.cols h5 {
6659
color: var(--dark-400);
6760
}
68-
.contacts h6 {
61+
.cols h6 {
6962
color: var(--dark-200);
7063
}
64+
.cols > section > div > a > address,
65+
.cols > section > div > article > address {
66+
display: flex;
67+
flex-direction: column;
68+
align-items: flex-start;
69+
gap: 0.375rem;
70+
font-style: normal;
71+
flex: 1 1 auto;
72+
}
73+
.cols > section > div > a > aside {
74+
display: flex;
75+
}
76+
.cols > section > div > a > aside > button {
77+
padding: 0.5rem;
78+
}
7179

7280
.avatar {
7381
display: flex;
@@ -84,26 +92,69 @@
8492
background-repeat: no-repeat;
8593
}
8694

87-
.contacts > div > a > address,
88-
.contacts > div > article > address {
89-
display: flex;
90-
flex-direction: column;
91-
align-items: flex-start;
92-
gap: 0.375rem;
95+
.contacts {
96+
}
97+
.contacts > div {
98+
}
99+
.contacts > div:has(> span) {
100+
}
101+
.contacts > header {
102+
}
103+
.contacts > header > button,
104+
.contacts > header > div > button,
105+
.contacts > header > form > button {
106+
color: var(--dark-200);
107+
108+
font-size: 0.75rem;
93109
font-style: normal;
94-
flex: 1 1 auto;
110+
font-weight: 700;
111+
line-height: normal;
95112
}
96-
.contacts > div > a > aside {
113+
.contacts > header > form,
114+
.contacts > header > div {
97115
display: flex;
98116
}
99-
.contacts > div > a > aside > button {
100-
padding: 0.5rem;
117+
118+
.integration-sect > section > header {
119+
flex-direction: column;
120+
align-items: start;
121+
height: 3rem;
122+
}
123+
.integration-sect > section > div {
124+
background-color: transparent;
125+
flex-direction: row;
126+
height: auto;
127+
gap: 1rem;
128+
border-radius: 0;
129+
}
130+
.integration-sect > section > div > a,
131+
.integration-sect > section > div > article {
132+
padding: 1rem 0;
133+
/* justify-content: space-between; */
134+
align-items: center;
135+
align-self: stretch;
136+
gap: 1rem;
137+
user-select: none;
138+
cursor: pointer;
139+
text-decoration: none;
101140
}
102141

103142

104143

144+
105145
@media (min-width: 650px) {
106-
.contacts {
146+
.cols {
147+
/* flex-direction: row; */
148+
}
149+
.cols > section {
107150
padding: 0;
108151
}
109152
}
153+
@media (min-width: 980px) {
154+
.cols {
155+
flex-direction: row;
156+
}
157+
.cols > section:last-of-type:not(:first-of-type) {
158+
flex: 0 0 20rem;
159+
}
160+
}

‎src/styles/dialog.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -414,14 +414,12 @@ dialog.responsive fieldset.share section {
414414
gap: 1rem;
415415
display: flex;
416416
flex-direction: column;
417+
width: 100%;
417418
}
418419
dialog.responsive fieldset.share section article {
419420
flex-direction: column;
420421
align-items: stretch;
421422
}
422-
dialog.responsive fieldset.share:not(.solo) {
423-
min-width: 44rem;
424-
}
425423

426424

427425
dialog.responsive fieldset.contact .avatar {
@@ -516,6 +514,12 @@ dialog .txid {
516514
dialog.responsive fieldset:last-of-type:not(:first-of-type) {
517515
flex: none;
518516
}
517+
dialog.responsive fieldset.share:not(.solo) {
518+
min-width: 44rem;
519+
}
520+
dialog.responsive fieldset.share section {
521+
width: auto;
522+
}
519523
/* dialog.responsive button[type="submit"] {
520524
flex: none;
521525
} */

0 commit comments

Comments
 (0)