diff --git a/reactapp/package-lock.json b/reactapp/package-lock.json index f590360..6b5a09c 100644 --- a/reactapp/package-lock.json +++ b/reactapp/package-lock.json @@ -24,6 +24,9 @@ "scss": "^0.2.4", "typescript": "^5.3.3", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -652,9 +655,17 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.11", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz", + "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dev": true, + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1897,6 +1908,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", diff --git a/reactapp/package.json b/reactapp/package.json index 0596dde..56ac11b 100644 --- a/reactapp/package.json +++ b/reactapp/package.json @@ -43,5 +43,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "@babel/plugin-proposal-private-property-in-object": "^7.21.11" } } diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index f1ac45f..eff2c8f 100644 --- a/reactapp/src/App.tsx +++ b/reactapp/src/App.tsx @@ -15,10 +15,10 @@ export default function App() {
}/> - }/> - }/> - }/> - }/> + }/> + }/> + }/> + }/>
diff --git a/reactapp/src/ProfileStyle.scss b/reactapp/src/ProfileStyle.scss index 82f38c1..d1f7371 100644 --- a/reactapp/src/ProfileStyle.scss +++ b/reactapp/src/ProfileStyle.scss @@ -8,4 +8,136 @@ $accent-color: #EB5E28; display: flex; flex-direction: column; align-items: center; + gap: 20px; + + .profile-section__nav { + width: 100%; + display: flex; + justify-content: space-between; + + .profile-link { + color: white; + font-size: 32px; + font-weight: 600; + line-height: 39px; + letter-spacing: 0%; + text-align: left; + } + + .active { + color: $accent-color; + } + } + + .profile-section__info-div { + display: flex; + max-width: 150px; + flex-direction: column; + + span { + color: white; + font-size: 24px; + font-weight: 600; + line-height: 29px; + letter-spacing: 0%; + text-align: left; + } + } + + .orders-section { + width: 100%; + min-height: 100%; + display: flex; + flex-direction: column; + gap: 20px; + + .orders-container { + width: 100%; + display: flex; + gap: 80px; + + .orders-div { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-start; + gap: 40px; + + .order-article { + width: 352px; + height: 120px; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + padding: 0px 14px 0px 14px; + border-radius: 15px; + box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 10px 0px rgba(0, 0, 0, 0.25); + background: $background-color; + + .order-article__img { + min-width: 90px; + background-position: center; + background-size: cover; + background-repeat: no-repeat; + height: 90px; + border-radius: 8px; + background-image: url(../src/assets/img/product-image-1.webp); + } + + .order-article__info-div { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + + .order-article__status-span { + color: white; + font-size: 24px; + font-weight: 600; + line-height: 29px; + letter-spacing: 0%; + text-align: left; + } + + .order-article__info-span { + color: #808080; + font-size: 16px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0%; + text-align: left; + } + + .order-article__date-span { + color: white; + font-size: 16px; + font-weight: 500; + line-height: 20px; + letter-spacing: 0%; + text-align: left; + } + } + } + } + } + } + + .purchases-section { + width: 100%; + min-height: 100%; + display: flex; + flex-direction: column; + gap: 20px; + + .purchases-container { + width: 100%; + display: flex; + gap: 80px; + + .purchases-div { + display: flex; + } + } + } } \ No newline at end of file diff --git a/reactapp/src/assets/img/profile-avatar.png b/reactapp/src/assets/img/profile-avatar.png new file mode 100644 index 0000000..ac55c7a Binary files /dev/null and b/reactapp/src/assets/img/profile-avatar.png differ diff --git a/reactapp/src/components/ProductCard.tsx b/reactapp/src/components/ProductCard.tsx index 9c3320d..e39d49f 100644 --- a/reactapp/src/components/ProductCard.tsx +++ b/reactapp/src/components/ProductCard.tsx @@ -7,11 +7,18 @@ type ProductTypes = { } export default function ProductCard({ProductName, ProductImg, Price}:ProductTypes) { + const PriceAsString = Price.toString(); + return(
-
{Price} ₽
-
{ProductName}
+
+ {PriceAsString} + ₽ +
+
+ {ProductName} +
) } \ No newline at end of file diff --git a/reactapp/src/components/ProfileInfo.tsx b/reactapp/src/components/ProfileInfo.tsx new file mode 100644 index 0000000..87b1555 --- /dev/null +++ b/reactapp/src/components/ProfileInfo.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import ProfileAvatar from '../assets/img/profile-avatar.png'; +import '../ProfileStyle.scss'; + +export default function ProfileInfo() { + return( +
+ + Роман Константинов +
+ ) +} \ No newline at end of file diff --git a/reactapp/src/components/ProfileOrders.tsx b/reactapp/src/components/ProfileOrders.tsx index 73928f4..16dd6bb 100644 --- a/reactapp/src/components/ProfileOrders.tsx +++ b/reactapp/src/components/ProfileOrders.tsx @@ -1,8 +1,40 @@ import React from "react"; +import { Link } from "react-router-dom"; +import '../ProfileStyle.scss'; +import ProfileInfo from "./ProfileInfo"; export default function ProfileOrders() { return( - <> - +
+ +
+ +
+
+
+
+ В пути + Доставка в пункт выдачи + Ожидаем 9 декабря +
+
+
+
+
+ В пути + Доставка в пункт выдачи + Ожидаем 9 декабря +
+
+
+
+
) } \ No newline at end of file diff --git a/reactapp/src/components/ProfilePurchases.tsx b/reactapp/src/components/ProfilePurchases.tsx index ce31a98..bb59210 100644 --- a/reactapp/src/components/ProfilePurchases.tsx +++ b/reactapp/src/components/ProfilePurchases.tsx @@ -1,8 +1,29 @@ import React from "react"; +import { Link } from "react-router-dom"; +import '../ProfileStyle.scss'; +import ProfileInfo from "./ProfileInfo"; +import ProductCard from "./ProductCard"; +import ProductImage from "../assets/img/product-image-3.webp"; export default function ProfilePurchases() { return( - <> - +
+ +
+ +
+ + + +
+
+
) } \ No newline at end of file diff --git a/reactapp/src/index.scss b/reactapp/src/index.scss index d6dc515..a111bd0 100644 --- a/reactapp/src/index.scss +++ b/reactapp/src/index.scss @@ -1,7 +1,7 @@ $background-color: #252422; $main-color: #CCC5B9; $accent-color: #EB5E28; -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap'); body { background-color: $background-color; @@ -30,8 +30,18 @@ body { font-size: 32px; font-weight: 600; line-height: 39px; - letter-spacing: 0%; + height: 50px; text-align: left; + display: inline-block; + + span { + max-width: 186px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + display: inline-block; + } + } .product-article__name-h6 { diff --git a/reactapp/src/index.tsx b/reactapp/src/index.tsx index b742b4d..bc6f0dc 100644 --- a/reactapp/src/index.tsx +++ b/reactapp/src/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { BrowserRouter } from 'react-router-dom'; import './index.scss'; -import './reset.css'; +import './utils/reset.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); diff --git a/reactapp/src/pages/HomePage.tsx b/reactapp/src/pages/HomePage.tsx index 54c8950..bbe991c 100644 --- a/reactapp/src/pages/HomePage.tsx +++ b/reactapp/src/pages/HomePage.tsx @@ -24,7 +24,7 @@ export default function HomePage() { - + diff --git a/reactapp/src/pages/ProfilePage.tsx b/reactapp/src/pages/ProfilePage.tsx index dbb8eeb..9018076 100644 --- a/reactapp/src/pages/ProfilePage.tsx +++ b/reactapp/src/pages/ProfilePage.tsx @@ -1,17 +1,17 @@ import React from "react"; import Banner from "../components/AddBanner"; +import '../ProfileStyle.scss'; +import { Route, Routes } from "react-router-dom"; import ProfileOrders from "../components/ProfileOrders"; import ProfilePurchases from "../components/ProfilePurchases"; -import '../ProfileStyle.scss'; -import { Routes, Route, Link } from 'react-router-dom'; export default function ProfilePage() { return(
- } /> - } /> + }/> + }/>
) diff --git a/reactapp/src/custom.d.ts b/reactapp/src/utils/custom.d.ts similarity index 100% rename from reactapp/src/custom.d.ts rename to reactapp/src/utils/custom.d.ts diff --git a/reactapp/src/reset.css b/reactapp/src/utils/reset.css similarity index 100% rename from reactapp/src/reset.css rename to reactapp/src/utils/reset.css diff --git a/reactapp/tsconfig.json b/reactapp/tsconfig.json index ed3b361..6117b0e 100644 --- a/reactapp/tsconfig.json +++ b/reactapp/tsconfig.json @@ -20,6 +20,6 @@ "include": [ "src", "src/components", - "src/custom.d.ts" + "src/utils/custom.d.ts" ] }