Fix css issues with fullscreen where bottom bar was hidden #1467
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
OskarDamkjaer
commented
Jul 7, 2021
| @@ -181,12 +181,13 @@ export const StyledStatusBarWrapper = styled.div` | |||
| display: none; | |||
| ` | |||
|
|
|||
| export const StyledStatusBar = styled.div` | |||
| export const StyledStatusBar = styled.div<{ fullscreen?: boolean }>` | |||
There was a problem hiding this comment.
This is the bottom panel used in CypherFrame, when we're showing a graph visualization
OskarDamkjaer
commented
Jul 7, 2021
| export const StyledZoomHolder = styled.div` | ||
| position: absolute; | ||
| export const StyledZoomHolder = styled.div<{ fullscreen: boolean }>` | ||
| position: ${props => (props.fullscreen ? 'fixed' : 'absolute')}; |
There was a problem hiding this comment.
The zoombuttons on the cypherframe
OskarDamkjaer
force-pushed
the
fullscreen_fix
branch
2 times, most recently
from
b9f860c to
b8d9e06
Compare
jharris4
reviewed
Jul 8, 2021
jharris4
reviewed
Jul 8, 2021
| @@ -123,7 +124,6 @@ export const StyledFrameContents = styled.div<FullscreenProps>` | |||
| export const StyledFrameStatusbar = styled.div<FullscreenProps>` | |||
| border-top: ${props => props.theme.inFrameBorder}; | |||
| height: ${dim.frameStatusbarHeight - 1}px; | |||
| ${props => (props.fullscreen ? 'margin-top: -78px;' : '')}; | |||
There was a problem hiding this comment.
NICE if we can get rid of this :-D
|
These changes look good so far, but let's wait for the node properties panel work to progress further before merging this. (cc @jk05 ) |
OskarDamkjaer
force-pushed
the
fullscreen_fix
branch
from
73d426f to
1fc2bde
Compare
jharris4
approved these changes
Aug 9, 2021
OskarDamkjaer
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
To solve the problem of the bottom bar moving of the screen when adding lines to a query in fullscreen a new flexbox was added to give the middle content 100% height and scroll on overflow, taking the available space not used for the editor or the bottom bar. For the main viz though, resizing the container seems to change the size of the nodes, so I've opted to use position fixed for the bottom bar and zoom controls there. Worth noting that the viz bottom bar is probably going away soon as part of our work on node properties. I'm sure there's a cleaner way to structure the css and element tree, so far this is the cleanest I've worked out after too many hours of fiddling.
preview @ http://fullscreen_fix.surge.sh
Fixes #1460
