From d14dea3d1a3eaad87cb2c4a02b2089ccbcacb072 Mon Sep 17 00:00:00 2001 From: Mike Simpson Date: Tue, 16 May 2023 17:08:21 +0100 Subject: [PATCH] More UI Tweaks Mainly to improve consistency and readability across all categories/pages Discussed in meeting with Polly 16/05 --- .../data-components/data-entry-group.css | 2 + app/src/frontend/building/data-container.css | 2 +- app/src/frontend/building/data-container.tsx | 2 + .../frontend/building/data-containers/age.tsx | 10 +- .../building/data-containers/community.tsx | 4 +- .../building/data-containers/construction.tsx | 4 +- .../building/data-containers/location.tsx | 74 ++- .../building/data-containers/planning.tsx | 2 +- .../building/data-containers/size.tsx | 232 ++++++--- .../building/data-containers/streetscape.tsx | 91 ++-- .../data-containers/sustainability.tsx | 186 +++---- .../building/data-containers/team.tsx | 490 +++++++++--------- .../building/data-containers/type.tsx | 214 ++++---- .../frontend/building/data-containers/use.tsx | 32 +- app/src/frontend/config/categories-config.ts | 4 +- app/src/frontend/config/data-fields-config.ts | 18 +- app/src/frontend/styles/layout.css | 6 +- 17 files changed, 788 insertions(+), 585 deletions(-) diff --git a/app/src/frontend/building/data-components/data-entry-group.css b/app/src/frontend/building/data-components/data-entry-group.css index 91cdf6ad..d264d85e 100644 --- a/app/src/frontend/building/data-components/data-entry-group.css +++ b/app/src/frontend/building/data-components/data-entry-group.css @@ -3,6 +3,8 @@ position: relative; font-size: 1.1rem; font-weight: 410; + padding-top: 3px; + padding-bottom: 3px; } .data-entry-group-header .data-entry-group-title { padding-left: 0.6rem; diff --git a/app/src/frontend/building/data-container.css b/app/src/frontend/building/data-container.css index 17302468..b7cf52c9 100644 --- a/app/src/frontend/building/data-container.css +++ b/app/src/frontend/building/data-container.css @@ -1,7 +1,7 @@ .edit-bar { position: sticky; 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%; background-color: white; z-index: 1000; diff --git a/app/src/frontend/building/data-container.tsx b/app/src/frontend/building/data-container.tsx index db1ca846..4b7f156c 100644 --- a/app/src/frontend/building/data-container.tsx +++ b/app/src/frontend/building/data-container.tsx @@ -413,7 +413,9 @@ const withCopyEdit: (wc: React.ComponentType) => DataContaine : null } +
+ } : null diff --git a/app/src/frontend/building/data-containers/age.tsx b/app/src/frontend/building/data-containers/age.tsx index 0cfe9d0c..09abab52 100644 --- a/app/src/frontend/building/data-containers/age.tsx +++ b/app/src/frontend/building/data-containers/age.tsx @@ -47,7 +47,7 @@ const AgeView: React.FunctionComponent = (props) => { ){ return ( - + = (props) => { - + @@ -261,7 +261,7 @@ const AgeView: React.FunctionComponent = (props) => { }; return ( - + = (props) => { mode='view' /> - + - + diff --git a/app/src/frontend/building/data-containers/community.tsx b/app/src/frontend/building/data-containers/community.tsx index 491b3c00..2d92ad80 100644 --- a/app/src/frontend/building/data-containers/community.tsx +++ b/app/src/frontend/building/data-containers/community.tsx @@ -40,7 +40,7 @@ const CommunityView: React.FunctionComponent = (props) => { const { darkLightTheme } = useDisplayPreferences(); const worthKeepingReasonsNonEmpty = Object.values(props.building.community_type_worth_keeping_reasons ?? {}).some(x => x); return <> - + Note: We are not currently collecting data on domestic/privately owned properties, only on public buildings. @@ -151,7 +151,7 @@ const CommunityView: React.FunctionComponent = (props) => { - + 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 diff --git a/app/src/frontend/building/data-containers/construction.tsx b/app/src/frontend/building/data-containers/construction.tsx index 5d85fcb5..7455354e 100644 --- a/app/src/frontend/building/data-containers/construction.tsx +++ b/app/src/frontend/building/data-containers/construction.tsx @@ -38,7 +38,7 @@ const RoofCoveringOptions = [ const ConstructionView: React.FunctionComponent = (props) => { return ( - + = (props) => verified_count={props.building.verified.construction_roof_covering} /> - + = (props) => ( - - - - + + + + + + + +
= (props) => ( tooltip="Coming Soon" /> - + = (props) => ( copy={props.copy} tooltip={dataFields.ref_toid.tooltip} onChange={props.onChange} + disabled={true} /> = (props) => { return ( - + This section provides data on active applications. We define these as applications with any activity in the last year.
diff --git a/app/src/frontend/building/data-containers/size.tsx b/app/src/frontend/building/data-containers/size.tsx index 8e8a71db..a4e428be 100644 --- a/app/src/frontend/building/data-containers/size.tsx +++ b/app/src/frontend/building/data-containers/size.tsx @@ -16,35 +16,7 @@ import InfoBox from '../../components/info-box'; */ const SizeView: React.FunctionComponent = (props) => ( - - - - - - - + = (props) => ( user_verified_as={props.user_verified.size_storeys_core} verified_count={props.building.verified.size_storeys_core} /> - = (props) => ( user_verified_as={props.user_verified.size_storeys_attic} verified_count={props.building.verified.size_storeys_attic} /> - = (props) => ( user_verified_as={props.user_verified.size_storeys_basement} verified_count={props.building.verified.size_storeys_basement} /> - + + - + = (props) => ( user_verified_as={props.user_verified.size_height_apex} verified_count={props.building.verified.size_height_apex} /> - + + +
= (props) => ( step={0.1} min={0} /> + + - + = (props) => ( user_verified_as={props.user_verified.size_floor_area_ground} verified_count={props.building.verified.size_floor_area_ground} /> - = (props) => ( user_verified_as={props.user_verified.size_floor_area_total} verified_count={props.building.verified.size_floor_area_total} /> - + - + - - - + +
+ + + +
+ + + +
+ + + +
+ + + + + ); const SizeContainer = withCopyEdit(SizeView); diff --git a/app/src/frontend/building/data-containers/streetscape.tsx b/app/src/frontend/building/data-containers/streetscape.tsx index de78bbaf..bb92c118 100644 --- a/app/src/frontend/building/data-containers/streetscape.tsx +++ b/app/src/frontend/building/data-containers/streetscape.tsx @@ -7,54 +7,61 @@ import NumericDataEntry from '../data-components/numeric-data-entry'; import withCopyEdit from '../data-container'; import { CategoryViewProps } from './category-view-props'; +import { DataEntryGroup } from '../data-components/data-entry-group'; /** * Streetscape view/edit section */ const StreetscapeView: React.FunctionComponent = (props) => ( - - - - - - - + + + + + + + + + + + + + ); const StreetscapeContainer = withCopyEdit(StreetscapeView); diff --git a/app/src/frontend/building/data-containers/sustainability.tsx b/app/src/frontend/building/data-containers/sustainability.tsx index 70b2d6e7..bf879871 100644 --- a/app/src/frontend/building/data-containers/sustainability.tsx +++ b/app/src/frontend/building/data-containers/sustainability.tsx @@ -9,6 +9,7 @@ import withCopyEdit from '../data-container'; import InfoBox from '../../components/info-box'; import { CategoryViewProps } from './category-view-props'; +import { DataEntryGroup } from '../data-components/data-entry-group'; const EnergyCategoryOptions = ["A", "B", "C", "D", "E", "F", "G"]; const BreeamRatingOptions = [ @@ -25,102 +26,107 @@ const BreeamRatingOptions = [ const SustainabilityView: React.FunctionComponent = (props) => { return ( - - + + - - + - - - - - - + + - - + + + + + + + + ); }; diff --git a/app/src/frontend/building/data-containers/team.tsx b/app/src/frontend/building/data-containers/team.tsx index 5a02509c..2c5ed2a1 100644 --- a/app/src/frontend/building/data-containers/team.tsx +++ b/app/src/frontend/building/data-containers/team.tsx @@ -21,257 +21,267 @@ const TeamView: React.FunctionComponent = (props) => { const currentBuildingConstructionYear = building.date_year || undefined; return (
- - - - {props.building.has_extension ? ( - <> + + + + {props.building.has_extension ? ( + <> + + + + ) : (null)} + + + + + + + + - - ) : (null)} - - - - - - - - - - - - - - - - {props.building.designer_awards ? ( - <> - - - - ) : (null) - } - - - + + + + + + + + + + + + + {props.building.designer_awards ? ( + <> + + + + ) : (null) + } + + + + + + ); }; diff --git a/app/src/frontend/building/data-containers/type.tsx b/app/src/frontend/building/data-containers/type.tsx index 019465e9..d341701c 100644 --- a/app/src/frontend/building/data-containers/type.tsx +++ b/app/src/frontend/building/data-containers/type.tsx @@ -9,6 +9,7 @@ import withCopyEdit from '../data-container'; import { CategoryViewProps } from './category-view-props'; import InfoBox from '../../components/info-box'; +import { DataEntryGroup } from '../data-components/data-entry-group'; const AttachmentFormOptions = [ "Detached", @@ -23,98 +24,131 @@ const AttachmentFormOptions = [ const TypeView: React.FunctionComponent = (props) => { return ( - - + - - + - - - - - - - {/* */} + +
+ + + + +
+ + + + + + + + {/* */} + ); }; diff --git a/app/src/frontend/building/data-containers/use.tsx b/app/src/frontend/building/data-containers/use.tsx index 1e7a451d..259837b6 100644 --- a/app/src/frontend/building/data-containers/use.tsx +++ b/app/src/frontend/building/data-containers/use.tsx @@ -25,10 +25,14 @@ const UseView: React.FunctionComponent = (props) => { const { darkLightTheme } = useDisplayPreferences(); return ( - - + +
+ + 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)? + +
= (props) => { user_verified_as={props.user_verified.is_domestic} verified_count={props.building.verified.is_domestic} /> - Note: Work from home does not count as office and does not make building non-domestic. = (props) => { tooltip={dataFields.is_domestic_source.tooltip} /> - + = (props) => { } { props.mode != 'view' && - +
+
+
+ + Below is a more general classification for the land use of this building, automatically derived from the information above. + +
+
} LINK]", example: [{uprn: "", parent_uprn: "" }, {uprn: "", parent_uprn: "" }], }, @@ -211,13 +211,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ }, current_landuse_group: { 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)", example: ["", ""], }, current_landuse_order: { 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)", example: "", }, @@ -272,7 +272,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ original_building_use: { category: Category.Type, 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 originally used for when it was built?", example: "", }, size_roof_shape: { @@ -290,7 +290,7 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ date_lower : { category: Category.Age, 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, }, date_upper: { @@ -362,13 +362,13 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ category: Category.Size, title: "Height to apex (m)", example: 100.5, - //tooltip: , + tooltip: "i.e. the highest part of the roof.", }, size_height_eaves: { category: Category.Size, title: "Height to eaves (m)", example: 20.33, - //tooltip: , + tooltip: "i.e. to where the top of the wall meets the roof", }, size_floor_area_ground: { category: Category.Size, @@ -601,12 +601,12 @@ export const dataFields = { /* eslint-disable @typescript-eslint/camelcase */ is_domestic: { category: Category.Team, 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" }, is_domestic_source: { category: Category.Team, - title: "Domestic/non-domestic data source?", + title: "Source type", tooltip: "", example: "" }, diff --git a/app/src/frontend/styles/layout.css b/app/src/frontend/styles/layout.css index 6969c36c..a572e1df 100644 --- a/app/src/frontend/styles/layout.css +++ b/app/src/frontend/styles/layout.css @@ -50,9 +50,9 @@ article .color-block { hr { display: block; height: 1px; - border: 0; - background: #000; + border: none; + background-color: #ccc; width: 100%; - margin: 2em 0; + margin: 1.2em 0 1em 0; padding: 0; }