Hubs and panels

Most pages in the hub are built from panels you can move, resize in both directions, fold, hide and bring back.

What this is

A hub page is a page made of panels. Each panel answers one question, such as what is on today, who is waiting on a reply, or what work you could pick up.

Panels behave like windows. You move them, you set how wide and how tall they are, and you put the ones you do not want away.

There is no mode to enter first. A panel is movable whenever you press and hold it, and resizable whenever you reach for its edge.

You arrange a hub page yourself. Your arrangement is saved to your account, so the same page looks the same on your laptop and on your phone.

The pages you can arrange are the Dashboard, a place hub, the Global Hub, Explore, Events, Groups, People, Gigs, Voice, Calendar, Profile, Flow Planning, Support, a group's About tab, a project's About tab, and a group's Treasury.

What you see

A hub page has a greeting row at the top and then up to three columns beneath it.

Some panels sit beside the greeting. Some sit in a narrow left column. Most sit in the wide middle column. The rest sit in a narrow right column.

The columns sit on a grid. A panel takes a whole number of columns across and a whole number of rows down, so nothing ever lands half way.

Every panel carries two small chevrons, and they do different things.

One folds the panel down to its heading and brings it back. The panel keeps its place in the page and loses only its body.

The other sits in the middle of the panel's bottom edge. It grows a panel of middling height to the tallest it goes, and returns it to the height it had. This one appears only while the panel is at that middling height, or once it has been grown.

Each panel also carries its own small menu, beside the fold chevron. It holds the commands that are neither a drag nor a resize: move the panel up, move it down, send it to another column, and hide it.

Bring your pointer onto a panel and two more things appear: that menu, and three grips you can drag. One grip sits on the panel's right edge, one along its bottom, and one at its bottom right corner. On a touch screen, where there is nothing to hover with, they are there all the time.

The page header carries two controls of its own. Add widget lists the panels you have put away. Reset layout puts the page back the way it started.

What you can do here

• Drag a panel from anywhere on it. See Loosen a panel and drag it from anywhere.
• Pull an edge or a corner to resize. See Resize a panel by dragging its edge.
• Move a panel with the keyboard. See Move a panel without dragging it.
• Take a panel to full height and back. See Grow a panel to full height.
• Fold a panel without putting it away. See Fold a panel down to its heading.
• Put a panel away. See Hide a panel.
• Bring a hidden panel back. See Bring a hidden panel back.
• Undo every change you have made to a page. See Put a page back the way it started.
• Fold a whole section of the left menu shut. See Fold a menu section shut.

How to

Loosen a panel and drag it from anywhere

1. Press and hold on an empty part of the panel, away from any button, link or list.
2. Hold for about half a second. The panel lifts slightly and its border firms up. That means it is loose.
3. Drag it where you want it. The other panels move out of the way as you go.
4. Let go.

You can drop a panel into a different column as well as above or below another one.

A quick tap does nothing, and neither does a press that starts on a button, a link, a box you can type in, or a list you can scroll. Those still do what they always do.

Press the Escape key while dragging to abandon the move and put the panel back.

Resize a panel by dragging its edge

1. Put your pointer on the panel's right edge to change its width, its bottom edge to change its height, or its bottom right corner to change both.
2. Press and drag. An outline shows the size you would get if you let go now. The panel itself does not move until then.
3. Let go. The panel snaps to the nearest whole column and row.

Press the Escape key while dragging to abandon the resize.

The grips take keyboard input too. Move focus to a grip and press the arrow keys to step one column or one row at a time.

Some panels will not go below a certain height. A panel whose body is a picture, such as a globe, a chart or a month grid, stops one or two rows above the shortest size, because there would be no picture left to look at.

Move a panel without dragging it

1. Move focus to the panel's menu and open it.
2. Choose Move up or Move down to shift the panel one place inside its column.
3. Choose one of the Move to entries to send it to a different column instead.

A panel already at the top of its column cannot move up, and one at the bottom cannot move down. Those commands are there and greyed out, so the ends of a column are visible rather than surprising.

Grow a panel to full height

1. Find the chevron in the middle of the panel's bottom edge. It appears when the panel is at a middling height.
2. Press it. The panel goes to the tallest height it has.
3. Press it again. The panel returns to the height it came from.

This is not the same as folding. Folding takes the body away. Growing gives the body more room.

Fold a panel down to its heading

1. Find the fold chevron at the top right of the panel.
2. Press it. The panel folds down to its heading and the body disappears.
3. Press it again to open the panel back up.

Hide a panel

1. Open the panel's own menu.
2. Choose Hide, followed by the panel's name.

The panel leaves the page at once and joins the Add widget list in the page header.

Bring a hidden panel back

1. Press Add widget in the page header. The number beside it is how many panels are put away.
2. Read the list. Each entry gives the panel's name and one line about what it shows you.
3. Press the one you want. It lands at the end of its usual column.

If every panel is already on the page, the list reads that there is nothing left to add.

Put a page back the way it started

1. Press Reset layout in the page header.
2. Press the one command inside it, which names what it is about to do.

The page returns to the arrangement it had before you ever touched it, heights included. Reset asks this way because it is the one control here that throws work away.

Fold a menu section shut

1. Look at the menu down the left side of the screen.
2. Press the heading of a section, such as My Groups.
3. The section folds shut. Press the heading again to open it.

Your browser remembers which sections you folded. This one is per browser, not per account.

What changes for you

Every change you make is saved for you. There is nothing to confirm and nothing to close, so a panel you move stays moved even if you walk away from the page.

Changes you make in quick succession are saved together, a moment after the last of them. If a save does not go through, the page goes back to where that run of changes started and tells you so.

A panel you hide is hidden only for you. Nobody else's page changes.

Some panels start folded, so the page opens shorter. Unfold one and it stays unfolded for you.

Some pages show a panel only when they have something to put in it. The Global Hub does not show the panel that describes where a place sits, because the Global Hub is not one place.

A panel shows as many rows as its height allows and then scrolls inside itself. Scrolling to the bottom of a panel loads more items into that same panel. The page behind it does not move.

Every size is its own view. A panel does not have a big look and a small look. It has a look for the box it is in, and the same rules decide it for every panel, so two panels the same size look like they were made together.

What changes as you shrink a panel: it shows fewer rows, then it drops the muted second line under each row, then it drops the faces, then it drops the controls beside its heading. Which of those go depends on which way you shrank it. Taking width away takes the faces. Taking height away takes the second line. A half-width panel four rows tall keeps both.

At the shortest height a panel stops being a list at all. It tells you how many there are and shows you the next one. That is the whole panel, and it is meant to be: one row of height is one line of room. A panel with nothing worth saying in one line does not offer that height, so you cannot drag it there.

If you have asked your device to reduce motion, panels still move out of the way as you drag, but they arrive at once instead of sliding.

When we add a new panel to a page, it appears for everybody, including people who arranged that page a year ago. When we retire one, it disappears and leaves no gap. Your own widths and heights survive both.

Where this connects

• Feeds and views explains why a list stays inside its panel, and how height changes what it shows.
• Dashboard is the page most people arrange first.
• Glossary defines panel and hub page.