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.

Sign up for GitHub

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

Added buttons below map #40

Merged
merged 5 commits into from
May 6, 2023
Merged

Added buttons below map #40

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
97bd260
Added bootstrap buttons
sodamodo May 6, 2023
d33d5ef
Added bootstrap buttons below map
sodamodo May 6, 2023
bbe2ee4
Removed Alert import
sodamodo May 6, 2023
d8bad57
Changed Map CSS to use flexbox. DRY'd button style
sodamodo May 6, 2023
2ad3851
Updated changelog
sodamodo May 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will actually be for #40, the link should point to the PR rather than the issue


### Changed
- Made Leaflet map element fullscreen and rmeoved title[#27](https://github.com/CodeForPhilly/third-places/issues/27)
Expand Down
1 change: 0 additions & 1 deletion src/app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import './App.css'
import Map from './Map/Map'



function App() {

return (
Expand Down
6 changes: 6 additions & 0 deletions src/app/src/Map/Map.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
.leaflet-container {
width: 100vw;
height: 100vh;
}

.button-container {
padding-left: 1rem;
padding-right: 1rem;
margin-top: 2rem;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
image
image
image

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

God bless you flexbox

}
32 changes: 20 additions & 12 deletions src/app/src/Map/Map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
import './Map.css'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
import 'leaflet/dist/leaflet.css'
import Button from 'react-bootstrap/Button';


function Map() {

return (
<div className="leaflet-container">
<MapContainer center={[39.952584, -75.165222]} zoom={13} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[39.952584, -75.165222]}>
<Popup>
This spots got a good vibe
</Popup>
</Marker>
</MapContainer>
<div className="leaflet-container-wrapper">
<div className="leaflet-container">
<MapContainer center={[39.952584, -75.165222]} zoom={13} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[39.952584, -75.165222]}>
<Popup>
This spots got a good vibe
</Popup>
</Marker>
</MapContainer>
</div>
<div className="button-container">
<Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">Near Me</Button>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

<Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">On the Way To</Button>
<Button style={{backgroundColor:"#ADD8E6", marginLeft: '1rem', marginRight: '1rem'}} variant="primary">Around Destination</Button>
</div>
</div>
)
}

Expand Down