Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to load the resource details as a side panel on result selection #2617

bogdanromanx opened this issue Jul 16, 2021 · 1 comment · Fixed by BlueBrain/nexus-web#979


Copy link

bogdanromanx commented Jul 16, 2021

Users want to easily navigate the resources present in the table and switch between results. This should also work in other parts of the application, in the same way: Studios, Admin, Workflows, etc.

Acceptance Criteria:

  • The user clicks on a row of the table which opens the resource details view as a side panel
  • The resource details view will slide from the right side of the screen and overlay the screen (but not the app header)
  • The side panel should occupy no more than 60% of the screen on desktop screens, the minimal size is 40% of the screen (feel free to try out other values)
    • As an example, look at the Zenhub side panel (when opening an issue on the board page)
  • When clicking outside of the side panel but not on another row, the side panel closes.
  • When clicking on another row of the table, the side pannel updates with the new resource details view.
    • Selecting a row with the selection icon on the left side of the table will not open the side panel.
  • When clicking on the close button at the upper right corner of the side panel, the side panel closes.

Not in scope:

  • redesign of the resource view
  • opening the resource view by itself is not a side panel

Interactive mocks: to check sliding behavior


@bogdanromanx bogdanromanx changed the title Ability to load the resource details window on result selection Ability to load the resource details as a side panel on result selection Jul 28, 2021
@adulbrich adulbrich added this to the v1.6.0-M4 milestone Aug 18, 2021
@BlueBrain BlueBrain deleted a comment from dhaneshnm Aug 18, 2021
@BlueBrain BlueBrain deleted a comment from dhaneshnm Aug 18, 2021
@adulbrich adulbrich modified the milestones: v1.6.0-M4, v1.7.0 Sep 1, 2021
@adulbrich adulbrich modified the milestones: v1.7.0, v1.7.0-M1 Sep 22, 2021
Copy link

Responsive size side panel

Antd defines some breakpoints, i.e. widths which we can use to determine how a responsive layout behaves for different screen sizes. We'll use these to determine the width of the side panel such that is 100% width for smaller screens and 60% for larger screens.

Antd breakpoints and less variables from default.less

// Media queries breakpoints
// @screen-xs and @screen-xs-min is not used in Grid
// smallest break point is @screen-md
@screen-xs: 480px;
@screen-xs-min: @screen-xs;
// 👆 Extra small screen / phone

// 👇 Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

// Medium screen / desktop
@screen-md: 768px;
@screen-md-min: @screen-md;

// Large screen / wide desktop
@screen-lg: 992px;
@screen-lg-min: @screen-lg;

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

Successfully merging a pull request may close this issue.

4 participants