Browse Source

ZoneTable with ZonePricing

vue
Lev 2 years ago
parent
commit
d2c53f9c25
  1. 33
      .idea/workspace.xml
  2. 4
      index.html
  3. 51
      package-lock.json
  4. 3
      package.json
  5. 55
      src/assets/icons/buy.svg
  6. 58
      src/assets/icons/instant_buy.svg
  7. 45
      src/assets/main.css
  8. 7
      src/components/DarkLayout.vue
  9. 29
      src/components/TonButton.vue
  10. 102
      src/components/ZonePricing.vue
  11. 11
      src/components/ZoneTable.vue
  12. 2
      src/views/Find.vue
  13. 6
      src/zone.ts

33
.idea/workspace.xml

@ -1,15 +1,18 @@
<?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="DarkLayout + Domain Bar"> <list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Started writing ZoneTable + improvements to the search bar">
<change afterPath="$PROJECT_DIR$/src/components/ZoneTable.vue" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/components/TonButton.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" /> <change afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/zone.ts" 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$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" 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/DarkLayout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DarkLayout.vue" 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$/src/components/DomainBar.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/DomainBar.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/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/views/Find.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Find.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Get.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Get.vue" afterDir="false" /> <change beforePath="$PROJECT_DIR$/src/zone.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/zone.ts" 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" />
@ -19,8 +22,8 @@
<component name="FileTemplateManagerImpl"> <component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES"> <option name="RECENT_TEMPLATES">
<list> <list>
<option value="Vue Single File Component" />
<option value="TypeScript File" /> <option value="TypeScript File" />
<option value="Vue Single File Component" />
</list> </list>
</option> </option>
</component> </component>
@ -76,7 +79,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="11597000" /> <workItem from="1671024025708" duration="16340000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -106,7 +109,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1671029892636</updated> <updated>1671029892636</updated>
</task> </task>
<option name="localTasksCounter" value="5" /> <task id="LOCAL-00005" summary="Started writing ZoneTable + improvements to the search bar">
<created>1671100962105</created>
<option name="number" value="00005" />
<option name="presentableId" value="LOCAL-00005" />
<option name="project" value="LOCAL" />
<updated>1671100962105</updated>
</task>
<option name="localTasksCounter" value="6" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -128,6 +138,7 @@
<MESSAGE value="TON Web page" /> <MESSAGE value="TON Web page" />
<MESSAGE value="Adaptivity + more assets" /> <MESSAGE value="Adaptivity + more assets" />
<MESSAGE value="DarkLayout + Domain Bar" /> <MESSAGE value="DarkLayout + Domain Bar" />
<option name="LAST_COMMIT_MESSAGE" value="DarkLayout + Domain Bar" /> <MESSAGE value="Started writing ZoneTable + improvements to the search bar" />
<option name="LAST_COMMIT_MESSAGE" value="Started writing ZoneTable + improvements to the search bar" />
</component> </component>
</project> </project>

4
index.html

@ -4,8 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.png"> <link rel="icon" href="/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
href="https://fonts.googleapis.com/css?family=Raleway"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<title>Agorata</title> <title>Agorata</title>
</head> </head>
<body> <body>

51
package-lock.json generated

@ -12,7 +12,8 @@
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-contenteditable": "^4.1.0", "vue-contenteditable": "^4.1.0",
"vue-router": "^4.1.6" "vue-router": "^4.1.6",
"vue3-popper": "^1.5.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.12", "@types/node": "^18.11.12",
@ -486,6 +487,15 @@
"node": ">= 8" "node": ">= 8"
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "18.11.13", "version": "18.11.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz",
@ -964,6 +974,11 @@
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true "dev": true
}, },
"node_modules/debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
},
"node_modules/define-properties": { "node_modules/define-properties": {
"version": "1.1.4", "version": "1.1.4",
"dev": true, "dev": true,
@ -2606,6 +2621,21 @@
"typescript": "*" "typescript": "*"
} }
}, },
"node_modules/vue3-popper": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
"integrity": "sha512-xaEnx90YBnlSg5G2yWqm2DHWHg+DB99UVRp4VsyTF0QLXyHrqSuE1Xo5+sG0AQq/lBcrGMlk5NU5xE2MDLKViw==",
"dependencies": {
"@popperjs/core": "^2.9.2",
"debounce": "^1.2.1"
},
"engines": {
"node": ">=12"
},
"peerDependencies": {
"vue": "^3.2.20"
}
},
"node_modules/which-boxed-primitive": { "node_modules/which-boxed-primitive": {
"version": "1.0.2", "version": "1.0.2",
"dev": true, "dev": true,
@ -2875,6 +2905,11 @@
"fastq": "^1.6.0" "fastq": "^1.6.0"
} }
}, },
"@popperjs/core": {
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
},
"@types/node": { "@types/node": {
"version": "18.11.13", "version": "18.11.13",
"resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.13.tgz",
@ -3276,6 +3311,11 @@
"integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==", "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
"dev": true "dev": true
}, },
"debounce": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
"integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
},
"define-properties": { "define-properties": {
"version": "1.1.4", "version": "1.1.4",
"dev": true, "dev": true,
@ -4352,6 +4392,15 @@
"@volar/vue-typescript": "1.0.13" "@volar/vue-typescript": "1.0.13"
} }
}, },
"vue3-popper": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.5.0.tgz",
"integrity": "sha512-xaEnx90YBnlSg5G2yWqm2DHWHg+DB99UVRp4VsyTF0QLXyHrqSuE1Xo5+sG0AQq/lBcrGMlk5NU5xE2MDLKViw==",
"requires": {
"@popperjs/core": "^2.9.2",
"debounce": "^1.2.1"
}
},
"which-boxed-primitive": { "which-boxed-primitive": {
"version": "1.0.2", "version": "1.0.2",
"dev": true, "dev": true,

3
package.json

@ -14,7 +14,8 @@
"sass": "^1.56.2", "sass": "^1.56.2",
"vue": "^3.2.45", "vue": "^3.2.45",
"vue-contenteditable": "^4.1.0", "vue-contenteditable": "^4.1.0",
"vue-router": "^4.1.6" "vue-router": "^4.1.6",
"vue3-popper": "^1.5.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.11.12", "@types/node": "^18.11.12",

55
src/assets/icons/buy.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 106 KiB

58
src/assets/icons/instant_buy.svg

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 106 KiB

45
src/assets/main.css

@ -105,3 +105,48 @@ a,
.rbox > p:not(:first-child) { .rbox > p:not(:first-child) {
margin-top: 1rem; margin-top: 1rem;
} }
.center {
display: flex;
justify-content: center;
align-items: center;
place-items: center;
flex-direction: column;
}
.b.darkish {
background-color: #4e5a88;
color: white;
border-radius: 0.5rem;
font-size: 1rem;
}
.mono {
font-family: 'Inconsolata', monospace;
}
:root {
--popper-theme-background-color: #fff;
--popper-theme-background-color-hover: #fff;
--popper-theme-text-color: black;
--popper-theme-border-width: 0px;
--popper-theme-border-style: solid;
--popper-theme-border-radius: 6px;
--popper-theme-padding: 4px;
--popper-theme-box-shadow: 0 6px 30px -6px rgba(0, 0, 0, 0.25);
}
.popper {
font-size: 0.8rem;
font-family: 'Inconsolata', monospace;
}
.mobile-scale {
scale: 100%;
}
@media (max-width: 800px) {
.mobile-scale {
scale: 70%;
}
}

7
src/components/DarkLayout.vue

@ -34,11 +34,4 @@ export default {
margin: 0.5rem 3rem; margin: 0.5rem 3rem;
} }
.center {
display: flex;
justify-content: center;
align-items: center;
place-items: center;
flex-direction: column;
}
</style> </style>

29
src/components/TonButton.vue

@ -0,0 +1,29 @@
<template>
<button class="b darkish">
<span><slot></slot></span>
<img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
</button>
</template>
<script>
export default {
name: "TonButton"
}
</script>
<style scoped>
button.b.darkish {
width: 4rem;
height: 2rem;
padding: 0.3rem;
font-family: 'Inconsolata', monospace;
font-weight: bold;
font-size: 1.15rem;
}
button > img:not(:first-child) {
width: 0.8rem;
height: 0.8rem;
margin-left: 0.4rem;
}
</style>

102
src/components/ZonePricing.vue

@ -0,0 +1,102 @@
<template>
<!-- div with vertical centering flex -->
<div style="display: flex; align-items: center; place-items: center">
<!--
It's a table:
| | {icon @/assets/icons/buy.svg} | {icon @/assets/icons/instant_buy.svg} |
| ---------- | ---------------------------- | ------------------------------------- |
| {{'*' * zone.length_1 + zone.zone}} | <TonButton>{{zone.price_auction_1}}</TonButton> | <TonButton>{{zone.price_buy_1}}</TonButton> |
| {{'*' * zone.length_2 + zone.zone}} | <TonButton>{{zone.price_auction_2}}</TonButton> | <TonButton>{{zone.price_buy_2}}</TonButton> |
-->
<table>
<thead>
<tr>
<th></th>
<th v-if="zone.canAuction()">
<Popper content="Buy on auction" placement="left" hover="true" arrow="true">
<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">
<img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
</Popper>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ '*'.repeat(zone.length_1) + zone.zone }}</td>
<td v-if="zone.canAuction()">
<TonButton>{{ zone.price_auction_1 }}</TonButton>
</td>
<td v-if="zone.canBuy()">
<TonButton>{{ zone.price_buy_1 }}</TonButton>
</td>
</tr>
<tr>
<td>{{ '*'.repeat(zone.length_2) + zone.zone }}</td>
<td v-if="zone.canAuction()">
<TonButton>{{ zone.price_auction_2 }}</TonButton>
</td>
<td v-if="zone.canBuy()">
<TonButton>{{ zone.price_buy_2 }}</TonButton>
</td>
</tr>
</tbody>
</table>
<router-link :to="{name: 'Get', params: {domain: 'example' + zone.zone}}">
<div v-if="has_get" class="get_b">
Get
</div>
</router-link>
</div>
</template>
<script>
import {Zone} from "../zone";
import Popper from "vue3-popper";
import TonButton from "./TonButton.vue";
export default {
name: "ZonePricing",
components: {TonButton, Popper},
props: {
zone: {
type: Zone,
default: new Zone(".example.ton", 3, 5)
},
// Whether to show the "Get" button
has_get: {
type: Boolean,
default: true
},
}
}
</script>
<style scoped>
tr > td:first-child {
font-family: 'Inconsolata', monospace;
padding-right: 1rem;
padding-left: 3rem;
}
tr > th {
padding-bottom: -10px;
}
.buy_img {
margin-bottom: -15px;
}
.get_b {
background-color: #e36464;
color: #363e5e;
border-radius: 0.5rem;
padding: 0.2rem 0.8rem;
margin-left: 0.9rem;
margin-top: 2.1rem;
cursor: pointer;
}
</style>

11
src/components/ZoneTable.vue

@ -1,5 +1,5 @@
<template> <template>
<!-- a #4e5a88 rounded box with a #363e5e box inside - so that only the header is #363e5e --> <div style="overflow-x: auto; max-width: 98vw;">
<table class="table_outer"> <table class="table_outer">
<thead class="table_header"> <thead class="table_header">
<tr> <tr>
@ -9,22 +9,27 @@
</thead> </thead>
<tbody class="table_content"> <tbody class="table_content">
<tr v-for="zone in zones" :key="zone.zone"> <tr v-for="zone in zones" :key="zone.zone">
<td> <td class="mobile-scale">
<router-link :to="{name: 'Find' /*todo: specify zone here*/}" style="color: white"> <router-link :to="{name: 'Find' /*todo: specify zone here*/}" style="color: white">
{{ zone.zone }} {{ zone.zone }}
</router-link> </router-link>
</td> </td>
<td></td> <td style="display: flex; justify-content: flex-end" class="mobile-scale">
<ZonePricing :zone="zone"/>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
</template> </template>
<script> <script>
import {Zone} from "../zone"; import {Zone} from "../zone";
import ZonePricing from "./ZonePricing.vue";
export default { export default {
name: "ZoneTable", name: "ZoneTable",
components: {ZonePricing},
props: { props: {
zones: { zones: {
type: Array[Zone], type: Array[Zone],

2
src/views/Find.vue

@ -1,6 +1,8 @@
<template> <template>
<DarkLayout> <DarkLayout>
<div class="center">
<DomainBar/> <DomainBar/>
</div>
<ZoneTable/> <ZoneTable/>
</DarkLayout> </DarkLayout>
</template> </template>

6
src/zone.ts

@ -23,5 +23,11 @@ export class Zone {
this.price_auction_2 = price_auction_2; this.price_auction_2 = price_auction_2;
} }
canBuy(): boolean {
return this.price_buy_1 !== undefined && this.price_buy_1 !== null;
}
canAuction(): boolean {
return this.price_auction_1 !== undefined && this.price_auction_1 !== null;
}
} }

Loading…
Cancel
Save