Browse Source

FindQ, GetDomainBtn, loader (rotating square)

vue
Lev 2 years ago
parent
commit
dd6199ffd9
  1. 22
      .idea/workspace.xml
  2. 2
      src/components/DomainBar.vue
  3. 73
      src/components/GetDomainBtn.vue
  4. 88
      src/components/RotateSquare2.vue
  5. 2
      src/components/TonButton.vue
  6. 6
      src/components/ZonePricing.vue
  7. 6
      src/router/index.ts
  8. 46
      src/views/FindQ.vue
  9. 4
      src/views/Get.vue

22
.idea/workspace.xml

@ -1,13 +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="ZoneTable with ZonePricing">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="/get/:zone/:domain">
<change afterPath="$PROJECT_DIR$/src/components/GetDomainBtn.vue" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/views/FindQ.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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/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/router/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.ts" 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/views/TonDns.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/TonDns.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -75,7 +77,7 @@
<workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="19806000" />
<workItem from="1671204365793" duration="4251000" />
<workItem from="1671204365793" duration="8038000" />
</task>
<task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>
@ -119,7 +121,14 @@
<option name="project" value="LOCAL" />
<updated>1671116726928</updated>
</task>
<option name="localTasksCounter" value="7" />
<task id="LOCAL-00007" summary="/get/:zone/:domain">
<created>1671214435706</created>
<option name="number" value="00007" />
<option name="presentableId" value="LOCAL-00007" />
<option name="project" value="LOCAL" />
<updated>1671214435706</updated>
</task>
<option name="localTasksCounter" value="8" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -143,6 +152,7 @@
<MESSAGE value="DarkLayout + Domain Bar" />
<MESSAGE value="Started writing ZoneTable + improvements to the search bar" />
<MESSAGE value="ZoneTable with ZonePricing" />
<option name="LAST_COMMIT_MESSAGE" value="ZoneTable with ZonePricing" />
<MESSAGE value="/get/:zone/:domain" />
<option name="LAST_COMMIT_MESSAGE" value="/get/:zone/:domain" />
</component>
</project>

2
src/components/DomainBar.vue

@ -1,7 +1,7 @@
<template>
<div class="domain-bar">
<div style="display: flex" class="prompt-cont">
<contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()"></contenteditable>
<contenteditable :contenteditable="editable" tag="div" class="prompt" :no-nl="true" v-model="val" :no-html="true" @returned="search()" spellcheck="false"></contenteditable>
<div class="post-prompt">{{ zone }}</div>
</div>
<div class="search" v-if="has_button" @click="search()">Search</div>

73
src/components/GetDomainBtn.vue

@ -0,0 +1,73 @@
<template>
<div class="get-domain">
Get<br/>
<p class="domain">{{domain}}</p>
for<br/>
<span class="price">
{{price}}
<img src="@/assets/icons/ton_bottom.svg" class="ton_img" alt="TON"/>
</span>
</div>
</template>
<script>
export default {
name: "GetDomainBtn",
props: {
domain: {
type: String,
required: true
},
price: {
type: Number,
required: true
},
}
}
</script>
<style scoped>
/* #0088cc rounded box with cursor: pointer */
.get-domain {
border-radius: 1rem;
background-color: #0088cc;
color: white;
font-size: 1.5rem;
text-align: center;
padding: 2rem;
cursor: pointer;
}
@media only screen and (max-width: 800px) {
.get-domain {
width: 90vw;
/* allow multiple rows with 0.5 spacing */
flex-wrap: wrap;
}
}
.domain {
font-family: 'Inconsolata', monospace;
font-weight: bold;
font-size: 2.5rem;
}
@media only screen and (max-width: 800px) {
.domain {
font-size: 1.7rem;
}
}
.price {
font-size: 3rem;
font-weight: bold;
font-family: 'Inconsolata', monospace;
}
.price > img {
width: 2rem;
height: 2rem;
margin-left: -0.3rem;
}
</style>

88
src/components/RotateSquare2.vue

@ -0,0 +1,88 @@
<template>
<div v-bind:style="styles" class="spinner spinner--rotate-square-2"></div>
</template>
<script>
export default {
props: {
size: {
default: '40px'
},
background: {
default: '#0000'
}
},
computed: {
styles () {
return {
width: this.size,
height: this.size,
backgroundColor: this.background
}
}
}
}
</script>
<style lang="scss" scoped>
.spinner {
position: relative;
* {
line-height: 0;
box-sizing: border-box;
}
&:before {
content: '';
width: 100%;
height: 20%;
min-width: 5px;
background: #000;
opacity: 0.1;
position: absolute;
bottom: 0%;
left: 0;
border-radius: 50%;
animation: rotate-square-2-shadow .5s linear infinite;
}
&:after {
content: '';
width: 100%;
height: 100%;
background: #834c6e;
animation: rotate-square-2-animate .5s linear infinite;
position: absolute;
bottom:40%;
left: 0;
border-radius: 3px;
}
}
@keyframes rotate-square-2-animate {
17% {
border-bottom-right-radius: 3px;
}
25% {
transform: translateY(20%) rotate(22.5deg);
}
50% {
transform: translateY(40%) scale(1, .9) rotate(45deg);
border-bottom-right-radius: 50%;
}
75% {
transform: translateY(20%) rotate(67.5deg);
}
100% {
transform: translateY(0) rotate(90deg);
}
}
@keyframes rotate-square-2-shadow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.2, 1);
}
}
</style>

2
src/components/TonButton.vue

@ -1,7 +1,7 @@
<template>
<button class="b darkish">
<span><slot></slot></span>
<img src="@/assets/icons/ton_bottom.svg" alt="Next"/>
<img src="@/assets/icons/ton_bottom.svg" alt="TON"/>
</button>
</template>

6
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">
<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">
<img src="@/assets/icons/instant_buy.svg" class="buy_img" alt="Instant Buy"/>
</Popper>
</th>
@ -45,7 +45,7 @@
</tr>
</tbody>
</table>
<router-link :to="{name: 'Get', params: {domain: 'example' + zone.zone}}">
<router-link :to="{name: 'Get', params: {domain_init: 'example', zone: zone.zone}}">
<div v-if="has_get" class="get_b">
Get
</div>

6
src/router/index.ts

@ -48,6 +48,12 @@ const router = createRouter({
path: '/find',
name: 'Find',
component: () => import('../views/Find.vue')
},
{
path: '/find/:query',
name: 'FindQ',
component: () => import('../views/FindQ.vue'),
props: true
}
]
})

46
src/views/FindQ.vue

@ -0,0 +1,46 @@
<template>
<DarkLayout>
<div class="center">
<DomainBar zone="" :value="query_" @search="search()" @input_d="query_ = $event"/>
<RotateSquare2 v-if="results === null"/>
<div v-for="result in results" :key="result">
</div>
</div>
</DarkLayout>
</template>
<script>
import DomainBar from "../components/DomainBar.vue";
import DarkLayout from "../components/DarkLayout.vue";
import RotateSquare2 from "../components/RotateSquare2.vue";
export default {
name: "FindQ",
props: {
query: {
type: String,
},
},
data() {
return {
query_: this.query
}
},
components: {RotateSquare2, DarkLayout, DomainBar},
methods: {
search() {
this.$router.push({name: 'FindQ', params: {query: this.query_}});
}
},
computed: {
results() {
return [];
}
}
}
</script>
<style scoped>
</style>

4
src/views/Get.vue

@ -2,12 +2,14 @@
<DarkLayout>
<router-link :to="{name: 'Find'}"><!-- todo: "All zones" button here --></router-link>
<DomainBar :zone="zone" :value="domain" @search="search()" @input_d="handle_input($event)"/>
<GetDomain :domain="domain + zone" :price="5"/>
</DarkLayout>
</template>
<script>
import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
import GetDomain from "../components/GetDomainBtn.vue";
export default {
name: "Get",
props: {
@ -18,7 +20,7 @@ export default {
type: String,
}
},
components: {DomainBar, DarkLayout},
components: {GetDomain, DomainBar, DarkLayout},
data() {
return {
domain: this.domain_init

Loading…
Cancel
Save