Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add email subscribe to inline search items

Browse source
This commit is contained in:
Sam Carlton 2020-11-13 16:14:27 -06:00
parent 74670b4fe6
commit f6e1c213c3
2 changed files with 66 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

42
components/email-subscribe.vue
View file

@ -10,14 +10,14 @@
>
<label
v-show="isFocused"
for="email-subscribe"
:for="inputId"
class="block font-medium absolute"
style="top: -2em;"
>Email</label>
<div class="mt-1 relative rounded-md shadow-sm">
<div
v-show="isFocused"
class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
class="absolute inset-y-0 left-0 pl-1 flex items-center pointer-events-none"
>
<!-- Heroicon name: mail -->
<svg
@ -31,12 +31,9 @@
</svg>
</div>
<input
id="email-subscribe"
:id="inputId"
v-model="email"
:class="[
'form-input block w-full rounded-md bg-darker neumorphic-shadow py-1',
isFocused ? 'pl-10' : 'placeholder-white text-center border border-transparent px-3'
]"
:class="inputClasslist"
:placeholder="isFocused ? 'me@email.com' : 'Tell me when this changes'"
name="email-subscribe"
style="width: 230px;"
@ -72,6 +69,10 @@ export default {
notes: {
type: String,
default: ''
},
inputClassGroups: {
type: Object,
default: () => {}
}
},
data: function () {
@ -82,6 +83,33 @@ export default {
feedbackMessage: null,
}
},
computed: {
inputId () {
return `email-subscribe-${this._uid}`
},
inputClasslist () {
const defaultClassGroups = {
general: 'form-input block w-full rounded-md py-1',
shadow: 'neumorphic-shadow',
bg: 'bg-darker',
focus: 'pl-8',
blur: 'placeholder-white text-center border border-transparent px-3',
}
const mergedClassGroups = {
...defaultClassGroups,
...this.inputClassGroups
}
if (this.isFocused) {
delete mergedClassGroups.blur
} else {
delete mergedClassGroups.focus
}
return Object.values(mergedClassGroups)
}
},
methods: {
async trySubmit () {
console.log('Trying submit')

40
components/search.vue
View file

@ -42,6 +42,7 @@
<li
v-for="(app, i) in results"
:key="`${app.slug}-${i}`"
class="relative"
>
<a
:href="`/app/${ app.slug }`"
@ -63,17 +64,11 @@
<span class="">{{ app.text }}</span>
</div>
</div>
<div class="hidden md:block">
<!-- <div class="hidden md:block">
<div>
<!-- <div class="text-sm leading-5 text-gray-900">
Applied on
<time datetime="2020-01-07">January 7, 2020</time>
</div> -->
<!-- <div class="mt-2 flex items-center text-sm leading-5 text-gray-500">
{{ app.text }}
</div> -->
</div>
</div>
</div> -->
</div>
</div>
<div>
@ -90,6 +85,28 @@
</div>
</div>
</a>
<div
class="search-item-options relative md:absolute md:inset-0 w-full pointer-events-none"
>
<div class="search-item-options-container h-full flex md:justify-end items-center py-4 md:px-12">
<div class="subscribe space-y-6 sm:space-x-6">
<EmailSubscribe
:app-name="app.name"
:input-class-groups="{
shadow: 'hover:neumorphic-shadow',
bg: '',
focus: 'bg-transparent neumorphic-shadow pl-8',
blur: 'placeholder-white text-center border border-transparent bg-transparent opacity-50 hover:opacity-100 px-3',
}"
class="pointer-events-auto"
/>
</div>
</div>
</div>
</li>
</ul>
</div>
@ -105,6 +122,8 @@ import scrollIntoView from 'scroll-into-view-if-needed'
import appList from '~/assets/app-list.json'
import EmailSubscribe from '~/components/email-subscribe.vue'
// import overlayStore from './mixins/store'
// import modalRouter from '~/components/modals/mixins/router'
// import Card from '~/components/cards/Default.vue'
@ -114,6 +133,9 @@ import appList from '~/assets/app-list.json'
// import PlayCircle from '~/assets/svg/play-circle.svg?inline'
export default {
components: {
EmailSubscribe
},
props: {
appList: {
type: Array,