1
00:00:00,000 --> 00:00:02,000
[?music?]

2
00:00:02,000 --> 00:00:05,000
[Master Class: Designer and Developer Workflow: Responsive Cleanup]

3
00:00:05,000 --> 00:00:08,000
[Nick Pettit] Before we go any further, we should go ahead and stop our server

4
00:00:08,000 --> 00:00:11,000
and commit what we have so far

5
00:00:11,000 --> 00:00:14,000
so we don't get too far ahead of ourselves and end up making mistakes

6
00:00:14,000 --> 00:00:17,000
that we can't easily undo. 

7
00:00:17,000 --> 00:00:20,000
So let's go ahead and switch over to our terminal.

8
00:00:20,000 --> 00:00:22,000
I'm going to stop the server

9
00:00:22,000 --> 00:00:28,000
and I'm going to say $git add .

10
00:00:28,000 --> 00:00:32,000
$git commit -m

11
00:00:32,000 --> 00:00:35,000
with a message, so I'm just going to go ahead and say 

12
00:00:35,000 --> 00:00:39,000
-m "Styled the index view." which is a little bit of an understatement

13
00:00:39,000 --> 00:00:42,000
but that's generally what we did.

14
00:00:42,000 --> 00:00:46,000
And then next, I'm going to go ahead and merge this branch

15
00:00:46,000 --> 00:00:50,000
so let's go ahead and switch back to our branch master

16
00:00:50,000 --> 00:00:57,000
and then do a $git merge style on the style branch

17
00:00:57,000 --> 00:01:01,000
and then I'll go ahead and say $git push 

18
00:01:01,000 --> 00:01:05,000
and that will push up all of our changes to master.

19
00:01:05,000 --> 00:01:10,000
And before I actually did that, we probably should have done a $git pull on master

20
00:01:10,000 --> 00:01:13,000
just to make sure Jim didn't make any changes, 

21
00:01:13,000 --> 00:01:17,000
but that looks like we're good there, so let's go ahead and switch back to our style branch. 

22
00:01:17,000 --> 00:01:21,000
So we'll say $git checkout style 

23
00:01:21,000 --> 00:01:25,000
and now, we're ready to continue working, so we'll fire up our server

24
00:01:25,000 --> 00:01:28,000
by saying $rails s

25
00:01:28,000 --> 00:01:34,000
and now, we can go ahead and switch back to our text editor. 

26
00:01:34,000 --> 00:01:38,000
So next, we need to go ahead and style our forms, 

27
00:01:38,000 --> 00:01:42,000
so let's go ahead and open a few of the views that we're going to be taking a look at.

28
00:01:42,000 --> 00:01:46,000
We want to open the new user_session view

29
00:01:46,000 --> 00:01:49,000
just to see what we have going on there.

30
00:01:49,000 --> 00:01:53,000
And then let's also open the New user view,

31
00:01:53,000 --> 00:01:56,000
which is where users will register.

32
00:01:56,000 --> 00:02:03,000
And then finally, we'll open the New jobs view 

33
00:02:03,000 --> 00:02:07,000
and the Edit jobs view as well as the form. 

34
00:02:07,000 --> 00:02:13,000
Now let's switch over to the browser and see what some of these forms look like. 

35
00:02:13,000 --> 00:02:19,000
So I'm already logged in, and let's try to create a new job. 

36
00:02:19,000 --> 00:02:24,000
And if I scroll down, it looks like we're having a little bit of a problem

37
00:02:24,000 --> 00:02:27,000
with the content area not wrapping the form completely,

38
00:02:27,000 --> 00:02:30,000
and I think I know what's going on there,

39
00:02:30,000 --> 00:02:33,000
but we'll get back to that in just a moment. 

40
00:02:33,000 --> 00:02:38,000
If I go ahead and sign out and then try to register as a new user, 

41
00:02:38,000 --> 00:02:44,000
it looks like we have the Easy Jobs! logo appearing in that form for some reason.

42
00:02:44,000 --> 00:02:47,000
Again, I have a pretty good idea of what's happening there, 

43
00:02:47,000 --> 00:02:49,000
but we can go ahead and fix that. 

44
00:02:49,000 --> 00:02:52,000
And next, I'll go ahead and say Sign In 

45
00:02:52,000 --> 00:02:56,000
to look at the New User session view. 

46
00:02:56,000 --> 00:02:59,000
This has a whole bunch of space down at the bottom

47
00:02:59,000 --> 00:03:03,000
and again, I think these are all pretty inter-related problems.

48
00:03:03,000 --> 00:03:07,000
So let's go ahead and switch back to our text editor 

49
00:03:07,000 --> 00:03:09,000
and let's go over to our style sheet

50
00:03:09,000 --> 00:03:12,000
because I don't think we actually need to make any changes in these forms.

51
00:03:12,000 --> 00:03:16,000
I think it's just some styling that's been applied.

52
00:03:16,000 --> 00:03:20,000
And yep--if you'll notice right here on the content div, 

53
00:03:20,000 --> 00:03:24,000
we have an explicit height of 500px.

54
00:03:24,000 --> 00:03:28,000
Now, this was probably added because we didn't have any content 

55
00:03:28,000 --> 00:03:31,000
when we were first starting out and we just wanted to see what the page looked like,

56
00:03:31,000 --> 00:03:34,000
but it was never removed. 

57
00:03:34,000 --> 00:03:35,000
We don't actually want this explicit height,

58
00:03:35,000 --> 00:03:40,000
so let's go ahead and remove that so that the content area

59
00:03:40,000 --> 00:03:43,000
will conform to the content that we have. 

60
00:03:43,000 --> 00:03:45,000
So let's go ahead and save that

61
00:03:45,000 --> 00:03:48,000
and switch back to the browser, and if we refresh the page, 

62
00:03:48,000 --> 00:03:54,000
you can see that our Sign In form is now nice and tidy.

63
00:03:54,000 --> 00:03:58,000
We'll go over to the register form and that's also been tidied up as well. 

64
00:03:58,000 --> 00:04:02,000
We still have the problem with this logo appearing here,

65
00:04:02,000 --> 00:04:05,000
but we'll get back to that in a moment. 

66
00:04:05,000 --> 00:04:10,000
If we go ahead and sign in, 

67
00:04:10,000 --> 00:04:14,000
we can look at the New Job form.

68
00:04:14,000 --> 00:04:18,000
And if we scroll down, it looks like that explicit height issue 

69
00:04:18,000 --> 00:04:23,000
also fixed the New Job posting form, 

70
00:04:23,000 --> 00:04:26,000
so it looks like we're actually in pretty good shape on the forms. 

71
00:04:26,000 --> 00:04:30,000
Now let's go ahead and tackle that issue that we had 

72
00:04:30,000 --> 00:04:36,000
with the Easy Jobs! logo appearing on the registration form. 

73
00:04:36,000 --> 00:04:39,000
First, let's switch over to our text editor 

74
00:04:39,000 --> 00:04:44,000
and let's try to find the new registration form.

75
00:04:44,000 --> 00:04:48,000
So here, it looks like we have the New user form 

76
00:04:48,000 --> 00:04:55,000
and I think what's going on here is that we have an h1 instead of an h2. 

77
00:04:55,000 --> 00:05:00,000
Now, the h1 sitewide has the styling of the logo,

78
00:05:00,000 --> 00:05:06,000
so while changing this to an h2 will fix the problem at hand--

79
00:05:06,000 --> 00:05:08,000
and as you can see, it's fixed there in the browser--

80
00:05:08,000 --> 00:05:12,000
we should still actually try to fix the original problem, 

81
00:05:12,000 --> 00:05:15,000
which is the sitewide styling of h1s.

82
00:05:15,000 --> 00:05:18,000
Now, we should only have one h1 on the entire site,

83
00:05:18,000 --> 00:05:23,000
which is the logo, but just in case we miss one and another h1 appears,

84
00:05:23,000 --> 00:05:26,000
we don't want the logo appearing elsewhere,

85
00:05:26,000 --> 00:05:30,000
so let's try to get more specific with that logo.

86
00:05:30,000 --> 00:05:35,000
So if we scroll up, we'll find the h1 styling right here.

87
00:05:35,000 --> 00:05:38,000
Now, we should have a better way of identifying this,

88
00:05:38,000 --> 00:05:43,000
so let's go ahead and open up the application layout where this resides

89
00:05:43,000 --> 00:05:49,000
and as you can see, we actually do already have an id on there of #logo.

90
00:05:49,000 --> 00:05:53,000
So we'll go ahead and copy that and paste it next to our h1,

91
00:05:53,000 --> 00:05:57,000
save it out, and when we switch back and refresh the page, 

92
00:05:57,000 --> 00:06:02,000
it should look exactly the same, but now any other remnant h1s 

93
00:06:02,000 --> 00:06:08,000
that we happen to miss at least won't have the Easy Jobs! logo.

94
00:06:08,000 --> 00:06:11,000
So I think that should about wrap it up for the forms,

95
00:06:11,000 --> 00:06:14,000
so let me go ahead and sign back in.

96
00:06:14,000 --> 00:06:20,000
And now, let's try to make these Flash messages look a little bit nicer.

97
00:06:20,000 --> 00:06:27,000
So I'll go ahead and switch back, and let's take a look at the application layout,

98
00:06:27,000 --> 00:06:30,000
and if you'll notice, we have a class here called notice 

99
00:06:30,000 --> 00:06:35,000
and a class here called error, and those are what we need to style.

100
00:06:35,000 --> 00:06:37,000
So let's go ahead and try to do that. 

101
00:06:37,000 --> 00:06:46,000
We'll grab the notice class and we'll go ahead and just put that in the basic styling section.

102
00:06:46,000 --> 00:06:52,000
And additionally, we'll also just apply the same styling to the error class 

103
00:06:52,000 --> 00:06:56,000
and then maybe we can change the color later on. 

104
00:06:56,000 --> 00:07:00,000
So first, we'll say display: block.

105
00:07:00,000 --> 00:07:05,000
It should already be display: block, but we'll just make sure that it is. 

106
00:07:05,000 --> 00:07:09,000
We'll give it a background color of green,

107
00:07:09,000 --> 00:07:13,000
a text color of white, and let's just save that out

108
00:07:13,000 --> 00:07:16,000
and refresh the page.

109
00:07:16,000 --> 00:07:18,000
And our Flash message disappeared 

110
00:07:18,000 --> 00:07:22,000
and we could go ahead and go into the application layout and edit it

111
00:07:22,000 --> 00:07:26,000
so that a Flash message is always visible 

112
00:07:26,000 --> 00:07:29,000
and not conditionally visible, but we'll just go ahead and be lazy 

113
00:07:29,000 --> 00:07:31,000
and click the Sign Out button here.

114
00:07:31,000 --> 00:07:34,000
And now, as you can see, we have this Flash message here

115
00:07:34,000 --> 00:07:38,000
and this is what our styling is looking like so far.

116
00:07:38,000 --> 00:07:40,000
I think that's almost pretty good. 

117
00:07:40,000 --> 00:07:43,000
We'll go ahead and maybe add a light-colored border 

118
00:07:43,000 --> 00:07:46,000
and some margin and height to it, 

119
00:07:46,000 --> 00:07:48,000
so let's go ahead and do that now.

120
00:07:48,000 --> 00:07:54,000
We'll switch back, and first we'll add some height of maybe 50px,

121
00:07:54,000 --> 00:08:00,000
some margin on the top and bottom of 20px and none on the left and right.

122
00:08:00,000 --> 00:08:06,000
And then finally, we'll go ahead and add a border of 1px.

123
00:08:06,000 --> 00:08:10,000
We'll make it solid, and instead of just saying green here, 

124
00:08:10,000 --> 00:08:18,000
we'll actually give this a real color, so we'll maybe say go light on the reds,

125
00:08:18,000 --> 00:08:24,000
heavy on the greens, and light on the blues #33FF33.

126
00:08:24,000 --> 00:08:28,000
And we'll use this same color for our border, 

127
00:08:28,000 --> 00:08:33,000
but we'll make it just a little bit lighter.

128
00:08:33,000 --> 00:08:36,000
So we'll go ahead and save that out

129
00:08:36,000 --> 00:08:40,000
so when we switch back and refresh, 

130
00:08:40,000 --> 00:08:43,000
it looks like we have a pretty ugly problem here, 

131
00:08:43,000 --> 00:08:48,000
and that's actually probably because notice and error are always visible

132
00:08:48,000 --> 00:08:54,000
so they're not conditionally visible and we can go ahead and change some of the styling here

133
00:08:54,000 --> 00:08:55,000
to reflect that.

134
00:08:55,000 --> 00:08:58,000
Rather than giving it an explicit height, 

135
00:08:58,000 --> 00:09:02,000
let's just go ahead and add some padding to the top and bottom 

136
00:09:02,000 --> 00:09:06,000
and none on the left and right, and let's go ahead and see what that did.

137
00:09:06,000 --> 00:09:08,000
So it looks like it's still there,

138
00:09:08,000 --> 00:09:17,000
so let's remove the display block and some of the other elements we have here.

139
00:09:17,000 --> 00:09:21,000
And even so, it looks like it's still there, so we need to just go ahead 

140
00:09:21,000 --> 00:09:24,000
and remove this padding entirely.

141
00:09:24,000 --> 00:09:29,000
And now it's not visible anymore and it looks like we can't quite do the styling

142
00:09:29,000 --> 00:09:33,000
that we wanted to, but that's okay. 

143
00:09:33,000 --> 00:09:40,000
Now let's go ahead and adjust the styling for our error messages.

144
00:09:40,000 --> 00:09:49,000
So for errors, we'll go ahead and change our background to that background color of red

145
00:09:49,000 --> 00:09:53,000
that we've used elsewhere--that nice dark-color red. 

146
00:09:53,000 --> 00:09:58,000
And just to be doubly sure, we'll go ahead and add the background color, 

147
00:09:58,000 --> 00:10:01,000
or rather, text color of white to make sure that the text there

148
00:10:01,000 --> 00:10:04,000
is indeed coming across as white. 

149
00:10:04,000 --> 00:10:08,000
So that will about do it for Flash messages

150
00:10:08,000 --> 00:10:13,000
and now, I think we're probably ready to move on to media queries. 

151
00:10:13,000 --> 00:10:17,000
So let's go ahead and switch back here

152
00:10:17,000 --> 00:10:21,000
and we'll go ahead and sign in.

153
00:10:21,000 --> 00:10:28,000
And there's what our Flash messages look like--not great, but functional--

154
00:10:28,000 --> 00:10:31,000
and let's now go ahead and refresh the browser

155
00:10:31,000 --> 00:10:35,000
and let's see what happens when we resize it.

156
00:10:35,000 --> 00:10:39,000
So if I go ahead and resize the browser, 

157
00:10:39,000 --> 00:10:45,000
it looks like our fluid grid is actually doing pretty well. 

158
00:10:45,000 --> 00:10:48,000
We don't have a whole lot of fluid width elements in here,

159
00:10:48,000 --> 00:10:53,000
but we have just enough that the styling actually looks pretty good 

160
00:10:53,000 --> 00:10:58,000
when you move it down to, say, the size of a smartphone.

161
00:10:58,000 --> 00:11:02,000
It looks like we are getting a horizontal scroll bar here, 

162
00:11:02,000 --> 00:11:04,000
so there are some adjustments that need to be made, 

163
00:11:04,000 --> 00:11:07,000
but there actually a lot of serendipitous things happening here 

164
00:11:07,000 --> 00:11:11,000
that I think are unplanned but are perfectly fine,

165
00:11:11,000 --> 00:11:14,000
so let's take a look at those.

166
00:11:14,000 --> 00:11:20,000
For example, up in the upper right of the page, we have the Log In credentials,

167
00:11:20,000 --> 00:11:25,000
the Sign Out links, and so on,

168
00:11:25,000 --> 00:11:27,000
and when we make the page smaller, 

169
00:11:27,000 --> 00:11:30,000
you'll notice that right about here, 

170
00:11:30,000 --> 00:11:32,000
it pops down underneath the logo. 

171
00:11:32,000 --> 00:11:38,000
Now, that was completely unintended, but it actually looks fine like this,

172
00:11:38,000 --> 00:11:40,000
so I think we can go ahead and just leave that 

173
00:11:40,000 --> 00:11:42,000
without making any adjustments. 

174
00:11:42,000 --> 00:11:45,000
The second thing I'd like to draw your attention to 

175
00:11:45,000 --> 00:11:49,000
are the links in the job index view here,

176
00:11:49,000 --> 00:11:54,000
So we have these descriptions and when they get close to the titles

177
00:11:54,000 --> 00:11:58,000
when we make the page smaller, there is a point where they do completely disappear,

178
00:11:58,000 --> 00:12:04,000
which isn't great but right after that, they pop right underneath the titles

179
00:12:04,000 --> 00:12:06,000
and I think that looks great. 

180
00:12:06,000 --> 00:12:12,000
So those are two really nice examples of what I would term "serendipitous design."

181
00:12:12,000 --> 00:12:16,000
Now we need to make a few adjustments here to get rid of this horizontal scrolling

182
00:12:16,000 --> 00:12:21,000
and I think the problems here are the Easy Jobs! logo is a bit too wide, 

183
00:12:21,000 --> 00:12:23,000
so we'll address that first.

184
00:12:23,000 --> 00:12:25,000
And then after we address that, 

185
00:12:25,000 --> 00:12:30,000
we need to address the content area here because I think that's also adding

186
00:12:30,000 --> 00:12:33,000
to our horizontal scrolling. 

187
00:12:33,000 --> 00:12:36,000
So we'll start out with the index view, address those two problems, 

188
00:12:36,000 --> 00:12:40,000
and then we'll go ahead and look at other views to see how they look.

189
00:12:40,000 --> 00:12:43,000
So let's tackle that logo first. 

190
00:12:43,000 --> 00:12:48,000
We'll go ahead and scroll up here to our logo,

191
00:12:48,000 --> 00:12:51,000
and it looks like the width is a bit too wide here, 

192
00:12:51,000 --> 00:12:54,000
so let's go ahead and copy this 

193
00:12:54,000 --> 00:13:03,000
and we'll paste it down at the bottom of our file and crunch it in there. 

194
00:13:03,000 --> 00:13:09,000
We'll go ahead and add a new comment flag here by copying and pasting

195
00:13:09,000 --> 00:13:16,000
and this comment flag will be for MEDIA QUERIES.

196
00:13:16,000 --> 00:13:20,000
And we aren't going to be very scientific about our fluid grid

197
00:13:20,000 --> 00:13:24,000
or our media queries, but we don't really need to be.

198
00:13:24,000 --> 00:13:27,000
If a site looks good at various sizes, 

199
00:13:27,000 --> 00:13:29,000
then that's all that really matters,

200
00:13:29,000 --> 00:13:34,000
so we'll go ahead and add in a media query here,

201
00:13:34,000 --> 00:13:39,000
and I think the only media query that we need to have is for smaller screens.

202
00:13:39,000 --> 00:13:44,000
So we'll say @media using the media rule

203
00:13:44,000 --> 00:13:47,000
and we'll say only screen and

204
00:13:47,000 --> 00:13:54,000
when the max-width of the page is 480px or less,

205
00:13:54,000 --> 00:14:03,000
then on the h1#logo, we want to make a few adjustments. 

206
00:14:03,000 --> 00:14:06,000
Now, the things I think we can keep are the text indent,

207
00:14:06,000 --> 00:14:09,000
the actual background itself, 

208
00:14:09,000 --> 00:14:14,000
and I also think the height is probably okay.

209
00:14:14,000 --> 00:14:17,000
And we still want it to float to the left, 

210
00:14:17,000 --> 00:14:19,000
but I think we need to make some adjustments to the width 

211
00:14:19,000 --> 00:14:23,000
and probably to the margin-top, so let's first decrease the width

212
00:14:23,000 --> 00:14:28,000
and let's just see what happens in the browser when we do that. 

213
00:14:28,000 --> 00:14:34,000
So if we refresh here, it looks like we're down at our 480px size,

214
00:14:34,000 --> 00:14:39,000
so if we resize things, we can see that at some point, 

215
00:14:39,000 --> 00:14:46,000
our logo gets smaller and it even has a nice CSS3 transition there. 

216
00:14:46,000 --> 00:14:53,000
But the sides of our logo are getting cut off, and that doesn't really look very good

217
00:14:53,000 --> 00:14:56,000
because it ruins the manila folder effect,

218
00:14:56,000 --> 00:14:58,000
so let's see if we can try to fix that. 

219
00:14:58,000 --> 00:15:04,000
We need to adjust the actual background image that's on this h1,

220
00:15:04,000 --> 00:15:11,000
and I think the best way to do that is to use the CSS3 property background-size

221
00:15:11,000 --> 00:15:18,000
and we'll give it the value of contain so that the image is contained to its parent element.

222
00:15:18,000 --> 00:15:22,000
So we'll go ahead and save that out and refresh.

223
00:15:22,000 --> 00:15:27,000
And now the image is the right size, but as I suspected, 

224
00:15:27,000 --> 00:15:31,000
we probably are going to have to adjust this margin here,

225
00:15:31,000 --> 00:15:36,000
so let's bump it up to maybe something like 30px. 

226
00:15:36,000 --> 00:15:38,000
We'll save that and refresh.

227
00:15:38,000 --> 00:15:41,000
It looks like we're almost there. 

228
00:15:41,000 --> 00:15:44,000
We still have a little bit of width in between, and I think that's about 2px,

229
00:15:44,000 --> 00:15:47,000
so let's go ahead and try that. 

230
00:15:47,000 --> 00:15:50,000
And when we refresh, it looks like that was a good guess

231
00:15:50,000 --> 00:15:52,000
because that looks perfect to me. 

232
00:15:52,000 --> 00:15:58,000
And now, you can see that our Easy Jobs! logo dynamically resizes itself 

233
00:15:58,000 --> 00:16:00,000
when we adjust the size of the browser. 

234
00:16:00,000 --> 00:16:04,000
And of course, on a smartphone, this will look just right. 

235
00:16:04,000 --> 00:16:07,000
Now, let's go ahead and address the content area.

236
00:16:07,000 --> 00:16:11,000
So we need to scroll up

237
00:16:11,000 --> 00:16:15,000
and find where we're styling our content area.

238
00:16:15,000 --> 00:16:19,000
It looks like that's in the top section here, and let's just go ahead and copy 

239
00:16:19,000 --> 00:16:22,000
everything that we have here

240
00:16:22,000 --> 00:16:26,000
and paste it down here.

241
00:16:26,000 --> 00:16:31,000
And we'll make sure that we indent it properly underneath this media query,

242
00:16:31,000 --> 00:16:35,000
and let's go ahead and see what adjustments we need to make.

243
00:16:35,000 --> 00:16:40,000
So first, I think we can go ahead and get rid of this background

244
00:16:40,000 --> 00:16:43,000
because we still want that.

245
00:16:43,000 --> 00:16:46,000
We still want to float it. 

246
00:16:46,000 --> 00:16:50,000
We may need to make some adjustments to the margin

247
00:16:50,000 --> 00:16:54,000
and we may need to make some adjustments to the padding. 

248
00:16:54,000 --> 00:16:57,000
I think we're probably going to want the same box-shadow,

249
00:16:57,000 --> 00:17:02,000
but I think we also will need to make some adjustments to the width.

250
00:17:02,000 --> 00:17:04,000
So let's go ahead and save that out, 

251
00:17:04,000 --> 00:17:10,000
we'll switch back and refresh the page,

252
00:17:10,000 --> 00:17:14,000
and let's go ahead and just remove the margins entirely

253
00:17:14,000 --> 00:17:16,000
to see what that does.

254
00:17:16,000 --> 00:17:19,000
So we'll save that, refresh the page, 

255
00:17:19,000 --> 00:17:24,000
and it looks like that actually fixed most of our problems.

256
00:17:24,000 --> 00:17:31,000
I just going to add in some margin-top: 10px.

257
00:17:31,000 --> 00:17:34,000
We'll bump that up to 20px

258
00:17:34,000 --> 00:17:37,000
and I think that looks pretty good. 

259
00:17:37,000 --> 00:17:46,000
It certainly got rid of the horizontal scrolling.

260
00:17:46,000 --> 00:17:52,000
I think we still have a little bit of an issue with the logged-in credentials here,

261
00:17:52,000 --> 00:17:57,000
but we can probably adjust that by adjusting the margin below the logo,

262
00:17:57,000 --> 00:18:00,000
so let's go ahead and try that. 

263
00:18:00,000 --> 00:18:04,000
We'll just 0 out the margin-bottom, see what that does. 

264
00:18:04,000 --> 00:18:09,000
So it looks like it's not actually the margin-bottom,

265
00:18:09,000 --> 00:18:13,000
so we'll delete that, and if there's no margin on the bottom of that logo,

266
00:18:13,000 --> 00:18:17,000
I'm thinking that there's actually some margin on this element here,

267
00:18:17,000 --> 00:18:21,000
and that is the user bar. 

268
00:18:21,000 --> 00:18:27,000
So we'll go ahead and select the #user_bar and wthin this media query,

269
00:18:27,000 --> 00:18:32,000
we'll remove any margin-top.

270
00:18:32,000 --> 00:18:36,000
So we'll save that 

271
00:18:36,000 --> 00:18:43,000
and I think that actually did the trick, so if we go ahead and resize this again, 

272
00:18:43,000 --> 00:18:48,000
it looks like everything is falling into place really nicely.

273
00:18:48,000 --> 00:18:50,000
We don't have any more horizontal scrolling

274
00:18:50,000 --> 00:18:54,000
and we can easily scroll up and down the page here,

275
00:18:54,000 --> 00:18:56,000
and I think this looks really nice. 

276
00:18:56,000 --> 00:19:00,000
Now let's go ahead and look at some of these other views

277
00:19:00,000 --> 00:19:03,000
to see how we're doing. 

278
00:19:03,000 --> 00:19:06,000
So if I go ahead and click on the show view for a job

279
00:19:06,000 --> 00:19:09,000
and resize the page, 

280
00:19:09,000 --> 00:19:15,000
it looks pretty good, but it looks like we're having a slight problem with this date,

281
00:19:15,000 --> 00:19:19,000
so let's see if we can go ahead and adjust that. 

282
00:19:19,000 --> 00:19:23,000
We'll go ahead and scroll up to our job show view, 

283
00:19:23,000 --> 00:19:25,000
and let's see if we can find the date.

284
00:19:25,000 --> 00:19:27,000
It looks like it's right here. 

285
00:19:27,000 --> 00:19:34,000
We'll copy that styling and paste it down here

286
00:19:34,000 --> 00:19:42,000
and we may need to add an additional selector here,

287
00:19:42,000 --> 00:19:49,000
so let's just go ahead and grab that job_show selector now. 

288
00:19:49,000 --> 00:19:54,000
 And we'll paste it here, and then we'll make the proper indentation here. 

289
00:19:54,000 --> 00:19:56,000
There we go. 

290
00:19:56,000 --> 00:19:58,000
Now, the color is good. 

291
00:19:58,000 --> 00:20:00,000
I don't think we need to adjust that. 

292
00:20:00,000 --> 00:20:04,000
We still want it to be bold.

293
00:20:04,000 --> 00:20:07,000
We still want to float it to the right. 

294
00:20:07,000 --> 00:20:10,000
The margin may need adjusting.

295
00:20:10,000 --> 00:20:13,000
I think we're still safe aligning it to the center;

296
00:20:13,000 --> 00:20:17,000
however, I think this rotation is way too much, 

297
00:20:17,000 --> 00:20:20,000
so let's go ahead and bump that down to 1 degree

298
00:20:20,000 --> 00:20:23,000
and we'll also decrease the font-size just a little bit 

299
00:20:23,000 --> 00:20:25,000
and let's see where that gets us. 

300
00:20:25,000 --> 00:20:27,000
So we'll go ahead and switch back

301
00:20:27,000 --> 00:20:29,000
and we'll refresh the browser

302
00:20:29,000 --> 00:20:32,000
and this is looking pretty good. 

303
00:20:32,000 --> 00:20:35,000
I still want to bring in some of that rotation,

304
00:20:35,000 --> 00:20:41,000
so let's go ahead and do that and let's see what adjustments need to be made. 

305
00:20:41,000 --> 00:20:43,000
So if we go ahead and resize the browser, 

306
00:20:43,000 --> 00:20:48,000
you can see that it bumps down pretty nicely there.

307
00:20:48,000 --> 00:20:51,000
I think we just need to add some margin to the bottom 

308
00:20:51,000 --> 00:20:54,000
to give it some separation from the description. 

309
00:20:54,000 --> 00:21:01,000
So we'll go ahead and say margin-bottom: 20px.

310
00:21:01,000 --> 00:21:07,000
And if we refresh, that looks pretty good; say maybe 24px.

311
00:21:07,000 --> 00:21:13,000
And now, when we resize the browser, I think we're in pretty good shape. 

312
00:21:13,000 --> 00:21:18,000
There's still a small point here where the date doesn't look quite right, 

313
00:21:18,000 --> 00:21:23,000
but I think in general, things look pretty good. 

314
00:21:23,000 --> 00:21:25,000
We're certainly targeting any sort of smartphones

315
00:21:25,000 --> 00:21:30,000
that would be likely to view this site, so that's what's most important here. 

316
00:21:30,000 --> 00:21:36,000
So let's go back and let's look at some of the forms and Flash messages,

317
00:21:36,000 --> 00:21:40,000
so I'll go ahead and click New Job 

318
00:21:40,000 --> 00:21:43,000
and I think that form looks pretty good. 

319
00:21:43,000 --> 00:21:46,000
Let's go ahead and Sign Out.

320
00:21:46,000 --> 00:21:49,000
It looks like our Flash messages could certainly use some work,

321
00:21:49,000 --> 00:21:52,000
so we'll go ahead and work on that next,

322
00:21:52,000 --> 00:21:54,000
but let's look at the register view.

323
00:21:54,000 --> 00:21:56,000
That looks pretty good. 

324
00:21:56,000 --> 00:22:00,000
Sign In also looks great. 

325
00:22:00,000 --> 00:22:05,000
And one slight usability problem I'm seeing here

326
00:22:05,000 --> 00:22:07,000
is that we can't actually get back to the homepage,

327
00:22:07,000 --> 00:22:14,000
so let's go ahead and turn the Easy Jobs! logo into a link. 

328
00:22:14,000 --> 00:22:18,000
We'll go ahead and jump into the application view

329
00:22:18,000 --> 00:22:23,000
and let's wrap this h1 in a link.

330
00:22:23,000 --> 00:22:26,000
So let's go ahead and add in our link.

331
00:22:26,000 --> 00:22:38,000
We'll say - link_to root_url and then we need to pass it the block of our h1 here.

332
00:22:38,000 --> 00:22:41,000
We'll go ahead and save that out

333
00:22:41,000 --> 00:22:45,000
and if we switch back to Easy Jobs! here and refresh,

334
00:22:45,000 --> 00:22:50,000
our header is now a link to the homepage, 

335
00:22:50,000 --> 00:22:56,000
so we could click around here and even for pages that don't have a link back to home, 

336
00:22:56,000 --> 00:23:01,000
we can always click on the logo here and get back just fine.

337
00:23:01,000 --> 00:23:06,000
So we'll go ahead and sign in here.

338
00:23:06,000 --> 00:23:10,000
The last thing we need to deal with here are these Flash messages,

339
00:23:10,000 --> 00:23:15,000
so let's see if we can go ahead and handle those.

340
00:23:15,000 --> 00:23:19,000
I think the easiest thing to do here would be just be to remove Flash messages entirely

341
00:23:19,000 --> 00:23:23,000
for mobile browsers, so let's go ahead and switch over

342
00:23:23,000 --> 00:23:35,000
to our application.SASS and for .notice and for .error,

343
00:23:35,000 --> 00:23:39,000
we'll simply say display: none.

344
00:23:39,000 --> 00:23:43,000
And now, if we switch over to the browser and refresh the page, 

345
00:23:43,000 --> 00:23:46,000
we can go ahead and click Sign Out.

346
00:23:46,000 --> 00:23:47,000
We don't see any Flash message.

347
00:23:47,000 --> 00:23:50,000
We'll go ahead and click Sign In,

348
00:23:50,000 --> 00:23:55,000
and again, our Flash message has been removed 

349
00:23:55,000 --> 00:23:58,000
so I think this site looks pretty good. 

350
00:23:58,000 --> 00:24:01,000
Flash messages only appear when we need them 

351
00:24:01,000 --> 00:24:05,000
and disappear on the mobile site when we really don't need to see them. 

352
00:24:05,000 --> 00:24:09,000
So that should pretty much wrap things up. 

353
00:24:09,000 --> 00:24:11,000
Let's go ahead and switch over to our terminal,

354
00:24:11,000 --> 00:24:16,000
we'll stop our server, and let's go ahead and commit our work.

355
00:24:16,000 --> 00:24:18,000
So we'll say $git add .

356
00:24:18,000 --> 00:24:21,000
$git commit - 

357
00:24:21,000 --> 00:24:38,000
with the commit message flag -m "Styled some forms and generally cleaned things up."

358
00:24:38,000 --> 00:24:41,000
And then we'll switch over to our master branch,

359
00:24:41,000 --> 00:24:46,000
So we'll say $git checkout master.

360
00:24:46,000 --> 00:24:49,000
We'll do a $git pull before we do any merges

361
00:24:49,000 --> 00:24:52,000
just to make sure that Jim hasn't done any work that we need to merge.

362
00:24:52,000 --> 00:24:53,000
It looks like we're good. 

363
00:24:53,000 --> 00:25:01,000
And we'll say $git merge style and then $git push to push it up to the repo.

364
00:25:01,000 --> 00:25:04,000
And I think that should about wrap things up. 

365
00:25:04,000 --> 00:25:06,000
We're ready to go ahead and meet with Jim.