- Read Tutorial
- Watch Guide Video
Welcome back. We're going to place the progress tracker where it belongs.
With how this is set up right now, we're going to have to change a few things. Let's open up our schedule.scss, and add some parameters to change our spacing.
schedule.scss
.schedule {
grid-column: schedule-s/schedule-e;
grid-row: 1/-1;
position: relative;
height: 100%;
width: 100%;
display: grid;
grid-template-rows: [space-one-s] 1fr [space-one-e title-s] 100px [title-e] repeat(5, 80px) [progress-s] 1fr [progress-e];
grid-row-gap: 22px;
align-items: center;
justify-items: center;
align-content: center;
&__title {
grid-row: title-s/title-e;
border-left: 1px solid $color-subtle-gray;
padding-left: 30px;
color: white;
font-family: $font-alegreya;
font-size: 20px;
// text-align: center;
}
}
Now let's go to the browser.
You can see that not much was changed, but our progress tracker has its own row, so now we just need to specify the height and width. So let's go to our progressTracker.scss
progressTracker.scss
.progress-tracker {
grid-row: progress-s/progress-e;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 76px;
background-color: rgba(255,255,255,0.3);
width: 100%;
height: 76px;
align-self: end;
&__title {
grid-column: 1/2;
}
&__percentage {
grid-column: 2/3;
}
}
Now that we have the tracker right where we want it, we just need to style it inside of its row, and then make it functional. After looking at the design, we can what styles we should put in.
Let's quickly fix part of our border in our schedule.scss. We want the border to the left to stick out a little taller than the text, and be a little thicker.
schedule.scss
.schedule {
&__title {
grid-row: title-s/title-e;
border-left: 2px solid $color-subtle-gray;
padding-left: 30px;
padding-top: 6px;
padding-bottom: 6px;
color: white;
font-family: $font-alegreya;
font-size: 20px;
// text-align: center;
}
}
Let's look at it.
That looks fine to me. We want to take some of the same styles for our progress tracker. Since the border will be the same for both, let's make a mix-in. First, let's set it up in our schedule.scss
schedule.scss
.schedule {
&__title {
grid-row: title-s/title-e;
color: white;
font-family: $font-alegreya;
font-size: 20px;
@include border-left;
}
}
Now let's open up our variables.scss and add it in.
variables.scss
$color-purple: #6F48CE;
$color-light-blue: #32CBE8;
$color-blue: #487BCE;
$color-gray: #4D4D4D;
$color-subtle-gray: rgba(255, 255, 255, 0.52);
$color-subtle-black: #333;
$font-alegreya: 'Alegreya';
$font-mont: 'Montserrat';
$font-lato: 'Lato';
@mixin border-left {
border-left: 2px solid $color-subtle-gray;
padding-left: 30px;
padding-top: 6px;
padding-bottom: 6px;
}
Great. Now that we have that all made up, we can put it into our progressTracker.scss
progressTracker.scss
.progress-tracker {
grid-row: progress-s/progress-e;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 76px;
background-color: rgba(255,255,255,0.3);
width: 100%;
height: 76px;
align-self: end;
@include border-left;
&__title {
grid-column: 1/2;
}
&__percentage {
grid-column: 2/3;
}
}
Looks good to me. Now we need to just add in more styles. One thing we'll do as well is we'll create a separate call of progress tracker for the actual styles, and leave the main one for the grid.
progressTracker.scss
.progress-tracker {
grid-row: progress-s/progress-e;
align-self: end;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 76px;
&__title {
grid-column: 1/2;
}
&__percentage {
grid-column: 2/3;
}
}
.progress-tracker {
@include border-left;
background-color: rgba(255,255,255,0.3);
width: 100%;
height: 76px;
}
Now with this put in, let's finish up our styles for it. The problem with using Invision for our design is that the styles it generates aren't always the best. For example, we can see that in the design, the background change with the progress tracker is fairly subtle.
But if we look at our application, our background change is very stark.
So let's fix that. We'll change our background transparency to match the design in look, but not follow their listed styles.
progressTracker.scss
.progress-tracker {
@include border-left;
background-color: rgba(255,255,255,0.1);
width: 100%;
height: 76px;
font-family: $font-alegreya;
font-size: 16px;
color: white;
}
Ok, that looks pretty good, although, it could be better, because when we first load up the application, our progress tracker is below the screen, and we want it to be right where the user can see it and then we only want the course library to scroll, we don't want the schedule move.
So let's go ahead and just fix up these styles. We can check our design to see how everything is supposed to sit. First off we can see that the title and the border are about 33px from the left side of the schedule. Let's adjust our code.
progressTracker.scss
.progress-tracker {
grid-row: progress-s/progress-e;
align-self: end;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 33px [title-s] 1fr [title-e percentage-s] 76px [percentage-e];
align-items: center;
&__title {
grid-column: title-s/title-e;
grid-row: 1/2;
}
&__percentage {
grid-column: percentage-s/percentage-e;
grid-row: 1/2;
justify-self: center;
}
}
.progress-tracker {
background-color: rgba(255,255,255,0.1);
width: 100%;
height: 76px;
font-family: $font-alegreya;
font-size: 16px;
color: white;
&__title {
@include border-left();
}
}
(There is a very long section of Max trying different things to get this to work)
Let's check the progressTracker.js to make sure that we're even calling the right names. Yep, as you can see we have been calling it title this whole time, but it's actually set as label.
So let's change that.
progressTracker.js
render() {
return (
<div className="progress-tracker">
<div className="progress-tracker__title">Progress Tracker</div>
<div className="progress-tracker__percentage">
{this.calculateProgress()}%
</div>
</div>
Now everything works. You can see how easy it is to get caught up on errors like that. Anyways, let's move on to bigger and greater things, like making it so the course library scrolls while the schedule doesn't.
git status git add . git commit -m "styled the progress tracker"
I'll see you in the next video.