Started writing ZoneTable + improvements to the search bar

.idea/workspace.xml

@@ -1,16 +1,15 @@
 <?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="Adaptivity + more assets">
+    <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="DarkLayout + Domain Bar">
-      <change afterPath="$PROJECT_DIR$/src/assets/images/usage.png" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" afterDir="false" />
+      <change afterPath="$PROJECT_DIR$/src/zone.ts" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.vue" 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/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -21,6 +20,7 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="Vue Single File Component" />
+        <option value="TypeScript File" />
       </list>
     </option>
   </component>
@@ -76,7 +76,7 @@
       <workItem from="1670839496719" duration="10862000" />
       <workItem from="1670927344373" duration="29000" />
       <workItem from="1670927391338" duration="2277000" />
-      <workItem from="1671024025708" duration="5450000" />
+      <workItem from="1671024025708" duration="11597000" />
     </task>
     <task id="LOCAL-00001" summary="Wrote the landing">
       <created>1670844191163</created>
@@ -99,7 +99,14 @@
       <option name="project" value="LOCAL" />
       <updated>1671026238851</updated>
     </task>
-    <option name="localTasksCounter" value="4" />
+    <task id="LOCAL-00004" summary="DarkLayout + Domain Bar">
+      <created>1671029892636</created>
+      <option name="number" value="00004" />
+      <option name="presentableId" value="LOCAL-00004" />
+      <option name="project" value="LOCAL" />
+      <updated>1671029892636</updated>
+    </task>
+    <option name="localTasksCounter" value="5" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -120,6 +127,7 @@
     <MESSAGE value="Wrote the landing" />
     <MESSAGE value="TON Web page" />
     <MESSAGE value="Adaptivity + more assets" />
-    <option name="LAST_COMMIT_MESSAGE" value="Adaptivity + more assets" />
+    <MESSAGE value="DarkLayout + Domain Bar" />
+    <option name="LAST_COMMIT_MESSAGE" value="DarkLayout + Domain Bar" />
   </component>
 </project>

src/components/DarkLayout.vue

@@ -2,7 +2,7 @@
   <main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body">
     <Header/>
     <div class="center">
-      <div class="content">
+      <div class="content center">
         <slot></slot>
       </div>
     </div>

src/components/DomainBar.vue

@@ -58,12 +58,11 @@ export default {
   border-radius: 1rem;
   width: 30rem;
   min-height: 5rem;
-  padding: 0 0.5rem;
+  padding: 0 1rem;
   background-color: #4e5a88;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
-  align-items: center;
+  margin-bottom: 1rem;
-  place-items: center;
 }
 
 /* flex container with vertical centering */
@@ -72,6 +71,8 @@ export default {
   justify-content: center;
   align-items: center;
   place-items: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 /* the bar is narrower on mobile (90% of the screen) */
@@ -87,7 +88,7 @@ export default {
 
 .prompt {
   border-radius: 0.5rem;
-  min-width: 40%;
+  min-width: 8rem;
   height: 3rem;
   background-color: #363e5e;
   display: flex;
@@ -102,8 +103,6 @@ export default {
   user-select: none;
   cursor: text;
   margin-right: 0.4rem;
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
 }
 
 /* #e36464 search button with #363e5e text */
@@ -121,7 +120,7 @@ export default {
   padding: 0 1rem;
   cursor: pointer;
   margin-left: 1rem;
-  margin-top: 0.5rem;
+  margin-top: 1rem;
-  margin-bottom: 0.5rem;
+  margin-bottom: 1rem;
 }
 </style>

src/components/ZoneTable.vue

@@ -0,0 +1,86 @@
+<template>
+  <!-- a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e -->
+  <table class="table_outer">
+    <thead class="table_header">
+    <tr>
+      <th>Domain</th>
+      <th>Terms</th>
+    </tr>
+    </thead>
+    <tbody class="table_content">
+    <tr v-for="zone in zones" :key="zone.zone">
+      <td>
+        <router-link :to="{name: 'Find' /*todo: specify zone here*/}" style="color: white">
+          {{ zone.zone }}
+        </router-link>
+      </td>
+      <td></td>
+    </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import {Zone} from "../zone";
+
+export default {
+  name: "ZoneTable",
+  props: {
+    zones: {
+      type: Array[Zone],
+      default: [new Zone(".example.ton", 3, 5), new Zone(".agorata.ton", 3, 5)]
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*
+We want a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e
+
+The outer rounded box is table_outer
+The inner box is table_content, it takes all of the space except for the header
+*/
+.table_outer {
+  border-radius: 1rem;
+  min-height: 5rem;
+  background-color: #4e5a88;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  min-width: max(30rem, 50vw);
+}
+
+.table_header {
+  padding: 0.5rem 1.3rem;
+}
+
+thead > tr {
+  display: flex;
+}
+
+tr > :last-child { /* place it on the right */
+  justify-content: flex-end;
+  text-align: center;
+  width: 100%;
+}
+
+tr > th:first-child {
+  text-align: center;
+}
+
+tr > :first-child { /* place it on the left */
+  text-align: left;
+}
+
+tr:not(:first-child) > td {
+  border-top: 2px solid white;
+}
+
+.table_content {
+  background-color: #363e5e;
+  border-radius: 1rem;
+  padding: 1rem;
+  min-height: 10rem;
+}
+</style>

src/router/index.ts

@@ -25,9 +25,15 @@ const router = createRouter({
             component: () => import('../views/TonDns.vue')
         },
         {
-            path: '/get',
+            path: '/get/:domain',
-            name: 'get',
+            name: 'Get',
-            component: () => import('../views/Get.vue')
+            component: () => import('../views/Get.vue'),
+            props: true
+        },
+        {
+            path: '/find',
+            name: 'Find',
+            component: () => import('../views/Find.vue')
         }
     ]
 })

src/views/Find.vue

@@ -0,0 +1,31 @@
+<template>
+  <DarkLayout>
+    <DomainBar/>
+    <ZoneTable/>
+  </DarkLayout>
+</template>
+
+<script>
+import DomainBar from "../components/DomainBar.vue";
+import DarkLayout from "../components/DarkLayout.vue";
+import ZoneTable from "../components/ZoneTable.vue";
+
+export default {
+  name: "Find",
+  props: {
+    default_domain: {
+      type: String,
+      default: "example"
+    },
+    zone: {
+      type: String,
+      default: ".ton"
+    }
+  },
+  components: {ZoneTable, DarkLayout, DomainBar}
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Get.vue

@@ -1,5 +1,6 @@
 <template>
   <DarkLayout>
+    <router-link :to="{name: 'Find'}"></router-link>
     <DomainBar/>
   </DarkLayout>
 </template>
@@ -9,6 +10,11 @@ import DarkLayout from "../components/DarkLayout.vue";
 import DomainBar from "../components/DomainBar.vue";
 export default {
   name: "Get",
+  props: {
+    domain: {
+      type: String,
+    }
+  },
   components: {DomainBar, DarkLayout}
 }
 </script>

src/zone.ts

@@ -0,0 +1,27 @@
+/* Define type Zone with the string zone (like .example.ton) and terms (prices with different conditions) */
+export class Zone {
+    zone: string;
+    min_length: number;
+    length_1: number;
+    length_2: number;
+    price_buy_1?: number;
+    price_buy_2?: number;
+    price_auction_1?: number;
+    price_auction_2?: number;
+
+    constructor(zone: string,
+                price_buy_1?: number, price_buy_2?: number, price_auction_1?: number, price_auction_2?: number,
+                min_length: number = 2, length_1: number = 3, length_2: number = 8
+                ) {
+        this.zone = zone;
+        this.min_length = min_length;
+        this.length_1 = length_1;
+        this.length_2 = length_2;
+        this.price_buy_1 = price_buy_1;
+        this.price_buy_2 = price_buy_2;
+        this.price_auction_1 = price_auction_1;
+        this.price_auction_2 = price_auction_2;
+    }
+
+
+}