- Read Tutorial
- Watch Guide Video
We almost have all of our items knocked off the list, you are doing a fantastic job! The last item for our about page is to add our list of skills. If you come to the page. Where I want to add these is right below the picture. I want to have a list of skills and if you remember we added the skill model a while ago. Let's open up the schema and look for skills. You can see right here, we have skills that have a title and then a percent_utilized. We have the concept of a badge but we're not going to worry about that right now. Right now what I want to use is a set of progress bars provided by bootstrap that are going to allow us to list out the title and then have a progress bar that shows kind of the percent that we utilize that. The goal would be to have all of the various items whether it be rails, whether the front-end design any of the skills you have and then give a little bit of a breakdown on how much you use each one of those on a daily basis or where you feel your skill level is at. If you feel like you are very heavy on the server side and you want to put just Ruby at the top whatever it is that you want to do, and that is what we're going to show off. Let's come to the about page I'm going to put this inside of this 4 width column here. I'm going to come down right below the image and I'm going to create another div and I'm going to give it a class of skills and that is going to give us a placeholder for where we want to put these. Now we have to also open up our controllers. This is going to be our pages controller and we need to make a database call because our skill data is in the database. So, I'm going to say skills = skill.all. Now I can call this from the about page, say...
<%= skills.each do |skill| %> <h4><%= skill.title %></h4> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-valuenow="<%= skill.percent_utilized %>" aria-valuemax="100" style="width: <%= skill.percent_utilized %>%" ></div> </div> <% end %>
What we're going to do here is put in a title. This is going to give the skill title and I don't think I'm going to go with a tag here and then using some embedded Ruby say skill.title and close it off. Now we can iterate over our skills. I mean technically we're iterating over them here but this is simply going to print them out. Let's verify everything is working up to this point. If I hit refresh this should list all of our skills and that's perfect. That's working. We'll also add some padding. Kind of like we did for our job history and education and those items. Let's come here and now let's give another div. This one is going to be for the progress bar. I'm going to say div, class progress and this is a built in style provided by bootstrap. You can definitely look up the bootstrap documentation if you're interested. Inside of this progress div we're going to have another div and this one is going to be of class progress-bar. Then this is going to be progress-bar-striped and then a background-warning. Which is going to give us kind of an orange-ish type of color. I'm also going to move this on multiple lines because it's going to start getting a little bit long with this list of attributes. So, that's our set of classes. We want this role to be of type progressbar and it's going to be progress bar without a dash right there. We have to set up the aria values. So, aria-valuenow is going to be set to whatever our percent_utilized is. The way that we can get to that is we're going to use some embedded Ruby here. I'm going to say skill.percent_utilize that's pulling in from the schema, close that off that's going to give us the current value and then aria has a few more rules. If you're looking for increase study you may want to google aria and bootstrap just to get an idea of everything that it's doing. Just to kind of walk through what some of these are they give some cool communication between application and Javascript and CSS and provides some of these values. We have a value now and the next one is going to be valuemax and we're going to set this equal to 100. Then we're going to set a style with a width that is going to be whatever the percent_utilized is. This is one of the rare times where you have my total permission to use an inline style. It's because we want to dynamically pass this value in so we'll walk through, after I've finished the implementation exactly what is going on. Then we also need to close this off and then we need to end the div. I believe this is all we need. We'll be able to see her in a second if that is true or not. I think this is everything that we have that's required. We're moving those empty spaces, coming back hitting refresh and not quite. It doesn't appear to be pulling those values. I think that we have a little bit of an error right here. If you notice how this color is different than what we have up here it almost looks like we have a little bug on that side. You know pull out this <%= skill.percent_utilized %>; code right here and see exactly what is going on. We have a width then we're passing in the value. Oh I see what I'm doing. I did the ; in there that needs to be a percent because this is the percent, the width is going to be the percent not a hard coded value. Let's refresh see if that fix it. There we go. That works. Essentially what's going on here let's kind of go line by line on the code in this div we're first saying that this is a progress bar. These are classes and styles provided by bootstrap. That part's nice and simple. Same thing with the role. The aria items these are provided by bootstrap as well. The first one is providing the current value it's a value of the skill and that is percent_utilized. In this case I think it's like 15 percent or something like that the valuemax kind of gives the total value. If this is 15 and the valuemax is 100 then it's going to show about 15 percent if we change this to be 15 and hit refresh then this is not going to change anything on this side because aria doesn't change the value here but there will be items on the background in terms of how this gets passed into the CSS and the Javascript that could make this change on different devices like smartphones and that can deal. Now, the width this is kind of where all the magic is happening right here. What we're saying is that the style and this is going to take in the width value it is going to take whatever value we pass in. Right here if I get rid of this and I say 90 and change the hard coded value now it's going to come up and you can see that these are all at 90 percent. I don't want that because I want these items to be dynamic. Let's come into the rails console type rails c. Let's update some of these skills. First, one is going to be Skill.first and let's see what the values are for that. Running that returns the skill id of one Rails 0 and the percent utilized is 15. If I do skill.first.update!(percent_utilized: 65) that gets updated. Let's also do it on the second one. I'm going to say skill.find(2).update!(percent_utilized: 23). We should be good. Let's go and see how the data has actually changed. Remember what this is going to do is as this iterates through it's going to grab the skill and it's going to grab the values and it's going to slide it in both for the value now for aria. Then most importantly in terms of what you can see the style of the width. In other words what color, what percent of the full progress bar is going to be taken up with a color. If I come back, hit refresh. We're going to see that two of the items are, Oh yeah there we go that is perfect. This is the one that's at 23 percent. This is the one that is at 60 percent or 65 percent whatever I changed that to.
This is looking good. Still not perfect. We need to add a little bit of margins. Let's come and update our styles right here we have skills and this class of skills. We should be able to just simply say that we want to add some margin and padding but let's see. This is actually going to grab the entire thing we need to also grab some of the items inside of it so I need what I really need to do is wrap up a value here called skill. Let's come and creating another div that's going to be kind of the wrapper div for each one of the singular skills. Then if I come in and paste this all inside...
now I can give this div a class of skill(singular). If I come down into the application styles say skill. Now I can actually take pretty much exactly what I did right here. Copy this, paste that in. Except here I want a little bit more I think I want to do like 10px. Let's see what this does for us. If I hit refresh. This should give us just a little bit of breathing room for each one of these skills. Perfect! That's exactly what I'm looking for I think that looks nice and professional. All this is looking great. Obviously, when we push this up to production we'll update the skills with you know what our real skills are but this gives us some nice placeholder from our seed data. Let's come to the terminal, type clear and git status. Let's see what we changed. Yes, everything there looks good. Those are the 3 files we changed. I'm going to say git commit -m "Added view component for skills" and now we can push this up. Let's take a look at pivotal tracker. We are getting really close to being done in the next guide, we're going to walk through how we can add a custom font to our application.