Skip to content

Commit 5816c7c

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#12 from NangialaiStoman/hire-modal
Add hire form
2 parents eb1699e + 7a3acbc commit 5816c7c

File tree

1 file changed

+183
-0
lines changed

1 file changed

+183
-0
lines changed

‎src/components/shared/Header.vue‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@
8080
<div>
8181
<button
8282
class="text-md font-medium bg-indigo-500 hover:bg-indigo-600 text-white shadow-sm rounded-lg px-5 py-2.5"
83+
@click="showModal()"
8384
>
8485
Hire Me
8586
</button>
@@ -94,6 +95,134 @@
9495
</div>
9596
</div>
9697
</div>
98+
99+
<!-- Hire me modal start -->
100+
<transition name="fade">
101+
<div v-show="modal" class="fixed inset-0 z-30">
102+
<!-- background -->
103+
<div
104+
v-show="modal"
105+
@click="showModal()"
106+
class="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"
107+
></div>
108+
<!-- -->
109+
<main
110+
class="flex flex-col items-center justify-center h-full w-full"
111+
>
112+
<transition name="fade-up-down">
113+
<div
114+
v-show="modal"
115+
class="modal-wrapper flex items-center z-30"
116+
>
117+
<div
118+
class="modal max-w-md mx-5 xl:max-w-xl lg:max-w-xl md:max-w-xl bg-secondary-light dark:bg-primary-dark max-h-screen shadow-lg flex-row rounded-xl relative"
119+
>
120+
<div
121+
class="modal-header flex justify-between gap-10 p-5 border-b border-ternary-light dark:border-ternary-dark"
122+
>
123+
<h5
124+
class=" text-primary-dark dark:text-primary-light text-2xl"
125+
>
126+
What project are you looking for?
127+
</h5>
128+
<button
129+
class="px-4 font-bold text-primary-dark dark:text-primary-light"
130+
@click="showModal()"
131+
>
132+
X
133+
</button>
134+
</div>
135+
<div
136+
class="modal-body p-5 w-full h-full overflow-y-auto "
137+
>
138+
<form class="max-w-xl m-4 text-left">
139+
<div class="">
140+
<input
141+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
142+
id="name"
143+
name="name"
144+
type="text"
145+
required=""
146+
placeholder="Name"
147+
aria-label="Name"
148+
/>
149+
</div>
150+
<div class="mt-6">
151+
<input
152+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
153+
id="email"
154+
name="email"
155+
type="text"
156+
required=""
157+
placeholder="Email"
158+
aria-label="Email"
159+
/>
160+
</div>
161+
<div class="mt-6">
162+
<select
163+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
164+
id="subject"
165+
name="subject"
166+
type="text"
167+
required=""
168+
aria-label="Subject"
169+
>
170+
<option selected disabled
171+
>Select Project Type</option
172+
>
173+
<option value="web"
174+
>Web Application</option
175+
>
176+
<option value="mobile"
177+
>Mobile Applicaiton</option
178+
>
179+
<option value="design"
180+
>UI/UX Design</option
181+
>
182+
<option value="graphic"
183+
>Branding</option
184+
>
185+
</select>
186+
</div>
187+
188+
<div class="mt-6">
189+
<textarea
190+
class="w-full px-5 py-2 border-1 border-gray-200 dark:border-secondary-dark rounded-lg text-md dark:font-medium bg-secondary-light dark:bg-ternary-dark text-primary-dark dark:text-ternary-light"
191+
id="message"
192+
name="message"
193+
cols="14"
194+
rows="6"
195+
placeholder="Project description"
196+
></textarea>
197+
</div>
198+
199+
<div class="mt-6">
200+
<button
201+
class="px-6 py-2.5 text-white font-medium tracking-wider bg-indigo-500 hover:bg-indigo-600 rounded-lg"
202+
type="submit"
203+
>
204+
Send Request
205+
</button>
206+
</div>
207+
</form>
208+
</div>
209+
<div
210+
class="modal-footer py-3 px-5 border0-t text-right"
211+
>
212+
<button
213+
class="px-6 py-2 bg-indigo-400 rounded-lg font-bold text-primary-light"
214+
@click="showModal()"
215+
>
216+
Close
217+
</button>
218+
</div>
219+
</div>
220+
</div>
221+
</transition>
222+
</main>
223+
</div>
224+
</transition>
225+
<!-- Hire me modal end -->
97226
</nav>
98227
</template>
99228

@@ -109,6 +238,7 @@ export default {
109238
return {
110239
isOpen: false,
111240
theme: '',
241+
modal: false,
112242
};
113243
},
114244
@@ -123,6 +253,20 @@ export default {
123253
updateTheme(theme) {
124254
this.theme = theme;
125255
},
256+
showModal() {
257+
if (this.modal) {
258+
//stop screen scrolling
259+
document
260+
.getElementsByTagName('html')[0]
261+
.classList.remove('overflow-y-hidden');
262+
this.modal = false;
263+
} else {
264+
document
265+
.getElementsByTagName('html')[0]
266+
.classList.add('overflow-y-hidden');
267+
this.modal = true;
268+
}
269+
},
126270
},
127271
updated() {
128272
feather.replace();
@@ -136,4 +280,43 @@ export default {
136280
@apply dark:text-indigo-400;
137281
@apply font-medium;
138282
}
283+
284+
.modal-body {
285+
max-height: 500px;
286+
}
287+
.bg-gray-800-opacity {
288+
background-color: #2d374850;
289+
}
290+
@media screen and (max-width: 768px) {
291+
.modal-body {
292+
max-height: 400px;
293+
}
294+
}
295+
.fade-up-down-enter-active {
296+
transition: all 0.3s ease;
297+
}
298+
.fade-up-down-leave-active {
299+
transition: all 0.3s ease;
300+
}
301+
.fade-up-down-enter {
302+
transform: translateY(10%);
303+
opacity: 0;
304+
}
305+
.fade-up-down-leave-to {
306+
transform: translateY(10%);
307+
opacity: 0;
308+
}
309+
310+
.fade-enter-active {
311+
-webkit-transition: opacity 2s;
312+
transition: opacity 0.3s;
313+
}
314+
.fade-leave-active {
315+
transition: opacity 0.3s;
316+
}
317+
318+
.fade-enter,
319+
.fade-leave-to {
320+
opacity: 0;
321+
}
139322
</style>

0 commit comments

Comments
 (0)