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