mirror of
https://github.com/yawaflua/SusMarket.git
synced 2025-12-08 19:49:36 +02:00
Fixing product page
Recoding text shorting from css to script code & other fixes of styles and html code
This commit is contained in:
@@ -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';
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
Тот самый легендарный шоколад, который выпустил один из самых известных блогеров -
|
||||
<tr></tr>
|
||||
MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!
|
||||
{trimText('Тот самый легендарный шоколад, который выпустил один из самых известных блогеров - MrBeast!Представляем вам шоколадную плитку, созданную самым популярным блогером в мире - Mr.Beast feastables! Отныне, вы можете наслаждаться самой вкусной шоколадной плиткой на планете, которая удивит вас своим непревзойденным вкусом и качеством.Шоколад "Mr. Beast Feastables" - это вкусный сладкий десерт, специально созданный для поклонников блогера Мистера Биста. Он представляет собой комбинацию изысканного молочного шоколада с разнообразными начинками, которые подчеркивают его оригинальность и неповторимый вкус.Каждый кусочек "Mr. Beast Feastables" - это маленький рай для сладкоежек, так как он сочетает в себе шоколадные ноты, нежную текстуру и уникальное сочетание ингредиентов. В каждой упаковке можно найти различные варианты начинок, такие как карамель, орехи, маршмеллоу, кукурузные хлопья и другие вкусные сюрпризы. Этот шоколадный "feast" отражает всю энергию и креативность блогера Мистера Биста, который славится своими необычными и увлекательными челленджами.Не упустите возможность попробовать настоящий шедевр в мире шоколада!', 200)}
|
||||
</p>
|
||||
</span>
|
||||
<div className="product-page__container-div">
|
||||
<div className="product-page__rating-share-div">
|
||||
<button className="product-page__share-button">
|
||||
<img src={ShareIcon as unknown as string} alt="" />
|
||||
</button>
|
||||
</div>
|
||||
<button className="product-page__share-button">
|
||||
<img src={ShareIcon as unknown as string} alt="" />
|
||||
</button>
|
||||
<div className="product-page__price-buy-div">
|
||||
<span className="product-page__price-span">
|
||||
150 ₽
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user