Skip to content

Commit

Permalink
Merge pull request #634 from NoroffFEU/619-breakpoints-on-listings-page
Browse files Browse the repository at this point in the history 
Fixes grid breakpoints for the listingsContainer and cards on listing…
  • Loading branch information
@RiverMichael
RiverMichael authored Jan 10, 2024
2 parents c21bdd5 + 1a4aff7 commit 6b2eeda
Show file tree
Hide file tree
Showing 3 changed files with 116 additions and 68 deletions.
98 changes: 75 additions & 23 deletions pages/listings/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,31 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Description -->
<meta name="description" content="This page provides an overview of all the job listings that are posted on the website." />
<meta
name="description"
content="This page provides an overview of all the job listings that are posted on the website."
/>
<title>Noroff Jobs</title>
<!-- Links and scripts -->
<link href="/src/scss/custom/_allListingPage.scss" rel="stylesheet" />
<link href="/css/index.css" rel="stylesheet" />
<script defer src="/index.js" type="module"></script>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
</head>
<body id="listing">
<!--Header is created trough JS script-->
<header></header>
<!--Main content on page-->
<main class="bg-theme-new-grey py-5">
<div class="container w-75 d-flex flex-column gap-5 bg-theme-light mt-5 mb-3 pb-3 shadow" id="container-listings">
<div
class="container w-75 d-flex flex-column gap-5 bg-theme-light mt-5 mb-3 pb-3 shadow"
id="container-listings"
>
<!--Top of listings container-->
<section class="d-flex justify-content-center">
<div class="mt-5 col-6">
Expand All @@ -28,11 +39,22 @@ <h1 class="mt-2 py-1 text-center fw-bold">Job Listings</h1>
<div class="input-group">
<label for="searchListing"></label>
<div class="search-input-group">
<input class="form-control search-listing-input" type="search" id="searchListing" data-search-listings />
<input
class="form-control search-listing-input"
type="search"
id="searchListing"
data-search-listings
/>
<img src="/assets/icons/search.svg" alt="Search icon" class="icon-sm" />
</div>
<div class="dropdown">
<button class="btn" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
<button
class="btn"
type="button"
id="dropdownMenuButton1"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<img src="/assets/icons/filter.svg" alt="Search icon" class="icon-sm" />
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
Expand All @@ -43,61 +65,91 @@ <h1 class="mt-2 py-1 text-center fw-bold">Job Listings</h1>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Bootstrap grid cards-->
<div class="row g-4 listingContainer d-flex flex-wrap justify-content-center row-cols-1 row-cols-lg-2 row-cols-xl-3 px-5">
<div class="row g-4 listingContainer justify-content-center px-5">
<!-- dummy-cards start -->
<div class="card bg-theme-light shadow col-md-5 col-sm-12 m-2">
<div class="card bg-theme-light shadow col-12 col-md-5 m-2">
<div class="mt-5 px-2 thumbnail-img card-img-top img-fluid img-thumbnail">
<img src="../../public/images/logoipsum-287.svg" class="rounded-start" alt="..." />
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam tempore! Reiciendis soluta doloremque . . .</p>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam
tempore! Reiciendis soluta doloremque . . .
</p>
</div>
<div>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50">View</a>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50"
>View</a
>
</div>
</div>
<div class="card bg-theme-light shadow col-md-5 col-sm-12 m-2">
<div class="card bg-theme-light shadow col-12 col-md-5 m-2">
<div class="mt-5 px-2">
<img src="../../public/images/logoipsum-287.svg" class="img-fluid rounded-start" alt="..." />
<img
src="../../public/images/logoipsum-287.svg"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam tempore! Reiciendis soluta doloremque . . .</p>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam
tempore! Reiciendis soluta doloremque . . .
</p>
</div>
<div>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50">View</a>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50"
>View</a
>
</div>
</div>
<div class="card bg-theme-light shadow col-md-5 col-sm-12 m-2">
<div class="card bg-theme-light shadow col-12 col-md-5 m-2">
<div class="mt-5 px-2">
<img src="../../public/images/logoipsum-287.svg" class="img-fluid rounded-start" alt="..." />
<img
src="../../public/images/logoipsum-287.svg"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam tempore! Reiciendis soluta doloremque . . .</p>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam
tempore! Reiciendis soluta doloremque . . .
</p>
</div>
<div>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50">View</a>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50"
>View</a
>
</div>
</div>
<div class="card bg-theme-light shadow col-md-5 col-sm-12 m-2">
<div class="card bg-theme-light shadow col-12 col-md-5 m-2">
<div class="mt-5 px-2">
<img src="../../public/images/logoipsum-287.svg" class="img-fluid rounded-start" alt="..." />
<img
src="../../public/images/logoipsum-287.svg"
class="img-fluid rounded-start"
alt="..."
/>
</div>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet.</h5>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam tempore! Reiciendis soluta doloremque . . .</p>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum ducimus vitae ipsam
tempore! Reiciendis soluta doloremque . . .
</p>
</div>
<div>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50">View</a>
<a href="#" class="btn btn-theme-primary text-theme-black fw-semibold p-3 m-2 w-50"
>View</a
>
</div>
</div>
<!-- dummy cards ends -->
Expand Down
4 changes: 2 additions & 2 deletions src/js/api/auth/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,10 @@ export async function login(profile) {
new Store('id', id, Boolean(remember !== 'on'));
// add chck for id :

if (id === id) { // spiderman.gif
if (id === id) {
// spiderman.gif
new Store('Role', 'user', Boolean(remember !== 'on'));
window.location.replace('/pages/user/index.html');

} else if (profile.admin) {
localStorage.setItem('Role', 'admin');
window.location.replace('#'); // TODO: Add admin page url
Expand Down
82 changes: 39 additions & 43 deletions src/scss/custom/_allListingPage.scss
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,47 @@

.icon {
width: 50px;
}

.icon-sm {
width: 25px;
}

.ms-n5 {
margin-left: -40px;
width: 50px;
}

.icon-sm {
width: 25px;
}

.ms-n5 {
margin-left: -40px;
}
.search-input-group {
position: relative;

img {
position: absolute;
top: 10px;
right: 30px;
}
.search-input-group {
position: relative;

img {
position: absolute;
top: 10px;
right: 30px;
}
}

.input-group .search-listing-input {
}

.input-group .search-listing-input {
background-color: var(--bs-white);
border: none;
width: 30rem;
height: 2.7rem;
margin-right: 0.8rem;
box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2) inset;
-webkit-box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2) inset;

&:focus {
background-color: var(--bs-white);
border: none;
width: 30rem;
height: 2.7rem;
margin-right: 0.8rem;
box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;
-webkit-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;
-moz-box-shadow: 1px 3px 5px 0px rgba(0,0,0,0.2) inset;

&:focus {
background-color: var(--bs-white);
}
}
}

@media (max-width: 34em) {

.input-group .search-listing-input {
width: 20rem;
}
@media (max-width: 34em) {
.input-group .search-listing-input {
width: 20rem;
}
}

@media (max-width: 25em) {

.input-group .search-listing-input {
width: 16rem;
}
@media (max-width: 25em) {
.input-group .search-listing-input {
width: 16rem;
}

}

0 comments on commit 6b2eeda

Please sign in to comment.