Browse Source

Started writing ZoneTable + improvements to the search bar

vue
Lev 2 years ago
parent
commit
1099ebc13d
  1. 30
      .idea/workspace.xml
  2. 2
      src/components/DarkLayout.vue
  3. 17
      src/components/DomainBar.vue
  4. 86
      src/components/ZoneTable.vue
  5. 12
      src/router/index.ts
  6. 31
      src/views/Find.vue
  7. 6
      src/views/Get.vue
  8. 27
      src/zone.ts

30
.idea/workspace.xml

@ -1,16 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ChangeListManager"> <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$/.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/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> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -21,6 +20,7 @@
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
<option value="Vue Single File Component" /> <option value="Vue Single File Component" />
<option value="TypeScript File" />
</list> </list>
</option> </option>
</component> </component>
@ -76,7 +76,7 @@
<workItem from="1670839496719" duration="10862000" /> <workItem from="1670839496719" duration="10862000" />
<workItem from="1670927344373" duration="29000" /> <workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" /> <workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="5450000" /> <workItem from="1671024025708" duration="11597000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -99,7 +99,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1671026238851</updated> <updated>1671026238851</updated>
</task> </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 /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -120,6 +127,7 @@
<MESSAGE value="Wrote the landing" /> <MESSAGE value="Wrote the landing" />
<MESSAGE value="TON Web page" /> <MESSAGE value="TON Web page" />
<MESSAGE value="Adaptivity + more assets" /> <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> </component>
</project> </project>

2
src/components/DarkLayout.vue

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

17
src/components/DomainBar.vue

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

86
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>

12
src/router/index.ts

@ -25,9 +25,15 @@ const router = createRouter({
component: () => import('../views/TonDns.vue') 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')
} }
] ]
}) })

31
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>

6
src/views/Get.vue

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

27
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;
}
}
Loading…
Cancel
Save