From 7fbd4252606fa492b3983ee6c9d8d57479a8280b Mon Sep 17 00:00:00 2001
From: ennucore <ennucore@gmail.com>
Date: Sat, 24 Dec 2022 15:53:31 +0100
Subject: [PATCH] Adaptivity

---
 .idea/workspace.xml            | 24 +++++++++++++++---------
 src/assets/main.css            |  8 ++++++++
 src/components/TonButton.vue   |  9 ++++++++-
 src/components/ZonePricing.vue | 18 +++++++++++++++---
 src/components/ZoneTable.vue   | 12 +++++++++---
 src/views/Checkout.vue         |  1 -
 src/views/Explore.vue          |  8 ++++++++
 7 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f32504c..ebe5cce 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -1,16 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
   <component name="ChangeListManager">
-    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Back button + stuff for deploy">
-      <change afterPath="$PROJECT_DIR$/src/views/IHave.vue" afterDir="false" />
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="The screens for domain owners">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/assets/main.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/assets/main.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/TonButton.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/ZoneTable.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/IKnow.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/IKnow.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Explore.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Explore.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -82,7 +80,7 @@
       <workItem from="1671490155427" duration="1029000" />
       <workItem from="1671554049942" duration="6375000" />
       <workItem from="1671797380442" duration="603000" />
-      <workItem from="1671887059754" duration="3759000" />
+      <workItem from="1671887059754" duration="4958000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -182,7 +180,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671398124125</updated>
     </task>
-    <option name="localTasksCounter" value="15" />
+    <task id="LOCAL-00015" summary="The screens for domain owners">
+      <created>1671892446204</created>
+      <option name="number" value="00015" />
+      <option name="presentableId" value="LOCAL-00015" />
+      <option name="project" value="LOCAL" />
+      <updated>1671892446204</updated>
+    </task>
+    <option name="localTasksCounter" value="16" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -214,6 +219,7 @@
     <MESSAGE value="Awesome QR at checkout" />
     <MESSAGE value="Add (almost) monochrome logo + loading QR on checkout" />
     <MESSAGE value="Back button + stuff for deploy" />
-    <option name="LAST_COMMIT_MESSAGE" value="Back button + stuff for deploy" />
+    <MESSAGE value="The screens for domain owners" />
+    <option name="LAST_COMMIT_MESSAGE" value="The screens for domain owners" />
   </component>
 </project>
\ No newline at end of file
diff --git a/src/assets/main.css b/src/assets/main.css
index dfaf9f9..b74b24b 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -163,6 +163,14 @@ a,
     cursor: pointer;
 }
 
+@media only screen and (max-width: 800px) {
+    .get_b {
+        margin-left: 0.1rem;
+        padding-left: 0.4rem;
+        padding-right: 0.4rem;
+    }
+}
+
 .flex {
     display: flex;
 }
diff --git a/src/components/TonButton.vue b/src/components/TonButton.vue
index 360cbe2..f56a950 100644
--- a/src/components/TonButton.vue
+++ b/src/components/TonButton.vue
@@ -1,5 +1,5 @@
 <template>
-  <button class="b darkish">
+  <button class="b darkish mobile-scale">
     <span><slot></slot></span>
     <img src="@/assets/icons/ton_bottom.svg" alt="TON"/>
   </button>
@@ -27,4 +27,11 @@ button > img:not(:first-child) {
   height: 0.8rem;
   margin-left: 0.4rem;
 }
+
+@media only screen and (max-width: 800px) {
+  button.b.darkish {
+    margin: 0.15rem;
+    padding: 0.15rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/ZonePricing.vue b/src/components/ZonePricing.vue
index a568bdd..a4ac0aa 100644
--- a/src/components/ZonePricing.vue
+++ b/src/components/ZonePricing.vue
@@ -13,12 +13,12 @@
       <tr>
         <th></th>
         <th v-if="zone.canAuction()">
-          <Popper content="Buy on auction" placement="left" :hover="true" :arrow="true">
+          <Popper content="Buy on auction" placement="left" :hover="true" :arrow="true" class="mobile-scale">
             <img src="@/assets/icons/buy.svg" class="buy_img" alt="Buy on auction"/>
           </Popper>
         </th>
         <th v-if="zone.canBuy()">
-          <Popper content="Buy instantly" placement="right" :hover="true" :arrow="true">
+          <Popper content="Buy instantly" placement="right" :hover="true" :arrow="true" class="mobile-scale">
             <img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
           </Popper>
         </th>
@@ -46,7 +46,7 @@
       </tbody>
     </table>
     <router-link :to="{name: 'Get', params: {domain_init: 'example', zone: zone.zone}}">
-      <div v-if="has_get" class="get_b">
+      <div v-if="has_get" class="get_b mobile-scale">
         Get
       </div>
     </router-link>
@@ -82,6 +82,18 @@ tr > td:first-child {
   padding-left: 3rem;
 }
 
+
+@media only screen and (max-width: 800px) {
+  tr > td:first-child {
+    font-size: 0.9rem;
+    padding: 0;
+  }
+
+  tr > td {
+    padding: 0;
+  }
+}
+
 tr > th {
   padding-bottom: -10px;
 }
diff --git a/src/components/ZoneTable.vue b/src/components/ZoneTable.vue
index 422d1fc..bef728b 100644
--- a/src/components/ZoneTable.vue
+++ b/src/components/ZoneTable.vue
@@ -1,6 +1,6 @@
 <template>
   <div style="overflow-x: auto; max-width: 98vw;">
-    <table class="table_outer mobile-scale">
+    <table class="table_outer">
       <thead class="table_header">
       <tr>
         <th>Domain</th>
@@ -9,12 +9,12 @@
       </thead>
       <tbody class="table_content">
       <tr v-for="zone in zones" :key="zone.zone">
-        <td class="mobile-scale">
+        <td class="zone">
           <router-link :to="{name: 'GetZ', params: {zone: zone.zone}}" style="color: white">
             {{ zone.zone }}
           </router-link>
         </td>
-        <td style="display: flex; justify-content: flex-end" class="mobile-scale">
+        <td style="display: flex; justify-content: flex-end">
           <ZonePricing :zone="zone"/>
         </td>
       </tr>
@@ -56,6 +56,12 @@ The inner box is table_content, it takes all of the space except for the header
   min-width: max(30rem, 50vw);
 }
 
+@media only screen and (max-width: 800px) {
+  td.zone {
+    font-size: 1.1rem;
+  }
+}
+
 .table_header {
   padding: 0.5rem 1.3rem;
 }
diff --git a/src/views/Checkout.vue b/src/views/Checkout.vue
index a6aa2bc..313f1d7 100644
--- a/src/views/Checkout.vue
+++ b/src/views/Checkout.vue
@@ -8,7 +8,6 @@
         </button>
       </router-link>
     </template>
-    <!-- todo: button to go back to Get -->
     <!-- todo: handle auction -->
     <div class="text">To buy</div>
     <DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
diff --git a/src/views/Explore.vue b/src/views/Explore.vue
index af8ad20..13b97bd 100644
--- a/src/views/Explore.vue
+++ b/src/views/Explore.vue
@@ -1,5 +1,13 @@
 <template>
   <DarkLayout>
+    <template v-slot:header>
+      <router-link :to="{name: 'Get', params: {domain_init: core_domain, zone: zone}}">
+        <button class="b darkish back">
+          <img src="@/assets/icons/ton_left.svg" alt="TON"/>
+          Back
+        </button>
+      </router-link>
+    </template>
     <!-- todo: button to go back + this whole view -->
     <DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/>
   </DarkLayout>