Skip to content

Commit

Permalink
Changed home screen styling, added test imgs
Browse files Browse the repository at this point in the history
  • Loading branch information
danielcj2 committed Jul 22, 2024
1 parent 5910f3f commit 988d46d
Show file tree
Hide file tree
Showing 8 changed files with 277 additions and 125 deletions.
1 change: 0 additions & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@
<title>Bogue</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA4UBUnjIhF32EFz5JhqXVjtXvX-3Kv9sA&libraries=places&loading=async"></script>
Expand Down
Binary file added src/imgs/img1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imgs/img2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 29 additions & 14 deletions src/pages/Homepage.jsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
import React, { useState } from 'react'
import React, { useState } from "react";

//components
import Header from '../layout/Header';
import Notice from '../components/Notice';
import Modal from '../components/Modal';
import Header from "../layout/Header";
import Modal from "../components/Modal";

import img from '../imgs/homepage-background.jpg';
import useClickOutside from "../hooks/useClickOutside";

import useClickOutside from '../hooks/useClickOutside';
import img1 from "../imgs/img1.jpg";
import img2 from "../imgs/img2.jpg";

//layout
import AccessPortal from '../layout/AccessPortal';
import AccessPortal from "../layout/AccessPortal";
import ShoppingCart from "../layout/ShoppingCart";

const Homepage = () => {
const [modal, setModal] = useState("");
Expand All @@ -20,12 +21,17 @@ const Homepage = () => {

return (
<>
<Notice duplicate={9}/>
<Header setModal={setModal}/>
<div className="notice">Free shipping on orders over $100 CAD</div>
<Header setModal={setModal} />
<div className="section">
<div className="section__home">
<img src={img} alt="homepage background img" draggable="false"></img>
<div className="section__home">
<div className="section__home__split split__left">
<img src={img1} alt="home background left"/>
</div>
<div className="section__home__split split__right">
<img src={img2} alt="home background right"/>
</div>
</div>
</div>
<div className="modals" ref={modalRef}>
<Modal
Expand All @@ -37,9 +43,18 @@ const Homepage = () => {
>
<AccessPortal />
</Modal>
<Modal
title="shopping cart"
isActive={modal === "cart" && true}
type="side"
id="shopping-cart"
setModal={setModal}
>
<ShoppingCart />
</Modal>
</div>
</>
)
}
);
};

export default Homepage
export default Homepage;
19 changes: 18 additions & 1 deletion src/styles/components/_modal.scss
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,23 @@ body:has(.modal-active){
}

&-side{
display: block;
top: 0;
right: 0;
min-width: 550px;
width: 40vw;
height: 100%;
padding: abstracts.$padding-md*1.5 0;
font-family: abstracts.$Poppins;
font-size: abstracts.$padding-md*0.9
font-size: abstracts.$padding-md*0.9;
transition: transform 0.3s ease-in;
transform: scaleX(0);
transform-origin: right;

& div{
transition: opacity 0.3s ease-in 0.1s;
opacity: 0;
}
}

&__header{
Expand Down Expand Up @@ -217,3 +226,11 @@ body:has(.modal-active){
min-height: 15px;
}
}

.modal-active.modal-side{
transform: scaleX(1);

& div{
opacity: 1;
}
}
14 changes: 14 additions & 0 deletions src/styles/layout/_catalog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,20 @@
$nav-width: 15vw;
$gap: 2px;

body:has(.catalog) {
header {
justify-content: flex-end;

.header__left {
visibility: hidden;
display: none;
}
.header__right{
justify-self: end;
}
}
}

.section{
&__spacer{
height: 13vh;
Expand Down
219 changes: 122 additions & 97 deletions src/styles/layout/_header.scss
Original file line number Diff line number Diff line change
@@ -1,118 +1,143 @@
@use '../abstracts';
@use '../components';

.header{
position: relative;
padding: 0 abstracts.$padding-md*7;

@include abstracts.clr(abstracts.$light-bg);

font-family: abstracts.$Lato;
font-weight: 500;
font-size: 0.9rem;

height: 60px;

@include abstracts.flex-row(space-between);

&__left{
padding: abstracts.$padding-md 0;
.header-list{
&__item{
margin: 0 calc(abstracts.$padding-md/2);

&__options__dropdown{
padding: 3rem 5rem;
border: solid 1px rgba(0,0,0,0.3);
border-left: none;
border-right: none;
font-size: abstracts.$padding-md*0.8;
background-color: abstracts.$light-bg;
top: 100%;
justify-content: space-around;
min-height: 34vh;
}
}
}
@use "../abstracts";
@use "../components";

.header {
position: relative;
padding: 0 abstracts.$padding-md * 7;

@include abstracts.clr(abstracts.$light-bg);

font-family: abstracts.$Lato;
font-weight: 500;
font-size: 0.9rem;

height: 60px;

@include abstracts.flex-row(space-between);

&__right {
.header-list__item {
margin: 0 calc(abstracts.$padding-md/2);
}
}

&__left {
.header-list {
&__item {
padding: 0 calc(abstracts.$padding-md/2);
height: 60px;
display: flex;
align-items: center;

&__options__dropdown {
display: flex;
visibility: hidden;
padding: 3rem 5rem;
border: solid 1px rgba(0, 0, 0, 0.3);
border-left: none;
border-right: none;
font-size: abstracts.$padding-md * 0.8;
background-color: abstracts.$light-bg;
justify-content: space-around;
min-height: 34vh;
transition: all 0.3s ease;
top: 100%;
height: 0;
transform: scaleY(0);
transform-origin: top;

ul {
opacity: 0;
}
}

&__center{
position: absolute;
left: 50%;
transform: translate(-50%);
&__options__dropdown.active {
visibility: visible;
transform: scaleY(1);

svg{
width: 95px;
height: 43px;
ul {
opacity: 1;
transition: opacity 0.5s ease-in 0.1s;
}
}
}
}
}

.header-list{
@include abstracts.flex-row(space-around);
&__center {
position: absolute;
left: 50%;
transform: translate(-50%);

&__item{
padding: calc(abstracts.$padding-md/2);
svg {
width: 95px;
height: 43px;
}
}

max-width: max-content;
max-height: 46px;
}
.header-list {
@include abstracts.flex-row(space-around);

&__link, &__dropdown__button, &__item:has(.user-portal__logout) .user-portal__logout{
@include abstracts.link(black);

svg{
width: 25px;
height: 25px;
}

.user-portal__logout{
margin-top: 0;
}

&:hover{
opacity: 0.6;
}
}
&__item {
max-width: max-content;
}

&__dropdown{
&__button{
@include abstracts.div-button(none, abstracts.$light-bg);
}
&__link,
&__dropdown__button,
&__item:has(.user-portal__logout) .user-portal__logout {
@include abstracts.link(black);

}
svg {
width: 25px;
height: 25px;
}

h4{
font-weight: 600;
}
.user-portal__logout {
margin-top: 0;
}

&:hover {
opacity: 0.6;
}
}

&__dropdown {
&__button {
@include abstracts.div-button(none, abstracts.$light-bg);
}
}

h4 {
font-weight: 600;
}
}
}

.settings-bar{
@include abstracts.flex-row(flex-end);
@include abstracts.clr(abstracts.$light-bg);
.settings-bar {
@include abstracts.flex-row(flex-end);
@include abstracts.clr(abstracts.$light-bg);

padding: 0 abstracts.$padding-md*7;
padding: 0 abstracts.$padding-md * 7;

.settings__dropdown{
&__button{
@include abstracts.flex-row(space-between);
.settings__dropdown {
&__button {
@include abstracts.flex-row(space-between);

@include abstracts.div-button(none, abstracts.$light-bg);
@include abstracts.div-button(none, abstracts.$light-bg);

padding: calc(abstracts.$padding-md/2);

.settings-svg{
width: 25px;
height: 25px;
}
}

&__label{
padding: 3px;
font-family: abstracts.$Poppins;
font-size: calc(abstracts.$padding-md/1.2);
font-weight: 500;
}
padding: calc(abstracts.$padding-md/2);

.settings-svg {
width: 25px;
height: 25px;
}
}
}

&__label {
padding: 3px;
font-family: abstracts.$Poppins;
font-size: calc(abstracts.$padding-md/1.2);
font-weight: 500;
}
}
}
Loading

0 comments on commit 988d46d

Please sign in to comment.