UI Planning #15
Description
The main user interface can be thought of as having two parts:
- a top navbar
- a sidebar with icons that open up drawers
- a main interface that takes up the rest of the screen
Navbar
The navbar displays the logo and navigation links on the left, and the log in button/user dropdown on the right.
Sidebar
The sidebar is a vertical stack of icon buttons that show a tooltip title on hover. When clicked, they open a slide drawer from the left that covers about a 1/3 of the screen, without changing the actual page the user is on.
We can put information that isn't very regularly needed in the sidebar so that it's only a click away yet doesn't take up space from the main dashboard.
Main Dashboard
A DM in combat should see very different things than a player in combat, and likewise for out of combat. Therefore we can think of the main dashboard as always displaying one of 4 different possible layouts:
Player Out of Combat
This is the layout players will see when adventuring, roleplaying, traveling, etc.
Player In Combat
This is the layout players will see when the DM has turned "combat mode" on, i.e. they are actively in an encounter.
DM Out of Combat
This is the layout DM(s) will see when the party is adventuring, roleplaying, traveling, etc.
DM In Combat
This is the layout DM(s) will see when they have turned on "combat mode".
Widgets
Let's call the components that can either be in the Sidebar drawer or Main Dashboard "widgets". These are reusable components that should adapt to the size of the container they are in so that they can be either in the sidebar or main dashboard.
Some widgets can be used for both players and DMs but will have different information/actions available. Some will only make sense for players OR DMs.
Here's a master list of all the widgets we need to develop. They can each have their own issue.