yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2025-12-08 19:49:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

Animations, stylization & bug fixes

Browse Source 
Added animations whyle hovering and tapping for product cards and other buttons, also fixed bug when info page isn't found
This commit is contained in:
RailTH
2024-05-18 21:46:10 +11:00
parent e310fa5488
commit 5643474575
16 changed files with 54 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
reactapp/build/asset-manifest.json
View File

@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.c2ca56ed.css",
"main.js": "/static/js/main.b01594ed.js",
"main.css": "/static/css/main.1aa814f6.css",
"main.js": "/static/js/main.47a170f7.js",
"static/media/scam-image.png": "/static/media/scam-image.c6c14289dc251ba2d2b1.png",
"static/media/info-page__railth-avatar.png": "/static/media/info-page__railth-avatar.cbf11c43b5ef243b38c0.png",
"static/media/add.webp": "/static/media/add.cd69f1e2a8c91109db0f.webp",
@@ -13,11 +13,11 @@
"static/media/rating__star-icon.svg": "/static/media/rating__star-icon.73718a24d04eb67f5873.svg",
"static/media/rating__filled-star-icon.svg": "/static/media/rating__filled-star-icon.dc7d908d4d943b7f3b56.svg",
"index.html": "/index.html",
"main.c2ca56ed.css.map": "/static/css/main.c2ca56ed.css.map",
"main.b01594ed.js.map": "/static/js/main.b01594ed.js.map"
"main.1aa814f6.css.map": "/static/css/main.1aa814f6.css.map",
"main.47a170f7.js.map": "/static/js/main.47a170f7.js.map"
},
"entrypoints": [
"static/css/main.c2ca56ed.css",
"static/js/main.b01594ed.js"
"static/css/main.1aa814f6.css",
"static/js/main.47a170f7.js"
]
}

2
reactapp/build/index.html
View File

@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>SusMarket</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.b01594ed.js"></script><link href="/static/css/main.c2ca56ed.css" rel="stylesheet"></head><body><div id="root"></div></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>SusMarket</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.47a170f7.js"></script><link href="/static/css/main.1aa814f6.css" rel="stylesheet"></head><body><div id="root"></div></body></html>

2
reactapp/build/static/css/main.1aa814f6.css Normal file
View File

File diff suppressed because one or more lines are too long

1
reactapp/build/static/css/main.1aa814f6.css.map Normal file
View File

File diff suppressed because one or more lines are too long

2
reactapp/build/static/css/main.c2ca56ed.css
View File

File diff suppressed because one or more lines are too long

1
reactapp/build/static/css/main.c2ca56ed.css.map
View File

File diff suppressed because one or more lines are too long

3
reactapp/build/static/js/main.47a170f7.js Normal file
View File

File diff suppressed because one or more lines are too long

0
reactapp/build/static/js/main.b01594ed.js.LICENSE.txt → reactapp/build/static/js/main.47a170f7.js.LICENSE.txt
View File

1
reactapp/build/static/js/main.47a170f7.js.map Normal file
View File

File diff suppressed because one or more lines are too long

3
reactapp/build/static/js/main.b01594ed.js
View File

File diff suppressed because one or more lines are too long

1
reactapp/build/static/js/main.b01594ed.js.map
View File

File diff suppressed because one or more lines are too long

2
reactapp/src/InfoPageStyle.scss
View File

@@ -25,7 +25,7 @@ $accent-color: #EB5E28;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);
box-shadow: -4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 20px 0px rgba(0, 0, 0, 0.25);
.dev-card__front, .dev-card__back {
position: absolute;

8
reactapp/src/components/Header.tsx
View File

@@ -14,6 +14,8 @@ interface HeaderProps {
onSearchChange: (query: string) => void;
}
const MotionLink = motion(Link);
export default function Header({ togglePopupMap, onSelectCategory, onSearchChange }: HeaderProps): JSX.Element {
const [isCatalogMenuVisible, setIsCatalogMenuVisible] = useState(false);
const [isLoginMenuVisible, setIsLoginMenuVisible] = useState(false);
@@ -129,8 +131,8 @@ export default function Header({ togglePopupMap, onSelectCategory, onSearchChang
</svg>
{/* Код для svg */}
</motion.button>
<motion.a
href="info"
<MotionLink
to="/info"
className="header__info-a"
whileTap={{scale: 0.9}}
transition={{duration: 0.2, type: "spring"}}
@@ -148,7 +150,7 @@ export default function Header({ togglePopupMap, onSelectCategory, onSearchChang
</g>
</svg>
{/* Код для svg */}
</motion.a>
</MotionLink>
</nav>
{isCatalogMenuVisible && <CatalogMenu toggleCatalogMenu={toggleCatalogMenu} onSelectCategory={onSelectCategory}/>}
{isLoginMenuVisible && <LoginMenu toggleLoginMenu={toggleLoginMenu}/>}

21
reactapp/src/components/PopupMap.tsx
View File

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
type ButtonState = 1 | 2 | null;
@@ -32,24 +33,32 @@ export default function PopupMap({ togglePopupMap }: PopupMapProps) {
<div className="popup-map__menu-div">
<div className="menu-div__container-div">
<div className="menu-div__delivery-div">
<button
<motion.button
className={`delivery-div__delivery-button ${selectedButton === 1 ? 'delivery-div__delivery-button_selected' : ''}`}
onClick={() => handleButtonClick(1)}
whileTap={{scale: 0.98}}
transition={{duration: 0.02, type: "spring"}}
>
Самовывоз
</button>
<button
</motion.button>
<motion.button
className={`delivery-div__delivery-button ${selectedButton === 2 ? 'delivery-div__delivery-button_selected' : ''}`}
onClick={() => handleButtonClick(2)}
whileTap={{scale: 0.98}}
transition={{duration: 0.02, type: "spring"}}
>
Курьером
</button>
</motion.button>
</div>
<input type="search" name="address-search" id="address-search" placeholder="Искать на карте" className="menu-div__search-input"/>
</div>
<button className="menu-div__select-button">
<motion.button
className="menu-div__select-button"
whileTap={{scale: 0.98}}
transition={{duration: 0.01, type: "spring"}}
>
Заберу здесь
</button>
</motion.button>
</div>
<div className="popup-map__map-div">
<a href="https://yandex.ru/maps/65/novosibirsk/?utm_medium=mapframe&utm_source=maps" style={{color:"#eee", fontSize:"12px", position:"absolute", top:"0px"}}>Новосибирск</a>

12
reactapp/src/components/ProductCard.tsx
View File

@@ -1,12 +1,18 @@
import React from "react";
import { motion } from "framer-motion";
import { Product } from "../utils/types";
export default function ProductCard({ icons, title, price }: Product) {
const priceAsString = price.toLocaleString('ru-RU');
return(
<article className="product-article">
<img src={icons} alt={title} className="product-article__img"/>
<motion.article
className="product-article"
whileTap={{scale: 0.98}}
transition={{duration: 0.1, type: "spring"}}
whileHover={{boxShadow: "-4px -4px 10px 0px rgba(0, 0, 0, 0.25),4px 4px 20px 0px rgba(0, 0, 0, 0.25)"}}
>
<img src={icons} alt={title} className="product-article__img" loading="lazy"/>
<h5 className="product-article__price-h5">
<span>{priceAsString}</span>
<span>₽</span>
@@ -14,6 +20,6 @@ export default function ProductCard({ icons, title, price }: Product) {
<h6 className="product-article__name-h6">
{title}
</h6>
</article>
</motion.article>
)
}

22
reactapp/src/index.scss
View File

@@ -15,13 +15,13 @@ body.no-scroll {
.product-article {
display: flex;
width: 260px;
height: 400px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 20px;
border-radius: 40px;
background: transparent;
transition: 0.2s;
.product-article__img {
align-self: stretch;
@@ -87,15 +87,16 @@ body.no-scroll {
width: 100%;
height: 130px;
display: flex !important;
flex-direction: row;
justify-content: space-between;
gap: 40px;
align-items: center;
padding: 0px 40px 0px 40px;
padding: 0px 40px 0px 28px;
background-color: $background-color;
.header__title-h1 {
font-size: 24px;
font-weight: 600;
min-width: 170px;
display: flex;
line-height: 29px;
letter-spacing: 0px;
@@ -109,13 +110,12 @@ body.no-scroll {
}
.catalog-button {
width: 150px;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px 5px 0px 5px;
padding: 0px 24px 0px 24px;
border-radius: 10px;
background-color: $main-color;
color: black;
@@ -126,7 +126,7 @@ body.no-scroll {
}
.search-form {
width: 60%;
width: 100%;
.search-form__field {
width: 100%;
@@ -160,11 +160,10 @@ body.no-scroll {
.catalog-menu {
position: fixed;
z-index: 999;
width: 340px;
left: 218px;
top: 108px;
display: flex;
gap: 30px;
gap: 20px;
flex-direction: column;
box-sizing: border-box;
border-radius: 20px;
@@ -172,8 +171,9 @@ body.no-scroll {
padding: 30px;
.catalog-menu__point-li {
height: 48px;
height: 64px;
width: 100%;
padding: 0 14px;
display: flex;
gap: 20px;
align-items: center;
@@ -182,9 +182,7 @@ body.no-scroll {
font-weight: 600;
line-height: 29px;
letter-spacing: 0px;
padding: 30px 14px;
border-radius: 10px;
box-sizing: border-box;
transition: 0.2s;
.catalog-menu__category-icon {