polka_billy/porridger
1
0
Fork 1
Code Issues 20 Pull Requests Packages Releases Activity

Refactored component custom styling

Browse Source 
Switched to library bootstrap css
This commit is contained in:
Dmitriy Shishkov 2023-07-15 12:24:13 +03:00
parent cb848739e5
commit 27ae590981
Signed by: dm1sh
GPG Key ID: 027994B0AA357688
6 changed files with 68 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
front/index.html
View File

@ -5,8 +5,6 @@
<link rel="icon" type="image/png" href="/favicon.png" /> <link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Porridger</title> <title>Porridger</title>
<!-- most likely will be loaded from browser cache -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

11
front/src/components/AnnouncementDetails.tsx
View File

@ -6,19 +6,28 @@ import { categoryNames } from '../assets/category'
import { useBook } from '../hooks/api' import { useBook } from '../hooks/api'
import { Announcement } from '../api/announcement/types' import { Announcement } from '../api/announcement/types'
import { iconItem } from '../utils/markerIcons' import { iconItem } from '../utils/markerIcons'
import { CSSProperties } from 'react'
type AnnouncementDetailsProps = { type AnnouncementDetailsProps = {
close: () => void, close: () => void,
announcement: Announcement announcement: Announcement
} }
const styles = {
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
} as CSSProperties,
}
function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }: AnnouncementDetailsProps) { function AnnouncementDetails({ close, announcement: { id, name, category, bestBy, description, lat, lng, address, metro } }: AnnouncementDetailsProps) {
const { handleBook, status: bookStatus } = useBook(id) const { handleBook, status: bookStatus } = useBook(id)
return ( return (
<div <div
className='modal' className='modal'
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }} style={styles.container}
> >
<Modal.Dialog style={{ minWidth: '50vw' }}> <Modal.Dialog style={{ minWidth: '50vw' }}>
<Modal.Header closeButton onHide={close}> <Modal.Header closeButton onHide={close}>

47
front/src/components/BottomNavBar.tsx
View File

@ -3,27 +3,30 @@ import { Link } from 'react-router-dom'
import addIcon from '../assets/addIcon.svg' import addIcon from '../assets/addIcon.svg'
import filterIcon from '../assets/filterIcon.svg' import filterIcon from '../assets/filterIcon.svg'
import userIcon from '../assets/userIcon.svg' import userIcon from '../assets/userIcon.svg'
import { CSSProperties } from 'react'
const navBarStyles: React.CSSProperties = { const styles = {
backgroundColor: 'var(--bs-success)', navBar: {
height: 56, backgroundColor: 'var(--bs-success)',
width: '100%', height: 56,
width: '100%',
} as CSSProperties,
navBarGroup: {
display: 'flex',
flexDirection: 'row',
height: '100%',
margin: 'auto'
} as CSSProperties,
navBarElement: {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
} as CSSProperties,
} }
const navBarGroupStyles: React.CSSProperties = {
display: 'flex',
flexDirection: 'row',
height: '100%',
margin: 'auto'
}
const navBarElementStyles: React.CSSProperties = {
width: '100%',
height: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}
type BottomNavBarProps = { type BottomNavBarProps = {
width: number, width: number,
@ -32,18 +35,18 @@ type BottomNavBarProps = {
function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) { function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
return ( return (
<div style={navBarStyles}> <div style={styles.navBar}>
<div style={{ ...navBarGroupStyles, width: width }}> <div style={{ ...styles.navBarGroup, width: width }}>
<a style={navBarElementStyles} onClick={() => toggleFilters(true)}> <a style={styles.navBarElement} onClick={() => toggleFilters(true)}>
<img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' /> <img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
</a> </a>
<Link style={navBarElementStyles} to='/add' > <Link style={styles.navBarElement} to='/add' >
<img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' /> <img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
</Link> </Link>
<Link style={navBarElementStyles} to={'/user'} > <Link style={styles.navBarElement} to={'/user'} >
<img src={userIcon} alt='Личный кабинет' title='Личный кабинет' /> <img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
</Link> </Link>

1
front/src/main.tsx
View File

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
import App from './App.tsx' import App from './App.tsx'
import './index.css' import './index.css'
import 'bootstrap/dist/css/bootstrap.min.css'
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode> <React.StrictMode>

27
front/src/pages/AddPage.tsx
View File

@ -1,4 +1,4 @@
import { FormEventHandler, useEffect, useState } from 'react' import { CSSProperties, FormEventHandler, useEffect, useState } from 'react'
import { Form, Button, Card } from 'react-bootstrap' import { Form, Button, Card } from 'react-bootstrap'
import { MapContainer, TileLayer } from 'react-leaflet' import { MapContainer, TileLayer } from 'react-leaflet'
import { latLng } from 'leaflet' import { latLng } from 'leaflet'
@ -11,6 +11,19 @@ import { stations, lines, lineNames } from '../assets/metro'
import { fallbackError, gotError } from '../hooks/api/useFetch' import { fallbackError, gotError } from '../hooks/api/useFetch'
import { useOsmAddresses } from '../hooks/api' import { useOsmAddresses } from '../hooks/api'
const styles = {
modal: {
height: 'calc(100vh - 3rem)',
} as CSSProperties,
body: {
overflowY: 'auto',
} as CSSProperties,
map: {
width: '100%',
height: 400,
} as CSSProperties,
}
function AddPage() { function AddPage() {
const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227)) const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
@ -54,8 +67,8 @@ function AddPage() {
} }
return ( return (
<Card className='m-4' style={{ height: 'calc(100vh - 3rem)' }}> <Card className='m-4' style={styles.modal}>
<Card.Body style={{ overflowY: 'auto' }} > <Card.Body style={styles.body} >
<Form onSubmit={handleSubmit}> <Form onSubmit={handleSubmit}>
<Form.Group className='mb-3' controlId='name'> <Form.Group className='mb-3' controlId='name'>
<Form.Label>Заголовок объявления</Form.Label> <Form.Label>Заголовок объявления</Form.Label>
@ -84,7 +97,7 @@ function AddPage() {
<div className='mb-3'> <div className='mb-3'>
<MapContainer <MapContainer
scrollWheelZoom={false} scrollWheelZoom={false}
style={{ width: '100%', height: 400 }} style={styles.map}
center={addressPosition} center={addressPosition}
zoom={13} zoom={13}
> >
@ -143,19 +156,19 @@ function AddPage() {
<div className='mb-3'> <div className='mb-3'>
{trashboxes.loading {trashboxes.loading
? ( ? (
<div style={{ height: 400 }}> <div style={styles.map}>
<p>Загрузка...</p> <p>Загрузка...</p>
</div> </div>
) : ( ) : (
gotError(trashboxes) ? ( gotError(trashboxes) ? (
<p <p
style={{ height: 400 }} style={styles.map}
className='text-danger' className='text-danger'
>{trashboxes.error}</p> >{trashboxes.error}</p>
) : ( ) : (
<MapContainer <MapContainer
scrollWheelZoom={false} scrollWheelZoom={false}
style={{ width: '100%', height: 400 }} style={styles.map}
center={addressPosition} center={addressPosition}
zoom={13} zoom={13}
className='' className=''

19
front/src/pages/HomePage.tsx
View File

@ -1,4 +1,4 @@
import { useEffect, useState } from 'react' import { CSSProperties, useEffect, useState } from 'react'
import Stories from 'react-insta-stories' import Stories from 'react-insta-stories'
import { Story } from 'react-insta-stories/dist/interfaces' import { Story } from 'react-insta-stories/dist/interfaces'
@ -44,17 +44,22 @@ const fallbackStory = (text = '', isError = false): Story[] => [{
useEffect(() => { action('pause') }, [action]) useEffect(() => { action('pause') }, [action])
return ( return (
<div style={{ margin: 'auto' }} className={isError ? 'text-danger' : ''}> <div style={styles.center} className={isError ? 'text-danger' : ''}>
{text || <img src={puffSpinner} />} {text || <img src={puffSpinner} />}
</div> </div>
) )
}, },
}] }]
const storiesContainerCSS = { const styles = {
display: 'flex', container: {
justifyContent: 'center', display: 'flex',
backgroundColor: 'rgb(17, 17, 17)' justifyContent: 'center',
backgroundColor: 'rgb(17, 17, 17)',
} as CSSProperties,
center: {
margin: 'auto'
} as CSSProperties,
} }
function HomePage() { function HomePage() {
@ -69,7 +74,7 @@ function HomePage() {
return (<> return (<>
<Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} /> <Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
<div style={storiesContainerCSS}> <div style={styles.container}>
<Stories <Stories
stories={stories} stories={stories}
defaultInterval={11000} defaultInterval={11000}