Skip to content

Commit 46648aa

Browse files
nirmalkcnirmalkc
committed
rwd fixes
1 parent 71111ee commit 46648aa

3 files changed

Lines changed: 187 additions & 92 deletions

File tree

‎components/core/Landing.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,7 +419,7 @@ const Landing = ({ setOpen, user, setUser }) => {
419419
<div>
420420
<BannerHeader sticky="top" expand="md">
421421
<Navbar.Brand><Logo><div className="sr-only">TryShape</div></Logo></Navbar.Brand>
422-
<Navbar.Toggle className="navbar-toggler-light">
422+
<Navbar.Toggle>
423423
<FiMenu color="var(--color-neutral-10" size="24px"/>
424424
</Navbar.Toggle>
425425
<Navbar.Collapse className="justify-content-end">

‎components/utils/Header.js‎

Lines changed: 178 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -10,35 +10,33 @@ import { auth } from "../../utils/firebase";
1010
import toast from "react-hot-toast";
1111

1212
// icon
13-
import { FiPower, FiX } from "react-icons/fi";
13+
import { FiMenu, FiPower, FiX, FiLogIn, FiSearch, FiPlus, FiTwitter } from "react-icons/fi";
14+
import { BiSortDown } from "react-icons/bi";
1415
import ImgLogo from '../../public/images/img-logo.svg'
1516

1617
// Bootstrap
1718
import Button from "react-bootstrap/Button";
1819
import InputGroup from 'react-bootstrap/InputGroup';
1920
import FormControl from 'react-bootstrap/FormControl';
2021
import DropdownButton from 'react-bootstrap/DropdownButton';
21-
import Dropdown from 'react-bootstrap/Dropdown'
22-
23-
import { FiSearch, FiPlus, FiTwitter } from "react-icons/fi";
22+
import Dropdown from 'react-bootstrap/Dropdown';
23+
import Navbar from 'react-bootstrap/Navbar';
2424

2525
// Styled Component
2626
import styled from "styled-components";
2727

2828
// CreateShape Component
2929
import { CreateShape } from "..";
3030

31-
const AppHeader = styled.div`
32-
position: fixed;
33-
z-index: 1;
34-
top: 0;
35-
right: 0;
36-
display: flex;
37-
justify-content: space-between;
38-
align-items: flex-start;
39-
width: 100%;
31+
const AppHeader = styled(Navbar)`
4032
padding: 0.6rem 0.8rem;
4133
background-color: var(--color-brand);
34+
35+
.navbar-brand {
36+
@media (max-width: 767px) {
37+
width: 36px;
38+
}
39+
}
4240
`;
4341

4442
const Logo = styled.h1`
@@ -52,13 +50,33 @@ const Logo = styled.h1`
5250
margin: 2px 0 0 -8px;
5351
line-height: 1;
5452
cursor: pointer;
53+
54+
@media (max-width: 767px) {
55+
width: 26px;
56+
margin: -2px 0 0 0;
57+
background-size: cover;
58+
background-position: center left;
59+
}
5560
`;
5661

5762
const NavbarSearchInputContainer = styled.div`
5863
display: flex;
5964
align-items: center;
60-
max-width: 560px;
61-
width: 60% !important;
65+
max-width: 420px;
66+
width: 64% !important;
67+
68+
@media (min-width: 1280px) {
69+
max-width: 560px;
70+
}
71+
72+
@media (max-width: 991px) {
73+
// max-width: 420px;
74+
flex: 1;
75+
}
76+
77+
@media (max-width: 767px) {
78+
// max-width: 320px;
79+
}
6280
`;
6381

6482
const NavbarSearchInput = styled(InputGroup)`
@@ -117,6 +135,12 @@ const UserThumbName = styled.div`
117135
white-space: nowrap;
118136
overflow: hidden;
119137
text-overflow: ellipsis;
138+
139+
@media (max-width: 991px) {
140+
max-width: unset;
141+
overflow: unset;
142+
text-overflow: unset;
143+
}
120144
`;
121145

122146
const LogoutButton = styled(Button)`
@@ -126,6 +150,51 @@ const LogoutButton = styled(Button)`
126150
const LoginBar = styled.div`
127151
display: flex;
128152
align-items: center;
153+
154+
@media (max-width: 991px) {
155+
justify-content: flex-end;
156+
border-top: solid 1px rgba(var(--color-neutral-10-rgb), 0.2);
157+
margin: 0.4rem 0 0 0;
158+
padding: 0.8rem 0.8rem 0.4rem 0;
159+
flex-wrap: wrap !important;
160+
}
161+
162+
@media (max-width: 767px) {
163+
flex-direction: column;
164+
grid-gap: 0.6rem;
165+
align-items: stretch;
166+
.login-element {
167+
168+
}
169+
}
170+
`;
171+
172+
const UserMeta = styled.div`
173+
display: flex;
174+
align-self: center;
175+
`;
176+
177+
const LoginSeperator = styled.div`
178+
width: 1px;
179+
height: 1.8rem;
180+
background-color: rgba(var(--color-neutral-10-rgb), 0.4);
181+
margin: 0 0.2rem 0 0.7rem;
182+
align-self: center;
183+
`;
184+
185+
const LoginBarBefore = styled.div`
186+
display: flex;
187+
align-items: center;
188+
grid-gap: 0.2em;
189+
190+
@media (max-width: 991px) {
191+
justify-content: flex-end;
192+
border: solid 1px rgba(var(--color-neutral-10-rgb), 0.2);
193+
border-left-width: 0;
194+
border-right-width: 0;
195+
margin: 0.4rem 0;
196+
padding: 0.6rem 0;
197+
}
129198
`;
130199

131200

@@ -175,13 +244,14 @@ const Header = ({
175244
}
176245

177246
return (
178-
<AppHeader>
179-
<Link href="/">
180-
<Logo>
181-
<div className="sr-only">TryShape</div>
182-
</Logo>
183-
</Link>
184-
247+
<AppHeader sticky="top" expand="lg">
248+
<Navbar.Brand>
249+
<Link href="/">
250+
<Logo>
251+
<div className="sr-only">TryShape</div>
252+
</Logo>
253+
</Link>
254+
</Navbar.Brand>
185255
<NavbarSearchInputContainer>
186256
<NavbarSearchInput>
187257
<NavbarSearchInputText id="basic-addon1"><FiSearch color='white' size='18px' /></NavbarSearchInputText>
@@ -194,76 +264,93 @@ const Header = ({
194264
/>
195265
{searchTerm && <CloseIcon title="Clear Search Query" color='#ffffff' size='24px' onClick={() => setSearchTerm('')}/>}
196266
</NavbarSearchInput>
197-
<DropdownButton variant="outline-secondary" size="sm" id="dropdown-basic-button" title={`Sort by ${sort}`} className="border-0">
198-
<Dropdown.Item
199-
href="#"
200-
active={sort==='oldest'}
201-
onClick={() =>setSort('oldest')}>
202-
Oldest
203-
</Dropdown.Item>
204-
<Dropdown.Item
205-
href="#"
206-
active={sort==='popularity'}
207-
onClick={() =>setSort('popularity')}>
208-
Popularity
209-
</Dropdown.Item>
210-
<Dropdown.Item
211-
href="#"
212-
active={sort==='recent'}
213-
onClick={() =>setSort('recent')}>
214-
Recent
215-
</Dropdown.Item>
216-
</DropdownButton>
267+
<Dropdown>
268+
<Dropdown.Toggle variant="outline-secondary" size="sm" id="dropdown-basic"className="border-0">
269+
<BiSortDown className='mr-0 d-lg-none' size="1.4rem" />
270+
<span className='d-none d-lg-inline'>
271+
{`Sort by ${sort}`}
272+
</span>
273+
</Dropdown.Toggle>
274+
<Dropdown.Menu>
275+
<Dropdown.Item
276+
href="#"
277+
active={sort==='oldest'}
278+
onClick={() =>setSort('oldest')}>
279+
Oldest
280+
</Dropdown.Item>
281+
<Dropdown.Item
282+
href="#"
283+
active={sort==='popularity'}
284+
onClick={() =>setSort('popularity')}>
285+
Popularity
286+
</Dropdown.Item>
287+
<Dropdown.Item
288+
href="#"
289+
active={sort==='recent'}
290+
onClick={() =>setSort('recent')}>
291+
Recent
292+
</Dropdown.Item>
293+
</Dropdown.Menu>
294+
</Dropdown>
217295
</NavbarSearchInputContainer>
218-
219-
{(user.email || user.displayName) ? (
220-
<>
221-
<LoginBar>
222-
<Button variant="outline-secondary" size="sm" className="mr-1" onClick={tweet}>
223-
<FiTwitter />
224-
Tweet it
225-
</Button>
226-
<Button variant="primary" size="sm" className="mr-3" onClick={() => setShowCreateShape(true)}>
227-
<FiPlus />
228-
Add Shape
229-
</Button>
230-
<UserThumb>
231-
<img
232-
src={
233-
user.photoURL
234-
? user.photoURL
235-
: `https://unavatar.vercel.app/${user.email}`
236-
}
237-
alt="profile"
238-
/>
239-
<UserThumbName>{user.displayName ? user.displayName : "User"}</UserThumbName>
240-
</UserThumb>
241-
<LogoutButton onClick={signOut} variant="link" className="btn-icon p-0 ml-2">
242-
<FiPower color='var(--color-neutral-10' size="18px"/>
243-
<div className="sr-only">Sign Out</div>
244-
</LogoutButton>
245-
246-
</LoginBar>
247-
</>
248-
) : (
249-
<>
250-
<Button variant="outline-secondary" size="sm" className="mr-1" onClick={tweet}>
251-
<FiTwitter />
252-
Tweet it
253-
</Button>
254-
<Button variant="outline-secondary" size="sm" onClick={() => setOpen(true)}>
255-
<div>Sign In</div>
256-
</Button>
257-
</>
258-
)}
259-
<CreateShape
260-
show={showCreateShape}
261-
handleClose={closeModal}
262-
edit={false}
263-
user={user}
264-
shapeAction={shapeAction}
265-
setShapeAction={setShapeAction}
266-
/>
296+
<Navbar.Toggle>
297+
<FiMenu color="var(--color-neutral-10" size="24px"/>
298+
</Navbar.Toggle>
299+
<Navbar.Collapse className="justify-content-end">
300+
{(user.email || user.displayName) ? (
301+
<>
302+
<LoginBar>
303+
<Button variant="outline-secondary" size="sm" className="mr-1 login-element" onClick={tweet}>
304+
<FiTwitter />
305+
Tweet it
306+
</Button>
307+
<Button variant="primary" size="sm" className="mr-md-3 login-element" onClick={() => setShowCreateShape(true)}>
308+
<FiPlus />
309+
Add Shape
310+
</Button>
311+
<UserMeta className="login-element">
312+
<UserThumb>
313+
<img
314+
src={
315+
user.photoURL
316+
? user.photoURL
317+
: `https://unavatar.vercel.app/${user.email}`
318+
}
319+
alt="profile"
320+
/>
321+
<UserThumbName>{user.displayName ? user.displayName : "User"}</UserThumbName>
322+
</UserThumb>
323+
<LoginSeperator />
324+
<LogoutButton onClick={signOut} variant="link" className="btn-icon p-0 ml-2">
325+
<FiPower color='var(--color-neutral-10' size="18px"/>
326+
<div className="sr-only">Sign Out</div>
327+
</LogoutButton>
328+
</UserMeta>
329+
</LoginBar>
330+
</>
331+
) : (
332+
<>
333+
<LoginBarBefore>
334+
<Button variant="outline-secondary" size="sm" className="mr-1" onClick={tweet}>
335+
<FiTwitter />
336+
Tweet it
337+
</Button>
338+
<Button variant="outline-secondary" size="sm" onClick={() => setOpen(true)}>
339+
<FiLogIn />
340+
Sign In
341+
</Button>
342+
</LoginBarBefore>
343+
</>
344+
)}
345+
<CreateShape
346+
show={showCreateShape}
347+
handleClose={closeModal}
348+
edit={false}
349+
user={user}
350+
shapeAction={shapeAction}
351+
setShapeAction={setShapeAction}
352+
/>
353+
</Navbar.Collapse>
267354
</AppHeader>
268355
);
269356
};

‎components/utils/ShapeList.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,14 @@ const ShapeCards = styled.div`
4848
display: grid;
4949
grid-template-columns: repeat(3, minmax(240px, 1fr));
5050
grid-gap: 2rem;
51+
52+
@media (max-width: 991px) {
53+
grid-template-columns: repeat(2, minmax(300px, 1fr));
54+
}
55+
56+
@media (max-width: 767px) {
57+
grid-template-columns: repeat(1, 1fr);
58+
}
5159
`;
5260

5361
const ShapeCard = styled.div`

0 commit comments

Comments
 (0)