Skip to content

K
kus-admin
Commit 94116008 by talequale
Options

productCard

parent 839c18fc
Showing with 194 additions and 174 deletions
src/view/cmp/infoCard/InfoCard.jsx
import './infoCard.scss'; import './infoCard.scss';
import Button from "../button/Button"; import Button from "../button/Button";
import ProductCard from '../productCard/ProductCard.jsx';
import Back from '/svg/arr-back.svg'; import Back from '/svg/arr-back.svg';
import Arr from '/svg/arr.svg'; import Arr from '/svg/arr.svg';
import Info from '/svg/info.svg';
const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => { const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
return <div class="info-card"> return <div class="info-card">
...@@ -15,25 +15,7 @@ const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => { ...@@ -15,25 +15,7 @@ const InfoCard = D.declare('view.cmp.InfoCard', (cfg) => {
</div> </div>
</div> </div>
<div className="info-card__body"> <div className="info-card__body">
<div className="info-card__image"> <ProductCard/>
<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>
<div className="info-card__footer"> <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"}><Back width="17" height="11"/><span>Предыдущая карточка</span></Button>
......
src/view/cmp/infoCard/infoCard.scss
...@@ -60,10 +60,7 @@ ...@@ -60,10 +60,7 @@
} }
.info-card__body { .info-card__body {
display: flex;
flex-wrap: wrap;
margin-bottom: 25px; margin-bottom: 25px;
padding: 34px 40px 54px;
background-color: $bg-main; background-color: $bg-main;
box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25); box-shadow: 0 4px 10px rgba(190, 190, 190, 0.25);
border-radius: 6px; border-radius: 6px;
...@@ -73,164 +70,13 @@ ...@@ -73,164 +70,13 @@
} }
@media (max-width: $mobile) { @media (max-width: $mobile) {
flex-direction: column;
margin-bottom: 14px; margin-bottom: 14px;
padding: 0;
background-color: transparent; background-color: transparent;
border-radius: 0; border-radius: 0;
box-shadow: none; 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 { .info-card__footer {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
src/view/cmp/productCard/ProductCard.jsx 0 → 100644
import './productCard.scss';
import Info from "/svg/info.svg";
const ProductCard = D.declare('view.cmp.ProductCard', () => {
return <div class="product-card">
<div className="product-card__image">
<img src="/uploads/images/product1.jpg" alt=""/>
</div>
<div className="product-card__list">
<h2>Ингредиенты</h2>
<ul>
<li>Вареная сгущенка </li>
<li>Мука </li>
<li>Масло сливочное </li>
<li>Сахар </li>
<li>Ингредиент</li>
</ul>
</div>
<div className="product-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>
})
export default ProductCard;
export {ProductCard};
src/view/cmp/productCard/productCard.scss 0 → 100644
.product-card {
display: flex;
flex-wrap: wrap;
padding: 34px 40px 54px;
@media (max-width: $tablet) {
padding: 20px 30px 40px;
}
@media (max-width: $mobile) {
flex-direction: column;
padding: 0;
}
}
.product-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;
}
}
.product-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;
}
}
.product-card__list {
max-width: calc(100% - 350px);
@media (max-width: $mobile) {
box-sizing: border-box;
padding: 0 10px;
max-width: 100%;
}
}
.product-card__list h2 {
@include lesserHeadline;
margin: 0 0 17px;
@media (max-width: $mobile) {
margin-bottom: 3px;
}
}
.product-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);
}
}
.product-card__list li {
position: relative;
margin-bottom: 5px;
padding-left: 21px;
@media (max-width: $mobile) {
margin-bottom: 3px;
padding-left: 9px;
}
}
.product-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;
}
}
.product-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);
}
}
.product-card__text svg {
position: absolute;
top: 0;
left: 0;
color: $accent-main;
@media (max-width: $mobile) {
left: 10px;
}
}
.product-card__text p {
margin: 0;
}
.product-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;
}
}
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