dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

order view responsiveness

Browse Source
This commit is contained in:
Tim Olson
2023-11-10 18:33:33 -04:00
parent 85a17cf7a9
commit 7fd4b96e99
9 changed files with 111 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Orders.vue
View File

@@ -2,26 +2,28 @@
<v-table>
<thead>
<tr>
<th>#</th>
<th>Buy Token</th>
<th>Sell Token</th>
<th>Amount</th>
<th>Filled</th>
<th>Remaining</th>
<th>Average Price</th>
<th>Status</th>
<th>&nbsp;</th> <!-- actions -->
<th class="num d-none d-md-table-cell">#</th> <!-- todo placement date instead -->
<th class="token d-none d-sm-table-cell">Buy</th>
<th class="token d-none d-sm-table-cell">Sell</th>
<th class="token d-sm-none">Pair</th>
<th class="amount d-none d-md-table-cell">Amount</th>
<th class="amount">Remaining</th>
<th class="amount">Filled</th>
<th class="amount d-none d-md-table-cell">Avg&nbsp;Price</th>
<th class="status">Status</th>
<th class="cancel d-none d-lg-table-cell">&nbsp;</th>
</tr>
</thead>
<tbody>
<tr v-for="[index, inTokenAddr, outTokenAddr, amount, amountTokenAddr, filled, avgPrice, state] in orders">
<td>{{parseInt(index)+1}}</td>
<td>{{tokenSymbol(inTokenAddr)}}</td>
<td>{{tokenSymbol(outTokenAddr)}}</td>
<td>{{tokenAmount(amountTokenAddr, amount)}}</td>
<td>{{tokenAmount(amountTokenAddr, filled)}}</td>
<td>{{tokenAmount(amountTokenAddr, amount-filled)}}</td>
<td>
<td class="d-none d-md-table-cell" style="width: 1em">{{parseInt(index)+1}}</td>
<td class="token d-none d-sm-table-cell">{{tokenSymbol(inTokenAddr)}}</td>
<td class="token d-none d-sm-table-cell">{{tokenSymbol(outTokenAddr)}}</td>
<td class="pair d-sm-none">Buy {{tokenSymbol(inTokenAddr)}}<br/>Sell {{tokenSymbol(outTokenAddr)}}</td>
<td class="amount d-none d-md-table-cell">{{tokenAmount(amountTokenAddr, amount)}}</td>
<td class="amount">{{tokenAmount(amountTokenAddr, amount-filled)}}</td>
<td class="amount">{{tokenAmount(amountTokenAddr, filled)}}</td>
<td class="amount d-none d-md-table-cell">
{{pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)}}
<btn v-if="pairPrice(inTokenAddr, outTokenAddr, vaultAddr, index, avgPrice)!==''" size="small"
variant="plain"
@@ -29,14 +31,16 @@
{{pair(inTokenAddr, outTokenAddr, vaultAddr,index)}}
</btn>
</td>
<td>
<td class="status">
<v-chip v-if="state===-1" prepend-icon="mdi-signature" color="yellow">Signing</v-chip>
<v-chip v-if="state===0" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
<v-chip v-if="state===0" class="d-none d-lg-inline" prepend-icon="mdi-dots-horizontal" color="green">Open</v-chip>
<btn v-if="state===0" class="d-none d-sm-inline-block d-lg-none" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
<btn v-if="state===0" class="d-sm-none" variant="plain" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)"/>
<v-chip v-if="state===1" prepend-icon="mdi-cancel" color="red">Canceled</v-chip>
<v-chip v-if="state===2" prepend-icon="mdi-check-circle-outline" color="green">Completed</v-chip>
<v-chip v-if="state===3" prepend-icon="mdi-progress-check" color="grey-darken-1">Expired</v-chip>
</td>
<td>
<td class="cancel d-none d-lg-table-cell">
<btn v-if="state===0" icon="mdi-cancel" color="red" @click="cancelOrder(vaultAddr,index)">Cancel</btn>
</td>
</tr>
@@ -150,4 +154,27 @@ const orders = computed(()=>{
<style scoped lang="scss">
@use "src/styles/vars" as *;
// columns
.num {
min-width: 1em;
}
.token {
min-width: 3em;
max-width: 5em;
}
.pair {
min-width: 5em;
}
.amount {
min-width: 3em;
max-width: 6em;
overflow-x: hidden;
text-overflow: ellipsis;
}
.status {
max-width: 8em;
}
.cancel {
}
</style>