Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

75 frontend overflow bug #83

Merged
merged 2 commits into from
Oct 31, 2023
Merged

75 frontend overflow bug #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fe0c48f
fixed form overflow on firefox
TylerPopson Oct 31, 2023
4b79695
fixed form overflow on chrome
TylerPopson Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions src/statego-frontend/src/components/LogIn.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,27 @@ function togglePass() {
</script>

<template>
<div class="flex h-1/2 w-1/4 flex-col rounded-lg border-t-8 border-t-indigo-500 bg-gray-100 drop-shadow-2xl">
<div class="flex min-h-[250px] w-5/6 flex-none flex-col rounded-lg border-t-8 border-t-violet-500 bg-gray-100 drop-shadow-2xl md:w-1/4">
<h1 class="flex w-full justify-center pb-12 font-Nunito-Sans text-3xl font-bold">Login</h1>
<form class="flex w-full">
<div class="flex h-full w-full flex-col items-center justify-center">
<label class="w-4/5 font-Nunito-Sans text-xs" for="userName">Username or email</label>
<input
class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
v-model="userName"
/>
<div class="flex h-full w-full flex-col items-center justify-center gap-3">
<div class="flex w-full flex-col items-center justify-center">
<label class="w-4/5 font-Nunito-Sans text-xs" for="userName">Username or email</label>
<input
class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
v-model="userName"
/>
</div>

<br />

<label class="justify-left w-4/5 font-Nunito-Sans text-xs" for="password">Password</label>
<input
class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
:type="showPass"
v-model="password"
/>
<div class="flex w-full flex-col items-center justify-center">
<label class="justify-left w-4/5 font-Nunito-Sans text-xs" for="password">Password</label>
<input
class="flex h-10 w-4/5 rounded-md border-2 border-solid border-gray-400 bg-gray-50 font-Nunito-Sans hover:bg-gray-100"
:type="showPass"
v-model="password"
/>
</div>
<button @click.prevent="togglePass">
<span class="icon">
<i class="fas" :class="{ 'fa-eye-slash': showPass, 'fa-eye': !showPass }"></i>
Expand All @@ -40,15 +43,15 @@ function togglePass() {
<br />
<div class="justify-left flex w-4/5">
<button
class="flex h-10 w-2/5 items-center justify-center rounded-md bg-indigo-500 font-Nunito-Sans text-xl font-bold shadow-md hover:text-white hover:shadow-lg"
class="flex h-10 w-2/5 items-center justify-center rounded-md bg-violet-500 font-Nunito-Sans text-xl font-bold shadow-md hover:text-white hover:shadow-lg"
type="submit"
value="Log In"
>
Log In
</button>
</div>

<p class="justify-left w-4/5 pt-4 font-Nunito-Sans text-xs">
<p class="justify-left w-4/5 pb-5 font-Nunito-Sans text-xs">
Don't have an account yet?
<RouterLink class="text-violet-400 underline" to="/signup"> Sign Up! </RouterLink>
</p>
Expand Down
2 changes: 1 addition & 1 deletion src/statego-frontend/src/components/SignupForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function submit() {
</script>

<template>
<div class="flex w-5/6 flex-col items-center rounded-md border-t-8 border-violet-500 bg-gray-100 shadow-lg md:h-3/5 md:w-1/4">
<div class="flex w-5/6 flex-col items-center rounded-md border-t-8 border-violet-500 bg-gray-100 shadow-lg md:w-1/4">
<h1 class="p-3 font-Nunito-Sans text-3xl font-bold">Sign Up</h1>
<form class="flex w-full flex-col items-center justify-center gap-y-4">
<!-- email addrees field -->
Expand Down