yawaflua/SusMarket
1
0
Fork 0
mirror of https://github.com/yawaflua/SusMarket.git synced 2025-12-09 20:19:31 +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": { "files": {
"main.css": "/static/css/main.c2ca56ed.css", "main.css": "/static/css/main.1aa814f6.css",
"main.js": "/static/js/main.b01594ed.js", "main.js": "/static/js/main.47a170f7.js",
"static/media/scam-image.png": "/static/media/scam-image.c6c14289dc251ba2d2b1.png", "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/info-page__railth-avatar.png": "/static/media/info-page__railth-avatar.cbf11c43b5ef243b38c0.png",
"static/media/add.webp": "/static/media/add.cd69f1e2a8c91109db0f.webp", "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__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", "static/media/rating__filled-star-icon.svg": "/static/media/rating__filled-star-icon.dc7d908d4d943b7f3b56.svg",
"index.html": "/index.html", "index.html": "/index.html",
"main.c2ca56ed.css.map": "/static/css/main.c2ca56ed.css.map", "main.1aa814f6.css.map": "/static/css/main.1aa814f6.css.map",
"main.b01594ed.js.map": "/static/js/main.b01594ed.js.map" "main.47a170f7.js.map": "/static/js/main.47a170f7.js.map"
}, },
"entrypoints": [ "entrypoints": [
"static/css/main.c2ca56ed.css", "static/css/main.1aa814f6.css",
"static/js/main.b01594ed.js" "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; text-align: center;
transition: transform 0.6s; transition: transform 0.6s;
transform-style: preserve-3d; 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 { .dev-card__front, .dev-card__back {
position: absolute; position: absolute;

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

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

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

@@ -1,4 +1,5 @@
import React, { useState, useEffect } from "react"; import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
type ButtonState = 1 | 2 | null; type ButtonState = 1 | 2 | null;
@@ -32,24 +33,32 @@ export default function PopupMap({ togglePopupMap }: PopupMapProps) {
<div className="popup-map__menu-div"> <div className="popup-map__menu-div">
<div className="menu-div__container-div"> <div className="menu-div__container-div">
<div className="menu-div__delivery-div"> <div className="menu-div__delivery-div">
<button <motion.button
className={`delivery-div__delivery-button ${selectedButton === 1 ? 'delivery-div__delivery-button_selected' : ''}`} className={`delivery-div__delivery-button ${selectedButton === 1 ? 'delivery-div__delivery-button_selected' : ''}`}
onClick={() => handleButtonClick(1)} onClick={() => handleButtonClick(1)}
whileTap={{scale: 0.98}}
transition={{duration: 0.02, type: "spring"}}
> >
Самовывоз Самовывоз
</button> </motion.button>
<button <motion.button
className={`delivery-div__delivery-button ${selectedButton === 2 ? 'delivery-div__delivery-button_selected' : ''}`} className={`delivery-div__delivery-button ${selectedButton === 2 ? 'delivery-div__delivery-button_selected' : ''}`}
onClick={() => handleButtonClick(2)} onClick={() => handleButtonClick(2)}
whileTap={{scale: 0.98}}
transition={{duration: 0.02, type: "spring"}}
> >
Курьером Курьером
</button> </motion.button>
</div> </div>
<input type="search" name="address-search" id="address-search" placeholder="Искать на карте" className="menu-div__search-input"/> <input type="search" name="address-search" id="address-search" placeholder="Искать на карте" className="menu-div__search-input"/>
</div> </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>
<div className="popup-map__map-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> <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 React from "react";
import { motion } from "framer-motion";
import { Product } from "../utils/types"; import { Product } from "../utils/types";
export default function ProductCard({ icons, title, price }: Product) { export default function ProductCard({ icons, title, price }: Product) {
const priceAsString = price.toLocaleString('ru-RU'); const priceAsString = price.toLocaleString('ru-RU');
return( return(
<article className="product-article"> <motion.article
<img src={icons} alt={title} className="product-article__img"/> 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"> <h5 className="product-article__price-h5">
<span>{priceAsString}</span> <span>{priceAsString}</span>
<span>₽</span> <span>₽</span>
@@ -14,6 +20,6 @@ export default function ProductCard({ icons, title, price }: Product) {
<h6 className="product-article__name-h6"> <h6 className="product-article__name-h6">
{title} {title}
</h6> </h6>
</article> </motion.article>
) )
} }

22
reactapp/src/index.scss
View File

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