Skip to content

K
kus-admin
Commit 0fd109d7 by talequale
Options

info card

parent c2814e6a
Showing with 466 additions and 21 deletions
src/global-styles/mixins.scss
...@@ -31,6 +31,14 @@ ...@@ -31,6 +31,14 @@
} }
} }
@mixin infoPage {
flex-grow: 1;
display: flex;
margin: 0 30px 30px;
padding: 30px 30px 25px;
background-color: $bg-accent;
}
@mixin list-reset { @mixin list-reset {
margin: 0; margin: 0;
padding: 0; padding: 0;
...@@ -46,6 +54,13 @@ ...@@ -46,6 +54,13 @@
cursor: pointer; cursor: pointer;
} }
@mixin center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@mixin hover { @mixin hover {
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
......
src/global-styles/typography.scss
...@@ -13,6 +13,12 @@ ...@@ -13,6 +13,12 @@
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
line-height: 40px; line-height: 40px;
@media (max-width: $mobile) {
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
}
} }
@mixin headline { @mixin headline {
...@@ -32,7 +38,7 @@ ...@@ -32,7 +38,7 @@
line-height: 24px; line-height: 24px;
@media (max-width: $mobile) { @media (max-width: $mobile) {
font-weight: 500; font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
...@@ -74,6 +80,13 @@ ...@@ -74,6 +80,13 @@
font-weight: 500; font-weight: 500;
font-size: 17px; font-size: 17px;
line-height: 22px; line-height: 22px;
@media (max-width: $mobile) {
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
}
} }
@mixin mainCaption { @mixin mainCaption {
......
src/svg/arrow_active.svg 0 → 100644
<svg width="22" height="18" viewBox="0 0 22 18" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5626 17.5098C10.0049 18.1224 9.05621 18.1669 8.44365 17.6091L0.490157 10.3678C0.184593 10.0896 0.00733684 9.69761 0.000224305 9.28443C-0.00689014 8.87125 0.156768 8.47344 0.452577 8.18488L8.40606 0.426257C8.99907 -0.152219 9.94874 -0.140441 10.5272 0.452565C11.1057 1.04557 11.0939 1.99524 10.5009 2.57372L5.1858 7.75861L20.5 7.75861C21.3284 7.75861 22 8.43018 22 9.25861C22 10.087 21.3284 10.7586 20.5 10.7586L5.37558 10.7586L10.4633 15.3908C11.0759 15.9486 11.1204 16.8973 10.5626 17.5098Z" fill="currentColor"/>
</svg>
src/svg/info.svg 0 → 100644
<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
<path d="M15 30C23.2843 30 30 23.2843 30 15C30 6.71573 23.2843 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30Z" fill="currentColor"/>
<path d="M13.2 9.4502C13.2 8.5502 13.95 7.9502 15 7.9502C16.05 7.9502 16.8 8.5502 16.8 9.4502C16.8 10.3502 16.05 11.1002 15 11.1002C13.95 11.1002 13.2 10.3502 13.2 9.4502ZM15 12.4502C15.75 12.4502 16.35 13.0502 16.35 13.8002V20.7002C16.35 21.4502 15.75 22.0502 15 22.0502C14.25 22.0502 13.65 21.4502 13.65 20.7002L13.65 13.8002C13.65 13.0502 14.25 12.4502 15 12.4502Z" fill="white"/>
</svg>
src/view/cmp/card/Card.jsx
import './card.scss';
import Eye from '/svg/eye.svg'; import Eye from '/svg/eye.svg';
import Button from "../button/Button"; import Button from "../button/Button";
import Format from "../format/Format"; import Format from "../format/Format";
......
src/view/block/card/card.scss → src/view/cmp/card/card.scss
...@@ -74,25 +74,6 @@ $cardTypes: ( ...@@ -74,25 +74,6 @@ $cardTypes: (
margin-bottom: 30px; margin-bottom: 30px;
} }
.card {
@include colorCards;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
padding: 10px;
width: 160px;
min-height: 210px;
color: #605D5D;
background-color: $bg-main;
border: 1px solid $bg-main;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
.card__image { .card__image {
width: 140px; width: 140px;
height: 90px; height: 90px;
...@@ -128,6 +109,7 @@ button.card__button { ...@@ -128,6 +109,7 @@ button.card__button {
min-width: 120px; min-width: 120px;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
background-color: $accent-main;
border-radius: 8px; border-radius: 8px;
&:hover, &:hover,
...@@ -151,8 +133,34 @@ button.card__button { ...@@ -151,8 +133,34 @@ button.card__button {
margin-left: 9px; margin-left: 9px;
} }
.card {
@include colorCards;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
box-sizing: border-box;
padding: 10px;
width: 160px;
min-height: 210px;
color: #605D5D;
background-color: $bg-main;
border: 1px solid $bg-main;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
.card--disabled { .card--disabled {
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
cursor: default; cursor: default;
&:hover,
&:active,
&:focus {
box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.25);
}
} }
.card--disabled .card__title { .card--disabled .card__title {
......
src/view/cmp/infoCard/InfoCard.jsx 0 → 100644
import './infoCard.scss';
import Button from "../button/Button";
import Back from '/svg/arr-back.svg';
import Arr from '/svg/arr.svg';
import Info from '/svg/info.svg';
const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
return <div class="info-card">
<div className="info-card__header">
<h1 className="info-card__title">Печенье "Орешки"</h1>
<p className="info-card__category">Категория Топ 35</p>
<div className="info-card__stats">
<p>Карточек в категории: <b>20</b></p>
<p>Просмотрено: <em>2</em></p>
</div>
</div>
<div className="info-card__body">
<div className="info-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="info-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="info-card__text">
<Info width="30" height="30"/>
<p><b>Важно знать.</b>Информация о&nbsp;продукте. Все, что вы&nbsp;хотели знать, но&nbsp;боялись спросить.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacinia augue quam, in&nbsp;dapibus nulla ullamcorper nec. Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl. </p>
<p>Mauris ac&nbsp;magna est. Vivamus dapibus venenatis nisi, sit amet dictum tellus aliquam sit amet. Proin sit amet suscipit nisl.</p>
</div>
</div>
<div className="info-card__footer">
<Button class={"button info-card__link"}><Back width="17" height="11"/><span>Предыдущая карточка</span></Button>
<Button class={"button info-card__link"}><span>Следующая карточка</span><Arr width="17" height="11"/></Button>
</div>
</div>
})
export default InfoCard;
export {InfoCard};
src/view/cmp/infoCard/infoCard.scss 0 → 100644
.info-card__header {
margin-bottom: 17px;
@media (max-width: $mobile) {
margin-bottom: 10px;
padding: 0 10px;
}
}
.info-card__title {
@include title;
margin: 0 0 5px;
text-align: center;
}
.info-card__category {
@include lesserHeadline;
margin: 0;
text-align: center;
@media (max-width: $tablet) {
margin-bottom: 10px;
}
@media (max-width: $mobile) {
margin-bottom: 17px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
}
}
.info-card__stats {
@include bodyText;
@media (max-width: $mobile) {
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
}
}
.info-card__stats p {
margin: 0;
@media (max-width: $mobile) {
margin-bottom: 6px;
}
}
.info-card__stats b {
color: $text-main;
}
.info-card__stats em {
font-weight: 700;
font-style: normal;
color: $accent-medium;
}
.info-card__body {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px;
padding: 34px 40px 54px;
background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
border-radius: 6px;
@media (max-width: $tablet) {
padding: 20px 30px 40px;
}
@media (max-width: $mobile) {
flex-direction: column;
margin-bottom: 14px;
padding: 0;
background-color: transparent;
border-radius: 0;
box-shadow: none;
}
}
.info-card__image {
flex: none;
margin: 6px 48px 52px 0;
width: 330px;
height: 190px;
background-image: linear-gradient(139.56deg, #F3F3F3 29.84%, #D1D1D1 102.3%);
border-radius: 10px;
overflow: hidden;
@media (max-width: $tablet) {
margin-right: 20px;
}
@media (max-width: $mobile) {
position: relative;
margin: 0 0 23px;
padding-top: 58%;
width: 100%;
height: 0;
border-radius: 6px;
overflow: hidden;
}
}
.info-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
@media (max-width: $mobile) {
position: absolute;
top: 0;
left: 0;
}
}
.info-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.info-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.info-card__list ul {
@include list-reset;
@include subtitle;
margin-bottom: 50px;
font-weight: 500;
@media (max-width: $mobile) {
margin-bottom: 27px;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.info-card__list li::before {
content: "";
position: absolute;
top: 8px;
left: 4px;
width: 5px;
height: 5px;
background-color: $accent-main;
border-radius: 50%;
@media (max-width: $mobile) {
top: 6px;
left: 1px;
width: 3px;
height: 3px;
}
}
.info-card__text {
@include bodyText;
position: relative;
padding-left: 55px;
@media (max-width: $mobile) {
padding: 8px 10px 0;
font-weight: 400;
font-size: 14px;
line-height: 18px;
letter-spacing: 0.1px;
color: rgba($text-main, 0.6);
}
}
.info-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.info-card__text p {
margin: 0;
}
.info-card__text b {
display: inline-block;
vertical-align: top;
margin-bottom: 2px;
margin-right: 4px;
@media (max-width: $mobile) {
display: block;
margin-bottom: 14px;
padding-left: 38px;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
color: $text-main;
}
}
.info-card__footer {
display: flex;
justify-content: space-between;
@media (max-width: $mobile) {
flex-direction: column;
padding: 0 10px;
}
}
.info-card__link {
@media (max-width: $mobile) {
margin-bottom: 20px;
padding: 5px 50px;
color: $bg-main;
background-color: $accent-main;
font-size: 16px;
svg:first-child {
left: 18px;
}
svg:last-child {
right: 18px;
}
&:hover,
&:active,
&:focus {
color: $bg-main;
background-color: $accent-medium;
}
}
}
src/view/page/account/Account.jsx
import './accountPage.scss'; import './accountPage.scss';
import AccountBlock from '../../block/account/Account.jsx'; import AccountBlock from '../../block/account/Account.jsx';
import '../../block/card/card.scss';
import {AsyncAuthAjax} from "../../../controller/Ajax"; import {AsyncAuthAjax} from "../../../controller/Ajax";
import {API} from "../../../dict/Consts"; import {API} from "../../../dict/Consts";
import Card from "../../cmp/card/Card"; import Card from "../../cmp/card/Card";
......
src/view/page/index.jsx
...@@ -8,3 +8,5 @@ export {Login} from "./login/Login"; ...@@ -8,3 +8,5 @@ export {Login} from "./login/Login";
export {Fields} from "./tmp/Fields"; export {Fields} from "./tmp/Fields";
export {TestRequests} from "./tmp/TestRequests"; export {TestRequests} from "./tmp/TestRequests";
export {InfoPage} from "./product/InfoPage";
src/view/page/product/InfoPage.jsx 0 → 100644
import './infoPage.scss';
import ArrActive from '/svg/arrow_active.svg';
import InfoCard from "../../cmp/infoCard/InfoCard.jsx";
const InfoPage = D.declare('view.page.InfoPage', () => {
return <div class="info-page">
<div class="info-page__wrapper">
<button class="info-page__link-back" type="button" aria-label="Вернуться на предыдущую страницу">
<ArrActive width="22" height="18"/>
</button>
<div class="info-page__card">
<InfoCard />
</div>
</div>
</div>
})
export default InfoPage;
export {InfoPage};
src/view/page/product/infoPage.scss 0 → 100644
.info-page {
@include infoPage;
position: relative;
@media (max-width: $mobile) {
margin: 0;
padding: 52px 10px;
}
}
.info-page__wrapper {
width: 100%;
}
.info-page__link-back {
@include btn-reset;
position: absolute;
top: 34px;
left: 36px;
width: 40px;
height: 40px;
color: $text-main;
transition: color 0.3s ease;
@media (max-width: $tablet) {
top: 14px;
left: 16px;
}
@media (max-width: $mobile) {
top: -1px;
left: 9px;
color: $accent-dark;
}
&:hover,
&:focus,
&:active {
color: $accent-medium;
outline: none;
}
}
.info-page__link-back svg {
@include center;
display: block;
@media (max-width: $mobile) {
width: 20px;
height: 17px;
}
}
.info-page__card {
margin: 0 auto;
box-sizing: border-box;
padding: 0 40px;
width: 100%;
max-width: 1080px;
@media (max-width: $tablet) {
padding: 0 10px;
}
@media (max-width: $mobile) {
padding: 0;
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment