|
92 | 92 | const resetChanges = () => {
|
93 | 93 | open(ReallyResetChanges);
|
94 | 94 | }
|
| 95 | +
|
95 | 96 | </script>
|
96 | 97 |
|
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%" |
100 | 107 | 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> |
109 | 123 | </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} |
132 | 146 | {#if !$tourist}
|
133 |
| - <NumericAddress address="{$walletAddress}"/> |
| 147 | + <div><NumericAddress address="{$walletAddress}"/></div> |
134 | 148 | {/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> |
145 | 165 |
|
146 | 166 | {#if $participantNftCount > $loadedParticipantCount}
|
147 |
| - <progress transition:fade max="{$participantNftCount}" value="{$loadedParticipantCount}"/> |
| 167 | + <div><progress transition:fade max="{$participantNftCount}" value="{$loadedParticipantCount}"/></div> |
148 | 168 | {/if}
|
149 | 169 | </div>
|
150 |
| - <div class="spacer"/> |
151 |
| - <People/> |
| 170 | + <div > |
| 171 | + <People/> |
| 172 | + </div> |
152 | 173 | </div>
|
153 | 174 |
|
154 | 175 | <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 |
| - } |
186 | 176 | .unselectable {
|
187 | 177 | -webkit-touch-callout: none;
|
188 | 178 | -webkit-user-select: none;
|
|
0 commit comments