From 7fd4b96e994167060b09e3a82b085715c1206c96 Mon Sep 17 00:00:00 2001
From: Tim Olson <>
Date: Fri, 10 Nov 2023 18:33:33 -0400
Subject: [PATCH] order view responsiveness

---
 src/components/Breakpoints.vue     | 22 ++++++++++
 src/components/NeedsProvider.vue   | 29 +++++++++++++
 src/components/Orders.vue          | 65 +++++++++++++++++++++---------
 src/components/PhoneCard.vue       | 10 ++---
 src/components/TimedOrderEntry.vue |  5 ++-
 src/components/Withdraw.vue        |  4 +-
 src/layouts/default/View.vue       |  4 +-
 src/styles/vars.scss               |  1 -
 src/views/OrdersView.vue           |  4 +-
 9 files changed, 111 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Breakpoints.vue

diff --git a/src/components/Breakpoints.vue b/src/components/Breakpoints.vue
new file mode 100644
index 0000000..a356197
--- /dev/null
+++ b/src/components/Breakpoints.vue
@@ -0,0 +1,22 @@
+<template>
+  <div>
+    <span class="">xs&nbsp;</span>
+    <span class="d-none d-sm-inline">sm&nbsp;</span>
+    <span class="d-none d-md-inline">md&nbsp;</span>
+    <span class="d-none d-lg-inline">lg&nbsp;</span>
+    <span class="d-none d-xl-inline">xl&nbsp;</span>
+    <span class="d-none d-xxl-inline">xxl&nbsp;</span>
+  </div>
+</template>
+
+<script setup>
+import {useStore} from "@/store/store";
+
+const s = useStore()
+
+</script>
+
+<style scoped lang="scss">
+@use "src/styles/vars" as *;
+
+</style>
diff --git a/src/components/NeedsProvider.vue b/src/components/NeedsProvider.vue
index b7f86c7..e8688fa 100644
--- a/src/components/NeedsProvider.vue
+++ b/src/components/NeedsProvider.vue
@@ -19,11 +19,40 @@
     </v-card-actions>
   </phone-card>
   <phone-card v-if="walletOk && providerOk && !chainOk">
+<!-- todo Alpha Live
     <v-card-title><v-icon icon="mdi-reload-alert" color="warning"/> Change Blockchain</v-card-title>
     <v-card-text>
       Dexorder works only with <blockchain chain-id="42161"/>. Please switch to the
       <blockchain chain-id="42161"/> blockchain in your wallet.
     </v-card-text>
+-->
+    <v-card-title><v-icon icon="mdi-hand-wave" color="warning"/>&nbsp;Welcome to Dexorder Alpha!</v-card-title>
+    <v-card-text>
+      This alpha test runs on a private blockchain, which you need to set up.
+    </v-card-text>
+    <v-card-item>
+      <ol class="ml-6">
+        <li>Open Metamask</li>
+        <li>Click in the upper-left to choose a Network</li>
+        <li>Click the "Add Network" button</li>
+        <li>Choose "Add a Network Manually"</li>
+        <li>Choose "Add a network manually"</li>
+        <li>Enter the following information:
+          <ul>
+            <li>Name: Dexorder Alpha</li>
+            <li>New RPC URL: https://rpc.alpha.dexorder.trade</li>
+            <li>Chain ID: 31337</li>
+            <li>Currency Symbol: ETH</li>
+          </ul>
+        </li>
+        <li>
+          Save the private test network
+        </li>
+        <li>
+          Open Metamask again and select the "Dexorder Alpha" blockchain for use with this website.
+        </li>
+      </ol>
+    </v-card-item>
   </phone-card>
 </template>
 
diff --git a/src/components/Orders.vue b/src/components/Orders.vue
index 2945717..1169f91 100644
--- a/src/components/Orders.vue
+++ b/src/components/Orders.vue
@@ -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>
diff --git a/src/components/PhoneCard.vue b/src/components/PhoneCard.vue
index 1691239..867ab6d 100644
--- a/src/components/PhoneCard.vue
+++ b/src/components/PhoneCard.vue
@@ -6,22 +6,18 @@
       <slot/>
     </v-card>
     <!-- phones use the entire screen -->
-    <v-container class="d-sm-none">
-      <slot/>
-    </v-container>
+    <div class="d-sm-none pa-0">
+      <slot class="pa-0"/>
+    </div>
   </div>
 </template>
 
 <script setup>
 import {useStore} from "@/store/store";
-
 const s = useStore()
 
 </script>
 
 <style scoped lang="scss">
 @use "src/styles/vars" as *;
-.phone-card {
-  max-width: $card-maxw;
-}
 </style>
diff --git a/src/components/TimedOrderEntry.vue b/src/components/TimedOrderEntry.vue
index edb674c..238bf51 100644
--- a/src/components/TimedOrderEntry.vue
+++ b/src/components/TimedOrderEntry.vue
@@ -1,6 +1,6 @@
 <template>
   <needs-provider>
-    <phone-card>
+    <phone-card class="toecard">
       <v-card-title class="big">DCA / TWAP</v-card-title>
       <v-card-subtitle>Multiple tranches over a time range</v-card-subtitle>
       <v-card-text>
@@ -301,6 +301,9 @@ function placeOrder() {
 <style scoped lang="scss">
 @use "@/styles/vars" as *;
 
+.toecard {
+  max-width: $card-maxw;
+}
 .token-choice {
   width: 16em;
 }
diff --git a/src/components/Withdraw.vue b/src/components/Withdraw.vue
index 524407d..217bb72 100644
--- a/src/components/Withdraw.vue
+++ b/src/components/Withdraw.vue
@@ -1,8 +1,8 @@
 <template>
   <v-dialog :model-value="modelValue" @update:modelValue="$emit('update:modelValue', $event)">
-    <v-card>
+    <v-card style="max-width: 25em" class="mx-auto">
       <v-card-title>
-        <v-icon icon="mdi-down-arrow"/>&nbsp;Withdraw {{ token.symbol }}
+        <v-icon icon="mdi-arrow-down-bold" color="grey-darken-1"/>&nbsp;Withdraw {{ token.symbol }}
       </v-card-title>
       <v-card-item>
         <v-text-field class="text-end" type="number" variant="outlined" :min="0" :max="balanceFloat"
diff --git a/src/layouts/default/View.vue b/src/layouts/default/View.vue
index 16648a4..ef25b81 100644
--- a/src/layouts/default/View.vue
+++ b/src/layouts/default/View.vue
@@ -1,8 +1,9 @@
 <template>
   <v-main>
-    <v-container>
+    <v-container class="pa-0">
       <div>
         <Alerts/>
+<!--        <Breakpoints/>-->
         <router-view/>
         <v-skeleton-loader v-if="!store.chainInfo" type="card" class="order-card"/> <!--todo static chainInfo -->
       </div>
@@ -15,6 +16,7 @@ import Alerts from "@/components/Alerts.vue";
 import {VSkeletonLoader} from "vuetify/labs/VSkeletonLoader";
 import {useStore} from "@/store/store.js";
 import NeedsProvider from "@/components/NeedsProvider.vue";
+import Breakpoints from "@/components/Breakpoints.vue";
 
 const store = useStore()
 </script>
diff --git a/src/styles/vars.scss b/src/styles/vars.scss
index 0ed8990..cde075f 100644
--- a/src/styles/vars.scss
+++ b/src/styles/vars.scss
@@ -55,5 +55,4 @@ $heading-font-family: 'Orbitron', sans-serif;
 //$heading-font-family: 'Quantico', sans-serif;
 //$heading-font-family: 'Chakra Petch', sans-serif;
 
-$sm-breakpoint: 600px;
 $card-maxw: 34em;
diff --git a/src/views/OrdersView.vue b/src/views/OrdersView.vue
index 7035e41..a443ea9 100644
--- a/src/views/OrdersView.vue
+++ b/src/views/OrdersView.vue
@@ -1,12 +1,12 @@
 <template>
   <needs-provider>
     <needs-signer>
-      <v-card title="Orders">
+      <phone-card title="Orders">
         <v-card-item>
           <btn icon="mdi-plus" color="green" class="mb-6" @click="$router.push('/twap')">New Dexorder</btn>
           <orders/>
         </v-card-item>
-      </v-card>
+      </phone-card>
     </needs-signer>
   </needs-provider>
 </template>