Skip to content

Commit 9dd9e4d

Browse files
yulia-dnistrianyulia-dnistrian
authored
update loader on category and product page (#39)
1 parent ba0b440 commit 9dd9e4d

File tree

4 files changed

+99
-87
lines changed

4 files changed

+99
-87
lines changed

‎src/AppFooter.scss‎

Lines changed: 37 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,76 @@
11
@import './theme/common';
22

3-
.app-footer {
4-
position: relative;
5-
background-color: $mainColor;
6-
color: $mainNavigationColor;
7-
padding: 30px 30px 40px;
3+
.appfooter {
84

9-
.share-icon {
5+
&__content {
6+
position: relative;
7+
background-color: $mainColor;
8+
color: $mainNavigationColor;
9+
padding: 30px 30px 40px;
10+
}
11+
12+
&__icon {
1013
width: 16px;
1114
height: 18px;
1215
fill: $mainBackgroundColor;
1316
margin: 0 10px 7px 0;
1417
vertical-align: top;
1518
}
1619

17-
.title {
20+
&__title {
1821
text-transform: uppercase;
1922
font-weight: bold;
2023
font-size: 16px;
2124
margin-bottom: 20px;
2225
}
2326

24-
.first-row {
27+
&__firstrow {
2528
display: flex;
2629
flex-direction: row;
2730
justify-content: space-evenly;
31+
}
2832

29-
.footer-column {
30-
flex: 1;
31-
max-width: 250px;
32-
margin: 20px;
33+
&__column {
34+
flex: 1;
35+
max-width: 250px;
36+
margin: 20px;
37+
}
3338

34-
.content {
35-
opacity: 0.7;
36-
color: $mainNavigationColor;
39+
&__txt {
40+
opacity: 0.7;
41+
color: $mainNavigationColor;
3742

38-
a {
39-
display: block;
40-
color: inherit;
41-
}
42-
}
43+
a {
44+
display: block;
45+
color: inherit;
4346
}
4447
}
4548

46-
.second-row {
49+
&__secondrow {
4750
display: none;
4851
}
4952

5053
@media (max-width: $mobileWidth - 1px) {
51-
.footer-column.social {
54+
&__content {
55+
padding-right: 10px;
56+
padding-left: 10px;
57+
}
58+
59+
&__social {
5260
display: none;
5361
}
5462

55-
.second-row {
63+
&__secondrow {
5664
display: block;
5765
text-align: center;
5866
padding-top: 20px;
67+
}
5968

60-
.share-icon {
61-
width: 21px;
62-
height: 24px;
63-
fill: $mainNavigationColor;
64-
margin: 0 20px;
65-
}
69+
&__icon {
70+
width: 21px;
71+
height: 24px;
72+
fill: $mainNavigationColor;
73+
margin: 0 20px;
6674
}
6775
}
6876
}

‎src/AppFooter.tsx‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -22,69 +22,71 @@ export const AppFooter: React.FC = (props) => {
2222
};
2323

2424
return (
25-
<div className="container">
26-
<div className="app-footer">
27-
<div className="first-row">
28-
<div className="footer-column">
29-
<div className="title">
30-
{t('bellvie')}
25+
<div className="appfooter">
26+
<div className="container">
27+
<div className="appfooter__content">
28+
<div className="appfooter__firstrow">
29+
<div className="appfooter__column">
30+
<div className="appfooter__title">
31+
{t('bellvie')}
32+
</div>
33+
<div className="appfooter__txt">
34+
{t('footer-1-content')}
35+
</div>
3136
</div>
32-
<div className="content">
33-
{t('footer-1-content')}
37+
<div className="appfooter__column">
38+
<div className="appfooter__title">
39+
{t('assistance')}
40+
</div>
41+
<div className="appfooter__txt">
42+
<Link to={linkTo.aboutus}>
43+
{t('about-us')}
44+
</Link>
45+
<Link to={linkTo.contactus}>
46+
{t('contact')}
47+
</Link>
48+
<Link to={linkTo.shippingreturns}>
49+
{t('shipping-and-returns')}
50+
</Link>
51+
<Link to={linkTo.termsandconditions}>
52+
{t('terms-and-conditions')}
53+
</Link>
54+
</div>
3455
</div>
35-
</div>
36-
<div className="footer-column">
37-
<div className="title">
38-
{t('assistance')}
39-
</div>
40-
<div className="content">
41-
<Link to={linkTo.aboutus}>
42-
{t('about-us')}
43-
</Link>
44-
<Link to={linkTo.contactus}>
45-
{t('contact')}
46-
</Link>
47-
<Link to={linkTo.shippingreturns}>
48-
{t('shipping-and-returns')}
49-
</Link>
50-
<Link to={linkTo.termsandconditions}>
51-
{t('terms-and-conditions')}
52-
</Link>
56+
<div className="appfooter__column appfooter__social">
57+
<div className="appfooter__title">
58+
{t('find-us-online')}
59+
</div>
60+
<div className="appfooter__txt">
61+
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
62+
<FacebookIcon className="appfooter__icon" />
63+
{t('facebook')}
64+
</Link>
65+
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
66+
<TwitterIcon className="appfooter__icon" />
67+
{t('twitter')}
68+
</Link>
69+
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
70+
<InstagramIcon className="appfooter__icon" />
71+
{t('instagram')}
72+
</Link>
73+
</div>
5374
</div>
5475
</div>
55-
<div className="footer-column social">
56-
<div className="title">
76+
<div className="appfooter__secondrow">
77+
<div className="appfooter__title">
5778
{t('find-us-online')}
5879
</div>
59-
<div className="content">
60-
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
61-
<FacebookIcon className="share-icon" />
62-
{t('facebook')}
63-
</Link>
64-
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
65-
<TwitterIcon className="share-icon" />
66-
{t('twitter')}
67-
</Link>
68-
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
69-
<InstagramIcon className="share-icon" />
70-
{t('instagram')}
71-
</Link>
72-
</div>
73-
</div>
74-
</div>
75-
<div className="second-row">
76-
<div className="title">
77-
{t('find-us-online')}
80+
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
81+
<FacebookIcon className="appfooter__icon" />
82+
</Link>
83+
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
84+
<TwitterIcon className="appfooter__icon" />
85+
</Link>
86+
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
87+
<InstagramIcon className="appfooter__icon" />
88+
</Link>
7889
</div>
79-
<Link to={linkTo.shareFacebook} aria-label={t('share-facebook')}>
80-
<FacebookIcon className="share-icon" />
81-
</Link>
82-
<Link to={linkTo.shareTwitter} aria-label={t('share-twitter')}>
83-
<TwitterIcon className="share-icon" />
84-
</Link>
85-
<Link to={linkTo.shareInstagram} aria-label={t('share-instagram')}>
86-
<InstagramIcon className="share-icon" />
87-
</Link>
8890
</div>
8991
</div>
9092
</div>

‎src/Category.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const Category: React.FC = () => {
5050

5151
return (
5252
<div className="category">
53-
{category ? (
53+
{category && products ? (
5454
<>
5555
<div className="category__breadcrumbs">
5656
{categoryPath?.map((category, index) => (

‎src/Product.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export const Product: React.FC = () => {
4242

4343
return (
4444
<div className="product">
45-
{product && (
45+
{product ? (
4646
<div className="product__maincontainer">
4747
<div className="product__imgcontainer">
4848
{productImageHrefs.length > 0 && (
@@ -86,6 +86,8 @@ export const Product: React.FC = () => {
8686
</div>
8787
</div>
8888
</div>
89+
) : (
90+
<div className="loader" />
8991
)}
9092
</div>
9193
);

0 commit comments

Comments
 (0)