From b0d6dd16bbdeb04e6660f181a6f5fd954cdc44d1 Mon Sep 17 00:00:00 2001 From: RailTH Date: Sat, 27 Apr 2024 19:43:55 +1100 Subject: [PATCH] Fixing product page Recoding text shorting from css to script code & other fixes of styles and html code --- reactapp/src/App.tsx | 2 +- reactapp/src/ProductStyle.scss | 52 ++++++------------------------ reactapp/src/pages/ProductPage.tsx | 18 +++++------ reactapp/src/utils/reset.css | 9 +----- 4 files changed, 21 insertions(+), 60 deletions(-) diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index f0c2a8f..edd2129 100644 --- a/reactapp/src/App.tsx +++ b/reactapp/src/App.tsx @@ -7,7 +7,7 @@ import InfoPage from "./pages/InfoPage"; import Header from "./components/Header"; import PopupMap from "./components/PopupMap"; import React, { useState, useEffect } from "react"; -import { Routes, Route } from 'react-router-dom'; +import { Routes, Route, Navigate } from 'react-router-dom'; import { Product, Category } from "./utils/types"; import axios from 'axios'; diff --git a/reactapp/src/ProductStyle.scss b/reactapp/src/ProductStyle.scss index 8481d73..15f0135 100644 --- a/reactapp/src/ProductStyle.scss +++ b/reactapp/src/ProductStyle.scss @@ -10,7 +10,7 @@ $accent-color: #EB5E28; gap: 40px; .product-page__main-section { - width: 100%; + gap: 30px; min-height: 500px; display: flex; justify-content: space-between; @@ -24,12 +24,11 @@ $accent-color: #EB5E28; display: flex; flex-direction: column; justify-content: space-between; - width: 68%; + width: 100%; .product-page__text-span { display: flex; flex-direction: column; - width: 100%; .product-page__heading-h2 { color: white; @@ -45,11 +44,7 @@ $accent-color: #EB5E28; font-weight: 400; line-height: 29px; letter-spacing: 0px; - max-height: 100px; - max-width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + width: 100%; } } @@ -61,42 +56,15 @@ $accent-color: #EB5E28; justify-content: space-between; align-items: flex-end; - .product-page__rating-share-div { + .product-page__share-button { + width: 40px; height: 40px; display: flex; - gap: 20px; - - .product-page__rating-div { - width: 192px; - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding: 0px 10px 0px 10px; - box-sizing: border-box; - border: 2px solid $main-color; - border-radius: 12px; - - .rating-div__rate-value { - color: white; - font-size: 24px; - font-weight: 400; - line-height: 29px; - letter-spacing: 0px; - text-align: left; - } - } - - .product-page__share-button { - width: 40px; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - box-sizing: border-box; - border: 2px solid $main-color; - border-radius: 12px; - } + justify-content: center; + align-items: center; + box-sizing: border-box; + border: 2px solid $main-color; + border-radius: 12px; } .product-page__price-buy-div { diff --git a/reactapp/src/pages/ProductPage.tsx b/reactapp/src/pages/ProductPage.tsx index 7c7c3d0..3eddef4 100644 --- a/reactapp/src/pages/ProductPage.tsx +++ b/reactapp/src/pages/ProductPage.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import Review from '../components/Review'; import '../ProductStyle.scss'; import ProductImage from "../assets/img/product-image-1.webp"; @@ -10,6 +10,10 @@ interface StarRatingProps { } export default function ProductPage({ value }: StarRatingProps) { + function trimText(text: string, limit: number) { + return text.length > limit ? text.substring(0, limit) + '...' : text; + } + return(
@@ -20,17 +24,13 @@ export default function ProductPage({ value }: StarRatingProps) { Шоколадка Mr. Beast

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

-
- -
+
150 ₽ diff --git a/reactapp/src/utils/reset.css b/reactapp/src/utils/reset.css index 3c85556..4aa6008 100644 --- a/reactapp/src/utils/reset.css +++ b/reactapp/src/utils/reset.css @@ -4,9 +4,7 @@ border: none; } -*, -*::before, -*::after { +* { box-sizing: border-box; } @@ -39,11 +37,6 @@ img { vertical-align: top; } -img, svg { - max-width: 100%; - height: auto; -} - address { font-style: normal; }