Added buttons below map #40
Merged
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
travissouthard
requested changes
May 6, 2023
CHANGELOG.md
Outdated
| @@ -13,6 +13,7 @@ and this project adheres to release number versioning. | |||
| - Added Docker containers with docker-compose [#10](https://github.com/CodeForPhilly/third-places/pull/10) | |||
| - Set up Leaflet React component and boiletplate homepage[#7](https://github.com/CodeForPhilly/third-places/issues/7) | |||
| - Added initial Django models & migration [#21](https://github.com/CodeForPhilly/third-places/pull/21) | |||
| - Added buttons at bottom of Map [#28](https://github.com/CodeForPhilly/third-places/issues/28) | |||
There was a problem hiding this comment.
This will actually be for #40, the link should point to the PR rather than the issue
src/app/src/Map/Map.css
Outdated
Comment on lines
4
to
9
| } | ||
|
|
||
| .button-container { | ||
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| margin-top: 2rem; |
There was a problem hiding this comment.
I played around with the styles locally and to get a style that didn't push the buttons down to a place the user couldn't scroll to since the map would just move, I got this to render like the wireframes:
.leaflet-container-wrapper {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
.leaflet-container {
width: 100vw;
height: 100%;
flex-grow: 1;
}
.button-container {
display: flex;
flex-flow: row nowrap;
justify-content: center;
z-index: 1000;
width: 100vw;
padding: 1rem 0;
background-color: white;
}Examples:
There was a problem hiding this comment.
God bless you flexbox
src/app/src/Map/Map.tsx
Outdated
| </div> | ||
| <div className="button-container"> | ||
| <Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">Near Me</Button> |
There was a problem hiding this comment.
The objects in the style section are all the same and could be refactored out to a const variable and used in each of the style props.
travissouthard
approved these changes
May 6, 2023
Merged
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.
Overview
Give a brief description of the changes
Closes ###
Issue #28
Demo
Testing instructions
Checklist before merge