Skip to content

Commit c198098

Browse files
Lizvinskyi0202Lizvinskyi0202
committed
fix
1 parent 524a525 commit c198098

File tree

3 files changed

+105
-4
lines changed

3 files changed

+105
-4
lines changed

‎client/src/app/pages/guest/document/document.component.html

+52
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,58 @@
236236
</div>
237237
<a href="" class="documents__btn">Press button</a>
238238
</div>
239+
<div class="documents-main-row">
240+
<div class="documents-products-list">
241+
<div class="documents-products__wrap">
242+
<div class="documents-products__item">
243+
<div class="documents-products__img">
244+
<img src="assets/logo.png" alt="">
245+
</div>
246+
<div class="documents-products__title">
247+
Title of product card here
248+
</div>
249+
<div class="documents-products__description">
250+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio nesciunt voluptates reiciendis sequi assumenda? Illo porro qui ducimus sint provident amet, molestias ut eligendi quod cumque, laudantium dicta quasi. Iure!
251+
</div>
252+
<div class="documents-products__btn">
253+
<wbutton _ngcontent-ng-c695243315="" class="w-btn _primary ng-star-inserted"><button ng-reflect-ng-class="[object Object]" type="submit" class="w-btn _primary"> Create </button></wbutton>
254+
</div>
255+
</div>
256+
</div>
257+
<div class="documents-products__wrap">
258+
<div class="documents-products__item">
259+
<div class="documents-products__img">
260+
<img src="assets/logo.png" alt="">
261+
</div>
262+
<div class="documents-products__title">
263+
Title of product card here
264+
</div>
265+
<div class="documents-products__description">
266+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio nesciunt voluptates reiciendis sequi assumenda? Illo porro qui ducimus sint provident amet, molestias ut eligendi quod cumque, laudantium dicta quasi. Iure!
267+
</div>
268+
<div class="documents-products__btn">
269+
<wbutton _ngcontent-ng-c695243315="" class="w-btn _primary ng-star-inserted"><button ng-reflect-ng-class="[object Object]" type="submit" class="w-btn _primary"> Create </button></wbutton>
270+
</div>
271+
</div>
272+
</div>
273+
<div class="documents-products__wrap">
274+
<div class="documents-products__item">
275+
<div class="documents-products__img">
276+
<img src="assets/logo.png" alt="">
277+
</div>
278+
<div class="documents-products__title">
279+
Title of product card here
280+
</div>
281+
<div class="documents-products__description">
282+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio nesciunt voluptates reiciendis sequi assumenda? Illo porro qui ducimus sint provident amet, molestias ut eligendi quod cumque, laudantium dicta quasi. Iure!
283+
</div>
284+
<div class="documents-products__btn">
285+
<wbutton _ngcontent-ng-c695243315="" class="w-btn _primary ng-star-inserted"><button ng-reflect-ng-class="[object Object]" type="submit" class="w-btn _primary"> Create </button></wbutton>
286+
</div>
287+
</div>
288+
</div>
289+
</div>
290+
</div>
239291
</div>
240292
</div>
241293
</div>

‎client/src/scss/layout/_base.scss

+51-4
Original file line numberDiff line numberDiff line change
@@ -469,6 +469,45 @@ wform {
469469
background-color: #ba593b;
470470
}
471471
}
472+
&-products{
473+
&-list{
474+
display: flex;
475+
flex-flow: row wrap;
476+
justify-content: center;
477+
}
478+
&__wrap{
479+
flex: 0 0 33.333%;
480+
max-width: 33.333%;
481+
padding: 0 15px;
482+
display: flex;
483+
margin-bottom: 30px;
484+
}
485+
&__item{
486+
display: flex;
487+
flex-flow: column wrap;
488+
padding: 15px;
489+
background-color: var(--doc-products);
490+
}
491+
&__img{
492+
img{
493+
width: 100%;
494+
height: 100%;
495+
object-fit: cover;
496+
}
497+
}
498+
&__title{
499+
font-weight: 600;
500+
padding: 15px 0 5px 0;
501+
color: var(--c-text-primary);
502+
}
503+
&__description{
504+
color: var(--c-text-primary);
505+
}
506+
&__btn{
507+
padding-top: 15px;
508+
margin-top: auto;
509+
}
510+
}
472511
}
473512

474513
@media screen and (max-width: 1199px) {
@@ -511,6 +550,7 @@ wform {
511550
left: 0;
512551
padding: 10px;
513552
background: var(--header-doc);
553+
z-index: 8;
514554
&__title{
515555
position: absolute;
516556
left: 50%;
@@ -525,10 +565,8 @@ wform {
525565
align-items: center;
526566
&__arrow{
527567
display: flex;
528-
svg{
529-
fill: var(--c-text-primary);
530-
width: 32px;
531-
height: 32px;
568+
span{
569+
color: var(--c-text-primary);
532570
}
533571
}
534572
&__avatar{
@@ -576,6 +614,10 @@ wform {
576614
.documents-main-row {
577615
padding: 10px 30px 20px 15px;
578616
}
617+
.documents-products__wrap{
618+
flex: 0 0 50%;
619+
max-width: 50%;
620+
}
579621
}
580622
@media screen and (max-width: 767px) {
581623
.documents-triggers__wrap {
@@ -593,10 +635,15 @@ wform {
593635
flex: 0 0 100%;
594636
padding: 20px 0 0 0;
595637
}
638+
596639
}
597640
@media screen and (max-width: 479px) {
598641
.documents-triggers__wrap {
599642
flex: 0 0 100%;
600643
max-width: 100%;
601644
}
645+
.documents-products__wrap{
646+
flex: 0 0 100%;
647+
max-width: 100%;
648+
}
602649
}

‎client/src/scss/utils/_vars.scss

+2
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,7 @@ $transition: if(
137137
--events: #4c8e9d;
138138
--border: rgba(102, 91, 91, 0.432);
139139
--header-doc:#d8d8d8;
140+
--doc-products:#f5f5f5;
140141
}
141142

142143
html.dark:root {
@@ -155,4 +156,5 @@ html.dark:root {
155156
--events: #1c2e32;
156157
--border: rgb(255 255 255 / 23%);
157158
--header-doc:#1b1b1be3;
159+
--doc-products:#252222;
158160
}

0 commit comments

Comments
 (0)