1
00:00:02,070 --> 00:00:07,070
Now, let's work on styling this cart page.

2
00:00:07,190 --> 00:00:10,380
For this, of course, in the .cart-item.ejs file,

3
00:00:10,380 --> 00:00:13,560
we have the .cart-item class on every article,

4
00:00:13,560 --> 00:00:16,530
and there, then the .cart-item-info

5
00:00:16,530 --> 00:00:20,070
and .cart-item-management classes on those divs.

6
00:00:20,070 --> 00:00:23,860
We have the card-product-price class on this span.

7
00:00:23,860 --> 00:00:27,530
So we can use these classes for styling the items,

8
00:00:27,530 --> 00:00:30,500
and in cart.ejs we can, of course,

9
00:00:30,500 --> 00:00:32,590
also target the unordered list,

10
00:00:32,590 --> 00:00:34,960
and this cart-total id.

11
00:00:34,960 --> 00:00:37,510
The unordered list has the id card-items

12
00:00:37,510 --> 00:00:40,613
in case we want to add some styling there.

13
00:00:41,520 --> 00:00:44,450
So, therefore we can go to cart.css,

14
00:00:44,450 --> 00:00:46,870
and maybe start with

15
00:00:46,870 --> 00:00:50,720
styling the individual .cart-item article elements

16
00:00:50,720 --> 00:00:52,740
that we have in there.

17
00:00:52,740 --> 00:00:56,370
And as always, there are plenty of ways of styling this.

18
00:00:56,370 --> 00:00:59,850
I will choose display flex on those items,

19
00:00:59,850 --> 00:01:03,170
so that these two divs that we have in there,

20
00:01:03,170 --> 00:01:06,830
will be positioned side by side in a row,

21
00:01:06,830 --> 00:01:09,040
at least on bigger screens,

22
00:01:09,040 --> 00:01:11,973
and instead below each other on smaller screens.

23
00:01:13,210 --> 00:01:15,800
So, therefore, I'll set flex-direction column here

24
00:01:15,800 --> 00:01:18,660
as a default for a smaller screens.

25
00:01:18,660 --> 00:01:20,900
And then we can also add a media query

26
00:01:20,900 --> 00:01:23,450
where we have a min width of 48rem,

27
00:01:23,450 --> 00:01:25,170
which I'm looking for.

28
00:01:25,170 --> 00:01:26,900
And on those bigger screens,

29
00:01:26,900 --> 00:01:28,790
I'll then go to my .cart-item,

30
00:01:28,790 --> 00:01:31,760
and they're change the flex-direction to row,

31
00:01:31,760 --> 00:01:34,003
so that these items sit next to each other.

32
00:01:34,870 --> 00:01:36,720
With that, if we save this,

33
00:01:36,720 --> 00:01:39,060
we've got this look on bigger screens,

34
00:01:39,060 --> 00:01:41,293
and on smaller screens, it looks like that.

35
00:01:42,680 --> 00:01:44,980
Now, of course, this is not the final look I want.

36
00:01:44,980 --> 00:01:47,800
We still got plenty of improvements to do.

37
00:01:47,800 --> 00:01:49,440
For example, on bigger screens,

38
00:01:49,440 --> 00:01:50,770
when we have a row,

39
00:01:50,770 --> 00:01:54,730
I want to add a space-between the content

40
00:01:54,730 --> 00:01:56,260
of those row items,

41
00:01:56,260 --> 00:01:58,880
so that this is pushed to the right.

42
00:01:58,880 --> 00:02:00,190
But now I also would like

43
00:02:00,190 --> 00:02:03,500
to set those cart items a bit more apart

44
00:02:03,500 --> 00:02:04,870
from each other.

45
00:02:04,870 --> 00:02:06,570
So that on a .cart-item,

46
00:02:06,570 --> 00:02:08,289
we can give it as a background-color

47
00:02:08,289 --> 00:02:13,160
of var, color, gray, let's say 700,

48
00:02:13,160 --> 00:02:14,950
a dark grayish color,

49
00:02:14,950 --> 00:02:18,313
and also add some padding, maybe space-4,

50
00:02:19,290 --> 00:02:23,853
and a border-radius of border-radius-medium.

51
00:02:26,129 --> 00:02:28,380
With that, we've got this look.

52
00:02:28,380 --> 00:02:31,530
Now, to see a real difference between the cart items,

53
00:02:31,530 --> 00:02:33,630
we should also add a margin

54
00:02:35,980 --> 00:02:39,020
of let's say space-4 top and bottom,

55
00:02:39,020 --> 00:02:41,293
and 0 left and right.

56
00:02:42,530 --> 00:02:46,000
And with that added, it looks like this.

57
00:02:46,000 --> 00:02:48,480
So, this is not too bad, I'd say.

58
00:02:48,480 --> 00:02:53,260
The margin here on the title should go away though.

59
00:02:53,260 --> 00:02:55,070
So that the title aligns

60
00:02:55,070 --> 00:02:57,710
with the input update button combination.

61
00:02:57,710 --> 00:02:58,543
And, of course,

62
00:02:58,543 --> 00:03:00,823
the input here also should be styled differently.

63
00:03:02,250 --> 00:03:07,250
So, therefore I'll target the .cart-item h2 element,

64
00:03:07,530 --> 00:03:10,020
and simply change the font-size there,

65
00:03:10,020 --> 00:03:13,620
to let's say, 1rem, actually, to make it smaller.

66
00:03:13,620 --> 00:03:16,193
And I'll set the margin to 0.

67
00:03:18,050 --> 00:03:20,770
With that, this is the look I got,

68
00:03:20,770 --> 00:03:22,470
and I prefer that look.

69
00:03:22,470 --> 00:03:24,020
I think it looks a bit cleaner.

70
00:03:24,980 --> 00:03:28,450
Now, I also want to style the input differently.

71
00:03:28,450 --> 00:03:29,770
And, for that, of course,

72
00:03:29,770 --> 00:03:33,503
we can target .cart-item input like this.

73
00:03:34,340 --> 00:03:37,760
And, first of all, inherit our base font.

74
00:03:37,760 --> 00:03:41,840
Then, also, simply add a little bit of padding,

75
00:03:41,840 --> 00:03:46,453
let's say of space-2, top and bottom, and left and right,

76
00:03:47,350 --> 00:03:50,673
so that we have some padding in that input, like this.

77
00:03:51,970 --> 00:03:54,540
And I want to have a little rounded corner there as well.

78
00:03:54,540 --> 00:03:59,540
So I'll give that border radius var(--border-radius-small),

79
00:03:59,620 --> 00:04:00,523
like this.

80
00:04:02,760 --> 00:04:05,810
And with that, I think that doesn't look too bad.

81
00:04:05,810 --> 00:04:08,170
Let's actually also remove the border color,

82
00:04:08,170 --> 00:04:10,000
which we have by default,

83
00:04:10,000 --> 00:04:11,800
by setting border none.

84
00:04:11,800 --> 00:04:13,820
This will still keep the border radius,

85
00:04:13,820 --> 00:04:16,083
but now the border doesn't have any color.

86
00:04:17,920 --> 00:04:19,240
Okay.

87
00:04:19,240 --> 00:04:22,790
Now, I also want to style this per unit price differently.

88
00:04:22,790 --> 00:04:27,340
And for that, we have the cart-product-price class there.

89
00:04:27,340 --> 00:04:30,820
So, now, we can target this,

90
00:04:30,820 --> 00:04:34,083
and maybe set the font-style to italic there.

91
00:04:35,550 --> 00:04:37,300
That's all I want to do here.

92
00:04:37,300 --> 00:04:39,700
With that, if we save this, it's a italic,

93
00:04:39,700 --> 00:04:42,410
and yeah, I think that looks a bit better.

94
00:04:42,410 --> 00:04:46,300
We could also think about increasing the main price here,

95
00:04:46,300 --> 00:04:47,133
but for me,

96
00:04:47,133 --> 00:04:50,090
changing that unit price is everything I want to do.

97
00:04:50,090 --> 00:04:52,830
I will, however, also change the color a little bit,

98
00:04:52,830 --> 00:04:56,823
and set this to color-gray-300 here,

99
00:04:58,590 --> 00:05:00,113
so that it looks like this.

100
00:05:00,970 --> 00:05:02,850
You can, of course, fine tune these styles,

101
00:05:02,850 --> 00:05:05,380
but these are the basic styles I want to work with,

102
00:05:05,380 --> 00:05:07,203
when it comes to the cart items.

103
00:05:08,150 --> 00:05:11,200
Now, if we have a look at smaller screens,

104
00:05:11,200 --> 00:05:12,940
this also looks okay.

105
00:05:12,940 --> 00:05:15,340
I don't think we need to change anything there.

106
00:05:15,340 --> 00:05:17,050
This should be fine.

107
00:05:17,050 --> 00:05:19,610
You could consider putting input and update button

108
00:05:19,610 --> 00:05:22,410
into separate lines, into separate rows.

109
00:05:22,410 --> 00:05:24,770
But I think this actually does the trick,

110
00:05:24,770 --> 00:05:26,600
and, therefore, I'll leave it like this.

111
00:05:26,600 --> 00:05:29,500
But I do want to update this total price

112
00:05:29,500 --> 00:05:31,750
and how we display that.

113
00:05:31,750 --> 00:05:36,340
And for this, in cart.ejs, we have the cart-total id here

114
00:05:36,340 --> 00:05:38,190
where we didn't have the paragraph

115
00:05:38,190 --> 00:05:40,150
with the total price inside,

116
00:05:40,150 --> 00:05:42,930
and that's therefore another thing

117
00:05:42,930 --> 00:05:44,370
that I want to target here.

118
00:05:44,370 --> 00:05:46,720
The paragraph inside of cart-total,

119
00:05:46,720 --> 00:05:50,420
which is that paragraph with the total price.

120
00:05:50,420 --> 00:05:52,680
And here I want to ramp up the font-size

121
00:05:52,680 --> 00:05:54,670
to let's say 1.5rem

122
00:05:55,510 --> 00:05:57,300
so that this is a bit bigger.

123
00:05:57,300 --> 00:05:59,190
This total price.

124
00:05:59,190 --> 00:06:03,140
And, I also will actually give it a font-weight of bold

125
00:06:04,020 --> 00:06:08,307
and change the color to use the primary color here,

126
00:06:08,307 --> 00:06:10,543
-color-primary-500,

127
00:06:11,970 --> 00:06:13,323
like this.

128
00:06:14,470 --> 00:06:15,820
If we save all of this,

129
00:06:15,820 --> 00:06:18,110
this total price is now really highlighted,

130
00:06:18,110 --> 00:06:20,143
and it should be fairly easy to see.

131
00:06:21,610 --> 00:06:23,900
Now the Buy Products button should actually sit

132
00:06:23,900 --> 00:06:25,260
in the same row,

133
00:06:25,260 --> 00:06:28,550
and to achieve this, since it's in the same div,

134
00:06:28,550 --> 00:06:30,850
not by accident, but on purpose,

135
00:06:30,850 --> 00:06:32,290
we can select this id,

136
00:06:32,290 --> 00:06:34,240
and add display flex to ensure

137
00:06:34,240 --> 00:06:36,623
that these two items are in the same row.

138
00:06:37,510 --> 00:06:38,343
So for this,

139
00:06:38,343 --> 00:06:42,640
I'll just select the cart-total id element like that,

140
00:06:42,640 --> 00:06:45,730
and then add display flex,

141
00:06:45,730 --> 00:06:49,200
and also add justify-content space-between

142
00:06:49,200 --> 00:06:52,583
to push these two items to the left and right edges.

143
00:06:53,880 --> 00:06:55,543
With that, it looks like this.

144
00:06:56,760 --> 00:06:59,500
Not totally convinced by the size of the button.

145
00:06:59,500 --> 00:07:00,670
It has that size

146
00:07:00,670 --> 00:07:04,010
because of the margin we have here on the paragraph.

147
00:07:04,010 --> 00:07:06,930
The button then assumes the same height

148
00:07:06,930 --> 00:07:10,100
because of how flexbox works by default.

149
00:07:10,100 --> 00:07:13,120
That is something we'll easily be able to change though.

150
00:07:13,120 --> 00:07:14,750
But before I do that,

151
00:07:14,750 --> 00:07:17,110
I want to check this on mobile screens.

152
00:07:17,110 --> 00:07:19,440
And this actually also looks fine.

153
00:07:19,440 --> 00:07:21,610
We could, of course, also consider putting this

154
00:07:21,610 --> 00:07:23,510
into separate lines here though.

155
00:07:23,510 --> 00:07:24,960
And I think we'll do that.

156
00:07:24,960 --> 00:07:26,580
But first of all,

157
00:07:26,580 --> 00:07:30,920
let's add align-items center to cart-total.

158
00:07:30,920 --> 00:07:35,740
This ensures that the default of stretch is overwritten,

159
00:07:35,740 --> 00:07:37,830
and, therefore, the button will not stretch

160
00:07:37,830 --> 00:07:41,210
to meet the height of this neighboring item,

161
00:07:41,210 --> 00:07:42,750
including its margin,

162
00:07:42,750 --> 00:07:45,440
but instead it will be centered on the same height.

163
00:07:45,440 --> 00:07:50,350
But, of course, these are actually my non-mobile styles.

164
00:07:50,350 --> 00:07:53,980
So, I'll copy them and move them into this media query,

165
00:07:53,980 --> 00:07:55,960
and get rid of display flex,

166
00:07:55,960 --> 00:07:58,420
because I will set that either way.

167
00:07:58,420 --> 00:08:01,910
But I'll add flex-direction row

168
00:08:01,910 --> 00:08:04,360
because I'll set a different flex-direction

169
00:08:04,360 --> 00:08:06,853
as a default for mobile screens.

170
00:08:10,180 --> 00:08:13,780
Here, for cart-total, I'll set display flex,

171
00:08:13,780 --> 00:08:18,750
but, now, set flex-direction to call column as a default,

172
00:08:18,750 --> 00:08:21,880
and then justify-content to center

173
00:08:21,880 --> 00:08:23,680
and align-items to center,

174
00:08:23,680 --> 00:08:26,263
to align all the items in that flexbox.

175
00:08:27,960 --> 00:08:30,230
Since I set align-items center here,

176
00:08:30,230 --> 00:08:34,163
we can, of course, remove it here in our desktop style rule.

177
00:08:35,450 --> 00:08:36,510
With that,

178
00:08:36,510 --> 00:08:38,610
on a big screen, it looks like before,

179
00:08:38,610 --> 00:08:41,113
but on smaller screens, it now looks like that.

180
00:08:42,370 --> 00:08:44,179
And that is my cart screen already.

181
00:08:44,179 --> 00:08:46,060
Of course, you can always do more with it,

182
00:08:46,060 --> 00:08:47,890
but I like it like this.

183
00:08:47,890 --> 00:08:48,960
Now I want to make sure

184
00:08:48,960 --> 00:08:52,450
that these Update buttons do something when we click them,

185
00:08:52,450 --> 00:08:54,913
and that we then update the cart correctly.