Section 4 (Lesson 2/10): In this lesson, we're creating the layout and foundation of your job dashboard view. We’ll be refactoring some design work we’ve already completed to help with design consistency.

We’ll be covering:

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

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

We're just going to spend a few minutes sorting out the layout for our jobs, and we're going to take a shortcut by simply copying some of the design work we've done from the Settings Group.

Okay, so on the company page, make sure that you can see Group setting (remember to be utilizing your Elements Tree where possible). I'm going to right-click on Group setting, I'm going to say copy, and I'm just going to I'm going to click into the Group Container because that's where I want it to be pasted into. I'm going to choose command+V my Mac, and you can see it's made a copy directly beneath it.

In the Elements Tree, I'm going to use this little eye icon to hide the original Group setting, and then I'm just going to use this label here to change the name from "Group setting (copy)" to "Group jobs" instead. Let's refactor this a bit. "Text Settings" now becomes "Job posts." For the subtitle, we can say "Here are your current jobs." On the Conditional tab, we need to change "Get v from Page URL is settings" to "Get v from page URL is job-posts." We can actually go ahead and delete Group Forms. You can see that this has closed right down now.

For "Here are your current jobs," what I'm going to do is on the Layout tab, I'm just going to check "Fit width to content," and just a little technique to be able to click easily within my Group Header. On the left-hand side, you can see that we have our Group jobs, Group Header, and then our text elements.

We need a button on the right-hand side for Hana to be able to create a job, so grab a button. Just going to drop it inside the header. Anywhere in the header will do. This will say "New job." This will be our primary action. I'm going to remove the fixed width, remove the min width, and make sure that I've got fixed height of 44. And I'm going to check "Fit width to content."

We want this Button New job to be positioned to the right of "Job posts." So with Text Job posts highlighted, you can see that this element has expanded to fill all of the available space, and that will actually push this button all the way to the right-hand side when we group them in a row container. So I'm going to highlight - holding down shift - both Text Job posts with Button New job, right-click, click "Group elements in" --> a "Row container," and you can see that this button is now positioned nicely.

Okay, now for our Table element. Now we need to drop the table element into Group jobs. And what I'm going to do is this, because currently I've just double-clicked to get to Group Header, but use the Elements Tree to navigate to Group jobs. We currently have "Fit height to content" checked which means that it's hugging to the content, so I'm going to add some min height here. Maybe 600 for now, this is temporary. Once I've finished designing my table, then I'll remove the min height, and the Group will be fitting height to the content within. Okay, so Group jobs, row gap, 48.

Now we need a Table element. I'm going to close this down. Quite a fast way to filter these elements is up here in "Search elements." T-a-b for table. Click once, and then make sure it's dropped into the Group jobs. We'll rename this table to "Table jobs." This will span edge to edge, so no fixed width and no min width. Min height will have an arbitrary number here, that's just so we can display some height, but that's okay. Click back in the Appearance tab.

So now it's asking for a type of content, and we don't actually have a type of content for jobs, so that is something we're going to create in the next lesson. But for now, let's just carry on getting some basic design work done. On the Appearance tab for Table jobs, I'm going to change these vertical separators to my border color, and I'm actually going to also change the horizontal separators to the border color as well, just so it's nice and consistent.

Then we're going to add a border style with our border color and a roundness of 8. So these tables are a little bit like repeating groups that we covered in section one, in that you only design the first row, and then Bubble will just repeat the data as many times as we instruct it to.

Over here for Row 0 is for our column headers, so what we're going to do is change the background style to flat color, and then choose our surface color. Then we can neatly label what each column pertains to. On the Layout tab, I'm going to set a fixed height of 32 pixels. Then inside each cell - I've just clicked on the first cell - I'm going to choose left and right padding of 24 and 24. I'm going to do the same for Cell 0B, and I'm going to do the same for Cell 0C.

Once you've done that, click back on Row 1 (Repeating). We're going to set a fixed height of 64. So fairly spacious, but easier to read this data. There'll be no background style. I'm going to set the row count to seven, and you can see that the Group has basically increased in height.

Last thing we'll do before the break is just add some left and right padding of 24 and 24 in all three row 1 cells. I'm going to grab some text and I'm just going to drop the text between the Table element and the subtitle and then just type "12 results." And this is just placeholder text, so when we do come to filter results, this will be dynamic. It will say 1 result found, 2 results, 3 results, etc. On the Layout tab, I'm going to to move the min height and the min width.

Something else we need is a way to be able to filter this Table jobs, so for that, I'm going to use an input. I'm going to drop the input between the 12 results and the subtitle. We'll call this "Input filter," and on the Layout tab, we're going to just let that stretch edge to edge, that's absolutely fine. We're going to remove the min width and set the height to 44.

Okay, so we need to be slightly better at spacing here. Let's change the row gap from 48 to 32 in Group jobs. Okay, and then let's grab the Table element. (Notice where my mouse is hovering, on the top left-hand corner. That's how we select the table. You can also select it through your Elements Tree.) Then I'm going to select Text 12 Results, and I'm going to right-click, "Group elements in" --> a "Column container." This is going to be called "Group Table," and I'm going to add some gap spacing of 20, and that spacing looks really nice, actually.

Let's change the placeholder text in Input filter to "Search for a job." And I think we've laid the foundation here to be able to then create our new data type in the next session and start creating data! I'll see you in the next one.