a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

colour inline map switch mockup

Browse Source
This commit is contained in:
Mateusz Konieczny 2022-11-29 12:08:12 +01:00
parent c036de76b9
commit 47014c1995
2 changed files with 35 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
app/src/frontend/building/data-containers/map-switcher-inline.css Normal file
View File

@ -0,0 +1,33 @@
.map-theme {
filter: grayscale(100%) invert(1);
}
.map-theme {
filter: none;
}
.map-switcher-inline {
border-radius: 4px;
}
.map-switcher-inline .btn {
background: #FFC0CB;
margin: 0;
min-width: 280px;
}
.map-switcher-inline.night .btn {
background: #FFC0CB;
color: #fff;
background-color: #343a40;
border-color: #ff6065;
}
.map-switcher-inline.night .btn:hover {
color: #343a40;
background-color: transparent;
background-image: none;
border-color: #ff6065;
}
@media (max-width: 990px){
.map-switcher-inline {
visibility: hidden;
}
}

3
app/src/frontend/building/data-containers/planning.tsx
View File

@ -1,5 +1,6 @@
import React, { Fragment } from 'react';
import './map-switcher-inline.css'; // import in a proper place
import { Link } from 'react-router-dom';
import InfoBox from '../../components/info-box';
import CheckboxDataEntry from '../data-components/checkbox-data-entry';
@ -118,7 +119,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
/>
</DataEntryGroup>
<DataEntryGroup name="Possible future applications (crowdsourced data)" collapsed={true} >
<form className={`flood-switcher-inline`}>
<form className={`map-switcher-inline`}>
<button className="btn btn-outline btn-outline-dark"
type="submit">
Click to see the data mapped