Skip to content

Commit

Permalink
Refactor: about page to use new layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@rosejbon
rosejbon committed Nov 21, 2024
1 parent ae71406 commit a551a0a
Showing 1 changed file with 150 additions and 152 deletions.
302 changes: 150 additions & 152 deletions src/pages/about.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,167 +1,165 @@
import React from 'react';
import Link from 'next/link';
import Head from 'next/head';
import styled from '@emotion/styled';
import Container from '../components/Container';

import Button from '../design-system/components/Button';
import Text, { TextProps } from '../components/Text';
import Spacer from '../components/Spacer';
import Box, { BoxProps } from '../components/Box';
import Center from '../design-system/layout/Center';
import Stack from '../design-system/layout/Stack';

import config from '../config';

const List = styled.ul`
list-style: initial;
`;

const ListItem = (props: BoxProps) => (
<Box as="li" marginTop={2} marginLeft={4} {...props} />
);

const SubHeading = (props: TextProps) => (
<>
<Spacer mb={4} />
<Text {...props} fontSize={3} fontWeight="bold">
<h2>{props.children}</h2>
</Text>
<Spacer mb={3} />
</>
);

const AboutPage = () => {
return (
<Box my={5}>
<>
<Head>
<title>{config.getTitle('About')}</title>
</Head>

<Container maxWidth={845}>
<Text fontSize={6} fontWeight="bold" textAlign="center">
<h1>About the Toilet Map</h1>
</Text>
<Spacer mb={5} />
<p>
Everyone will, at some point in the day, need to use the toilet. Some
people will need facilities more than others, and some will need to
find toilets sooner rather than later.
</p>
<p>
The Toilet Map aims to be a complete, up-to-date, sustainable source
of toilet locations. It&apos;s the UK&apos;s largest database of
publicly-accessible toilets (see below), with over 14,000 facilities.
</p>
<p>
The Toilet Map is run by Public Convenience, a joint venture between
researchers Dr Jo-Anne Bichard and Gail Ramster (who created the map
at the RCA Helen Hamlyn Centre for Design) and software development
company{' '}
<Link
href="https://www.neontribe.co.uk/"
target="_blank"
rel="noopener noreferrer"
>
Neontribe
</Link>{' '}
(who designed and built it).
</p>
<p>
The information comes from the public - anyone can go on the website
and <Link href="/">add, edit or remove toilets</Link>. We also use
open data and request information from councils,{' '}
<Link
href="https://www.openstreetmap.org/"
target="_blank"
rel="noopener noreferrer"
>
OpenStreetMap
</Link>
, private companies and organisations.
</p>
<SubHeading id="contributing">Contributing</SubHeading>
<p>
We cover each feature of the map and how you can go about using them
to add or edit toilets yourself in our Volunteer Help Guide, available
to download below.
</p>
<Spacer mb={2} />
<Button
htmlElement="a"
variant="primary"
target="_blank"
rel="noopener noreferrer"
href="Toilet.Map.Volunteer.Help.Guide.pdf"
>
Download volunteer help guide
</Button>
<Spacer mb={3} />
<p>
A handy printable checklist designed to make it easier for you to
collect data away from the computer for submitting to the map later is
also available for download.
</p>
<Spacer mb={2} />
<Button
htmlElement="a"
variant="primary"
href={'/GBPTM.Toilet.Checklist.pdf'}
target="_blank"
rel="noopener noreferrer"
>
Download toilet checklist
</Button>
<SubHeading>Publicly Accessible Toilets</SubHeading>
<p>
The project aims to map all publicly-accessible toilets - that means
all toilets that the public can access without needing to be a
customer.
</p>
<Spacer mb={3} />
This includes:
<List>
<ListItem>public toilets</ListItem>
<ListItem>
toilets in train stations, bus stations, service/petrol stations,
tube stations, ferry terminals, airports and other transport
networks
</ListItem>
<ListItem>shopping centre toilets</ListItem>
<ListItem>
toilets in public buildings, such as town halls, libraries,
hospitals, museums and leisure centres
</ListItem>
<ListItem>
toilets in other businesses where the business agrees that the
public can use their toilets without having to buy anything. These
are often part of Community Toilet Schemes (run by councils) and can
include shops, cafes, supermarkets, restaurants, hotels and pubs.
</ListItem>
<ListItem>
We try not to show toilets where you need to ask permission to use
it, such as those that are for customers-only. The exception is
platform-side toilets at stations. These are only accessible to
ticket-holders but we feel it is still useful information,
particularly when many trains don’t have toilets onboard.
</ListItem>
</List>
<Spacer mb={3} />
<p>
If you have any problems updating the toilets, or wish to send us
toilet details or comments, please contact{' '}
<Link href="mailto:[email protected]">[email protected]</Link>
.
</p>
<SubHeading>The Explorer</SubHeading>
<p>
<Link href="/explorer" prefetch={false}>
Visit the Explorer
</Link>
&nbsp;to get an overview of the statistics and details related to the
Toilet Map. These statistics are calculated on-demand, so will be up
to date, and can help to provide a overview of public toilet coverage
across the country.
</p>
</Container>
</Box>
<Center text={false} gutter={true}>
<Stack space="l">
<Center text={true} gutter={false}>
<h1>About the Toilet Map</h1>
</Center>
<section>
<p>
Everyone will, at some point in the day, need to use the toilet.
Some people will need facilities more than others, and some will
need to find toilets sooner rather than later.
</p>
<p>
The Toilet Map aims to be a complete, up-to-date, sustainable
source of toilet locations. It&apos;s the UK&apos;s largest
database of publicly-accessible toilets (see below), with over
14,000 facilities.
</p>
<p>
The Toilet Map is run by Public Convenience, a joint venture
between researchers Dr Jo-Anne Bichard and Gail Ramster (who
created the map at the RCA Helen Hamlyn Centre for Design) and
software development company{' '}
<Link
href="https://www.neontribe.co.uk/"
target="_blank"
rel="noopener noreferrer"
>
Neontribe
</Link>{' '}
(who designed and built it).
</p>
<p>
The information comes from the public - anyone can go on the
website and <Link href="/">add, edit or remove toilets</Link>. We
also use open data and request information from councils,{' '}
<Link
href="https://www.openstreetmap.org/"
target="_blank"
rel="noopener noreferrer"
>
OpenStreetMap
</Link>
, private companies and organisations.
</p>
</section>
<section>
<h2 id="contributing">Contributing</h2>
<p>
We cover each feature of the map and how you can go about using
them to add or edit toilets yourself in our Volunteer Help Guide,
available to download below.
</p>
<p>
<Button
htmlElement="a"
variant="primary"
target="_blank"
rel="noopener noreferrer"
href="Toilet.Map.Volunteer.Help.Guide.pdf"
>
Download volunteer help guide
</Button>
</p>

<p>
A handy printable checklist designed to make it easier for you to
collect data away from the computer for submitting to the map
later is also available for download.
</p>

<p>
<Button
htmlElement="a"
variant="primary"
href={'/GBPTM.Toilet.Checklist.pdf'}
target="_blank"
rel="noopener noreferrer"
>
Download toilet checklist
</Button>
</p>
</section>
<section>
<h2 id="publicly-accessible-toilets">
Publicly Accessible Toilets
</h2>
<p>
The project aims to map all publicly-accessible toilets - that
means all toilets that the public can access without needing to be
a customer.
</p>
<p>
This includes:
<ul>
<li>public toilets</li>
<li>
toilets in train stations, bus stations, service/petrol
stations, tube stations, ferry terminals, airports and other
transport networks
</li>
<li>shopping centre toilets</li>
<li>
toilets in public buildings, such as town halls, libraries,
hospitals, museums and leisure centres
</li>
<li>
toilets in other businesses where the business agrees that the
public can use their toilets without having to buy anything.
These are often part of Community Toilet Schemes (run by
councils) and can include shops, cafes, supermarkets,
restaurants, hotels and pubs.
</li>
<li>
We try not to show toilets where you need to ask permission to
use it, such as those that are for customers-only. The
exception is platform-side toilets at stations. These are only
accessible to ticket-holders but we feel it is still useful
information, particularly when many trains don’t have toilets
onboard.
</li>
</ul>
</p>
<p>
If you have any problems updating the toilets, or wish to send us
toilet details or comments, please contact{' '}
<Link href="mailto:[email protected]">
[email protected]
</Link>
.
</p>
</section>
<section>
<h2 id="the-explorer">The Explorer</h2>
<p>
<Link href="/explorer" prefetch={false}>
Visit the Explorer
</Link>
&nbsp;to get an overview of the statistics and details related to
the Toilet Map. These statistics are calculated on-demand, so will
be up to date, and can help to provide a overview of public toilet
coverage across the country.
</p>
</section>
</Stack>
</Center>
</>
);
};

Expand Down

0 comments on commit a551a0a

Please sign in to comment.