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

More UI Tweaks

Browse Source 
Mainly to improve consistency and readability across all categories/pages
Discussed in meeting with Polly 16/05
This commit is contained in:
Mike Simpson 2023-05-16 17:08:21 +01:00
parent f43e5f60fe
commit d14dea3d1a
17 changed files with 788 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/frontend/building/data-components/data-entry-group.css
View File

@ -3,6 +3,8 @@
position: relative; position: relative;
font-size: 1.1rem; font-size: 1.1rem;
font-weight: 410; font-weight: 410;
padding-top: 3px;
padding-bottom: 3px;
} }
.data-entry-group-header .data-entry-group-title { .data-entry-group-header .data-entry-group-title {
padding-left: 0.6rem; padding-left: 0.6rem;

2
app/src/frontend/building/data-container.css
View File

@ -1,7 +1,7 @@
.edit-bar { .edit-bar {
position: sticky; position: sticky;
top: 53px; /* match section-header height */ top: 53px; /* match section-header height */
padding: 12px 0; /* match info-container-inner margin-top*/ padding: 3px 0 0 0; /* match info-container-inner margin-top*/
width: 100%; width: 100%;
background-color: white; background-color: white;
z-index: 1000; z-index: 1000;

2
app/src/frontend/building/data-container.tsx
View File

@ -413,7 +413,9 @@ const withCopyEdit: (wc: React.ComponentType<CategoryViewProps>) => DataContaine
</button> : </button> :
null null
} }
<hr/>
</div> </div>
} }
</div> </div>
: null : null

10
app/src/frontend/building/data-containers/age.tsx
View File

@ -47,7 +47,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
){ ){
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Building Age" collapsed={false} > <DataEntryGroup name="Building Age">
<YearDataEntry <YearDataEntry
year={props.building.date_year} year={props.building.date_year}
upper={props.building.date_upper} upper={props.building.date_upper}
@ -140,7 +140,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
<button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> <button className={`map-switcher-inline ${historicData}-state btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'} {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button> </button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}> <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane> <DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label> <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow> <FieldRow>
@ -261,7 +261,7 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
}; };
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Building Age" collapsed={true} > <DataEntryGroup name="Building Age">
<YearDataEntry <YearDataEntry
year={props.building.date_year} year={props.building.date_year}
upper={props.building.date_upper} upper={props.building.date_upper}
@ -411,11 +411,11 @@ const AgeView: React.FunctionComponent<CategoryViewProps> = (props) => {
mode='view' mode='view'
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Lifespan and Site History" collapsed={true} > <DataEntryGroup name="Lifespan and Site History">
<button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}> <button className={`map-switcher-inline ${historicData} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={historicDataSwitchOnClick}>
{(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'} {(historicData === 'enabled')?'Click here to hide historical maps':'Click here to show historical maps'}
</button> </button>
<DataEntryGroup collapsed={false} name="Constructions and demolitions on this site" showCount={false}> <DataEntryGroup name="Constructions and demolitions on this site" showCount={false}>
<DynamicsBuildingPane> <DynamicsBuildingPane>
<label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label> <label>Current building (age data <Link to={ageLinkUrl}>editable here</Link>)</label>
<FieldRow> <FieldRow>

4
app/src/frontend/building/data-containers/community.tsx
View File

@ -40,7 +40,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences(); const { darkLightTheme } = useDisplayPreferences();
const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x); const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x);
return <> return <>
<DataEntryGroup name="Community views on building types" collapsed={false} > <DataEntryGroup name="Community views on building types">
<InfoBox> <InfoBox>
Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings. Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings.
</InfoBox> </InfoBox>
@ -151,7 +151,7 @@ const CommunityView: React.FunctionComponent<CategoryViewProps> = (props) => {
</div> </div>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Building use for community activities" collapsed={false} > <DataEntryGroup name="Building use for community activities">
<InfoBox> <InfoBox>
Here we are collecting information on the location of buildings used for community activities so we can track loss of/additions to community space over time Here we are collecting information on the location of buildings used for community activities so we can track loss of/additions to community space over time
</InfoBox> </InfoBox>

4
app/src/frontend/building/data-containers/construction.tsx
View File

@ -38,7 +38,7 @@ const RoofCoveringOptions = [
const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => { const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Materials" collapsed={false}> <DataEntryGroup name="Materials">
<SelectDataEntry <SelectDataEntry
title={dataFields.construction_core_material.title} title={dataFields.construction_core_material.title}
slug="construction_core_material" slug="construction_core_material"
@ -87,7 +87,7 @@ const ConstructionView: React.FunctionComponent<CategoryViewProps> = (props) =>
verified_count={props.building.verified.construction_roof_covering} verified_count={props.building.verified.construction_roof_covering}
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Construction Sectors" collapsed={false}> <DataEntryGroup name="Construction Sectors">
<DataEntry <DataEntry
title="Construction system type" title="Construction system type"
slug="" slug=""

22
app/src/frontend/building/data-containers/location.tsx
View File

@ -16,6 +16,8 @@ const locationNumberPattern = "[1-9]\\d*[a-z]?(-([1-9]\\d*))?"; ///[1-9]\d*[a-z]
const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => ( const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntryGroup name="Address Data">
<DataEntry <DataEntry
title={dataFields.location_name.title} title={dataFields.location_name.title}
slug="location_name" slug="location_name"
@ -40,9 +42,24 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
slug="" slug=""
value="" value=""
mode='view' mode='view'
tooltip="Not yet activated.<br><br>For security reasons, we do not allow the use of free text boxes and are currently looking into alternative ways to collect this data."
/>
<Verification
slug="location_name"
allow_verify={props.user !== undefined && props.building.location_name !== null && !props.edited}
onVerify={props.onVerify}
user_verified={props.user_verified.hasOwnProperty("location_name")}
user_verified_as={props.user_verified.location_name}
verified_count={props.building.verified.location_name}
/>
<DataEntry
title="Building Name Source"
slug=""
value=""
mode='view'
tooltip="Coming Soon" tooltip="Coming Soon"
/> />
<DataEntryGroup name="Address" collapsed={false}> <hr/>
<PatternDataEntry <PatternDataEntry
title={dataFields.location_number.title} title={dataFields.location_number.title}
slug="location_number" slug="location_number"
@ -138,7 +155,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
tooltip="Coming Soon" tooltip="Coming Soon"
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Other Location Data" collapsed={false}> <DataEntryGroup name="Property/Footprint IDs and Coordinate Data">
<DataEntry <DataEntry
title={dataFields.ref_toid.title} title={dataFields.ref_toid.title}
slug="ref_toid" slug="ref_toid"
@ -147,6 +164,7 @@ const LocationView: React.FunctionComponent<CategoryViewProps> = (props) => (
copy={props.copy} copy={props.copy}
tooltip={dataFields.ref_toid.tooltip} tooltip={dataFields.ref_toid.tooltip}
onChange={props.onChange} onChange={props.onChange}
disabled={true}
/> />
<UPRNsDataEntry <UPRNsDataEntry
title={dataFields.uprns.title} title={dataFields.uprns.title}

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

@ -66,7 +66,7 @@ const PlanningView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Planning application information" collapsed={true} > <DataEntryGroup name="Planning application information" collapsed={true} >
<DataEntryGroup name="Current/active applications (official data)" collapsed={false} > <DataEntryGroup name="Current/active applications (official data)">
<InfoBox> <InfoBox>
This section provides data on active applications. We define these as applications with any activity in the last year. This section provides data on active applications. We define these as applications with any activity in the last year.
<br /> <br />

190
app/src/frontend/building/data-containers/size.tsx
View File

@ -16,35 +16,7 @@ import InfoBox from '../../components/info-box';
*/ */
const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => ( const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntryGroup name="Plot Size"> <DataEntryGroup name="Number of floors/storeys">
<NumericDataEntry
title={dataFields.size_plot_area_total.title}
slug="size_plot_area_total"
mode='view'
step={0.1}
min={0}
/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Plot dimensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Plot geometry link"
slug=""
value=""
mode='view'
/>
</DataEntryGroup>
<DataEntryGroup name="Floors">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_core.title} title={dataFields.size_storeys_core.title}
slug="size_storeys_core" slug="size_storeys_core"
@ -64,7 +36,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_core} user_verified_as={props.user_verified.size_storeys_core}
verified_count={props.building.verified.size_storeys_core} verified_count={props.building.verified.size_storeys_core}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_attic.title} title={dataFields.size_storeys_attic.title}
slug="size_storeys_attic" slug="size_storeys_attic"
@ -84,7 +55,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_attic} user_verified_as={props.user_verified.size_storeys_attic}
verified_count={props.building.verified.size_storeys_attic} verified_count={props.building.verified.size_storeys_attic}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_storeys_basement.title} title={dataFields.size_storeys_basement.title}
slug="size_storeys_basement" slug="size_storeys_basement"
@ -104,9 +74,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_storeys_basement} user_verified_as={props.user_verified.size_storeys_basement}
verified_count={props.building.verified.size_storeys_basement} verified_count={props.building.verified.size_storeys_basement}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Height" collapsed={false}> <DataEntryGroup name="Building height data">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_height_apex.title} title={dataFields.size_height_apex.title}
slug="size_height_apex" slug="size_height_apex"
@ -125,7 +108,21 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_height_apex} user_verified_as={props.user_verified.size_height_apex}
verified_count={props.building.verified.size_height_apex} verified_count={props.building.verified.size_height_apex}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<NumericDataEntry <NumericDataEntry
title={dataFields.size_height_eaves.title} title={dataFields.size_height_eaves.title}
slug="size_height_eaves" slug="size_height_eaves"
@ -137,8 +134,22 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
step={0.1} step={0.1}
min={0} min={0}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Floor area"> <DataEntryGroup name="Floor area data">
<NumericDataEntry <NumericDataEntry
title={dataFields.size_floor_area_ground.title} title={dataFields.size_floor_area_ground.title}
slug="size_floor_area_ground" slug="size_floor_area_ground"
@ -157,7 +168,6 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_floor_area_ground} user_verified_as={props.user_verified.size_floor_area_ground}
verified_count={props.building.verified.size_floor_area_ground} verified_count={props.building.verified.size_floor_area_ground}
/> />
<NumericDataEntry <NumericDataEntry
title={dataFields.size_floor_area_total.title} title={dataFields.size_floor_area_total.title}
slug="size_floor_area_total" slug="size_floor_area_total"
@ -176,8 +186,102 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_floor_area_total} user_verified_as={props.user_verified.size_floor_area_total}
verified_count={props.building.verified.size_floor_area_total} verified_count={props.building.verified.size_floor_area_total}
/> />
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Plot size data">
<NumericDataEntry
title={dataFields.size_plot_area_total.title}
slug="size_plot_area_total"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<NumericDataEntry
title={dataFields.size_far_ratio.title}
slug="size_far_ratio"
mode='view'
step={0.1}
min={0}
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<DataEntry
title="Plot dimensions"
slug=""
value=""
mode='view'
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<DataEntry
title="Land parcel geometry link"
slug=""
value=""
mode='view'
tooltip='INSPIRE Polygons'
/>
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<NumericDataEntry <NumericDataEntry
title={dataFields.size_width_frontage.title} title={dataFields.size_width_frontage.title}
slug="size_width_frontage" slug="size_width_frontage"
@ -196,13 +300,21 @@ const SizeView: React.FunctionComponent<CategoryViewProps> = (props) => (
user_verified_as={props.user_verified.size_width_frontage} user_verified_as={props.user_verified.size_width_frontage}
verified_count={props.building.verified.size_width_frontage} verified_count={props.building.verified.size_width_frontage}
/> />
<DataEntry <DataEntry
title="Total opening area" title="Source type"
slug="" slug=""
value="" value=""
mode='view' mode='view'
tooltip="Coming Soon"
/> />
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
</Fragment> </Fragment>
); );
const SizeContainer = withCopyEdit(SizeView); const SizeContainer = withCopyEdit(SizeView);

9
app/src/frontend/building/data-containers/streetscape.tsx
View File

@ -7,12 +7,14 @@ import NumericDataEntry from '../data-components/numeric-data-entry';
import withCopyEdit from '../data-container'; import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
/** /**
* Streetscape view/edit section * Streetscape view/edit section
*/ */
const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => ( const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
<Fragment> <Fragment>
<DataEntryGroup name="Does the building have a garden(s)?">
<DataEntry <DataEntry
title="Does the building have a front garden?" title="Does the building have a front garden?"
slug="" slug=""
@ -25,6 +27,8 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
value="" value=""
mode='view' mode='view'
/> />
</DataEntryGroup>
<DataEntryGroup name="Street/pavement properties">
<DataEntry <DataEntry
title="Street width" title="Street width"
slug="" slug=""
@ -43,8 +47,10 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
value="" value=""
mode='view' mode='view'
/> />
</DataEntryGroup>
<DataEntryGroup name="Access to green space">
<DataEntry <DataEntry
title="Distance from Public Green Space" title="Distance from public green space"
slug="" slug=""
value="" value=""
mode='view' mode='view'
@ -55,6 +61,7 @@ const StreetscapeView: React.FunctionComponent<CategoryViewProps> = (props) => (
value="" value=""
mode='view' mode='view'
/> />
</DataEntryGroup>
</Fragment> </Fragment>
); );
const StreetscapeContainer = withCopyEdit(StreetscapeView); const StreetscapeContainer = withCopyEdit(StreetscapeView);

8
app/src/frontend/building/data-containers/sustainability.tsx
View File

@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
import InfoBox from '../../components/info-box'; import InfoBox from '../../components/info-box';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import { DataEntryGroup } from '../data-components/data-entry-group';
const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"]; const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"];
const BreeamRatingOptions = [ const BreeamRatingOptions = [
@ -25,6 +26,7 @@ const BreeamRatingOptions = [
const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) => { const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Energy rating data">
<SelectDataEntry <SelectDataEntry
title={dataFields.sust_breeam_rating.title} title={dataFields.sust_breeam_rating.title}
slug="sust_breeam_rating" slug="sust_breeam_rating"
@ -74,7 +76,8 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/> />
</DataEntryGroup>
<DataEntryGroup name="Retrofit Data">
<NumericDataEntry <NumericDataEntry
title={dataFields.sust_retrofit_date.title} title={dataFields.sust_retrofit_date.title}
slug="sust_retrofit_date" slug="sust_retrofit_date"
@ -115,12 +118,15 @@ const SustainabilityView: React.FunctionComponent<CategoryViewProps> = (props) =
value="" value=""
mode='view' mode='view'
/> />
</DataEntryGroup>
<DataEntryGroup name="Other sustainability features">
<DataEntry <DataEntry
title="Green Walls / Green Roof" title="Green Walls / Green Roof"
slug="" slug=""
value="" value=""
mode='view' mode='view'
/> />
</DataEntryGroup>
</Fragment> </Fragment>
); );
}; };

10
app/src/frontend/building/data-containers/team.tsx
View File

@ -21,6 +21,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
const currentBuildingConstructionYear = building.date_year || undefined; const currentBuildingConstructionYear = building.date_year || undefined;
return ( return (
<form> <form>
<DataEntryGroup name="Dates of construction/extension">
<NumericDataEntry <NumericDataEntry
slug='date_year' slug='date_year'
title={dataFields.date_year.title} title={dataFields.date_year.title}
@ -74,6 +75,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
/> />
</> </>
) : (null)} ) : (null)}
</DataEntryGroup>
<DataEntryGroup name="Land ownership data">
<MultiDataEntry <MultiDataEntry
title={dataFields.landowner.title} title={dataFields.landowner.title}
slug="landowner" slug="landowner"
@ -105,6 +108,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={true} isUrl={true}
/> />
</DataEntryGroup>
<DataEntryGroup name="Developer data">
<SelectDataEntry <SelectDataEntry
slug='developer_type' slug='developer_type'
title={dataFields.developer_type.title} title={dataFields.developer_type.title}
@ -153,6 +158,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={true} isUrl={true}
/> />
</DataEntryGroup>
<DataEntryGroup name="Designer data">
<MultiDataEntry <MultiDataEntry
title={dataFields.designers.title} title={dataFields.designers.title}
slug="designers" slug="designers"
@ -243,6 +250,8 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
</> </>
) : (null) ) : (null)
} }
</DataEntryGroup>
<DataEntryGroup name="Builder data">
<MultiDataEntry <MultiDataEntry
title={dataFields.builder.title} title={dataFields.builder.title}
slug="builder" slug="builder"
@ -272,6 +281,7 @@ const TeamView: React.FunctionComponent<CategoryViewProps> = (props) => {
editableEntries={true} editableEntries={true}
isUrl={true} isUrl={true}
/> />
</DataEntryGroup>
</form> </form>
); );
}; };

34
app/src/frontend/building/data-containers/type.tsx
View File

@ -9,6 +9,7 @@ import withCopyEdit from '../data-container';
import { CategoryViewProps } from './category-view-props'; import { CategoryViewProps } from './category-view-props';
import InfoBox from '../../components/info-box'; import InfoBox from '../../components/info-box';
import { DataEntryGroup } from '../data-components/data-entry-group';
const AttachmentFormOptions = [ const AttachmentFormOptions = [
"Detached", "Detached",
@ -23,6 +24,7 @@ const AttachmentFormOptions = [
const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => { const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Adjacency and Building Use Data">
<SelectDataEntry <SelectDataEntry
title={dataFields.building_attachment_form.title} title={dataFields.building_attachment_form.title}
slug="building_attachment_form" slug="building_attachment_form"
@ -41,6 +43,21 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.building_attachment_form} user_verified_as={props.user_verified.building_attachment_form}
verified_count={props.building.verified.building_attachment_form} verified_count={props.building.verified.building_attachment_form}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<hr/>
<DataEntry <DataEntry
title={dataFields.original_building_use.title} title={dataFields.original_building_use.title}
slug="original_building_use" // doesn't exist in database yet slug="original_building_use" // doesn't exist in database yet
@ -59,6 +76,22 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.building_attachment_form} user_verified_as={props.user_verified.building_attachment_form}
verified_count={props.building.verified.building_attachment_form} verified_count={props.building.verified.building_attachment_form}
/> />
<DataEntry
title="Source type"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
<DataEntry
title="Source link"
slug=""
value=""
mode='view'
tooltip="Coming Soon"
/>
</DataEntryGroup>
<DataEntryGroup name="Building Typology and Classification Data">
<DataEntry <DataEntry
title="Local typology/architectural style" title="Local typology/architectural style"
slug="" slug=""
@ -115,6 +148,7 @@ const TypeView: React.FunctionComponent<CategoryViewProps> = (props) => {
copy={props.copy} copy={props.copy}
onChange={props.onChange} onChange={props.onChange}
/> */} /> */}
</DataEntryGroup>
</Fragment> </Fragment>
); );
}; };

32
app/src/frontend/building/data-containers/use.tsx
View File

@ -25,10 +25,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
const { darkLightTheme } = useDisplayPreferences(); const { darkLightTheme } = useDisplayPreferences();
return ( return (
<Fragment> <Fragment>
<DataEntryGroup name="Domestic or non-domestic use" collapsed={false}> <DataEntryGroup name="Domestic/non-domestic use data">
<InfoBox msg="93% of properties in UK are dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?"></InfoBox> <div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
<i>
93% of properties in UK are residential dwellings so we have set 'residential' as the default value. Can you help us identify non-residential and mixed use buildings (and verify residential buildings too)?
</i>
</div>
<button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}> <button className={`map-switcher-inline ${props.mapColourScale == "is_domestic" ? "enabled-state" : "disabled-state"} btn btn-outline btn-outline-dark ${darkLightTheme}`} onClick={switchToIsDomesticMapStyle}>
{(props.mapColourScale == "is_domestic")? 'Showing domestic status for specific buildings' : 'Click to see domestic, non-domestic and mixed-use buildings'} {(props.mapColourScale == "is_domestic")? 'Showing domestic, non-domestic and mixed-use buildings (click to hide)' : 'Click to see domestic, non-domestic and mixed-use buildings on the map.'}
</button> </button>
<SelectDataEntry <SelectDataEntry
title={dataFields.is_domestic.title} title={dataFields.is_domestic.title}
@ -48,17 +52,18 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
user_verified_as={props.user_verified.is_domestic} user_verified_as={props.user_verified.is_domestic}
verified_count={props.building.verified.is_domestic} verified_count={props.building.verified.is_domestic}
/> />
<InfoBox type='warning'>Note: Work from home does not count as office and does not make building non-domestic.</InfoBox>
<SelectDataEntry <SelectDataEntry
title={dataFields.is_domestic_source.title} title={dataFields.is_domestic_source.title}
slug="is_domestic_source" slug="is_domestic_source"
value={props.building.is_domestic} value={props.building.is_domestic}
options={ options={
[ [
"Citizen/passerby", "Expert knowledge",
"Observed from the street",
"Google or other photograph/satellite imagery", "Google or other photograph/satellite imagery",
"Government Record", "Government/public record/database",
"Other Record" "Independently managed record/database",
"Other type of record/database"
] ]
} }
mode={props.mode} mode={props.mode}
@ -67,14 +72,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
tooltip={dataFields.is_domestic_source.tooltip} tooltip={dataFields.is_domestic_source.tooltip}
/> />
<DataEntry <DataEntry
title="Please provide a link to the data source" title="Source link"
slug="" slug=""
value="" value=""
mode='view' mode='view'
tooltip="Coming Soon" tooltip="Coming Soon"
/> />
</DataEntryGroup> </DataEntryGroup>
<DataEntryGroup name="Specific Land Use" collapsed={false}> <DataEntryGroup name="Specific land use data">
<MultiDataEntry <MultiDataEntry
title={dataFields.current_landuse_group.title} title={dataFields.current_landuse_group.title}
slug="current_landuse_group" slug="current_landuse_group"
@ -127,7 +132,14 @@ const UseView: React.FunctionComponent<CategoryViewProps> = (props) => {
} }
{ {
props.mode != 'view' && props.mode != 'view' &&
<InfoBox msg="A more general classification for the land use of this building is automatically derived and shown below."></InfoBox> <div>
<hr/>
<div className={`alert alert-dark`} role="alert" style={{ fontSize: 13, backgroundColor: "#f6f8f9" }}>
<i>
Below is a more general classification for the land use of this building, automatically derived from the information above.
</i>
</div>
</div>
} }
<DataEntry <DataEntry
title={dataFields.current_landuse_order.title} title={dataFields.current_landuse_order.title}

4
app/src/frontend/config/categories-config.ts
View File

@ -80,7 +80,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
slug: 'community', slug: 'community',
name: 'Community', name: 'Community',
aboutUrl: 'https://pages.colouring.london/community', aboutUrl: 'https://pages.colouring.london/community',
intro: 'This section collects data on how well citizens think specific *types* of building work (rather than individual buildings). This will help us save and reuse as many useful buildings as possible, and to help improve urban design quality in future.', intro: 'This section collects data on how well citizens think specific *types* of building work. This will help us save/reuse as many useful buildings as possible, and help improve urban design quality in future.',
}, },
[Category.Planning]: { [Category.Planning]: {
slug: 'planning', slug: 'planning',
@ -98,7 +98,7 @@ export const categoriesConfig: {[key in Category]: CategoryDefinition} = {
slug: 'type', slug: 'type',
name: 'Typology', name: 'Typology',
aboutUrl: 'https://pages.colouring.london/buildingtypology', aboutUrl: 'https://pages.colouring.london/buildingtypology',
intro: 'This section provides open data on the type of activities being carried out within buildings.', intro: 'Note: This section is currently under development, we are working to activate it as soon as possible. This section provides open data on the typology of the building.',
}, },
[Category.LandUse]: { [Category.LandUse]: {
slug: 'use', slug: 'use',

18
app/src/frontend/config/data-fields-config.ts
View File

@ -177,7 +177,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
uprns: { uprns: {
category: Category.Location, category: Category.Location,
title: "Unique Property Reference Number(s) (UPRN)", title: "Unique Property Reference Number(s) (UPRN)",
tooltip: "Unique Property Reference Numbers (to be filled automatically)", tooltip: "Unique Property Reference Numbers (to be filled automatically) [<a href='https://beta.ordnancesurvey.co.uk/products/os-open-uprn'>LINK</a>]",
example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }], example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }],
}, },
@ -211,13 +211,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
}, },
current_landuse_group: { current_landuse_group: {
category: Category.LandUse, category: Category.LandUse,
title: "Current Land Use", title: "Current land use(s)",
tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)", tooltip: "Land use Groups as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
example: ["", ""], example: ["", ""],
}, },
current_landuse_order: { current_landuse_order: {
category: Category.LandUse, category: Category.LandUse,
title: "Current Land Use (Order)", title: "Current land use (order)",
tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)", tooltip: "Land use Order as classified by [NLUD](https://www.gov.uk/government/statistics/national-land-use-database-land-use-and-land-cover-classification)",
example: "", example: "",
}, },
@ -272,7 +272,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
original_building_use: { original_building_use: {
category: Category.Type, category: Category.Type,
title: "Original building use", title: "Original building use",
tooltip: "What was the building originally used for when it was built? I.e. If it was Victorian warehouse which is now an office this would be warehouse", tooltip: "What was the building <u><i>originally</i></u> used for when it was built?",
example: "", example: "",
}, },
size_roof_shape: { size_roof_shape: {
@ -290,7 +290,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
date_lower : { date_lower : {
category: Category.Age, category: Category.Age,
title: "Earliest possible start year", title: "Earliest possible start year",
tooltip: "This should be the earliest year in which building could have started.", tooltip: "This should be the earliest year in which construction could have started.",
example: 1900, example: 1900,
}, },
date_upper: { date_upper: {
@ -362,13 +362,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
category: Category.Size, category: Category.Size,
title: "Height to apex (m)", title: "Height to apex (m)",
example: 100.5, example: 100.5,
//tooltip: , tooltip: "i.e. the highest part of the roof.",
}, },
size_height_eaves: { size_height_eaves: {
category: Category.Size, category: Category.Size,
title: "Height to eaves (m)", title: "Height to eaves (m)",
example: 20.33, example: 20.33,
//tooltip: , tooltip: "i.e. to where the top of the wall meets the roof",
}, },
size_floor_area_ground: { size_floor_area_ground: {
category: Category.Size, category: Category.Size,
@ -601,12 +601,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */
is_domestic: { is_domestic: {
category: Category.Team, category: Category.Team,
title: "Is the building a home/domestic building?", title: "Is the building a home/domestic building?",
tooltip: "", tooltip: "Note: Homes used as offices for working from home should be classified as domestic.",
example: "mixed domestic/non-domestic" example: "mixed domestic/non-domestic"
}, },
is_domestic_source: { is_domestic_source: {
category: Category.Team, category: Category.Team,
title: "Domestic/non-domestic data source?", title: "Source type",
tooltip: "", tooltip: "",
example: "" example: ""
}, },

6
app/src/frontend/styles/layout.css
View File

@ -50,9 +50,9 @@ article .color-block {
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: none;
background: #000; background-color: #ccc;
width: 100%; width: 100%;
margin: 2em 0; margin: 1.2em 0 1em 0;
padding: 0; padding: 0;
} }