Skip to content

Commit 4e16e35

Browse files
debs-obrienCopilot
debs-obrien
and
Copilot
authored
Banner overflow (#49)
* fix: add z-index to demo notification for improved visibility * feat: add DemoBanner component for demo notifications * feat: enhance layout and styling across components for improved UI consistency * fix: adjust dimensions and padding for improved layout consistency across components * Update movies-app/components/DemoBanner/index.js Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 2f61f13 commit 4e16e35

File tree

13 files changed

+148
-42
lines changed

13 files changed

+148
-42
lines changed

‎movies-app/components/DemoBanner/index.js

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
3+
const DemoBanner = () => (
4+
<>
5+
<div className="demo-banner">
6+
This is a demo intended for testing. Data and images are provided by{' '}
7+
<a href="https://www.themoviedb.org">TMDB</a>.
8+
</div>
9+
<style jsx>{`
10+
.demo-banner {
11+
position: fixed;
12+
top: 0;
13+
left: 0;
14+
width: 100%;
15+
/* height: 30px; */
16+
background-color: #ffee5b;
17+
color: #444;
18+
padding: 0.75rem 1rem;
19+
text-align: center;
20+
border-bottom: 1px solid #cc0;
21+
z-index: 1000;
22+
}
23+
`}</style>
24+
</>
25+
);
26+
27+
export default DemoBanner;

‎movies-app/components/Menu/SectionHeading/index.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,17 @@ const SectionHeading = ({
1111
{children}
1212
</h2>
1313
<style jsx>{`
14-
font-weight: ${theme.typography.fontWeightBold};
15-
font-size: 1.25rem;
16-
color: var(--palette-text-primary);
17-
text-transform: uppercase;
18-
letter-spacing: -0.5px;
19-
margin: 0 0 1rem 1rem;
14+
h2 {
15+
font-weight: ${theme.typography.fontWeightBold};
16+
font-size: 1.25rem;
17+
color: var(--palette-text-primary);
18+
text-transform: uppercase;
19+
letter-spacing: -0.5px;
20+
margin: 0 0 1rem 1rem;
21+
padding-top: 1rem;
22+
position: relative;
23+
}
24+
2025
h2:not(:first-child) {
2126
margin-top: 4rem;
2227
}

‎movies-app/components/Menu/index.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11

22
import { useSelector } from 'react-redux';
33

4-
import Logo from 'components/Logo';
54
import SectionHeading from './SectionHeading';
65
import MenuItem from './MenuItem';
76
import MenuItemLink from './MenuItemLink';
@@ -51,7 +50,6 @@ const renderGenres = (genres, selectedMenuItemName, closeMenu = null) => {
5150
};
5251

5352
const Menu = ({
54-
isMobile,
5553
closeMenu,
5654
...rest
5755
}) => {
@@ -62,7 +60,6 @@ const Menu = ({
6260
return (
6361
<>
6462
<nav {...rest}>
65-
{!isMobile && <Logo />}
6663
<SectionHeading>Discover</SectionHeading>
6764
{renderStaticCategories(staticCategories, selectedMenuItemName, closeMenu)}
6865
<SectionHeading>Genres</SectionHeading>

‎movies-app/components/UI/AppBar/index.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const AppBar = ({
1919
.app-bar {
2020
position: fixed;
2121
top: 30px;
22-
left: auto;
22+
left: 0;
2323
right: 0;
2424
width: 100%;
2525
z-index: ${theme.zIndex.appBar};
@@ -30,7 +30,7 @@ const AppBar = ({
3030
}
3131
3232
.toolbar {
33-
min-height: 64px;
33+
min-height: 46px;
3434
padding: 0 24px;
3535
display: flex;
3636
align-items: center;
@@ -39,14 +39,16 @@ const AppBar = ({
3939
4040
@media ${theme.mediaQueries.small} {
4141
.toolbar {
42-
min-height: 56px;
42+
min-height: 42px;
4343
padding: 0 16px;
4444
}
4545
}
4646
4747
@media ${theme.mediaQueries.smaller} {
4848
.app-bar {
49-
background-color: transparent;
49+
background-color: var(--palette-background-paper);
50+
width: 100%;
51+
left: 0;
5052
}
5153
}
5254
`}</style>

‎movies-app/containers/AppHeader/BurgerHeader/index.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,22 @@ import HamburgerButton from 'components/UI/HamburgerButton';
55
import SearchBar from 'containers/SearchBar';
66
import DarkModeToggle from 'containers/DarkModeToggle';
77
import TheUser from 'containers/TheUser';
8+
import { LOGO_IMAGE_PATH } from 'utils/constants/image-paths';
89

910
const BurgerHeader = ({ openMenu }) => (
1011
<>
1112
<AppBar>
12-
<HamburgerButton onClick={openMenu} />
13+
<div className='left-section'>
14+
<HamburgerButton onClick={openMenu} />
15+
<div className='logo-container'>
16+
<img
17+
className='logo-img'
18+
width='56'
19+
height='56'
20+
src={LOGO_IMAGE_PATH}
21+
alt='movie ticket' />
22+
</div>
23+
</div>
1324
<div className='sticky-bar-widgets-container'>
1425
<SearchBar id='mobile' />
1526
<DarkModeToggle
@@ -19,6 +30,24 @@ const BurgerHeader = ({ openMenu }) => (
1930
</div>
2031
</AppBar>
2132
<style jsx>{`
33+
.left-section {
34+
display: flex;
35+
align-items: center;
36+
}
37+
38+
.logo-container {
39+
margin-left: 25px;
40+
display: flex;
41+
align-items: center;
42+
}
43+
44+
.logo-img {
45+
max-height: 56px;
46+
width: auto;
47+
margin-top: -10px;
48+
margin-bottom: -10px;
49+
}
50+
2251
.sticky-bar-widgets-container {
2352
display: flex;
2453
align-items: center;

‎movies-app/containers/SearchBar/Form/index.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,16 @@ const Form = React.forwardRef(({
2525
border: 1px solid var(--palette-secondary-main);
2626
width: ${opened ? '30rem' : '2rem'};
2727
cursor: ${opened ? 'auto' : 'pointer'};
28-
padding: 2rem;
29-
height: 2rem;
28+
padding: 1.6rem;
29+
height: 1.7rem;
3030
outline: none;
3131
border-radius: 100px;
3232
transition: width ${theme.transitions.duration.standard}ms ${theme.transitions.easing.easeInOut};
3333
}
3434
3535
@media ${theme.mediaQueries.large} {
3636
.form {
37-
padding: 1.5rem;
37+
padding: 1.3rem;
3838
border: 1px solid transparent;
3939
background-color: var(--palette-secondary-main);
4040
}

‎movies-app/containers/SearchBar/MagnifierButton/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const MagnifierButton = ({
1212
{/* MEMO: inspired by https://web.dev/prefers-color-scheme/#use-currentcolor-for-inline-svgs */}
1313
<SearchIcon
1414
fill='currentColor'
15-
width='1.125em' />
15+
width='1em' />
1616
</button>
1717
<style jsx>{`
1818
.magnifier-button {

‎movies-app/containers/Sidebar/SidebarInnerWrapper/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const SidebarInnerWrapper = ({ children }) => (
88
flex-direction: column;
99
width: 25rem;
1010
padding: 2rem;
11-
margin-top: 4rem;
11+
padding-top: 8rem;
1212
border-right: 1px solid var(--palette-divider);
1313
}
1414
`}</style>

‎movies-app/containers/Sidebar/index.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,24 @@ import LazyMenu from 'parts/LazyMenu';
44
import StickyBox from 'utils/hocs/StickyBox';
55

66
const Sidebar = ({ className }) => (
7-
<StickyBox className={className}>
8-
<SidebarInnerWrapper>
9-
{/* TODO: introduce a layout shifting */}
10-
<LazyMenu />
11-
</SidebarInnerWrapper>
12-
</StickyBox>
7+
<div className="sidebar-container">
8+
<StickyBox className={className}>
9+
<SidebarInnerWrapper>
10+
<div className="menu-container">
11+
<LazyMenu />
12+
</div>
13+
</SidebarInnerWrapper>
14+
</StickyBox>
15+
<style jsx>{`
16+
.sidebar-container {
17+
position: relative;
18+
z-index: 0;
19+
}
20+
.menu-container {
21+
padding-top: 2rem;
22+
}
23+
`}</style>
24+
</div>
1325
);
1426

1527
export default Sidebar;

‎movies-app/pages/_document.js

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -83,9 +83,6 @@ class MyDocument extends Document {
8383
{/* <script async src="https://www.google-analytics.com/analytics.js"></script> */}
8484
</Head>
8585
<body className={CLASS_NAMES.LIGHT}>
86-
<div style={{ position: 'fixed', backgroundColor: "#ffee5b", color: "#444", padding: "0.75rem 1rem", textAlign: "center", borderBottom: "1px solid #cc0", width: "100%", height: '30px' }}>This is a demo intended for testing. Data and images are provided by <a href="https://www.themoviedb.org">TMDB</a>.</div>
87-
<div style={{ height: "50px"}} />
88-
8986
{/* MEMO: inspired by https://github.com/donavon/use-dark-mode#that-flash */}
9087
<Script>
9188
{() => {

0 commit comments

Comments
 (0)