danielroe.dev
[READ-ONLY] Mirror of https://github.com/danielroe/dwaring87-webdev-wedding. Marissa & David's Wedding Website!
Alert & UI Tweaks
author
David Waring
date
(Oct 10, 2022, 4:49 PM -0400)
commit
f2a5fbbf
f2a5fbbf67c8464ab4e4ef3f4eb9ec6927ac499f
parent
ed20b738
ed20b73896c1d0cc1b8b88d7463fed6eb4b53711
+60
-37
+10
-3
assets/default.css
+10
-3
assets/default.css
···
13
13
@apply max-w-7xl mx-auto px-2 sm:px-6 lg:px-8;
14
14
}
15
15
16
+
.bg-primary {
17
+
@apply bg-gradient-to-b from-emerald-700 to-emerald-800;
18
+
}
19
+
.bg-secondary {
20
+
@apply bg-gradient-to-b from-cyan-700 to-cyan-800;
21
+
}
22
+
16
23
.btn {
17
-
@apply block mt-8 text-center bg-white px-5 py-3 text-base font-medium text-cyan-600 shadow w-full lg:w-fit rounded-md border border-gray-200 hover:bg-slate-100 cursor-pointer disabled:bg-slate-400 disabled:cursor-default;
24
+
@apply block mt-8 text-center bg-white px-5 py-3 text-base font-medium text-cyan-800 shadow w-full lg:w-fit rounded-md border border-gray-200 hover:bg-slate-100 cursor-pointer disabled:bg-slate-400 disabled:cursor-default;
18
25
}
19
26
.btn-dark {
20
-
@apply btn bg-cyan-700 text-white border-transparent hover:bg-cyan-800 disabled:bg-slate-400 !important;
27
+
@apply btn bg-secondary text-slate-100 border-transparent hover:from-cyan-800 hover:to-cyan-800 disabled:bg-slate-400 !important;
21
28
}
22
29
23
30
input, textarea {
···
25
32
}
26
33
27
34
.alert {
28
-
@apply bg-amber-500 text-white border-2 border-red-700 rounded-md shadow-md p-4;
35
+
@apply bg-amber-500 text-white border-2 border-amber-700 rounded-md shadow-md p-4;
29
36
}
30
37
.success {
31
38
@apply bg-emerald-600 text-emerald-100 border-2 border-emerald-800 rounded-md shadow-md p-4;
+24
components/Alert.vue
+24
components/Alert.vue
···
1
+
<script setup>
2
+
import RiAlert from '~icons/ri/alert-fill';
3
+
import RiClose from '~icons/ri/close-circle-fill';
4
+
const { getAlert } = useCMS();
5
+
const alert = await getAlert();
6
+
const displayAlert = ref(true);
7
+
</script>
8
+
9
+
<template>
10
+
<div v-if="alert && displayAlert" class="m-0 w-full md:my-4 md:mx-auto md:max-w-xl md:shadow-xl">
11
+
<div class="alert rounded-none">
12
+
<div class="flex gap-4 items-center">
13
+
<RiAlert class="w-12" />
14
+
<div>
15
+
<div class="flex border-b border-gray-50/30 mb-2">
16
+
<p class="flex-grow"><strong>{{ alert.title }}</strong></p>
17
+
<RiClose @click="displayAlert = false" class="relative -top-3 -right-6 w-12 hover:cursor-pointer" />
18
+
</div>
19
+
<div v-html="alert.message"></div>
20
+
</div>
21
+
</div>
22
+
</div>
23
+
</div>
24
+
</template>
components/Check.vue
components/Form/Check.vue
components/Check.vue
components/Form/Check.vue
+1
-1
components/Home/BikeTour.vue
+1
-1
components/Home/BikeTour.vue
···
1
1
<template>
2
2
<div class="container py-8">
3
-
<div class="overflow-hidden rounded-lg bg-cyan-800 shadow-xl lg:grid lg:grid-cols-2 lg:gap-4">
3
+
<div class="bg-secondary overflow-hidden rounded-lg shadow-xl lg:grid lg:grid-cols-2 lg:gap-4">
4
4
<div class="px-6 pt-10 pb-12 sm:px-16 sm:pt-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
5
5
<div class="lg:self-center">
6
6
<h2 class="text-3xl font-bold text-white sm:text-4xl">
+7
-7
components/RSVP/Edit.vue
+7
-7
components/RSVP/Edit.vue
···
57
57
<div>
58
58
<h2>{{ invitation.name }}</h2>
59
59
60
-
<div class="mx-4 mt-4 mb-8 p-4 bg-gray-100 border border-gray-400 rounded-md shadow" :id="guest.id" v-for="(guest, index) in invitation.guests" :key="guest.id">
60
+
<div class="mx-4 mt-4 mb-8 px-4 bg-gray-100 border border-gray-400 rounded-md shadow" :id="guest.id" v-for="(guest, index) in invitation.guests" :key="guest.id">
61
61
<div class="group">
62
62
<p>Name:</p>
63
63
<input class="guest-name" :value="guest.name" />
···
69
69
</div>
70
70
<div class="group">
71
71
<p>RSVP (Friday Welcome Dinner):</p>
72
-
<Toggle class="guest-rsvp-welcome" :enabled="guest.rsvp_welcome" />
73
-
<p class="info">Will you be attending the Welcome Dinner the Friday evening before the wedding?</p>
72
+
<FormToggle class="guest-rsvp-welcome" :enabled="guest.rsvp_welcome" />
73
+
<p class="info">Will you be attending the welcome dinner (potluck) the Friday evening before the wedding?</p>
74
74
</div>
75
75
<div class="group">
76
76
<p>RSVP (Saturday Ceremony & Reception):</p>
77
-
<Toggle class="guest-rsvp" :enabled="guest.rsvp_welcome" />
77
+
<FormToggle class="guest-rsvp" :enabled="guest.rsvp_welcome" />
78
78
<p class="info">Will you be attending the wedding ceremony and reception on Saturday?</p>
79
79
</div>
80
80
<div class="group">
81
81
<p>Dietary Restrictions:</p>
82
82
<div class="flex flex-wrap gap-2">
83
-
<Check class="guest-diet" v-for="(value, key) in DIET" :code="key" :label="value" :enabled="guest.dietary_restrictions && guest.dietary_restrictions.includes(key)" />
83
+
<FormCheck class="guest-diet" v-for="(value, key) in DIET" :code="key" :label="value" :enabled="guest.dietary_restrictions && guest.dietary_restrictions.includes(key)" />
84
84
</div>
85
85
</div>
86
86
<div class="group">
···
104
104
105
105
<style scoped>
106
106
.group {
107
-
@apply flex flex-col gap-2 pb-8;
107
+
@apply flex flex-col gap-2 py-5;
108
108
}
109
109
.group p {
110
110
@apply font-bold;
111
111
}
112
112
.group p.info {
113
-
@apply font-normal italic text-gray-600;
113
+
@apply text-sm font-normal italic text-gray-500;
114
114
}
115
115
</style>
+2
-2
components/RSVP/Instructions.vue
+2
-2
components/RSVP/Instructions.vue
···
4
4
</script>
5
5
6
6
<template>
7
-
<div>
7
+
<div class="bg-secondary py-4 px-6 sm:px-10 lg:py-12 rounded-t-md lg:rounded-tr-none lg:rounded-tl-md lg:rounded-bl-md">
8
8
<h1 class="text-white">RSVP</h1>
9
-
<div class="instructions mt-6 max-w-3xl text-base text-cyan-100">
9
+
<div class="instructions mt-6 max-w-3xl text-base text-slate-100">
10
10
<p>To RSVP:</p>
11
11
<ol class="list-decimal pl-8">
12
12
<li>Find the unique invite code from the invitation insert. This will be a code like <code class="font-bold">fuzzy-purple-emu</code>.</li>
+1
-1
components/RSVP/Lookup.vue
+1
-1
components/RSVP/Lookup.vue
···
41
41
<h2>Find Your Invitation</h2>
42
42
<div class="flex flex-wrap gap-4 p-8">
43
43
<p><strong>Invite Code:</strong></p>
44
-
<input type="text" v-model="invite_code" placeholder="fuzzy-purple-emu" @keyup.enter="lookup" />
44
+
<input type="text" v-model="invite_code" placeholder="fuzzy-purple-emu" @keyup.enter="lookup" autofocus />
45
45
<button class="btn-dark w-full" @click="lookup" :disabled="looking">
46
46
Find Invitation
47
47
</button>
components/Toggle.vue
components/Form/Toggle.vue
components/Toggle.vue
components/Form/Toggle.vue
+14
-22
components/Toolbar.vue
+14
-22
components/Toolbar.vue
···
1
1
<script setup>
2
2
import RiRiding from '~icons/ri/riding-line';
3
-
import RiAlert from '~icons/ri/alert-fill';
4
-
import RiClose from '~icons/ri/close-circle-fill';
5
-
const { getDetails, getAlert } = useCMS();
3
+
const { getDetails } = useCMS();
6
4
const couple = await getDetails('couple');
7
-
const alert = await getAlert();
8
-
const displayAlert = ref(true);
9
5
</script>
10
6
11
7
<template>
12
8
<div>
13
-
<nav class="bg-emerald-800 text-emerald-100">
9
+
<nav class="bg-primary text-emerald-100 shadow-md">
14
10
<div class="container">
15
11
<div class="h-14 flex justify-between items-center">
16
-
<div class="flex items-center font-bold opacity-80 hover:opacity-100">
17
-
<NuxtLink to="/"><RiRiding class="inline" /> {{ couple }}</NuxtLink>
18
-
</div>
19
-
</div>
20
-
</div>
21
-
</nav>
22
-
<div v-if="alert && displayAlert" class="m-0 w-full md:my-4 md:mx-auto md:max-w-xl">
23
-
<div class="alert rounded-none">
24
-
<div class="flex gap-4 items-center">
25
-
<RiAlert class="w-12" />
26
-
<div>
27
-
<p><strong>{{ alert.title }}</strong></p>
28
-
<div v-html="alert.message"></div>
12
+
<div class="flex items-center">
13
+
<NuxtLink to="/"><RiRiding class="inline" /> {{ couple }}</NuxtLink>
29
14
</div>
30
15
<div class="flex-grow"></div>
31
-
<RiClose @click="displayAlert = false" class="w-12 hover:cursor-pointer" />
16
+
<NuxtLink to="/rsvp">RSVP</NuxtLink>
32
17
</div>
33
18
</div>
34
-
</div>
19
+
</nav>
20
+
<Alert />
35
21
</div>
36
-
</template>
22
+
</template>
23
+
24
+
<style scoped>
25
+
a {
26
+
@apply font-bold opacity-80 hover:opacity-100;
27
+
}
28
+
</style>
+1
-1
pages/rsvp.vue
+1
-1
pages/rsvp.vue
···
35
35
<div class="max-w-5xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
36
36
<div class="relative bg-white border-2 border-gray-100 rounded-md shadow-xl">
37
37
<div class="grid grid-cols-1 lg:grid-cols-3">
38
-
<RSVPInstructions class="relative overflow-hidden bg-cyan-800 py-10 px-6 sm:px-10 xl:p-12 rounded-t-md lg:rounded-tr-none lg:rounded-tl-md lg:rounded-bl-md" />
38
+
<RSVPInstructions class="relative overflow-hidden" />
39
39
<div v-if="loaded" class="py-10 px-6 sm:px-10 lg:col-span-2 xl:p-12">
40
40
<RSVPUpdated v-if="updated" />
41
41
<RSVPEdit v-else-if="invitation" :invitation="invitation" @cancel="onCancel" @updated="onUpdated" />