Skip to content

Commit

Permalink
Merge pull request #2 from EXPITC/develop
Browse files Browse the repository at this point in the history 
mobile responsiveness.
  • Loading branch information
@EXPITC
EXPITC authored Jun 16, 2022
2 parents bcea563 + d6dbbf2 commit 4c72353
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 78 deletions.
2 changes: 1 addition & 1 deletion src/App.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
const linkElement = screen.getByText(/Preorder Basis/i);
expect(linkElement).toBeInTheDocument();
});
3 changes: 2 additions & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ function App() {
opacity: 0
}}
/>
<Help/>
<div
style={{
position: open ? 'fixed' : 'inherit',
Expand All @@ -46,7 +47,7 @@ function App() {
{/* <Route path="invoices" element={<Invoices />} /> */}
</Route>
</Routes>
<Help/>

<Footer />
</div>
</div>
Expand Down
76 changes: 51 additions & 25 deletions src/components/Header/navigation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,10 @@ export function NavigationMini({
};
}, [controls, open, setOpen, width]);
useEffect(() => {
controls.start('close')
},[controls, width])
controls.start('close');
}, [controls, width]);
// end of responsive

return (
<NavMobile>
<BarMobile
Expand All @@ -163,16 +165,21 @@ export function NavigationMini({
>
<FontAwesomeIcon icon={faBarsStaggered} />
</BarMobile>

<Panel variants={panelVariant} animate={controls} initial='rest'>
<ListNavMobile layoutScroll>
<li>
<a href='/'>Home</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/collections/same-day-delivery'>Same Day Delivery</a>
<a href='https://www.lacherpatisserie.com/collections/same-day-delivery'>
Same Day Delivery
</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/collections/1-day-preorder'>1 Day Preorder</a>
<a href='https://www.lacherpatisserie.com/collections/1-day-preorder'>
1 Day Preorder
</a>
</li>
<li
onClick={() => {
Expand All @@ -196,16 +203,22 @@ export function NavigationMini({
<a href='https://www.lacherpatisserie.com/blogs/news'>Blogs</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/pages/about-us'>About Us</a>
<a href='https://www.lacherpatisserie.com/pages/about-us'>
About Us
</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/pages/contact-us'>Contact Us</a>
<a href='https://www.lacherpatisserie.com/pages/contact-us'>
Contact Us
</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/account/login'>Log in</a>
</li>
<li>
<a href='https://www.lacherpatisserie.com/account/register'>Create Account</a>
<a href='https://www.lacherpatisserie.com/account/register'>
Create Account
</a>
</li>
</ListNavMobile>

Expand All @@ -223,23 +236,20 @@ export function NavigationMini({
<FontAwesomeIcon icon={faAngleLeft} />
<p>{header}</p>
</li>
{option.map(({url,name}) => {
return(
<li>
<a href={url}>{name}</a>
{option.map(({ url, name }) => {
return (
<li>
<a href={url}>{name}</a>
</li>
)
);
})}
</>
);
})}
</DropLeft>
</Panel>
<Brand
variants={brandVariant}
animate={controls}
initial='rest'
>

<Brand variants={brandVariant} animate={controls} initial='rest'>
<div>
<motion.a href='https://twitter.com/LookItsMeTc'>
<FontAwesomeIcon icon={faTwitter} fontSize='22' />
Expand Down Expand Up @@ -292,7 +302,9 @@ export function NavigationDefault() {
<DropDown variants={allProductVariant} textcenter='true'>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/collections/cakes-gateaux'>Whole Cake</a>
<a href='https://www.lacherpatisserie.com/collections/cakes-gateaux'>
Whole Cake
</a>
</motion.span>
</li>
<li>
Expand All @@ -304,12 +316,16 @@ export function NavigationDefault() {
</li>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/collections/limited-edition'>Limited Edition</a>
<a href='https://www.lacherpatisserie.com/collections/limited-edition'>
Limited Edition
</a>
</motion.span>
</li>
<li>
<motion.span variants={listEntryVariant(y)}>
<a href='https://www.lacherpatisserie.com/collections/add-ons'>Add-Ons</a>
<a href='https://www.lacherpatisserie.com/collections/add-ons'>
Add-Ons
</a>
</motion.span>
</li>
</DropDown>
Expand All @@ -327,27 +343,37 @@ export function NavigationDefault() {
<DropDown variants={deliveryVariant}>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/pages/delivery'>Delivery Fee</a>
<a href='https://www.lacherpatisserie.com/pages/delivery'>
Delivery Fee
</a>
</motion.span>
</li>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/pages/frequently-asked-questions'>FAQs</a>
<a href='https://www.lacherpatisserie.com/pages/frequently-asked-questions'>
FAQs
</a>
</motion.span>
</li>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/pages/how-to-choose-the-flavour'>How To Choose The Flavour</a>
<a href='https://www.lacherpatisserie.com/pages/how-to-choose-the-flavour'>
How To Choose The Flavour
</a>
</motion.span>
</li>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/pages/allergen-and-diet-information'>Allergen and Diet Information</a>
<a href='https://www.lacherpatisserie.com/pages/allergen-and-diet-information'>
Allergen and Diet Information
</a>
</motion.span>
</li>
<li>
<motion.span variants={listEntryVariant()}>
<a href='https://www.lacherpatisserie.com/pages/how-to-find-our-store'>Our Store (For Pickup Only)</a>
<a href='https://www.lacherpatisserie.com/pages/how-to-find-our-store'>
Our Store (For Pickup Only)
</a>
</motion.span>
</li>
</DropDown>
Expand Down
45 changes: 17 additions & 28 deletions src/components/Header/style/header.styled.components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export const WrapperTop = styled.div`
height: 80px;
width: 100vw;
justify-content: center;
padding: 10px 0 10px 0;
padding: 10px 0 11px 0;
background-color: var(--header-background);
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
Expand All @@ -33,7 +33,7 @@ export const WrapperTop = styled.div`
export const PersonChart = styled.div`
position: absolute;
right: 3%;
right: 30px;
& > * {
transition: var(--transition-default);
cursor: pointer;
Expand Down Expand Up @@ -67,7 +67,6 @@ export const List = styled(motion.ul)<{ laptop?: String }>`
justify-content: center;
align-items: center;
width: fit-content;
/* border:1px solid blue; */
padding: 0;
/* @media ${laptopM} {
} */
Expand Down Expand Up @@ -168,55 +167,45 @@ export const DropDown = styled(motion.ul)<{ textcenter?: String }>`
//-------------------mobile navigation
export const BarMobile = styled(motion.span)`
position: absolute;
left: 30px;
left: 20px;
top: 120px;
z-index: 999;
@media (max-width: 633px) {
top: 140px;
}
};
@media (max-width: 411px) {
top: 160px;
}
};
@media (max-width: 320px) {
top: 180px;
}
};
`;

export const NavMobile = styled.div`
background-color: var(--mobile-menu-background);
margin: 0;
padding: 0;
/* position: sticky; */
/* z-index: 99; */
width: fit-content;
display: flex;
flex-direction: column;
/* justify-content: flex-start; */
justify-content: center;
align-content: space-around;
align-items: center;
height: inherit;
@media (min-width: 1011px) {
display: none;
}
/* @media (max-width: 700px) {
width: 60vw;
} */
`;

export const Panel = styled(motion.div)`
background-color: var(--sale-color);
flex: 1;
max-width: 40vw;
max-width: 330px;
opacity: 0;
@media (max-width: 700px) {
max-width: 60vw;
@media (max-width: 411px) {
max-width: 220px;
}
/* @media (){
} */
/* overflow: scroll; */
/* scroll-behavior: smooth; */
> * {
margin: 0;
padding: 0;
Expand All @@ -238,17 +227,18 @@ export const ListNavMobile = styled(motion.ul)`
& li {
/* and this */
position: sticky;
padding: 0 1vw 0 3vw;
padding: 0 5px 0 30px;
/* 330px */
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid black;
width: 35vw;
@media (max-width: 700px) {
padding: 0 3vw 0 5vw;
width: 50vw;
width: 280px;
text-align: left;
@media (max-width: 411px) {
width: 170px;
}
height: 50px;
height: 51px;
border: none;
border-bottom: 1px solid var(--color-scheme-dark-background);
:first-child {
Expand Down Expand Up @@ -281,7 +271,6 @@ export const ListNavMobile = styled(motion.ul)`

export const DropLeft = styled(motion.ul)`
background-color: var(--sale-color);
/* opacity: 0.5; */
top: 0;
padding-top: 40px;
height: 100vh;
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/style/variant/header.variant.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ export const barVariant = (screen: 'tablet' | 'phone' | 'phoneS' | false) => {
},
close: {
rotate: -360,
left: screen ? '40px' : '30px',
left: '30px',
top: top(),
},
flip: {
Expand Down
26 changes: 18 additions & 8 deletions src/components/Help/style/help.styled.components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from 'styled-components';

export const HelpBtn = styled.div`
position: fixed;
z-index: 99;
z-index: 300;
height: 30px;
width: 30px;
background-color: var(--button-background-color);
Expand All @@ -12,6 +12,13 @@ export const HelpBtn = styled.div`
bottom: 30px;
right: 30px;
border-radius: 50%;
@media (max-width:320px) {
bottom:15px;
right: 15px;
padding: 10px;
width: 25px;
height: 25px;
}
> img {
background-color: transparent;
}
Expand Down Expand Up @@ -45,6 +52,7 @@ export const Panel = styled(motion.div)`
bottom: 0;
}
`;

export const Header = styled.div`
width: 100%;
height: 8%;
Expand Down Expand Up @@ -104,6 +112,7 @@ export const Header = styled.div`
}
}
`;

export const PanelOption = styled(motion.div)`
padding: 20% 5% 0 5%;
Expand All @@ -123,7 +132,6 @@ export const Wrapper = styled(motion.div)`
}
`;

// export const

export const BoxContent = styled(motion.div)`
height: fit-content;
Expand Down Expand Up @@ -240,18 +248,20 @@ export const ListContent = styled(motion.ul)`

export const Trigger = styled(motion.span)`
width: fit-content;
@media (max-width:400px) {
width: 25vw;
height: 14vw;
}
height: 30px;
display: flex;
align-items: center;
position: fixed;
z-index: 99;
bottom: 15vh;
z-index: 300;
bottom: 100px;
padding: 5px;
right: 30px;
@media (max-width:320px) {
right: 15px;
bottom: 70px;
padding: 2px;
font-size: 12px;
}
background-color: #ffff;
border-radius: 10px;
cursor: pointer;
Expand Down
Loading

1 comment on commit 4c72353

@vercel
Copy link

@vercel vercel bot commented on 4c72353 Jun 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

lacherpatisserie-onepageshot – ./

lacherpatisserie-onepageshot.vercel.app
lacherpatisserie-onepageshot-git-main-expitc.vercel.app
lacherpatisserie-onepageshot-expitc.vercel.app

Please sign in to comment.