Skip to content

Commit 1d4272a

Browse files
yulia-dnistrianyulia-dnistrian
authored
MT-2808 responsive UI (#26)
* build responsive ui * update style of the compare products page
1 parent 06a054b commit 1d4272a

File tree

8 files changed

+225
-22
lines changed

8 files changed

+225
-22
lines changed

‎src/Category.scss‎

Lines changed: 43 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
flex-direction: column;
99
align-items: center;
1010
height: 100%;
11-
padding-left: $maxScrollWidth;
12-
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
11+
width: 100%;
12+
padding-left: 15px;
13+
padding-right: 15px;
1314

1415
#{$block}__breadcrumbs {
1516
margin-top: 20px;
@@ -33,15 +34,16 @@
3334
}
3435

3536
#{$block}__productlist {
37+
width: 100%;
3638
flex: 1 1 auto;
37-
width: 800px;
3839
display: flex;
3940
flex-direction: row;
4041
flex-wrap: wrap;
4142
align-content: flex-start;
4243

4344
#{$block}__product {
44-
flex: 0 0 25%;
45+
flex: 0 0 100%;
46+
text-align: center;
4547
}
4648
}
4749

@@ -51,4 +53,41 @@
5153
flex-direction: row;
5254
align-items: center;
5355
}
56+
57+
@media (min-width: 380px) {
58+
#{$block}__productlist {
59+
#{$block}__product {
60+
flex: 0 0 50%;
61+
}
62+
}
63+
}
64+
65+
@media (min-width: 576px) {
66+
#{$block}__productlist {
67+
width: 540px;
68+
69+
#{$block}__product {
70+
flex: 0 0 33.33%;
71+
}
72+
}
73+
}
74+
75+
@media (min-width: 768px) {
76+
#{$block}__productlist {
77+
width: 720px;
78+
79+
#{$block}__product {
80+
flex: 0 0 25%;
81+
}
82+
}
83+
}
84+
85+
@media (min-width: 992px) {
86+
padding-left: $maxScrollWidth;
87+
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
88+
89+
#{$block}__productlist {
90+
width: 800px;
91+
}
92+
}
5493
}

‎src/CompareOverlay.scss‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,11 @@ $animLength: 0.2s;
99

1010
position: fixed;
1111
width: 100%;
12-
height: $overlayHeight;
13-
bottom: -$overlayHeight - 10px;
12+
bottom: -100%;
1413
background-color: white;
1514
box-shadow: 0 0 10px hsla(0, 0, 0, 0.3);
1615
transition: bottom 0.1s ease-out;
17-
padding-left: $maxScrollWidth;
18-
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
16+
padding: 10px 15px;
1917
z-index: 10;
2018
display: flex;
2119
align-items: center;
@@ -30,13 +28,14 @@ $animLength: 0.2s;
3028
display: flex;
3129
flex-direction: row;
3230
justify-content: center;
31+
flex-wrap: wrap;
3332

3433
#{$block}__product {
3534
display: flex;
3635
flex-direction: row;
37-
margin-right: 20px;
36+
margin: 5px 20px 5px 0;
3837
height: 50px;
39-
width: 200px;
38+
width: 175px;
4039
box-shadow: 0 0 2px hsla(0, 0, 0, 0.3);
4140

4241
#{$block}__productimg {
@@ -90,4 +89,17 @@ $animLength: 0.2s;
9089
}
9190
}
9291
}
92+
93+
@media (min-width: 576px) {
94+
#{$block}__products {
95+
#{$block}__product {
96+
width: 200px;
97+
}
98+
}
99+
}
100+
101+
@media (min-width: 768px) {
102+
padding-left: $maxScrollWidth;
103+
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
104+
}
93105
}

‎src/CompareProducts.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11

2+
@import './theme/common';
3+
24
.compareproducts {
35
$block: &;
46

@@ -78,6 +80,19 @@
7880
}
7981
}
8082

83+
84+
#{$block}__datarowmobile {
85+
display: none;
86+
87+
td {
88+
text-align: left;
89+
}
90+
91+
span {
92+
font-weight: bold;
93+
}
94+
}
95+
8196
#{$block}__removeitemrow {
8297
border-top: 1px solid hsl(0, 0%, 93%);
8398

@@ -86,4 +101,64 @@
86101
}
87102
}
88103
}
104+
105+
#{$block}__deleteicon {
106+
display: none;
107+
fill: $firstComplimentColor;
108+
}
109+
110+
@media (max-width: 575px) {
111+
#{$block}__table {
112+
display: block;
113+
114+
tbody {
115+
display: grid;
116+
grid-template-columns: 60px 1fr 1fr 50px;
117+
border-top: 1px solid $firstBorderColor;
118+
border-bottom: 1px solid $firstBorderColor;
119+
}
120+
121+
tr {
122+
display: block;
123+
}
124+
125+
td {
126+
display: block;
127+
min-height: 190px;
128+
width: auto;
129+
padding: 10px 5px;
130+
border-bottom: 1px solid $firstBorderColor;
131+
132+
&:first-child {
133+
display: none;
134+
}
135+
}
136+
137+
#{$block}__mainrow {
138+
td {
139+
padding: 10px 5px
140+
}
141+
}
142+
143+
#{$block}__datarow {
144+
display: none;
145+
}
146+
147+
#{$block}__datarowmobile {
148+
display: block;
149+
}
150+
151+
#{$block}__removeitemrow {
152+
border: none;
153+
}
154+
}
155+
156+
#{$block}__deletetxt {
157+
display: none;
158+
}
159+
160+
#{$block}__deleteicon {
161+
display: inline-block;
162+
}
163+
}
89164
}

‎src/CompareProducts.tsx‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import { useCompareProducts, useTranslation } from './app-state';
33
import { ProductMainImage } from './ProductMainImage';
44
import { Product } from './service';
5+
import { ReactComponent as RecycleBinIcon } from './images/icons/ic_trash.svg';
56

67
import './CompareProducts.scss';
78

@@ -81,12 +82,25 @@ export const CompareProducts: React.FC = () => {
8182
<td key={product.id}>{product.finish}</td>
8283
))}
8384
</tr>
85+
<tr className="compareproducts__datarowmobile">
86+
<td></td>
87+
{compareProducts.map(product => (
88+
<td key={product.id}>
89+
<p><span>{t('bulb')}:</span> {product.bulb}</p>
90+
<p><span>{t('wattage')}:</span> {product.max_watt}</p>
91+
<p><span>{t('bulb-qty')}:</span> {product.bulb_qty}</p>
92+
<p><span>{t('material')}:</span> {product.material}</p>
93+
<p><span>{t('finish')}:</span> {product.finish}</p>
94+
</td>
95+
))}
96+
</tr>
8497
<tr className="compareproducts__removeitemrow">
8598
<td></td>
8699
{compareProducts.map(product => (
87100
<td key={product.id}>
88101
<button onClick={() => handleRemoveItem(product)} className="epbtn --small">
89-
{t('remove')}
102+
<span className="compareproducts__deletetxt">{t('remove')}</span>
103+
<RecycleBinIcon className="compareproducts__deleteicon" />
90104
</button>
91105
</td>
92106
))}

‎src/Home.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Home: React.FC = () => {
3939
<div className="main-banner-txt">
4040
<p className="goods-description">{t('home-1-content')}</p>
4141
<div className="btn-wrap">
42-
<button type="button" className="epbtn primary learn-more-btn">{t('learn-more')}</button>
42+
<button type="button" className="epbtn --primary learn-more-btn">{t('learn-more')}</button>
4343
</div>
4444
</div>
4545
</div>
@@ -56,7 +56,7 @@ export const Home: React.FC = () => {
5656
<p className="goods-title-small">{t('home-2-subheading')}</p>
5757
<p className="goods-title">{t('home-2-heading')}</p>
5858
<div className="btn-wrap">
59-
<button type="button" className="epbtn primary learn-more-btn">{t('learn-more')}</button>
59+
<button type="button" className="epbtn --primary learn-more-btn">{t('learn-more')}</button>
6060
</div>
6161
</div>
6262
<ImageContainer imgUrl={productImage1} alt={productFileName1} imgClassName="main-goods-image" />
@@ -68,7 +68,7 @@ export const Home: React.FC = () => {
6868
<p className="goods-title-small">{t('home-3-subheading')}</p>
6969
<p className="goods-title">{t('home-3-heading')}</p>
7070
<p className="goods-description">{t('home-3-content')}</p>
71-
<button type="button" className="epbtn primary learn-more-btn">{t('add-to-cart')}</button>
71+
<button type="button" className="epbtn --primary learn-more-btn">{t('add-to-cart')}</button>
7272
</div>
7373
<ImageContainer imgUrl={productImage2} alt={productFileName2} imgClassName="main-goods-image" />
7474
</div>
@@ -79,7 +79,7 @@ export const Home: React.FC = () => {
7979
<p className="goods-title-small">{t('home-4-subheading')}</p>
8080
<p className="goods-title">{t('home-4-heading')}</p>
8181
<p className="goods-description">{t('home-4-content')}</p>
82-
<button type="button" className="epbtn primary learn-more-btn">{t('ice-cream-makers')}</button>
82+
<button type="button" className="epbtn --primary learn-more-btn">{t('ice-cream-makers')}</button>
8383
</div>
8484
<ImageContainer imgUrl={productImage3} alt={productFileName3} imgClassName="main-goods-image" />
8585
</div>
@@ -116,7 +116,7 @@ export const Home: React.FC = () => {
116116
<div className="main-banner-txt">
117117
<p className="goods-description">{t('home-7-content')}</p>
118118
<div className="btn-wrap">
119-
<button type="button" className="epbtn primary learn-more-btn">{t('learn-more')}</button>
119+
<button type="button" className="epbtn --primary learn-more-btn">{t('learn-more')}</button>
120120
</div>
121121
</div>
122122
</div>
@@ -177,7 +177,7 @@ export const Home: React.FC = () => {
177177
<p className="goods-description">{t('home-11-content-1')}</p>
178178
<p className="goods-description">{t('home-11-content-2')}</p>
179179
<div className="btn-wrap">
180-
<button type="button" className="epbtn primary learn-more-btn">{t('bellvie-help')}</button>
180+
<button type="button" className="epbtn --primary learn-more-btn">{t('bellvie-help')}</button>
181181
</div>
182182
</div>
183183
</div>
@@ -190,7 +190,7 @@ export const Home: React.FC = () => {
190190
<p className="goods-description">{t('home-12-content-1')}</p>
191191
<p className="goods-description">{t('home-12-content-2')}</p>
192192
<div className="btn-wrap">
193-
<button type="button" className="epbtn primary learn-more-btn">{t('about')}</button>
193+
<button type="button" className="epbtn --primary learn-more-btn">{t('about')}</button>
194194
</div>
195195
</div>
196196
</div>

‎src/Product.scss‎

Lines changed: 53 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,15 @@
55
$block: &;
66

77
height: 100%;
8+
width: 100%;
89
display: flex;
910
flex-direction: column;
1011
align-items: center;
11-
padding-left: $maxScrollWidth;
12-
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
12+
padding-left: 15px;
13+
padding-right: 15px;
1314

1415
#{$block}__maincontainer {
15-
width: 800px;
16+
width: 100%;
1617
display: flex;
1718
flex-direction: row;
1819
margin-top: 60px;
@@ -68,4 +69,53 @@
6869
}
6970
}
7071
}
72+
73+
@media (min-width: 576px) {
74+
#{$block}__maincontainer {
75+
width: 540px;
76+
}
77+
}
78+
79+
@media (min-width: 768px) {
80+
#{$block}__maincontainer {
81+
width: 720px;
82+
}
83+
}
84+
85+
@media (min-width: 992px) {
86+
padding-left: $maxScrollWidth;
87+
padding-right: calc(#{$maxScrollWidth} - 100vw + 100%);
88+
89+
#{$block}__maincontainer {
90+
width: 800px;
91+
}
92+
}
93+
94+
@media (max-width: 767px) {
95+
&mainimage {
96+
height: auto !important;
97+
width: 100% !important;
98+
}
99+
100+
#{$block}__maincontainer {
101+
#{$block}__imgcontainer {
102+
flex: 0 0 50%;
103+
}
104+
}
105+
}
106+
107+
@media (max-width: 575px) {
108+
#{$block}__maincontainer {
109+
flex-direction: column;
110+
111+
#{$block}__imgcontainer {
112+
flex: 0 0 100%;
113+
margin-bottom: 20px;
114+
}
115+
116+
#{$block}__details {
117+
margin-left: 0;
118+
}
119+
}
120+
}
71121
}

0 commit comments

Comments
 (0)