Skip to content

Commit

Permalink
122 refine static and mobile library popups (#123)
Browse files Browse the repository at this point in the history 
* Refining library quick info

* Finishing stop popup
  • Loading branch information
@DaveBathnes
DaveBathnes authored Mar 3, 2024
1 parent e202634 commit 9b47a75
Show file tree
Hide file tree
Showing 7 changed files with 397 additions and 317 deletions.
216 changes: 108 additions & 108 deletions package-lock.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"private": true,
"type": "module",
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
"@fontsource/roboto": "^5.0.8",
"@mui/icons-material": "^5.15.11",
Expand All @@ -19,7 +19,7 @@
"react-carbonbadge": "^2.0.0",
"react-dom": "^18.2.0",
"react-map-gl": "^7.1.7",
"react-router-dom": "^6.22.1",
"react-router-dom": "^6.22.2",
"rrule": "^2.8.1"
},
"scripts": {
Expand Down
1 change: 1 addition & 0 deletions src/Libraries.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,7 @@ function Libraries () {
sx={theme => ({
backgroundColor: 'white',
border: 2,
borderRadius: 2,
borderColor: lighten(theme.palette.staticLibraries.main, 0.5),
'& .MuiDataGrid-columnHeaders': {
backgroundColor: lighten(theme.palette.staticLibraries.main, 0.9),
Expand Down
155 changes: 83 additions & 72 deletions src/LibraryDetails.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'

import { Link } from 'react-router-dom'

import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CircularProgress from '@mui/material/CircularProgress'
import ListSubheader from '@mui/material/ListSubheader'
Expand All @@ -15,6 +16,9 @@ import TableContainer from '@mui/material/TableContainer'
import TableRow from '@mui/material/TableRow'
import Typography from '@mui/material/Typography'

import AlternateEmailIcon from '@mui/icons-material/AlternateEmailRounded'
import WebIcon from '@mui/icons-material/WebRounded'

import { lighten } from '@mui/material'

import { useViewStateValue } from './context/viewState'
Expand Down Expand Up @@ -57,88 +61,95 @@ function LibraryDetails (props) {
<ListSubheader disableSticky sx={{ textAlign: 'center' }}>
Quick info
</ListSubheader>
<TableContainer
component={Paper}
elevation={0}
<Box
sx={{
border: 2,
borderColor: theme => lighten(theme.palette.primary.main, 0.5),
marginBottom: theme => theme.spacing(1)
borderRadius: 2,
borderColor: theme =>
lighten(theme.palette.staticLibraries.main, 0.5),
marginBottom: theme => theme.spacing(1),
padding: theme => theme.spacing(1)
}}
>
<Table size='small'>
<TableBody>
<TableRow>
<TableCell variant='head'>Address</TableCell>
<TableCell>
{[
library.address1,
library.address2,
library.address3,
library.postcode
]
.filter(l => Boolean(l))
.join(', ')}
</TableCell>
</TableRow>
<TableRow>
<TableCell variant='head'>Service</TableCell>
<TableCell>{library.localAuthority}</TableCell>
</TableRow>
<TableRow>
<TableCell variant='head'>Type</TableCell>
<TableCell>{library.typeDescription}</TableCell>
</TableRow>
{library.yearOpened && library.yearOpened !== '' ? (
<TableRow>
<TableCell variant='head'>Opened</TableCell>
<TableCell>{library.yearOpened}</TableCell>
</TableRow>
) : null}
{library.yearClosed && library.yearClosed !== '' ? (
<TableRow>
<TableCell variant='head'>Year closed</TableCell>
<TableCell>{library.yearClosed}</TableCell>
</TableRow>
) : null}
{library.notes && library.notes !== '' ? (
<TableContainer
component={Paper}
elevation={0}
sx={{
marginBottom: theme => theme.spacing(1)
}}
>
<Table size='small'>
<TableBody>
<TableRow>
<TableCell variant='head'>Notes</TableCell>
<TableCell>{library.notes}</TableCell>
</TableRow>
) : null}
{library.url && library.url !== '' ? (
<TableRow>
<TableCell variant='head'>Website</TableCell>
<TableCell variant='head'>Address</TableCell>
<TableCell>
<Button
variant='text'
color='primary'
disableElevation
onClick={goToWebsite}
>
{urlHelper.getDomainFromUrl(library.url)}
</Button>
{[
library.address1,
library.address2,
library.address3,
library.postcode
]
.filter(l => Boolean(l))
.join(', ')}
</TableCell>
</TableRow>
) : null}
{library.emailAddress && library.emailAddress !== '' ? (
<TableRow>
<TableCell variant='head'>Email</TableCell>
<TableCell>
<Button
color='primary'
disableElevation
onClick={emailLibrary}
>
Send email
</Button>
</TableCell>
<TableCell variant='head'>Authority</TableCell>
<TableCell>{library.localAuthority}</TableCell>
</TableRow>
) : null}
</TableBody>
</Table>
</TableContainer>
<TableRow>
<TableCell variant='head'>Type</TableCell>
<TableCell>{library.typeDescription}</TableCell>
</TableRow>
{library.yearOpened && library.yearOpened !== '' ? (
<TableRow>
<TableCell variant='head'>Opened</TableCell>
<TableCell>{library.yearOpened}</TableCell>
</TableRow>
) : null}
{library.yearClosed && library.yearClosed !== '' ? (
<TableRow>
<TableCell variant='head'>Year closed</TableCell>
<TableCell>{library.yearClosed}</TableCell>
</TableRow>
) : null}
{library.notes && library.notes !== '' ? (
<TableRow>
<TableCell variant='head'>Notes</TableCell>
<TableCell>{library.notes}</TableCell>
</TableRow>
) : null}
</TableBody>
</Table>
</TableContainer>
<>
{library.url && library.url !== '' && (
<Button
variant='text'
color='staticLibraries'
disableElevation
onClick={goToWebsite}
startIcon={<WebIcon />}
sx={{
marginRight: theme => theme.spacing(1)
}}
>
{urlHelper.getDomainFromUrl(library.url)}
</Button>
)}
{library.emailAddress && library.emailAddress !== '' && (
<Button
variant='text'
color='staticLibraries'
disableElevation
onClick={emailLibrary}
startIcon={<AlternateEmailIcon />}
>
Email library
</Button>
)}
</>
</Box>
{(staffedHoursAvailable || unstaffedHoursAvailable) &&
config.displayOpeningHours ? (
<>
Expand Down
4 changes: 2 additions & 2 deletions src/LibraryMapApplication.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import LibraryPopup from './LibraryPopup'
import MapPage from './MapPage'
import Notification from './Notification'
import Service from './Service'
import StopDetails from './StopDetails'
import StopPopup from './StopPopup'

import { MemoMarkdownPage } from './MarkdownPage'

Expand Down Expand Up @@ -119,8 +119,8 @@ function LibraryMapApplication () {
</Container>
<Footer />
<Notification />
<StopDetails />
<LibraryPopup />
<StopPopup />
<BuiltUpAreaPopup />
<Backdrop open={loadingLibraryOrMobileLibrary} invisible>
<CircularProgress color='inherit' />
Expand Down
Loading

0 comments on commit 9b47a75

Please sign in to comment.