Refactor CSS and React logic for layout (#1424)

mirror of https://github.com/chanzuckerberg/cellxgene.git synced 2026-10-04 02:18:11 +08:00

* Refactor CSS layout and react logic for layout

Fixes https://github.com/chanzuckerberg/cellxgene/issues/1022

* Menubar should wrap inside middle pane instead of overlapping left
  sidebar when window is scrunched
* cellxgene should have a minimum width of 1240px

1. Replace absolute positioning and dimension calculation with css grid
2. Use flexbox for wrapping menubar buttons

* Middle pane (graph) can calculate its own size
* Removing components calculating their size/position relative to
  eachother increases modularity, decreases use of global variables
* Improved some scrollbar behavior
* Removed responsive reducer, propagating window size to components
  triggers unnecessary events and encourages breaking modularity; doing
  this made some components state agnostic

Reference: https://css-tricks.com/snippets/css/complete-guide-grid/

* Reposition the continuous legend

* Small fixes

* Respond to feedback from @colinmegill

* Respond to feedback from @colinmegill

Add more documentation on the renderGraph method.

This commit is contained in:

Matt Weiden

2020-05-06 13:46:13 -07:00

committed by

GitHub

parent a7d641ea6b

commit 888f730526

30 changed files with 451 additions and 417 deletions

									
										client/src/globals.js
									
		+1
		
												View File
												
				@@ -63,6 +63,7 @@ export const graphWidth = 700;

				export const graphHeight = 700;

				export const scatterplotMarginLeft = 25;

				export const rightSidebarWidth = 365;

				export const leftSidebarWidth = 365;

				export const leftSidebarSectionHeading = {

				  fontSize: 18,