Styling the Coin List in Ionic

Gary Simon
A free video tutorial from Gary Simon
Professional Freelance Designer & Course Instructor
4.3 instructor rating • 17 courses • 242,143 students

Lecture description

We will use HTML and CSS to style the coin list so that it appears more consistent with the Adobe XD Mockup.

Learn more from the full course

Build a Beautiful CryptoCurrency App using Ionic

A real hybrid app that works on iOS, Android and Windows Phones. The full process is shown, no details are left out.

02:40:29 of on-demand video • Updated October 2017

  • Create a Full Hybrid App with Ionic
  • Create an Identity (Logo Design)
  • Create a Full UI Mockup / Prototype
  • Retrieve and Format Data from a Public API
English [Auto] OK so let's go ahead and work on just this section right here and then hopefully also get to this right here as well in this video. OK. So we're going to come back here to our code editor. We're going to go to our home each time. And just after the I on content right here we're going to use a grid. So I own it comes within I on grid element and it allows you to really structure your layout pretty well. So I on row goes next. And then our columns so I on call. So in the first column we're going to have the coin name. So we're going to give that a span of id call name will references NHT or c s s rather says coin name. Then we add another column and inside of here we'll go our button sew buttons and I on start off with Button eye on button icon left and there is going to be that refresh icon right there. Clear. Clear means that it's going to remove some of the styling associated with it. And then we're going to add a click event so once people click on it it's simply going to call our refresh coin's method that we already created. We're going to give you an idea of refresh so we can make some adjustments with CSSA and then change the color here to light which is the button color. So then inside we're going to add the eye on icon of name equals refresh Hoopes. Here we go. And then after that refresh. OK so let's save this and see just what it looks like. All right. Doesn't look all that great admittedly So this is where the CSSA and all that is going to come into play. So let's go ahead and we're going to go to our home SAS and I'm going to add in a reference to the call class and we didn't add that class but I adds that classes onto columns. So we're going to put in paddings zero and you can see it just got rid of the padding right there. And then also a refresh. We're going to float right because it was sitting down a little bit and then also our idea of call name we're going to text transform uppercase the color is going to be 4 6 6 and 5 8 1. We're going to use margin to situated a little bit better. So top will be 13 pixels right and bottom will be zero. And then on the left there will be 10 pixels and then we're going to display. Block so that the margin walk to work on the element. All right. That's a lot better. So now things are kind of matching up quite a bit better now. Now the actual fine. It's not using the source sans pro font that we wanted so we're in a good app right here. Our SAS file and I'm going to import our font this import right here. This whole line came from Google web fonts if you'd just type in source sand's pro. You'll be able to find that. And then also right here we're going to say ion content font family source sand's Pro. So if I save this and go back we'll see things change just slightly to source pro and now let's work on this section right here. The actual coin listings so to do that we're going to make a change to the actual HMO that we defined right here. So I on items and lists. They also have sliding items and the sliding items allow you to the user to actually make a gesture to swipe left or right and it will reveal buttons. And so in our case we're going to reveal a delete button that will allow them to remove the actual coin if they don't want to track it anymore. So the way we structure this age out is just slightly different. So up here we're going to put an eye on item sliding and then this is where we put the NGI for we also want to have access to the index. So we're going to put I equal index and then we're going to put in the ion drag event and we're going to call a method that we haven't defined yet called swiped where we pass in the index. So now let's just get rid of all that stuff for a quick inside here we put in an eye on item and no hyphen lines no lines get it we'll get rid of those lines that are showing up and you'll see momentarily and then and here we're going to put in our coin. That's the coin name. And then we're going to put in an eye on the note. This will house the dollar value. This will be item. And so it goes to the right and the color is going to be that blue text color that we defined. So in here we're going to use interpellation on coins the whole coins object when we pass in the coin index and that will give us the current coins US dollar value and we're passing a pipe which is built in with an angular of currency of U.S. dollars and true to show the U.S. dollar sign for us. So it's going to save that. And now we can see our big coin theory I'm in Iowa. He along with the current dollar values of course we still have a little bit of work quite a bit of work to get it to look like this over here. So let's continue on and I'm going to split my editor with you just so we can see the changes as we're doing our age team out makes things a little bit. You know I thought the click back and forth all the time. So now what we want to do is we're going to go to our app SAS file and we're going to do fine a couple rule sets to change his appearance. Now I'm going to reference scroll content and this is an overall container's give us a lot of padding I believe and we're going to change the padding to zero. Important. There we go. Next we're going to reference the eye on item and then also coin BATNA. So we're going to put in our background of each individual item right here. So that happens to be one he that's 4 8 7 1 so we'll save that. Here we go. And then a margin bottom of zero portent. And then also a board or bottom of one pixel solid and 1 9 2 3 2 see important. We'll save that. There we go. And then also the color is going to be that light color so see one e six F's F and important OFSAA. Now that is a lot more close to the design that we had in our Adobe XTi project files. So this will be a real good point to stop this video. And in the next video we're going to simulate what happens when we click on one of these so that will involve making an API call an additional API call to get more information on this. Each individual coin I'll see you then.