Fixing product page

Recoding text shorting from css to script code & other fixes of styles and html code

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';
 

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;
+                    width: 100%;
-                    max-width: 100%;
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
                 }
             }
 
@@ -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;
+                    justify-content: center;
-
+                    align-items: center;
-                    .product-page__rating-div {
+                    box-sizing: border-box;
-                        width: 192px;
+                    border: 2px solid $main-color;
-                        height: 100%;
+                    border-radius: 12px;
-                        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;
-                    }
                 }
 
                 .product-page__price-buy-div {

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(
         <section className="product-page">
             <section className="product-page__main-section">
@@ -20,17 +24,13 @@ export default function ProductPage({ value }: StarRatingProps) {
                             Шоколадка Mr. Beast
                         </h2>
                         <p className="product-page__short-desc-div">
-                            Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - 
+                            {trimText('Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!', 200)}
-                            <tr></tr>
-                            MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!
                         </p>
                     </span>
                     <div className="product-page__container-div">
-                        <div className="product-page__rating-share-div">
+                        <button className="product-page__share-button">
-                            <button className="product-page__share-button">
+                            <img src={ShareIcon as unknown as string} alt="" />
-                                <img src={ShareIcon as unknown as string} alt="" />
+                        </button>
-                            </button>
-                        </div>
                         <div className="product-page__price-buy-div">
                             <span className="product-page__price-span">
                                 150 ₽

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;
 }