Skip to content

Commit ec0306b

Browse files
damladamla
authored
Merge pull request #21 from patika-hepsiburada-react-bootcamp/dev
[#2, #12] feat: finish styling of Header and SubHeader components
2 parents f4d3715 + e3be862 commit ec0306b

33 files changed

+527
-92
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
- [SASS](https://sass-lang.com) - CSS extension dili olarak kullanılmıştır.
1717
- [Classnames](https://www.npmjs.com/package/classnames) - Stil sınıflarını koşullara göre eklemek/ çıkarmak için kullanılmıştır.
1818
- [Context API](https://reactjs.org/docs/context.html) - Zaman kısıtlamasından ve built-in olmasından dolayı state yönetimi için Context API tercih edilmiştir.
19+
- [React Router](https://reactrouter.com/) - Routing kütüphanesi olarak tercih edilmiştir.
1920

2021
### Back-End
2122

‎client/.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,4 @@ node_modules/
2121

2222
npm-debug.log*
2323
yarn-debug.log*
24-
yarn-error.log*
24+
yarn-error.log*

‎client/README.md

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -38,33 +38,3 @@ If you aren’t satisfied with the build tool and configuration choices, you can
3838
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
3939

4040
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41-
42-
## Learn More
43-
44-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45-
46-
To learn React, check out the [React documentation](https://reactjs.org/).
47-
48-
### Code Splitting
49-
50-
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51-
52-
### Analyzing the Bundle Size
53-
54-
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55-
56-
### Making a Progressive Web App
57-
58-
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59-
60-
### Advanced Configuration
61-
62-
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63-
64-
### Deployment
65-
66-
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67-
68-
### `yarn build` fails to minify
69-
70-
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^5.11.4",
77
"@testing-library/react": "^11.1.0",
88
"@testing-library/user-event": "^12.1.10",
9+
"classnames": "^2.3.1",
910
"react": "^17.0.2",
1011
"react-dom": "^17.0.2",
1112
"react-router-dom": "^5.3.0",

‎client/public/index.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,15 @@
33
<head>
44
<meta charset="utf-8" />
55
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<link
7+
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
8+
rel="stylesheet"
9+
/>
610
<meta name="viewport" content="width=device-width, initial-scale=1" />
711
<meta name="theme-color" content="#000000" />
812
<meta
913
name="description"
10-
content="Web site created using create-react-app"
14+
content="Cep telefonu, bilgisayar, televizyon, kozmetik ve binlerce ürün uygun fiyatlarla Hepsiburada.com'da. Ücretsiz kargo fırsatları ile her şey ayağına gelsin."
1115
/>
1216
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1317
<!--
@@ -24,7 +28,7 @@
2428
work correctly both with client-side routing and a non-root public URL.
2529
Learn how to configure a non-root public URL by running `npm run build`.
2630
-->
27-
<title>React App</title>
31+
<title>Türkiye'nin En Büyük Online Alışveriş Sitesi Hepsiburada.com</title>
2832
</head>
2933
<body>
3034
<noscript>You need to enable JavaScript to run this app.</noscript>

‎client/src/App.css

Lines changed: 0 additions & 38 deletions
This file was deleted.

‎client/src/assets/index.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
11
export { default as Logo } from "./svg/logo.svg";
22
export { default as SearchIcon } from "./svg/search-icon.svg";
3+
export { default as DownArrowIcon } from "./svg/down-arrow-icon.svg";

‎client/src/assets/svg/down-arrow-icon.svg

Lines changed: 3 additions & 0 deletions
Loading

‎client/src/components/Basket/BasketDetails/index.jsx

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// import React, { useState } from "react";
2+
// import cn from "classnames";
3+
import styles from "./styles.module.scss";
4+
import BasketItem from "../BasketItem";
5+
6+
export default function BasketDetails() {
7+
// const [items, setItems] = useState([{ name: "iPhone11", url: "image" }]);
8+
// const buttonClasses = cn(styles.Container, isOpen && styles.Open);
9+
10+
return (
11+
<div className={styles.Container}>
12+
<BasketItem />
13+
<BasketItem />
14+
<BasketItem />
15+
</div>
16+
);
17+
}

‎client/src/components/Basket/BasketDetails/styles.module.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
@use "../../../global/variables.scss" as vars;
2+
3+
.Container {
4+
position: absolute;
5+
top: 38px;
6+
right: 0;
7+
padding: 21px;
8+
width: 360px;
9+
height: 360px;
10+
min-width: 360px;
11+
min-height: 360px;
12+
background-color: #ffff;
13+
border: 1px solid vars.$border-color;
14+
border-radius: 4px;
15+
// TODO: Overflow
16+
17+
&:after {
18+
content: "";
19+
display: block;
20+
position: absolute;
21+
width: 118px;
22+
top: -2px;
23+
right: 0;
24+
z-index: 3;
25+
border: 2px solid #ffff;
26+
}
27+
}

‎client/src/components/Basket/BasketItem/index.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// import React, { useState } from "react";
2+
// import cn from "classnames";
3+
import styles from "./styles.module.scss";
4+
import { ImageBox } from "../..";
5+
6+
export default function BasketItem() {
7+
// const [items, setItems] = useState([{ name: "iPhone11", url: "image" }]);
8+
9+
return (
10+
<div className={styles.Container}>
11+
<ImageBox
12+
src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
13+
basketImg
14+
/>
15+
<div className={styles.Wrapper}>
16+
<span className={styles.ItemName}>
17+
iPhone 11 Kırmızı Kılıflı Garantili Telefon
18+
</span>
19+
<button type="button" className={styles.RemoveButton}>
20+
Kaldır
21+
</button>
22+
</div>
23+
</div>
24+
);
25+
}
26+
// TODO: SCROLLU TRANSPARENT YAP

‎client/src/components/Basket/BasketItem/styles.module.scss

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
@use "../../../global/variables.scss" as vars;
2+
3+
.Container {
4+
display: flex;
5+
margin-top: 20px;
6+
width: 100%;
7+
height: 72px;
8+
9+
&:first-child {
10+
margin-top: 0;
11+
}
12+
.Wrapper {
13+
height: 100%;
14+
width: 170px;
15+
min-width: 170px;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: space-between;
19+
20+
.ItemName {
21+
color: vars.$primary-font-color;
22+
width: 170px;
23+
min-width: 170px;
24+
font-style: normal;
25+
font-weight: normal;
26+
font-size: 12px;
27+
line-height: 18px;
28+
}
29+
30+
.RemoveButton {
31+
border: 0.5px solid vars.$cart-remove-btn-color;
32+
background-color: #ffff;
33+
color: vars.$cart-remove-btn-color;
34+
border-radius: 4px;
35+
width: 51px;
36+
min-width: 51px;
37+
height: 20px;
38+
min-height: 20px;
39+
font-size: 10px;
40+
line-height: 18px;
41+
cursor: pointer;
42+
}
43+
}
44+
}

‎client/src/components/Basket/index.jsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { useState } from "react";
2+
import cn from "classnames";
3+
import styles from "./styles.module.scss";
4+
import { BasketDetails } from "..";
5+
6+
export default function Basket() {
7+
const [isOpen, setIsOpen] = useState(false);
8+
const [count] = useState(4);
9+
10+
const openCart = () => {
11+
setIsOpen(!isOpen);
12+
};
13+
14+
const buttonClasses = cn(styles.Button, isOpen && styles.Open);
15+
const countClasses = cn(styles.Count, count === 0 && styles.Hidden);
16+
17+
return (
18+
<div className={styles.Container}>
19+
<button onClick={() => openCart()} className={buttonClasses}>
20+
<span className={countClasses}>{count}</span>
21+
Sepetim
22+
</button>
23+
{isOpen && <BasketDetails />}
24+
</div>
25+
);
26+
}

‎client/src/components/Basket/styles.module.scss

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
4+
position: relative;
5+
6+
.Button {
7+
position: relative;
8+
border: 1px solid vars.$border-color;
9+
background-color: #ffff;
10+
border-radius: 4px;
11+
width: 120px;
12+
min-width: 120px;
13+
height: 48px;
14+
min-height: 48px;
15+
color: vars.$border-color;
16+
font-size: 17px;
17+
line-height: 143%;
18+
19+
&.Open {
20+
border-radius: 4px 4px 0 0;
21+
border-bottom-color: #ffff;
22+
}
23+
24+
.Count {
25+
position: absolute;
26+
top: -9px; // border dahil
27+
right: -5px; // border dahil
28+
width: 18px;
29+
height: 18px;
30+
min-width: 18px;
31+
min-height: 18px;
32+
font-size: 12px;
33+
color: #ffff;
34+
line-height: 100%;
35+
font-weight: 500;
36+
border-radius: 100%;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
background-color: vars.$brand-color;
41+
42+
&.Hidden {
43+
display: none;
44+
}
45+
}
46+
}
47+
}

‎client/src/components/ImageBox/index.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// import cn from "classnames";
2+
import styles from "./styles.module.scss";
3+
import cn from "classnames";
4+
5+
export default function ImageBox({ src, basketImg, productImg }) {
6+
const basketItemClasses = cn(styles.Container, styles.BasketItemImg);
7+
8+
return (
9+
<>
10+
{basketImg && (
11+
<div className={basketItemClasses}>
12+
<img
13+
src={`${process.env.REACT_APP_IMAGE_URL}s/32/224-332/10352817012786.jpg`}
14+
width="40"
15+
height="59.23"
16+
alt="basket-item"
17+
/>
18+
</div>
19+
)}
20+
21+
{productImg && <img src width="224" height="332" alt="product" />}
22+
</>
23+
);
24+
}

‎client/src/components/ImageBox/styles.module.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
@use "../../global/variables.scss" as vars;
2+
3+
.Container {
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
border: 1px solid vars.$cart-item-border-color;
8+
border-radius: 4px;
9+
10+
&.BasketItemImg {
11+
width: 54px;
12+
height: 72px;
13+
margin-right: 10px;
14+
}
15+
}

‎client/src/components/Layout/Header/index.jsx

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
import styles from "./styles.module.scss";
22
import { Logo } from "../../../assets";
3-
import { Search } from "../..";
3+
import { Search, Basket } from "../..";
44
export default function Header() {
55
return (
66
<header className={styles.Container}>
7-
<a href="/" target="" title="Hepsiburada">
8-
<img className={styles.Logo} src={Logo} alt="hb-logo" />
7+
<a className={styles.Link} href="/" target="" title="Hepsiburada">
8+
<img
9+
className={styles.Logo}
10+
src={Logo}
11+
width="211.52"
12+
height="35"
13+
alt="hb-logo"
14+
/>
915
</a>
1016
<Search />
11-
<div>Header</div>
17+
<Basket />
1218
</header>
1319
);
1420
}

0 commit comments

Comments
 (0)