14 update the component rendering to avoid their overlap in reduced screen size mode #16
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
2 tasks
|
Once react version is upgraded to 18 these checks will resolve. PR |
…heir-overlap-in-reduced-screen-size-mode Merging in changes from main
…heir-overlap-in-reduced-screen-size-mode Merging in main after actually pulling it
|
For me this makes the select site text move to a weird location |
Ignore this PR it will need to be updated at the end, once all other PR's are merged. Changing to draft. |
gareth-j
requested changes
Aug 10, 2023
package.json
Outdated
| @@ -4,7 +4,9 @@ | |||
| "version": "0.1.0", | |||
| "private": true, | |||
| "dependencies": { | |||
| "@emotion/styled": "^11.11.0", | |||
There was a problem hiding this comment.
Are we using emotion anywhere?
| @@ -55,7 +56,7 @@ class ObsBox extends React.Component { | |||
| // We only set the title of the graph if there's one site selected | |||
| let title = null; | |||
| const xLabel = "Date"; | |||
| const yLabel = `Concentration${units}`; | |||
| const yLabel = `Concentration <br>${units}`; | |||
There was a problem hiding this comment.
I'm not sure we want a <br> here?
| } | ||
|
|
||
| const availableSpecies = Object.keys(this.props.processedData); | ||
|
|
||
| return ( | ||
| <div className={styles.container}> | ||
| <div className={styles.container} style={{display:'flex'}}> |
There was a problem hiding this comment.
Can the style parameters be added to the CSS instead?
| @@ -48,7 +48,7 @@ class RadioButtons extends React.Component { | |||
| } | |||
|
|
|||
| return ( | |||
| <div className={styles.buttons} onChange={this.onChangeValue}> | |||
| <div className={styles.buttons} onChange={this.onChangeValue} style={{display: "contents"}} > | |||
There was a problem hiding this comment.
Add the style parameters to the CSS file instead?
…heir-overlap-in-reduced-screen-size-mode
SutarPrasad
deleted the
14-update-the-component-rendering-to-avoid-their-overlap-in-reduced-screen-size-mode
branch
2 tasks
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.
This PR involved adjusting the overlap of the plot with a clear button
Secondly, the radio MenuIcon in reduced view was not easily visible as its visualisation came out of the header background.
Radio buttons spacing is also adjusted
Y label didn't show the axis name completely in reduced size mode hence updated that too.