Section 5 (Lesson 2/8): In this lesson, we’ll design our job search page. We’ll lay out the title and subtitle text, the search UI, and the repeating group that displays the jobs.

You’ll also learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

So we've learned by now that layout is super, super important, and we need to remain consistent with our approach to the layout. So let's just take our time in this lesson, making sure that we have all of the groups on the page, our max widths, our breakpoints, and our elements.

Let's go ahead and create a new page and call that "search." We're going to double-click on the page to bring up the Property Editor. First thing I'll do is change the title to "Search | Workplace." On the Layout tab, I'm going to change it to a column, top to bottom. 1400 px builder width, and the min height will grow as we build.

Next, I'd like to add a navigation bar, so I'm going to scroll down to my reusable elements section, go find the Navbar, click once, drop it on the page. Perfect! Now we need a section group. Remember, we don't add elements to the page itself, we add them to groups and we need a section. I'm going to find myself a Group in containers, click once, drop it on the page. You can see that it's positioned all the way to the top. Let's rename this to "Group Section." On the Layout tab, I'm going to quickly scroll down and just add 80 pixels of margin just so it starts beneath the navbar.

Right, let's configure this. So this Group Section will be a column, no min or max width. I'm going to uncheck fit height to content and just remove the min height in there. I want it to basically fill up the entire page. Then I'm going to add some top and bottom padding of 96 px and 96 px (you may remember this from Section 1, our marketing page), and then left-right padding of 32 px and 32 px. Fantastic. So that's our Group Section.

Now we need to add a container to center-align our design work, so I'm going to grab another Group and drop it inside the Group Section. I'm going to name this "Group Container," and I'm going to set a max width of 1,200 px to remain consistent with our marketing pages, and then I'm going to horizontally align that in the center. On this, I'm also going to uncheck "Fit height to content" and I'll remove the min height and min width because I'm not using them.

Okay, so we can start adding our text elements! The first thing we need to add is this text element, this is a Heading 2. So let's grab some Text under Visual Elements, drop it into Group Container. I'm going to paste the text in, and I'll give you a moment to write this out: "Discover exciting tech jobs at Workplace."

Now we're going to change the style to a h2, and you might be thinking to yourself, surely this is a h1, because every public-facing page needs a h1. I'm selecting h2 because there's quite a lot of text (it's a sentence), and h1 will look too large, but I am going to change the HTML tag for this element to actually be a h1. So you see what I'm doing here: it is a h1 according to the tag, and that's what Google looks at, but the style is the h2, slightly smaller because there's lots of text. So I'm now going to go back to the "HTML tag for this element (SEO)" property on the text element's Appearance tab and make sure it's set to a h1.

Okay, now we need some more text. We need a subtitle. So I'm going to copy the text from the demo app and I'm going to grab a text element and drop it beneath our title. I'm going to paste this in and give you a second to type it out: "We work with cutting edge tech companies to help you discover exciting new career opportunities. Sign up to apply for jobs." I'm going to use a Body Large style for this, and I'm going to set this now to a h2. Second most important text on the page.

Okay, now in our original designs, it did not span edge to edge. It's difficult to read like this. So we're going to add a Group, we're going to group these two text elements together, holding down shift, and then we're going to set a max width. "Group elements in" --> a "Column container," then I'm going to rename this to "Group Title & subtitle." I'm going to bring up my Property Editor and on the Layout tab, I'm going to add some gap spacing of 12 px and more importantly, a max width of 768 px. And that reads far, far better than edge to edge. Now, I'm not using the min height, so I'm just going to remove it.

Back on Group Container, please add some gap spacing on the Layout tab. Apply gap spacing between elements. Let's use 64 px here. Just a creative choice.

Okay, heading to the next section, now we need these three elements (the search input, the term dropdown, and the location dropdown). I'm going to go find myself an Input under Input Forms, drop it on the page. You can see that the gap spacing has taken effect. For the placeholder, we'll type "Search," and that is of type text.

Okay, now I need two dropdowns. So let's grab one dropdown, drop it in, and we're going to name this "Dropdown Term." So we know if it's full time or part time, and while we're here, let's change the choices style to "Dynamic Choices." We're going to select "Term" under Option Sets for type of choices. It's going to be both terms, so "All Term" for the choices source. Then for the option caption, to display the written text, it will be the display: "Current option's Display."

Okay, we need to obviously display these inputs and dropdowns on the same row, so I'm going to select the dropdown and the input, right-click, "Group elements in" --> a "Row container." Let's rename this group to "Group Inputs." On the Layout tab, let's add some gap spacing between them of 20 px on the column and actually on the row, let's do that as well. Let's add 12 px on the row because at mobile phone widths, the design will be stacked in a column. Not using the min height, so I'm going to remove it.

Now, let's just quickly have a look at this Input Search. It's set to 48 px on the Layout tab. Let's change this to 44px. I'm also going to remove the fixed width, remove the min width, and we're going to do the same with the dropdown. Remove fixed width, remove min width, and we want a fixed height of 44px.

Okay, we need another dropdown. Copy and paste. This one will be called "Dropdown Location." And now we need a button to search, so I'm going to go find myself a button and just get it in the group anywhere will do. Let's type "Search." This will be our primary brand button. On the Layout tab, I'm going to remove the fixed width, remove the min width, and set a fix height of, you guessed it, 44 px, and then fit width to content. Okay, now to reposition, let's click "Make last" on Button Search. There it goes. Looking really good!

Please now grab some text for me and just drop it beneath the Search text. We're going to type as a placeholder in the Appearance tab "12 results." On the Layout tab, I'm going to remove the min width and the min height, and I'm going to fit width to content.

Okay, now beneath this text, we have our Repeating Group so let's go grab a Repeating Group and drop it beneath the "12 results" text. We're going to call this "RepeatingGroup Jobs." And if we just work on the design for a second, we can see that we've got some overflow issues here. So let's click on Group Container and please check "Fit height to content." Let's do the same for Group Section, fit height to content.

So we're not going to feed through jobs in this particular lesson, so we're going to keep this more as a placeholder for now. Over in the Appearance tab, I'd like you to change the type of content to "Job," and let's just do a search for jobs as the data source, which will help us with our design work in the next lesson. We can choose to sort the search perhaps by the Created Date where "Descending" is yes, which means the most recent shows at the top. Close that, we'll be adding our constraints soon.

Now I'm going to uncheck "Set fixed number of rows," and for now, I'm going to say I want about 80 pixels of space to work within for the min height of row. Now, we're not going to have any separators because we'll be using a card design, like little strips or card strips, so I'm going to remove the Style of the separators. On the Layout tab, I'm going to remove the min height, and now the Repeating Group is the height. It's 80 pixels tall, like we set in the min height of the row. It's actually 82 px tall just because we have a border. I'm going to remove the min width as well, just getting this nice and prepared for the next lesson, and let's remove the border as well, so on the Appearance tab, scroll down to the bottom, just set it to none and on the roundness, let's add 8 px.

With RepeatingGroup Jobs highlighted, let's also highlight Text 12 results, right-click, "Group elements in" --> a "Column Container." We can name this "Group Content." And we're going to add on the Layout tab some gap spacing of 12 px - maybe add a bit more, 18 px.

Now, let's just review the design very quickly, the completed design on the demo app. This is what we're going to design in the next lesson, but let's just add the "Sponsored post" section, which means we actually need another group that groups together the Group Inputs with the Group Content. It's in a vertical column layout, and then we can set a row layout to the Group Container.

Okay, so I'm going to highlight Group Content (that shows the results with the repeating group) and I'm going to highlight Group Inputs, right-click, "Group elements in" --> a "Column container." I'm going to also name this "Group Content" and let's apply some gap spacing of 32 px here.

So in terms of this sponsored card, let's grab a group for that. Just get it inside this Group Container. This will be called "Group Sponsored" and we're going to actually set a fixed width of this of 300 px. Okay, let's try 300 px by 300 px, so the min height is 300 px. Let's just see the type of groups we have here in the Style dropdown. Let's try Card Large. Yeah, that looks pretty good. So that's got our 12 on the roundness with our border style, and it's got 32 pixels of padding. For now, let's give it a background style of flat color and use our surface color, and then we can see it nicely.

Now we need another container group that contains this Group Sponsored with this group here (the Group Content that's lower in the Elements Tree hierarchy). First thing I'm going to do is double click on the Group Content, head over to the Layout tab and
"Make previous." Then, with Group Content still highlighted, I'm going to hold down shift and also click on Group Sponsored. Now we're going to add a row layout. I'm going to right-click, "Group elements in" --> a "Row container." This will also be called Group Container. I'm going to apply some gap spacing on the column, let's try 32 px here - no, maybe a bit more, maybe 48 px.

The last thing we need to do before the break is just add a footer element down here, please, so let's scroll down all the way down to the reusable element section, click on the Footer once and drop it beneath. And I dropped that into the Group Section but I want it outside the Group Section, so I'm just dragging it outside in the Elements Tree. Then I'm going to click on the Footer because it's at the top, and I'm going to select "Make Last." Perfect! So the Footer has 96 px padding of gap spacing and so does the Navbar, 96 px. Very, very nice.

Fantastic layout work! As I said at the start, it's mega important! If you can't get your layouts correct, your designs will look shambolic. So we've done some fantastic work, when we get back, we're going to actually upload using a CSV file some more dummy data, so more companies, and then we're going to upload some existing jobs I've created, and then we're able to then feed that into our RepeatingGroup Jobs to then give us our display as we would see it as a User. Lots to do, and I'll see you in the next lesson!
​