UI: Subject Page Styling

Loading...

From the course by Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Johns Hopkins University

Capstone: Photo Tourist Web Application

18 ratings

Course 6 of 6 in the Specialization Ruby on Rails Web Development

In this Capstone project for the Photo Tourist you will implement a Ruby on Rails web application that makes use of both a relational and NoSQL database for the backend and expose the data through services to the Internet using Web services and a responsive user interface operating in a browser from a desktop and mobile device. You will have a chance to revisit and apply what you have learned in our previous courses to build and deploy a fully functional web application to the cloud accessible to your co-workers, future employers, friends, and family. In developing the Photo Tourist web application, you will get to work with different data types and data access scenarios (e.g., fielded data display and update, image upload/download, text search, access controlled information) to provide your users the ability to show off their photos and information from trips they have taken and to seek out photos and information from trips taken by others. Using the application you develop, your users will be able to • Create an account • Upload and download photos to the site and make them accessible to others • Provide descriptions of trips and photos that others can read • Organize photos by location and trip, • Find photos based on location • Find photos based on text searches of descriptions • Locate the place where the photo was taken on a map

From the lesson

UI Layout and Subjects Page

In this module you will add generic UI framework and Subject-specific components to implement a Subjects page that will show the user different views of Subjects (Things and Images) matching query criteria as well as the ability to express and depict the currently selected Subject. As part of the UI framework you will implement a set of parent/child components to manage areas of the page and tabs within areas. You will make heavy use of transcludes to implement this visual layering and to encapsulate the details away from the Subject-based components. You will implement dynamic styling to shrink and expand areas as directed by the user. As part of interacting with Subjects you will implement a Subjects page; divide the page up into sides, areas, and tabs; insert a set of Subject/view-specific components (e.g., lists, images, and details); integrate these components with a new Current Subjects service that will enable each of the components to maintain a consistent view of the user's query results and currently selected Subject. At the end of this module you will have implemented a complete UI framework -- ready to implement the visual display of Subjects using maps in the next module.

Module 7 Introduction2:37

UI: Overall Layout6:12

UI: Subject Page Tabs11:01

UI: Subject Page Areas9:41

UI: Area Left/Right Sides10:01

UI: Subject Page Styling10:15

Meet the Instructors

Jim Stafford
Adjunct Professor, Graduate Computer Science
Computer Science, Whiting School of Engineering

[MUSIC]

In this lecture we will discuss, styling our subjects page namely the areas.

We want our areas to fill the entire display area in width as well as height.

All right when we come back to the code all of our tests are looking pretty good.

But of course our styling is something to be desired.

Okay, let's get ready to fix that.

So these black lines are just here temporarily, but

what they show off is the fact that there's a gap.

Both top and sides, that we would like to fill up the entire real estate.

And if I inspect the Nav bar notice that theres about a 20 pixel margin

at the bottom of this Nav element that we would like to get rid of.

So let's go into the layout CSS and

go ahead and update our stalling for the Nav bar.

And we hit Refresh.

And now things are starting to tighten up right towards the top.

The next thing I'd like to get rid of is all this space towards the right and left.

And we'll notice that this padding is coming from the container-fluid.

So let's go back into layout.css and add an area for

the main display to remove padding left and right.

That will remove what the container fluid was adding.

There's no more padding for this.

Now the rest of the padding is coming from this subject page element.

So we'd like to get rid of that padding.

Except that's not generic layout.

That is more of a subjects page.

So let's go over to subjects.css and register it there.

Now when we hit Refresh, we're getting pretty close to the side.

Okay, the rest of the room being taken up,

it's if you look down inside of areas pane, areas content,

area left and right, have a padding of 15, left and right.

So let's put this in layout.css, and this is generic.

Let's hit Refresh and we're tied up against the sides as well as the top.

All right, we're starting to fill the entire real estate.

All right, now I want to get this check box.

I want to get it not where it is.

In the lower-left, I want to be in the upper-right.

So there's two primary things I have to do,

is I need to set the area pane to be position relative.

And then the check box is going to be positioned absolute in its outer

position relative 10px from the right, 10px from the top.

So if we come back and hit Refresh.

Our check boxes have now moved, awesome.

All right, so you notice how these areas are scrunched up here.

It's because its placeholder is only so big.

And they're only taking the amount of room required for the placeholder.

So now what we want to do is tell these areas go ahead and take up more room.

We want there's so many of the components that we're going to put in here,

namely the map is going to judge its size based upon the container around it.

So let me go tell tab-content to be 44% of view height.

That accounts for some of the size of the menu bar.

All right, so if I hit Refresh, you see where we're taking

up roughly 50% especially if I scroll up and let the menu bar be hidden,

then we are taking up pretty much the full display.

But you notice even though we are taking up half the display,

that map does not expand to be the whole area.

And if I collapse one of these, they still are only taking half the display.

That's because they haven't defined anything from being in the expanded state.

So I come back and say, well, if you're a normal tab content,

you're going to be roughly 50%, but

if you're expanded you're going to be closer to 100%.

So if I hit Refresh, you notice the map is taking pretty much the whole display.

And I couldn't get these quite to line up.

And when I uncheck one of the left areas, the remaining area expands.

Go back do the other one, you'll take that area okay, seems to be working.

Now these buttons up top, they're pretty huge, taking a lot of space.

Let me shrink those up a bit, and lower the font and

lower the line size around the characters.

All right, and that looks a little cute.

Still can get a thumb on that, but that works.

Okay, so we still have these debug lines, so let me take those off.

They were defined in the area, I believe.

Let me hit Refresh, okay so lines are gone temporarily because they're

going to come back permanently, When I assign the styling to the area pane.

Okay and we come back.

Okay so I think this page is pretty well done.

But what needs our attention now If we go to images,

let me go ahead and expand this.

Notice how now we've lost our margin.

And we go to Things.

We've lost our margin.

Let's go ahead and make a page specific adjustment to this to account for

the fact that we took away the default margins that were being applied.

So in subjects, Let's go ahead and say that in the images area or

the things area, let's go ahead and put a 15 pixel padding, left and right.

Okay, it slid over a little bit and we can get our padding back on the right.

Same with images, okay?

All right.

So one of the last things I want to do is, we have this navigation.

And we can get to subjects pretty easy.

But this is going to be sort of like our main display we're coming to.

You notice that Brand takes us to our default web application that I'm continue

to leave in here.

What I'd like to do is make Subjects the default page.

So we would fix that by going over to the router and

making home go to the subjects page.

And then I guess I really don't need this second subjects

as long as I update the Nav bar so let me go ahead and delete this.

Go over to the navbar real quick before I forget.

And I want to go home all right.

So now, if I hit Refresh.

Hit Brand, go to Images.

Hit Brand, come back.

Things, Brand, Subjects.

Authentication check, hit the Brand, okay?

So now we have a good default page.

All right, we now have a good canvas to begin work on the next lesson.

That are going to be able to use this information in these display

areas to query the API and

display their view specific information of our things and images, neat.

All right before we quit, I have one last minute visual change to put in place.

This issue was brought to my attention by a student in class who

not only submitted a trouble ticket, but also submitted a solution.

Thank you.

And notice that when we do the Go To the active state is sometimes highlighted.

What the student noticed was when we go to Things or

Images they weren't being highlighted.

And the reason for that is functionally, I needed to null out the ID, so

that when we navigated to an individual image, when we went to Images,

it would go back to the collection state.

Prior to adding the nulling out on the ID,

we would have stayed in that specific image state.

So what the student reported is that we could change our active to a hash.

Telling it what state we want to be active.

And with that simple change, we hit Refresh.

Notice Images is now active.

And if we pick a specific image, that state is also active.

If we go to Things where now Things is active.

And if we go to a specific thing.

Things is still active.

Okay, that's a nice improvement.

Thank you, Corel.

In summary, we styled the subjects page.

We made it so that our areas filled the entire display area in both width,

as well as expanding to the full display height.

Especially on the left side when we had the chance of having either two or

one display areas.

And we used position absolute in order to get our checkbox into a specific position

that we liked.

And then customize the button sizes so they wouldn't eat up as much real estate.

And then after taking away some default Bootstrap styling,

we needed to go back and re-add padding to our Thing and Images pages.

That seemed appropriate, we would like each page to decide for

itself what kind of borders to have.

What's next?

Geolocate subjects.

We now have the ability to express an origin and a distance criteria and

a canvas in which to put our components onto.

Now let's start populating our subjects page with components that can display

a view specific rendering of our subjects.

Nice, nice place to start.

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2018 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play