Skip to content

K
kus-admin
Commit 88dd91b9 by talequale
Options

category card added

parent 047f28da
Showing with 269 additions and 7 deletions
src/view/cmp/categoryCard/CategoryCard.jsx 0 → 100644
import './categoryCard.scss';
const CategoryCard = D.declare('view.cmp.CategoryCard', () => {
return <div class="category-card">
<div className="category-card__body">
<div className="category-card__image">
<img src="/uploads/images/pict1.jpg" alt=""/>
</div>
<h3 className="category-card__title">Топ-35</h3>
</div>
<div className="category-card__footer">
<p>Карточек: <b>35</b></p>
<p>Просмотрено: <em>3</em>&nbsp;|&nbsp;<i>32</i></p>
</div>
</div>
})
export default CategoryCard;
export {CategoryCard};
src/view/cmp/categoryCard/categoryCard.scss 0 → 100644
.category-card {
display: flex;
flex-direction: column;
flex-grow: 1;
box-sizing: border-box;
width: 190px;
min-height: 230px;
max-width: 100%;
background-color: $bg-main;
border: 1px solid transparent;
border-radius: 8px;
box-shadow: 5px 0 30px 0 #CECECE;
transition: all 0.3s ease;
cursor: pointer;
@media (max-width: $mobile) {
width: 160px;
min-height: 210px;
}
&:hover,
&:focus {
border-color: $accent-main;
}
&:active {
box-shadow: 0 0 20px 0 rgba(#CECECE, 0.5);
}
}
.category-card__body {
margin-bottom: auto;
padding: 10px 10px 0;
text-align: center;
}
.category-card__image {
position: relative;
margin-bottom: -3px;
width: 100%;
height: 110px;
background-color: #DFDFDF;
background-image: url("/uploads/images/no_picture.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
border-radius: 6px;
overflow: hidden;
@media (max-width: $mobile) {
margin-bottom: 0;
height: 90px;
}
}
.category-card__image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.category-card__title {
display: flex;
flex-direction: column;
justify-content: center;
margin: 8px auto;
max-width: 120px;
min-height: 34px;
text-align: center;
font-weight: 700;
font-size: 16px;
line-height: 17px;
color: $text-main;
word-break: break-word;
}
.category-card__footer {
@include caption;
padding: 7px 10px 16px;
color: #828282;
border-top: 1px solid #e0e0e0;
@media (max-width: $mobile) {
margin-top: -3px;
padding: 15px 10px 8px;
font-weight: 400;
font-size: 12px;
line-height: 17px;
letter-spacing: 0.01em;
}
}
.category-card__footer p {
margin: 0 0 3px;
}
.category-card__footer p:last-child {
margin-bottom: 0;
}
.category-card__footer b {
font-weight: 500;
color: $text-main;
@media (max-width: $mobile) {
font-weight: 400;
}
}
.category-card__footer em {
font-style: normal;
color: $accent-main;
}
.category-card__footer i {
font-style: normal;
color: $red;
}
src/view/cmp/infoCard/infoCard.scss
...@@ -19,6 +19,10 @@ ...@@ -19,6 +19,10 @@
@include title; @include title;
margin: 0 0 5px; margin: 0 0 5px;
text-align: center; text-align: center;
@media (max-width: $mobile) {
text-align: left;
}
} }
.info-card__category { .info-card__category {
...@@ -32,6 +36,7 @@ ...@@ -32,6 +36,7 @@
@media (max-width: $mobile) { @media (max-width: $mobile) {
margin-bottom: 17px; margin-bottom: 17px;
text-align: left;
font-size: 16px; font-size: 16px;
line-height: 20px; line-height: 20px;
letter-spacing: 0.15px; letter-spacing: 0.15px;
...@@ -117,4 +122,4 @@ ...@@ -117,4 +122,4 @@
} }
.info-card__link-hidden { .info-card__link-hidden {
display: none; display: none;
} }
\ No newline at end of file
src/view/cmp/productCard/productCard.scss
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
} }
.product-card__list { .product-card__list {
max-width: calc(100% - 350px); max-width: calc(100% - 380px);
@media (max-width: $mobile) { @media (max-width: $mobile) {
box-sizing: border-box; box-sizing: border-box;
......
src/view/page/index.jsx
...@@ -13,6 +13,8 @@ export {InfoPage} from "./product/InfoPage"; ...@@ -13,6 +13,8 @@ export {InfoPage} from "./product/InfoPage";
export {QuizPage} from "./quiz/QuizPage"; export {QuizPage} from "./quiz/QuizPage";
export {ChooseType} from "./test/demo/ChooseType" export {ChooseType} from "./test/demo/ChooseType";
export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal" export {WelcomeDemoFinal} from "./test/demo/WelcomeDemoFinal";
export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification" export {WelcomeDemoFinalLastNotification} from "./test/demo/WelcomeDemoFinalLastNotification";
\ No newline at end of file
export {KnowledgeBasePage} from './knowledge/KnowledgeBasePage';
src/view/page/knowledge/KnowledgeBasePage.jsx 0 → 100644
import ArrActive from "/svg/arrow_active.svg";
import CategoryCard from '../../cmp/categoryCard/CategoryCard.jsx';
const KnowledgeBasePage = D.declare('view.page.KnowledgeBasePage', () => {
return <div class="info-page">
<div className="info-page__wrapper">
<h1 className="info-page__headline">База знаний</h1>
<h2 className="info-page__title">Категории</h2>
<div className="info-page__inner">
<ul className="info-page__categories">
{(() => {
var out = [];
var el;
for (var i = 0; i < 30; i++) {
el = <li className="info-page__category"><CategoryCard/></li>;
out.push(el);
}
return out;
})()}
{/*<li className="info-page__category">*/}
{/*<CategoryCard/>*/}
{/*</li>*/}
</ul>
</div>
</div>
</div>
})
export default KnowledgeBasePage;
export {KnowledgeBasePage};
src/view/page/product/infoPage.scss
...@@ -66,3 +66,88 @@ ...@@ -66,3 +66,88 @@
padding: 0; padding: 0;
} }
} }
.info-page__headline {
@include title;
margin: 0 0 24px;
text-align: center;
@media (max-width: $mobile) {
margin: -29px 0 6px;
padding-left: 10px;
text-align: left;
font-weight: 700;
font-size: 20px;
line-height: 25px;
}
}
.info-page__title {
@include headline;
margin: 0 0 20px;
text-align: center;
@media (max-width: $mobile) {
margin-bottom: 7px;
padding-left: 10px;
text-align: left;
font-weight: 500;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15px;
}
}
.info-page__inner {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 1000px;
max-width: 100%;
}
.info-page__categories {
@include list-reset;
display: flex;
flex-wrap: wrap;
margin: 0 -25px;
width: calc(100% + 240px);
@media (max-width: 1509px) {
align-self: center;
margin: 0;
width: 1200px;
}
@media (max-width: 1260px) {
width: 960px;
}
@media (max-width: 1030px) {
width: 720px;
}
@media (max-width: 790px) {
width: 480px;
}
@media (max-width: $mobile) {
align-self: auto;
margin-left: -10px;
width: calc(100% + 20px);
}
}
.info-page__category {
display: flex;
flex-direction: column;
margin: 25px;
@media (max-width: $mobile) {
margin: 10px;
}
@media (max-width: 359px) {
width: calc(50% - 20px);
}
}
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