unimore/pds-2021-g2-nest
unimore/pds-2021-g2-nest
1
Fork 0
mirror of https://github.com/pds-nest/nest.git synced 2024-11-25 22:44:19 +00:00
Code Activity

🚧 Style BoxConditionMap

Browse source
This commit is contained in:
Stefano Pigozzi 2021-05-01 02:33:46 +02:00
parent 36b652eb2f
commit 1b08a46ea6
Signed by untrusted user who does not match committer: steffo
GPG key ID: 6965406171929D01
2 changed files with 24 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
code/frontend/src/components/interactive/BoxConditionMap.js
View file

@ -5,10 +5,14 @@ import { faMapPin, faPlus } from "@fortawesome/free-solid-svg-icons"
import FormInline from "../base/FormInline" import FormInline from "../base/FormInline"
import Style from "./BoxConditionMap.module.css" import Style from "./BoxConditionMap.module.css"
import ButtonIconOnly from "../base/ButtonIconOnly" import ButtonIconOnly from "../base/ButtonIconOnly"
import {MapContainer, TileLayer} from "react-leaflet" import { MapContainer, Marker, TileLayer } from "react-leaflet"
import useRepositoryEditor from "../../hooks/useRepositoryEditor" import useRepositoryEditor from "../../hooks/useRepositoryEditor"
const STARTING_POSITION = [41.89309, 12.48289]
const STARTING_ZOOM = 3
/** /**
* A {@link BoxFull} that allows the user to select a geographical location to use to filter tweets. * A {@link BoxFull} that allows the user to select a geographical location to use to filter tweets.
* *
@ -52,21 +56,22 @@ export default function BoxConditionMap({ ...props }) {
} }
return ( return (
<BoxFull header={<span>Search by <FontAwesomeIcon icon={faMapPin}/> zone</span>} {...props}> <BoxFull
<MapContainer center={[41.89309, 12.48289]} zoom={3} style={{"height": "400px"}}> header={<span>Search by <FontAwesomeIcon icon={faMapPin}/> zone</span>}
childrenClassName={Style.BoxConditionMapContents}
{...props}
>
<MapContainer
center={STARTING_POSITION}
zoom={STARTING_ZOOM}
className={Style.MapContainer}
>
<TileLayer <TileLayer
attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors' attribution='(c) <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/> />
<Marker draggable={true} position={STARTING_POSITION}/>
</MapContainer> </MapContainer>
<FormInline>
<ButtonIconOnly
className={Style.Button}
icon={faPlus}
color={"Green"}
onClick={onButtonClick}
/>
</FormInline>
</BoxFull> </BoxFull>
) )
} }

12
code/frontend/src/components/interactive/BoxConditionMap.module.css
View file

@ -1,7 +1,11 @@
.Input { .BoxConditionMapContents {
flex-shrink: 1; display: flex;
flex-direction: column;
padding: 0;
} }
.Button { .MapContainer {
flex-grow: 1;
height: 300px;
border-radius: 0 0 25px 25px;
} }