From a76903829140275dc27fa8ce08510cf16fe86099 Mon Sep 17 00:00:00 2001 From: RailTH Date: Thu, 28 Mar 2024 23:34:03 +1100 Subject: [PATCH] Coding product page & other fixes Start of coding product page, creating of components for reviews and information page. And other little fixes of importing svg elements --- reactapp/src/App.tsx | 6 +- reactapp/src/ProductStyle.scss | 128 +++++++++++++++++++++++ reactapp/src/ProfileStyle.scss | 15 +-- reactapp/src/assets/icons/share-icon.svg | 10 ++ reactapp/src/components/Review.tsx | 0 reactapp/src/index.scss | 25 ++--- reactapp/src/pages/InfoPage.tsx | 7 ++ reactapp/src/pages/ProductPage.tsx | 38 ++++++- reactapp/tsconfig.json | 2 +- 9 files changed, 199 insertions(+), 32 deletions(-) create mode 100644 reactapp/src/assets/icons/share-icon.svg create mode 100644 reactapp/src/components/Review.tsx create mode 100644 reactapp/src/pages/InfoPage.tsx diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index c62dcbf..e9bddc5 100644 --- a/reactapp/src/App.tsx +++ b/reactapp/src/App.tsx @@ -3,10 +3,11 @@ import PaymentPage from "./pages/PaymentPage"; import ProductPage from "./pages/ProductPage"; import ProfilePage from "./pages/ProfilePage"; import ScamPage from "./pages/ScamPage"; +import InfoPage from "./pages/InfoPage"; import Header from "./components/Header"; import PopupMap from "./components/PopupMap"; import React, { useState } from "react"; -import { Routes, Route } from 'react-router-dom' +import { Routes, Route } from 'react-router-dom'; interface AppPopupMapState { isPopupMapVisible: boolean; @@ -32,9 +33,10 @@ export default function App() { }/> }/> - }/> + }/> }/> }/> + }/> diff --git a/reactapp/src/ProductStyle.scss b/reactapp/src/ProductStyle.scss index e69de29..08f01b2 100644 --- a/reactapp/src/ProductStyle.scss +++ b/reactapp/src/ProductStyle.scss @@ -0,0 +1,128 @@ +$background-color: #252422; +$main-color: #CCC5B9; +$accent-color: #EB5E28; + +.product-page { + width: 96%; + min-height: 100%; + display: flex; + flex-direction: column; + + .product-page__main-section { + width: 100%; + min-height: 500px; + display: flex; + justify-content: space-between; + + .product-page__img { + max-height: 500px; + border-radius: 15px; + } + + .product-page__info-div { + display: flex; + flex-direction: column; + justify-content: space-between; + width: 68%; + + .product-page__text-span { + display: flex; + flex-direction: column; + width: 100%; + + .product-page__heading-h2 { + color: white; + font-size: 32px; + font-weight: 600; + line-height: 39px; + letter-spacing: 0px; + } + + .product-page__short-desc-div { + color: $main-color; + font-size: 24px; + font-weight: 400; + line-height: 29px; + letter-spacing: 0px; + min-height: 100px; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .product-page__container-div { + width: 100%; + height: 140px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + + .product-page__rating-share-div { + height: 40px; + display: flex; + gap: 20px; + + .product-page__rating-div { + width: 192px; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + padding: 0px 10px 0px 10px; + box-sizing: border-box; + border: 1px solid $main-color; + border-radius: 12px; + } + + .product-page__share-button { + width: 40px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + box-sizing: border-box; + border: 1px solid $main-color; + border-radius: 12px; + } + } + + .product-page__price-buy-div { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + height: 80px; + + .product-page__price-span { + color: $accent-color; + font-size: 40px; + font-weight: 600; + line-height: 49px; + letter-spacing: 0px; + } + + .product-page__buy-link { + width: 400px; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 20px; + box-sizing: border-box; + border-radius: 15px; + background: $accent-color; + color: white; + font-size: 32px; + font-weight: 600; + line-height: 39px; + letter-spacing: 0px; + } + } + } + } + } +} \ No newline at end of file diff --git a/reactapp/src/ProfileStyle.scss b/reactapp/src/ProfileStyle.scss index d1f7371..289ecf7 100644 --- a/reactapp/src/ProfileStyle.scss +++ b/reactapp/src/ProfileStyle.scss @@ -20,8 +20,7 @@ $accent-color: #EB5E28; font-size: 32px; font-weight: 600; line-height: 39px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } .active { @@ -39,8 +38,7 @@ $accent-color: #EB5E28; font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } } @@ -96,8 +94,7 @@ $accent-color: #EB5E28; font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } .order-article__info-span { @@ -105,8 +102,7 @@ $accent-color: #EB5E28; font-size: 16px; font-weight: 500; line-height: 20px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } .order-article__date-span { @@ -114,8 +110,7 @@ $accent-color: #EB5E28; font-size: 16px; font-weight: 500; line-height: 20px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } } } diff --git a/reactapp/src/assets/icons/share-icon.svg b/reactapp/src/assets/icons/share-icon.svg new file mode 100644 index 0000000..1abf87f --- /dev/null +++ b/reactapp/src/assets/icons/share-icon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/reactapp/src/components/Review.tsx b/reactapp/src/components/Review.tsx new file mode 100644 index 0000000..e69de29 diff --git a/reactapp/src/index.scss b/reactapp/src/index.scss index c74d581..6c352e5 100644 --- a/reactapp/src/index.scss +++ b/reactapp/src/index.scss @@ -31,7 +31,6 @@ body { font-weight: 600; line-height: 39px; height: 50px; - text-align: left; display: inline-block; span { @@ -50,8 +49,7 @@ body { font-size: 16px; font-weight: 400; line-height: 20px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -95,8 +93,7 @@ body { font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; .title-h1__a { color: white; @@ -121,8 +118,7 @@ body { font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } .search-form { @@ -147,8 +143,7 @@ body { font-size: 16px; font-weight: 600; line-height: 20px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; } .search-form__input::-webkit-input-placeholder { @@ -183,8 +178,7 @@ body { font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; padding: 30px 14px; border-radius: 10px; box-sizing: border-box; @@ -248,8 +242,7 @@ body { font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; border-radius: 8px; box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 10px 0px rgba(0, 0, 0, 0.25); } @@ -273,8 +266,7 @@ body { font-size: 20px; font-weight: 600; line-height: 24px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; color: white; } } @@ -292,8 +284,7 @@ body { font-size: 24px; font-weight: 600; line-height: 29px; - letter-spacing: 0%; - text-align: left; + letter-spacing: 0px; transition: 0.2s; } diff --git a/reactapp/src/pages/InfoPage.tsx b/reactapp/src/pages/InfoPage.tsx new file mode 100644 index 0000000..e9fca75 --- /dev/null +++ b/reactapp/src/pages/InfoPage.tsx @@ -0,0 +1,7 @@ +import React from "react"; +export default function InfoPage() { + return( + <> + + ) +} \ No newline at end of file diff --git a/reactapp/src/pages/ProductPage.tsx b/reactapp/src/pages/ProductPage.tsx index 864725e..fb79cff 100644 --- a/reactapp/src/pages/ProductPage.tsx +++ b/reactapp/src/pages/ProductPage.tsx @@ -1,8 +1,42 @@ import React from "react"; +import '../ProductStyle.scss'; +import ProductImage from "../assets/img/product-image-1.webp"; +import ShareIcon from "../assets/icons/share-icon.svg"; export default function ProductPage() { return( - <> - +
+
+ изображение товара +
+ +

+ Шоколадка Mr. Beast +

+

+ Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада! +

+ +
+
+
+ +
+ +
+
+ + 150 ₽ + + + Купить + +
+
+
+
+
) } \ No newline at end of file diff --git a/reactapp/tsconfig.json b/reactapp/tsconfig.json index 6117b0e..fe40add 100644 --- a/reactapp/tsconfig.json +++ b/reactapp/tsconfig.json @@ -22,4 +22,4 @@ "src/components", "src/utils/custom.d.ts" ] -} +} \ No newline at end of file