1 00:00:00,000 --> 00:00:07,000 [Master Class] [Designer and Developer Workflow] [Styling the Show View] 2 00:00:07,000 --> 00:00:11,000 So, we have our index view, which is looking just okay here. 3 00:00:11,000 --> 00:00:14,000 So, let's go ahead and jump through to our show view, 4 00:00:14,000 --> 00:00:17,000 and it looks like this could use some work. 5 00:00:17,000 --> 00:00:21,000 However, before we go ahead and just start styling our index view, 6 00:00:21,000 --> 00:00:25,000 it would be a good idea to go ahead and commit our work so far. 7 00:00:25,000 --> 00:00:29,000 So, let's go ahead and switch over to our terminal, 8 00:00:29,000 --> 00:00:37,000 and we'll stop our server and we'll say "git add . git commit" with the message flag. 9 00:00:37,000 --> 00:00:46,000 And we'll say "Started styling the index view." 10 00:00:46,000 --> 00:00:53,000 And we'll say "git push" and there we go. 11 00:00:53,000 --> 00:01:00,000 So, we'll go ahead and clear that out, and let's go ahead and take a look at this show view. 12 00:01:00,000 --> 00:01:06,000 We should probably go ahead and leave this edit link and this back link 13 00:01:06,000 --> 00:01:09,000 because although we haven't really talked about the edit view 14 00:01:09,000 --> 00:01:14,000 or how we're going to authenticate people so they can edit jobs, 15 00:01:14,000 --> 00:01:18,000 we're still going to need that edit link eventually, so let's just go ahead and leave it there 16 00:01:18,000 --> 00:01:23,000 assuming it will be shown conditionally at one point or another. 17 00:01:23,000 --> 00:01:28,000 Next, we need to get rid of the labels for each one of these items, 18 00:01:28,000 --> 00:01:34,000 and then we need to just go ahead and lay out the page so it looks a little bit nicer. 19 00:01:34,000 --> 00:01:36,000 So, let's go ahead and get started into this. 20 00:01:36,000 --> 00:01:43,000 We'll go ahead and switch over to TextMate, and we can close our index view for now, 21 00:01:43,000 --> 00:01:46,000 and let's go ahead and open up our show view. 22 00:01:46,000 --> 00:01:50,000 Now, you'll notice that each one of these is inside of a paragraph, 23 00:01:50,000 --> 00:01:53,000 and that's probably not what we want. 24 00:01:53,000 --> 00:01:55,000 We also don't need these labels on them. 25 00:01:55,000 --> 00:02:04,000 So, we'll go ahead and get rid of them. 26 00:02:04,000 --> 00:02:09,000 We'll go ahead and remove the indentation here, and next, 27 00:02:09,000 --> 00:02:15,000 if you recall from our mockup, we actually want the company name right under the job title. 28 00:02:15,000 --> 00:02:18,000 So, let's go ahead and do that. 29 00:02:18,000 --> 00:02:23,000 And then we have the description, and then we have our details link. 30 00:02:23,000 --> 00:02:25,000 So, let's go ahead and save that. 31 00:02:25,000 --> 00:02:28,000 We'll switch back and refresh the page. 32 00:02:28,000 --> 00:02:33,000 And it looks like we didn't start our server yet, so let's go ahead and do that now. 33 00:02:33,000 --> 00:02:40,000 Switch over to our terminal and we'll say "rails s" to get that back going. 34 00:02:40,000 --> 00:02:47,000 And now when we refresh, you can see all of our text is just inside a giant block. 35 00:02:47,000 --> 00:02:50,000 So, let's go ahead and break this up with our own mockup. 36 00:02:50,000 --> 00:02:58,000 We'll switch back to TextMate, and first, we'll just apply a few classes here. 37 00:02:58,000 --> 00:03:08,000 So, I'm going to say that this is a job title, and I'll indent that. 38 00:03:08,000 --> 00:03:14,000 I'll say this is a company name, and we'll indent that. 39 00:03:14,000 --> 00:03:21,000 This is the job description, and actually, I'm going to just go ahead 40 00:03:21,000 --> 00:03:27,000 and put this inside of a paragraph tag, but we'll keep that job description class name. 41 00:03:27,000 --> 00:03:34,000 And then finally, for the details link, we need to actually put this inside of a link to. 42 00:03:34,000 --> 00:03:36,000 So, let's go ahead and do that. 43 00:03:36,000 --> 00:03:39,000 We'll say "link_to." 44 00:03:39,000 --> 00:03:46,000 We'll go ahead and copy and paste this here into the link and get rid of that. 45 00:03:46,000 --> 00:03:49,000 And let's just see where that gets us. 46 00:03:49,000 --> 00:03:53,000 So, if we refresh, we can see we now have example.com, 47 00:03:53,000 --> 00:03:57,000 and it looks like that's not quite linking properly, 48 00:03:57,000 --> 00:04:00,000 so let's go ahead and see if we can't fix that. 49 00:04:00,000 --> 00:04:03,000 And actually, we don't need to put these in parantheses 50 00:04:03,000 --> 00:04:07,000 because we're not going to be passing a block. 51 00:04:07,000 --> 00:04:10,000 This link is just always going to say the same thing. 52 00:04:10,000 --> 00:04:14,000 So, we'll go ahead and call this "Show More." 53 00:04:14,000 --> 00:04:18,000 So, we'll save that and when we switch back and refresh the page, 54 00:04:18,000 --> 00:04:22,000 you can see that this link now says "Show More," and if we click it, 55 00:04:22,000 --> 00:04:25,000 we go to example.com. 56 00:04:25,000 --> 00:04:31,000 So now, we just need to style this job title and company name. 57 00:04:31,000 --> 00:04:34,000 So, let's go ahead and do that. 58 00:04:34,000 --> 00:04:38,000 We're going to put this entire page inside of another class name 59 00:04:38,000 --> 00:04:41,000 just so we know where we're at. 60 00:04:41,000 --> 00:04:49,000 So, we'll call this "job_show," and we'll put everything inside there 61 00:04:49,000 --> 00:04:56,000 just to keep it a little bit more separated in SASS and for our own benefit. 62 00:04:56,000 --> 00:05:03,000 So, we'll go ahead and say "job_show," and then inside of job show 63 00:05:03,000 --> 00:05:08,000 we want to style the job title, and we want to make the font size on that rather large, 64 00:05:08,000 --> 00:05:14,000 so we'll say 1.4 ems, and we'll probably put the font weight as bold. 65 00:05:14,000 --> 00:05:17,000 So, let's refresh that, see what that looks like. 66 00:05:17,000 --> 00:05:19,000 That's still a little bit too small. 67 00:05:19,000 --> 00:05:23,000 We'll actually change that to about 2 ems. 68 00:05:23,000 --> 00:05:30,000 And then for the company name, we'll do the same thing. 69 00:05:30,000 --> 00:05:36,000 We'll say "font size 1.2 ems," actually, maybe 1.4 ems. 70 00:05:36,000 --> 00:05:42,000 And we don't need to make this bold, but we should make this text a little bit weaker, 71 00:05:42,000 --> 00:05:47,000 so let's go ahead and say "color," and we'll change that to 555 72 00:05:47,000 --> 00:05:52,000 for our gray and that looks pretty good. 73 00:05:52,000 --> 00:05:58,000 Below the company name I would like some extra space between it and the description, 74 00:05:58,000 --> 00:06:00,000 so let's go ahead and add in some margin. 75 00:06:00,000 --> 00:06:08,000 So, we'll just say "margin bottom," and let's put in a big value like 50 pixels. 76 00:06:08,000 --> 00:06:10,000 So, we'll switch back and refresh. 77 00:06:10,000 --> 00:06:16,000 That actually does look like it's a little much, so we'll bump that back down to about 30 pixels, 78 00:06:16,000 --> 00:06:19,000 and I think that looks pretty good. 79 00:06:19,000 --> 00:06:24,000 Now, I would like to increase the font size of the description just a little bit, 80 00:06:24,000 --> 00:06:28,000 so we'll go ahead and do that. 81 00:06:28,000 --> 00:06:34,000 So now, we'll go ahead and select job description, and we'll increase the font size 82 00:06:34,000 --> 00:06:38,000 just a little bit, switch back and refresh. 83 00:06:38,000 --> 00:06:40,000 Actually, I don't think I like that. 84 00:06:40,000 --> 00:06:43,000 I think I liked it just how it was. 85 00:06:43,000 --> 00:06:47,000 So, let's go ahead and remove that. 86 00:06:47,000 --> 00:06:52,000 So, we'll refresh the page, and I think that looks a lot better. 87 00:06:52,000 --> 00:06:56,000 And finally, I think the Show More link should actually be a blockable element 88 00:06:56,000 --> 00:07:01,000 just so it pushes these down, and we said we were going to turn that into a button, 89 00:07:01,000 --> 00:07:05,000 but that's a detail that we can go ahead and add in later once we start to 90 00:07:05,000 --> 00:07:09,000 sort of develop the visual style of this site. 91 00:07:09,000 --> 00:07:13,000 So, we'll switch back, and let's just make sure that we can go ahead 92 00:07:13,000 --> 00:07:16,000 and actually select that Show More link. 93 00:07:16,000 --> 00:07:20,000 It doesn't look like we have any sort of class on it, 94 00:07:20,000 --> 00:07:22,000 so let's just go ahead and add that in. 95 00:07:22,000 --> 00:07:29,000 We'll say "class" and we'll just call it "details_link" 96 00:07:29,000 --> 00:07:33,000 because that's what we called it in the model, and then, 97 00:07:33,000 --> 00:07:43,000 we'll say a "details_link" and we'll go ahead and set it to "display: block." 98 00:07:43,000 --> 00:07:49,000 And then we can even maybe put some margin on the bottom, and we'll put about 20 pixels. 99 00:07:49,000 --> 00:07:54,000 So, when we switch back and refresh the page, you can see that Show More link 100 00:07:54,000 --> 00:07:57,000 now pushes down the edit and back links which, in fact, 101 00:07:57,000 --> 00:08:00,000 we don't even really know where we're going to put those yet. 102 00:08:00,000 --> 00:08:02,000 But, that's fine for now. 103 00:08:02,000 --> 00:08:09,000 I'm going to make the details link bold, and I'm also going to increase the font size 104 00:08:09,000 --> 00:08:13,000 just a little bit just so that it stands out from the description 105 00:08:13,000 --> 00:08:17,000 and we remember that we actually need to style that later. 106 00:08:17,000 --> 00:08:23,000 As one final change here, I'm actually going to put some margin bottom on the description. 107 00:08:23,000 --> 00:08:27,000 So, let's go ahead and select that, and we'll say "margin bottom" and again, 108 00:08:27,000 --> 00:08:30,000 we'll just put about 20 pixels. 109 00:08:30,000 --> 00:08:34,000 So, we'll switch back, and it looks like the margin didn't quite get applied 110 00:08:34,000 --> 00:08:38,000 to the job description, and I think that's because we used the wrong selector. 111 00:08:38,000 --> 00:08:44,000 Yep, we need to say job description instead of just description. 112 00:08:44,000 --> 00:08:50,000 So, we'll save that out and refresh, and now, we have a pretty good looking show view. 113 00:08:50,000 --> 00:08:52,000 We can go back to our index view. 114 00:08:52,000 --> 00:08:55,000 We can browse through these job listings. 115 00:08:55,000 --> 00:09:01,000 We can click on one of them, go back again, 116 00:09:01,000 --> 00:09:05,000 and so far, this is looking pretty navigable. 117 00:09:05,000 --> 00:09:11,000 I think I actually am going to add just a little bit of additional styling to this index view real quick 118 00:09:11,000 --> 00:09:16,000 just to separate out these job links a little bit more clearly. 119 00:09:16,000 --> 00:09:23,000 So, let's go ahead and scroll back up, and inside of these LIs for each job link 120 00:09:23,000 --> 00:09:26,000 I'm just going to apply a background color. 121 00:09:26,000 --> 00:09:33,000 So, I'll say "background" and we'll just set it to yellow and refresh the page. 122 00:09:33,000 --> 00:09:42,000 And now, it makes it a lot easier to see the clickable area for each one of these jobs. 123 00:09:42,000 --> 00:09:47,000 And I think that'll about do it for our show view. 124 00:09:47,000 --> 00:09:52,000 So, let's go ahead and switch back, and it looks like everything is saved out, 125 00:09:52,000 --> 00:09:54,000 so let's go ahead and switch over to our terminal. 126 00:09:54,000 --> 00:09:56,000 We'll go ahead and stop our server. 127 00:09:56,000 --> 00:10:02,000 We'll say "git add ." and then "git commit" with the message flag, 128 00:10:02,000 --> 00:10:11,000 and we'll say "Styled the show view for jobs" and commit that. 129 00:10:11,000 --> 00:10:19,000 And then we'll say "git push" and that should push up our changes for both the index view, 130 00:10:19,000 --> 00:10:22,000 and more importantly, for the show view.