Skip to content

Commit 69afa3c

Browse files
scryptonightscryptonight
committed
Changed overall layout logic
1 parent 0ba39d8 commit 69afa3c

File tree

6 files changed

+140
-121
lines changed

6 files changed

+140
-121
lines changed

‎3-lending/demifi/web/package-lock.json

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎3-lending/demifi/web/src/App.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
{#if (!$appStarted)}
103103
<StartScreen />
104104
{:else}
105-
<LendingApp />
105+
<div style:width="100vw" style:height="100vh"><LendingApp /></div>
106106
{/if}
107107
</Modal>
108108
</main>

‎3-lending/demifi/web/src/app.css

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ body {
2828
margin: 0;
2929
display: flex;
3030
place-items: center;
31-
min-width: 320px;
3231
min-height: 100vh;
3332
}
3433

@@ -37,14 +36,8 @@ h1 {
3736
line-height: 1.1;
3837
}
3938

40-
.card {
41-
padding: 2em;
42-
}
43-
4439
#app {
45-
max-width: 1280px;
4640
margin: 0 auto;
47-
padding: 2rem;
4841
text-align: center;
4942
}
5043

‎3-lending/demifi/web/src/lib/LendingApp.svelte

Lines changed: 68 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -92,97 +92,87 @@
9292
const resetChanges = () => {
9393
open(ReallyResetChanges);
9494
}
95+
9596
</script>
9697

97-
<div>
98-
<div class="topPadding" />
99-
<div class="topbar unselectable"
98+
<div
99+
style:display="flex"
100+
style:width="100%"
101+
style:flex-direction="column"
102+
style:justify-content="space-between"
103+
style:align-content="space-between">
104+
<div class="unselectable"
105+
style:flex-grow="1"
106+
style:width="100%"
100107
style:display="flex"
101-
style:align-items="baseline" >
102-
<div on:click="{openProfile}" style:cursor="pointer"><UserIcon nfid="{$userNfid}"/></div>
103-
<div on:click="{openProfile}" style:cursor="pointer" style:margin="0 0 0 5px" style:font-size="32px">
104-
{#if $allParticipants.get($userNfid)}
105-
<b>{$allParticipants.get($userNfid).userName}</b>
106-
{:else}
107-
<b>???</b>
108-
{/if}
108+
style:align-items="baseline"
109+
style:justify-content="space-between"
110+
style:align-content="space-between">
111+
<div style:display="flex"
112+
style:align-items="baseline"
113+
style:margin="0.5em 0 0 0.5em">
114+
<div on:click="{openProfile}" style:cursor="pointer"><UserIcon nfid="{$userNfid}"/></div>
115+
<div on:click="{openProfile}" style:cursor="pointer" style:margin="0 0 0 5px" style:font-size="32px">
116+
{#if $allParticipants.get($userNfid)}
117+
<b>{$allParticipants.get($userNfid).userName}</b>
118+
{:else}
119+
<b>???</b>
120+
{/if}
121+
</div>
122+
<div style:margin="0 0 0 5px" style:font-size="12px"><NumericAddress address={$userNfid}/> </div>
109123
</div>
110-
<div style:margin="0 0 0 5px" style:font-size="12px"><NumericAddress address={$userNfid}/> </div>
111-
</div>
112-
<div class="toprightbar unselectable" style="display: flex; align-items: center;">
113-
{#if $participantsDirty}
114-
<div transition:fade
115-
display="flex"
116-
style:align-items="center"
117-
style:align-content="center"
118-
style:margin="0 5px 0 0">
119-
<span class="unselectable"
120-
style:align-self="flex-end"
121-
style:margin="0 5px 0 0"
122-
style:cursor="pointer"
123-
on:click="{resetChanges}" >
124-
<Icon data={imgReset} size="12px"/>
125-
</span>
126-
<button bind:this={$commitButton} >
127-
<span ><Icon data={imgWarning} fill="red" stroke="red" size="12px"/></span>
128-
<span align="center" on:click="{commitChanges}" >Commit Changes</span>
129-
</button>
130-
</div>{
131-
/if}
124+
<div style:display="flex"
125+
style:align-items="baseline"
126+
style:margin="0 0.5em 0 0">
127+
{#if $participantsDirty}
128+
<div transition:fade
129+
style:display="flex"
130+
style:align-items="center"
131+
style:align-content="center"
132+
style:margin="0 5px 0 0">
133+
<span class="unselectable"
134+
style:align-self="flex-end"
135+
style:margin="0 5px 0 0"
136+
style:cursor="pointer"
137+
on:click="{resetChanges}" >
138+
<Icon data={imgReset} size="12px"/>
139+
</span>
140+
<button bind:this={$commitButton} >
141+
<span ><Icon data={imgWarning} fill="red" stroke="red" size="12px"/></span>
142+
<span align="center" on:click="{commitChanges}" >Commit Changes</span>
143+
</button>
144+
</div>
145+
{/if}
132146
{#if !$tourist}
133-
<NumericAddress address="{$walletAddress}"/>
147+
<div><NumericAddress address="{$walletAddress}"/></div>
134148
{/if}
135-
<button style:margin="0 0 0 5px" on:click="{maybeDisconnect}">Disconnect</button></div>
136-
<div class="apps unselectable" >
137-
<button>People</button>
138-
<button disabled="true">Lending</button>
139-
<button disabled="true">Borrowing</button>
140-
<span
141-
style:cursor="pointer"
142-
on:click="{showInstructions}">
143-
<Icon fill="blue" stroke="blue" data={imgInfo} size="18px"/>
144-
</span>
149+
<div><button style:margin="0 0 0 5px" on:click="{maybeDisconnect}">Disconnect</button></div>
150+
</div>
151+
</div>
152+
<div class="unselectable"
153+
style:display="flex"
154+
style:align-items="baseline"
155+
style:margin="0 0.5em 0 0.5em">
156+
<div><button>People</button></div>
157+
<div><button disabled="true">Lending</button></div>
158+
<div><button disabled="true">Borrowing</button></div>
159+
<div
160+
style:cursor="pointer"
161+
style:margin="0 0.5em 0 0.5em"
162+
on:click="{showInstructions}">
163+
<Icon fill="blue" stroke="blue" data={imgInfo} size="18px"/>
164+
</div>
145165

146166
{#if $participantNftCount > $loadedParticipantCount}
147-
<progress transition:fade max="{$participantNftCount}" value="{$loadedParticipantCount}"/>
167+
<div><progress transition:fade max="{$participantNftCount}" value="{$loadedParticipantCount}"/></div>
148168
{/if}
149169
</div>
150-
<div class="spacer"/>
151-
<People/>
170+
<div >
171+
<People/>
172+
</div>
152173
</div>
153174

154175
<style>
155-
.spacer {
156-
width: 100%;
157-
height: 55px;
158-
}
159-
.topPadding {
160-
position: fixed;
161-
left: 0;
162-
top: 0;
163-
height: 80px;
164-
width: 100%;
165-
background-color: white;
166-
}
167-
.topbar {
168-
position: fixed;
169-
top: 0;
170-
left: 0;
171-
margin: 5px;
172-
background-color: white;
173-
}
174-
.toprightbar {
175-
position: fixed;
176-
top: 0;
177-
right: 0;
178-
margin: 5px;
179-
}
180-
.apps {
181-
position: fixed;
182-
top: 2em;
183-
left: 0;
184-
margin: 5px;
185-
}
186176
.unselectable {
187177
-webkit-touch-callout: none;
188178
-webkit-user-select: none;

‎3-lending/demifi/web/src/lib/ParticipantCell.svelte

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@
7676
{:then p}
7777
{#if p !== undefined}
7878
<b>{p.userName.length<=30?p.userName:p.userName.substr(0,30)+'…'}</b>
79-
<!-- <b>{$allParticipants.get(nfid).userName.length<=30?$allParticipants.get(nfid).userName:$allParticipants.get(nfid).userName.substr(0,30)+'…'}</b>-->
8079
{/if}
8180
{/await}
8281
</div>

0 commit comments

Comments
 (0)