9 changed files with 265 additions and 51 deletions
|
After Width: | Height: | Size: 221 KiB |
@ -0,0 +1,44 @@
|
||||
<template> |
||||
<main style="width: 100vw; min-height: 100vh; height: 100%;" id="dark_body"> |
||||
<Header/> |
||||
<div class="center"> |
||||
<div class="content"> |
||||
<slot></slot> |
||||
</div> |
||||
</div> |
||||
</main> |
||||
</template> |
||||
|
||||
<script> |
||||
import Header from "../components/Header.vue"; |
||||
|
||||
export default { |
||||
name: "DarkLayout", |
||||
components: {Header} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
#dark_body { |
||||
background-color: #282e46; |
||||
} |
||||
|
||||
.content { |
||||
padding: 2.5rem 32px; |
||||
text-align: center; |
||||
display: inline-block; |
||||
font-size: 1.6rem; |
||||
color: white; |
||||
min-height: 50vh; |
||||
min-width: 16rem; |
||||
margin: 0.5rem 3rem; |
||||
} |
||||
|
||||
.center { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
flex-direction: column; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,127 @@
|
||||
<template> |
||||
<div class="domain-bar"> |
||||
<div style="display: flex" class="prompt-cont"> |
||||
<contenteditable :contenteditable="editable" tag="div" class="prompt" v-model="val" :no-html="true" @returned="search()"></contenteditable> |
||||
<div class="post-prompt">{{ postprompt }}</div> |
||||
</div> |
||||
<div class="search" v-if="has_button" @click="search()">Search</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import contenteditable from 'vue-contenteditable'; |
||||
|
||||
export default { |
||||
name: "DomainBar", |
||||
components: {contenteditable}, |
||||
props: { |
||||
postprompt: { |
||||
type: String, |
||||
default: ".ton" |
||||
}, |
||||
has_button: { |
||||
type: Boolean, |
||||
default: true |
||||
}, |
||||
value: { |
||||
type: String, |
||||
default: "example" |
||||
}, |
||||
editable: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
val: this.value |
||||
} |
||||
}, |
||||
methods: { |
||||
search() { |
||||
this.$emit("search", this.val); |
||||
} |
||||
}, |
||||
watch: { |
||||
value: function (val) { |
||||
this.val = val; |
||||
}, |
||||
val: function (val) { |
||||
this.$emit("input", val); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.domain-bar { |
||||
border-radius: 1rem; |
||||
width: 30rem; |
||||
min-height: 5rem; |
||||
padding: 0 0.5rem; |
||||
background-color: #4e5a88; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
} |
||||
|
||||
/* flex container with vertical centering */ |
||||
.prompt-cont { |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
} |
||||
|
||||
/* the bar is narrower on mobile (90% of the screen) */ |
||||
@media only screen and (max-width: 800px) { |
||||
.domain-bar { |
||||
width: 90vw; |
||||
/* allow multiple rows with 0.5 spacing */ |
||||
flex-wrap: wrap; |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
.prompt { |
||||
border-radius: 0.5rem; |
||||
min-width: 40%; |
||||
height: 3rem; |
||||
background-color: #363e5e; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
color: white; |
||||
font-size: 1.5rem; |
||||
font-weight: 500; |
||||
padding: 0 1rem; |
||||
outline: none; |
||||
user-select: none; |
||||
cursor: text; |
||||
margin-right: 0.4rem; |
||||
margin-top: 0.5rem; |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
|
||||
/* #e36464 search button with #363e5e text */ |
||||
.search { |
||||
border-radius: 0.5rem; |
||||
height: 3rem; |
||||
background-color: #e36464; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
place-items: center; |
||||
color: #363e5e; |
||||
font-size: 1.3rem; |
||||
font-weight: 500; |
||||
padding: 0 1rem; |
||||
cursor: pointer; |
||||
margin-left: 1rem; |
||||
margin-top: 0.5rem; |
||||
margin-bottom: 0.5rem; |
||||
} |
||||
</style> |
||||
@ -1,30 +1,35 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router' |
||||
import {createRouter, createWebHistory} from 'vue-router' |
||||
import Landing from '../views/Landing.vue' |
||||
|
||||
const router = createRouter({ |
||||
history: createWebHistory(import.meta.env.BASE_URL), |
||||
routes: [ |
||||
{ |
||||
path: '/', |
||||
name: 'home', |
||||
component: Landing |
||||
}, |
||||
{ |
||||
path: '/tonweb', |
||||
name: 'tonweb', |
||||
component: () => import('../views/TonWeb.vue') |
||||
}, |
||||
{ |
||||
path: '/i-know', |
||||
name: 'IKnow', |
||||
component: () => import('../views/IKnow.vue') |
||||
}, |
||||
{ |
||||
path: '/tondns', |
||||
name: 'tondns', |
||||
component: () => import('../views/TonDns.vue') |
||||
} |
||||
] |
||||
history: createWebHistory(import.meta.env.BASE_URL), |
||||
routes: [ |
||||
{ |
||||
path: '/', |
||||
name: 'home', |
||||
component: Landing |
||||
}, |
||||
{ |
||||
path: '/tonweb', |
||||
name: 'tonweb', |
||||
component: () => import('../views/TonWeb.vue') |
||||
}, |
||||
{ |
||||
path: '/i-know', |
||||
name: 'IKnow', |
||||
component: () => import('../views/IKnow.vue') |
||||
}, |
||||
{ |
||||
path: '/tondns', |
||||
name: 'tondns', |
||||
component: () => import('../views/TonDns.vue') |
||||
}, |
||||
{ |
||||
path: '/get', |
||||
name: 'get', |
||||
component: () => import('../views/Get.vue') |
||||
} |
||||
] |
||||
}) |
||||
|
||||
export default router |
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<DomainBar/> |
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script> |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import DomainBar from "../components/DomainBar.vue"; |
||||
export default { |
||||
name: "Get", |
||||
components: {DomainBar, DarkLayout} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue