Skip to content

Commit

Permalink
Merge pull request #510 from NoroffFEU/476-add-image-button-differs-f…
Browse files Browse the repository at this point in the history 
…rom-prototype

476 add image button differs from prototype
  • Loading branch information
@Psijii
Psijii authored Jan 9, 2024
2 parents fe3466e + 62845df commit e70b833
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 48 deletions.
12 changes: 7 additions & 5 deletions pages/auth/register/applicant/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@
<body id="registerPageApplicant">
<header></header>
<main class="px-sm-3 py-5 bg-theme-dark">
<div class="container maxWidthContainer my-3 shadow bg-white p-3 rounded-1 w-50" style="min-width: 300px;">
<div class="container maxWidthContainer my-3 shadow bg-white p-3 rounded-1 w-50" style="min-width: 300px">
<h1 class="fw-bold">Register For Applicant</h1>
<!-- Register form -->
<!-- Register form -->
<form class="row g-3" id="registerForm-applicant">
<div class="d-flex justify-content-center mb-3">
<div class="d-flex justify-content-center align-items-center rounded-circle bg-theme-new-grey registerImg"><button type="button" class="btn text-decoration-underline" data-bs-toggle="modal" data-bs-target="#exampleModal">Add image</button></div>
<div class="d-flex justify-content-center align-items-center border border-dark rounded-circle bg-theme-new-grey registerImg">
<button type="button" class="btn text-decoration-underline py-5 px-4" data-bs-toggle="modal" data-bs-target="#exampleModal">Add image</button>
</div>
</div>
<div class="col-md-6">
<label class="mb-2" for="fullName">Full Name*</label>
Expand All @@ -28,12 +30,12 @@ <h1 class="fw-bold">Register For Applicant</h1>
</div>
<div class="col-md-6">
<label class="mb-2" for="emailStudent">Email*</label>
<input type="email" class="form-control" aria-label="Email" name="email" id="emailStudent" pattern="^[\w\-.]+@(stud.)?noroff.no$" title="The email value must be a valid stud.noroff.no or noroff.no email address." required>
<input type="email" class="form-control" aria-label="Email" name="email" id="emailStudent" pattern="^[\w\-.]+@(stud.)?noroff.no$" title="The email value must be a valid stud.noroff.no or noroff.no email address." required />
<div class="error"></div>
</div>
<div class="col-md-6">
<label class="mb-2" for="passwordStudent">Password*</label>
<input type="password" class="form-control" aria-label="Password" name="password" id="passwordStudent" minlength="8" title="The password value must be at least 8 characters." required>
<input type="password" class="form-control" aria-label="Password" name="password" id="passwordStudent" minlength="8" title="The password value must be at least 8 characters." required />
<div class="error"></div>
</div>
<div class="col-md-6">
Expand Down
69 changes: 26 additions & 43 deletions pages/auth/register/company/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,20 @@
<meta name="description" content="This page lets companies who are looking for talent to register on the website." />
<title>Noroff Jobs</title>
<!-- Links and scripts -->
<link href="/css/index.css" rel="stylesheet">
<link href="/css/index.css" rel="stylesheet" />
<script src="/index.js" defer type="module"></script>
</head>
<body id="registerPageCompany">
<header></header>
<main class="px-sm-3 py-5 bg-theme-dark">
<div class="container maxWidthContainer my-3 shadow bg-white p-3 rounded-1 w-50" style="min-width: 300px;">
<div class="container maxWidthContainer my-3 shadow bg-white p-3 rounded-1 w-50" style="min-width: 300px">
<h1 class="fw-bold">Register For companies</h1>
<!-- Register form -->
<!-- Register form -->
<form class="row g-3" id="registerForm-company">
<div class="d-flex justify-content-center mb-3">
<div class="d-flex justify-content-center align-items-center rounded-circle bg-theme-new-grey registerImg"><button type="button" class="btn text-decoration-underline" data-bs-toggle="modal" data-bs-target="#exampleModal">Add image</button></div>
<div class="d-flex justify-content-center align-items-center border border-dark rounded-circle bg-theme-new-grey registerImg">
<button type="button" class="btn text-decoration-underline py-5 px-4" data-bs-toggle="modal" data-bs-target="#exampleModal">Add image</button>
</div>
</div>
<div class="col-md-6">
<label class="mb-2" for="companyName">Company name*</label>
Expand Down Expand Up @@ -56,50 +58,32 @@ <h1 class="fw-bold">Register For companies</h1>
<a href="../applicant/index.html" class="btn text-black align-self-center text-decoration-underline" id="companyReg">Not a company? Register as an applicant instead!</a>
</div>
</form>
<!-- image modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<form class="modal-dialog " id="add-image">
<div class="modal-content d-flex">
<button
type="button"
class="button-close align-self-end"
data-bs-dismiss="modal"
aria-label="Close"
><img class="icon" src="../../../../public/assets/icons/close.svg" alt=""></button>
<div class="px-4 pb-4">
<div class="modal-header border-0">
<h1 class="modal-title fs-5 fw-bold" id="exampleModalLabel">
Add image
</h1>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="mb-2" for="imageUrl">Direct image url</label>
<input
type="url"
class="form-control"
id="imageUrl"
name="avatar"
/>
</div>
<span>Generate a direct image url on <a class="link-theme-primary" href="https://postimages.org/">https://postimages.org/</a></span>
</div>
<div class="modal-footer border-0">
<!-- There are styles for a background img ready for JS.-->
<button class="btn btn-theme-primary btn-lg text-light rounded-1 w-100">Add image</button>
</div>
<!-- image modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<form class="modal-dialog" id="add-image">
<div class="modal-content d-flex">
<button type="button" class="button-close align-self-end" data-bs-dismiss="modal" aria-label="Close"><img class="icon" src="../../../../public/assets/icons/close.svg" alt="" /></button>
<div class="px-4 pb-4">
<div class="modal-header border-0">
<h1 class="modal-title fs-5 fw-bold" id="exampleModalLabel">Add image</h1>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="mb-2" for="imageUrl">Direct image url</label>
<input type="url" class="form-control" id="imageUrl" name="avatar" />
</div>
<span>Generate a direct image url on <a class="link-theme-primary" href="https://postimages.org/">https://postimages.org/</a></span>
</div>
<div class="modal-footer border-0">
<!-- There are styles for a background img ready for JS.-->
<button class="btn btn-theme-primary btn-lg text-light rounded-1 w-100">Add image</button>
</div>

<span>Generate a direct image url on <a class="link-theme-primary" href="https://postimages.org/">https://postimages.org/</a></span>
</div>
<div class="modal-footer border-0">
<!-- There are styles for a background img ready for JS.-->
<button class="btn btn-theme-primary btn-lg text-light rounded-1 w-100">Add image</button>
</div>
</div>
</form>
Expand All @@ -108,7 +92,6 @@ <h1 class="modal-title fs-5 fw-bold" id="exampleModalLabel">
</div>
</main>
<footer></footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>
</html>

0 comments on commit e70b833

Please sign in to comment.