OSF Dashboard Layout Redesign ---------------------- #### Purpose To convert the current layout structure of the OSF Dashboard into three tabs as shown in the screenshots below. --- #### Definitions: Dashboard: The OSF dashboard page, not to be confused with project overview page. --- #### Requirements: - Add tab navigation style centered at the top - Separate each of the three components into their own tab - Link tabs and add keyboard bindings with arrows - Adjust design of individual tabs and add specific styling - If the window width is bigger than a certain size, stach them together and remove tabs (for better multitasking) - Give users the option to pin a certain tab as default --- #### Proposal Description: - Change the layout of the dashboard to have three separate tabs for Project Organizer, Onboarder and Watchlist - Start thinking about personalization settings and where they live. --- #### User Interface: This is best done with the images below. --- #### Functional Architecture: User will be able to set default panel by pinning it so there needs to be some consideration about where this lives. New table or option to existing table. This is one data point per user, more like a profile setting. --- #### Decision Rationale: To make the dashboard page more intuitive to use and to start thinking about user customization --- #### Milestones & Estimates: This would take one day (~8 hours) to finish - Changing Layout : 3 hours - Backend work for saving the option: 3 hours - Tieing the active tab option to front end: 2 hours - Preparing for PR: 30 minutes --- #### Testing Considerations / Test Cases: The function that saves the pin option can be tested. --- #### Review Team: - Jeff - BrianG - Someone from Community team - Project Managers ### UI Questions --- #### Is your UI responsive? Yes --- #### Do you have a UI message when you have empty items? Not in scope of this proposal --- #### Did you check your UI for different type of text flow? I'll check new additions. --- #### Have you addressed ERROR messages in the UI as well? Yes will address server connection errors when pinning tab. --- #### Have you addressed validation in form inputs? Not in scope of this proposal. --- #### Did you bind Escape and Enter keys to your inputs? Will bind arrow keys left and right to switch between the tabs. --- #### Do you provide feedback to the user if an expected behavior does not happen? Will include it in the pinning option. The switching of panels should not lead to any errors. --- #### Can your temporary elements be conveniently dismissed? There are no temporary elements in this proposal. --- #### Do your UI Components follow the Bootstrap and Style Guide Documentation? Yes --- #### Does your proposal need extensive CSS change? No, some addition of new classes to site.css for the panel --- #### Are you using the OSF color palette? Yes. Blue for underline and otherwise leaving existing functionality. --- #### Is there something in your proposal related to UI that you need help with? No, I've got it covered. --- #### Screenshots Tab detail: ![enter image description here][1] Project Organizer Panel: ![enter image description here][2] Onboarder Panel: ![Quick action full screen][3] Watchlist Panel: ![enter image description here][4] [1]: https://osf.io/9h6dz/?mode=render&action=download [2]: https://osf.io/cs75z/?mode=render&action=download [3]: https://osf.io/xc7sr/?mode=render&action=download [4]: https://osf.io/k4ifw/?mode=render&action=download