1 00:00:00,000 --> 00:00:07,000 [Master Class] [Designer and Developer Workflow] [Styling the Forms View] 2 00:00:07,000 --> 00:00:09,000 [Nick Pettit] So far we've styled our index view, 3 00:00:09,000 --> 00:00:13,000 and we've styled our show view, and they're looking okay. 4 00:00:13,000 --> 00:00:19,000 We can go ahead and click on any of these and navigate back and forth. 5 00:00:19,000 --> 00:00:23,000 And if we go to our new job view, 6 00:00:23,000 --> 00:00:27,000 we can see that it's actually already in pretty good shape. 7 00:00:27,000 --> 00:00:32,000 We just have a little bit of work to do, so let's go ahead and switch over to TextMate. 8 00:00:32,000 --> 00:00:35,000 And we don't need to look at our show view anymore. 9 00:00:35,000 --> 00:00:38,000 We should be done with that for now. 10 00:00:38,000 --> 00:00:43,000 We'll go ahead and open up our new view and our edit view, 11 00:00:43,000 --> 00:00:47,000 and it looks like these are pulling in the partial form, 12 00:00:47,000 --> 00:00:50,000 so we'll go ahead and open that up as well. 13 00:00:50,000 --> 00:00:55,000 Now, the first thing that I'm noticing in this new view and this edit view 14 00:00:55,000 --> 00:00:58,000 is this big h1 tag. 15 00:00:58,000 --> 00:01:00,000 We're going to change that to an h2, 16 00:01:00,000 --> 00:01:03,000 and we're going to change this to say 17 00:01:03,000 --> 00:01:07,000 "New Job Posting." 18 00:01:07,000 --> 00:01:10,000 Just like that. 19 00:01:10,000 --> 00:01:12,000 And the same thing in our edit view. 20 00:01:12,000 --> 00:01:15,000 We're going to change this to an h2, 21 00:01:15,000 --> 00:01:21,000 and we'll say something more friendly like "Edit Job Posting." 22 00:01:21,000 --> 00:01:23,000 Just like that. 23 00:01:23,000 --> 00:01:29,000 We can switch back to Easy Jobs! here and refresh the page. 24 00:01:29,000 --> 00:01:32,000 And that's much more friendly text, although we do need to style it, 25 00:01:32,000 --> 00:01:35,000 so we can go ahead and do that. 26 00:01:35,000 --> 00:01:37,000 Let's go ahead and switch back, 27 00:01:37,000 --> 00:01:43,000 and let's just take a look at this form view. 28 00:01:43,000 --> 00:01:47,000 The thing that I'm noticing is that we have the field class 29 00:01:47,000 --> 00:01:49,000 applied to each one of these, and that's fine. 30 00:01:49,000 --> 00:01:52,000 And then we have "actions" down here. 31 00:01:52,000 --> 00:01:56,000 We can go ahead and use these in our styling. 32 00:01:56,000 --> 00:01:58,000 In addition, we also have labels, 33 00:01:58,000 --> 00:02:01,000 and I think I'm going to set those to block level elements 34 00:02:01,000 --> 00:02:05,000 just so they push down the form fields below them. 35 00:02:05,000 --> 00:02:11,000 So, let's go ahead and go over to our application.sas, 36 00:02:11,000 --> 00:02:14,000 and this file is getting pretty long. 37 00:02:14,000 --> 00:02:17,000 But not long enough to add comments just yet. 38 00:02:17,000 --> 00:02:21,000 We'll go ahead and add that in maybe in our next iteration. 39 00:02:21,000 --> 00:02:25,000 And let's go ahead and first select our fields, 40 00:02:25,000 --> 00:02:28,000 just to make sure that we can actually select those. 41 00:02:28,000 --> 00:02:32,000 And we'll just put a light yellow background color on them 42 00:02:32,000 --> 00:02:34,000 just to make sure that everything is working properly. 43 00:02:34,000 --> 00:02:37,000 We'll go ahead and switch back and refresh. 44 00:02:37,000 --> 00:02:41,000 And it looks like we can indeed style those, 45 00:02:41,000 --> 00:02:43,000 so that's looking good. 46 00:02:43,000 --> 00:02:45,000 Inside of each one of these fields, 47 00:02:45,000 --> 00:02:48,000 we're going to select the label, 48 00:02:48,000 --> 00:02:51,000 and we're going to say "display: block." 49 00:02:51,000 --> 00:02:55,000 And let's just see if that pushes these form fields down below them. 50 00:02:55,000 --> 00:02:58,000 We'll switch back and refresh the page. 51 00:02:58,000 --> 00:03:02,000 Now, it looks like that didn't quite work, so let's go ahead and open up 52 00:03:02,000 --> 00:03:05,000 the source and just take a look at what's going on here. 53 00:03:05,000 --> 00:03:08,000 It looks like these labels actually aren't classes. 54 00:03:08,000 --> 00:03:12,000 They're actually label tags, so let's go ahead and change this label 55 00:03:12,000 --> 00:03:15,000 just to be a normal label tag. 56 00:03:15,000 --> 00:03:20,000 So, we'll go ahead and save that out, switch back to the browser and refresh the page. 57 00:03:20,000 --> 00:03:22,000 This is looking pretty good. 58 00:03:22,000 --> 00:03:25,000 Now, let's go ahead and start styling this h2. 59 00:03:25,000 --> 00:03:31,000 So, we'll switch back, and we're not really using any other h2s anywhere else, 60 00:03:31,000 --> 00:03:35,000 so we can just go ahead and say that h2s are always going to be 61 00:03:35,000 --> 00:03:37,000 the page title. 62 00:03:37,000 --> 00:03:45,000 With this h2 here, we'll go ahead and say "font-weight: bold." 63 00:03:45,000 --> 00:03:48,000 And we'll go ahead and increase the font size 64 00:03:48,000 --> 00:03:52,000 and say font size will be about 1.4 ems. 65 00:03:52,000 --> 00:03:57,000 Switch back and refresh the page, and I think that looks pretty good. 66 00:03:57,000 --> 00:04:01,000 Let's just go ahead and add some margin on the top and bottom of that 67 00:04:01,000 --> 00:04:03,000 just to separate it out a little bit. 68 00:04:03,000 --> 00:04:10,000 And we can actually maybe include some friendlier text for each one of those labels. 69 00:04:10,000 --> 00:04:15,000 But first, I'm going to apply some margin to the top of those labels 70 00:04:15,000 --> 00:04:19,000 of about 20 pixels just to space them out a little bit better. 71 00:04:19,000 --> 00:04:21,000 That looks pretty good. 72 00:04:21,000 --> 00:04:26,000 And now let's go ahead and dive into that form view. 73 00:04:26,000 --> 00:04:29,000 And we'll go ahead and change the label on these. 74 00:04:29,000 --> 00:04:35,000 Let's go ahead and just change this to say "Job Title." 75 00:04:35,000 --> 00:04:42,000 We'll change the description to say "Job Description." 76 00:04:42,000 --> 00:04:48,000 We'll change company name to say "Company Name." 77 00:04:48,000 --> 00:04:53,000 And then the details link we'll say "Details Link," 78 00:04:53,000 --> 00:04:56,000 and we'll say "(optional)." 79 00:04:56,000 --> 00:05:00,000 And as one final touch, I want to go ahead and move this company name 80 00:05:00,000 --> 00:05:04,000 so that it's right after the job title 81 00:05:04,000 --> 00:05:09,000 just so that it reflects the show view a little bit more closely 82 00:05:09,000 --> 00:05:12,000 so that we have our title, our company name, 83 00:05:12,000 --> 00:05:15,000 job description, and our details link. 84 00:05:15,000 --> 00:05:19,000 So, we'll go ahead and switch back to the browser and refresh. 85 00:05:19,000 --> 00:05:22,000 And as you can see, we now have our job title, 86 00:05:22,000 --> 00:05:26,000 company name, job description, and details link. 87 00:05:26,000 --> 00:05:31,000 So, I'd say that about does it for the new job posting view. 88 00:05:31,000 --> 00:05:34,000 Let's just go ahead and check on the edit view. 89 00:05:34,000 --> 00:05:40,000 All that seems to be in good working order. 90 00:05:40,000 --> 00:05:44,000 We have our title coming in, our company name, 91 00:05:44,000 --> 00:05:48,000 our job description, and our details link. 92 00:05:48,000 --> 00:05:51,000 So, that should about wrap it up for the forms. 93 00:05:51,000 --> 00:05:54,000 Let's go ahead and commit our work. 94 00:05:54,000 --> 00:05:56,000 Go ahead and switch over to our terminal. 95 00:05:56,000 --> 00:05:58,000 Stop our server. 96 00:05:58,000 --> 00:06:02,000 Say "git add . git commit" with a message flag, 97 00:06:02,000 --> 00:06:10,000 and we'll say "Started the form view styling." 98 00:06:10,000 --> 00:06:15,000 We'll go ahead and commit that, and we'll say "git push." 99 00:06:15,000 --> 00:06:17,000 And that should just about wrap things up. 100 00:06:17,000 --> 00:06:21,000 I think we're ready to go ahead and meet with Jim.