Refactored component custom styling
Switched to library bootstrap css
This commit is contained in:
parent
cb848739e5
commit
27ae590981
GPG Key ID:
027994B0AA357688
@ -5,8 +5,6 @@
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<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>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@ -6,19 +6,28 @@ import { categoryNames } from '../assets/category'
|
||||
import { useBook } from '../hooks/api'
|
||||
import { Announcement } from '../api/announcement/types'
|
||||
import { iconItem } from '../utils/markerIcons'
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
type AnnouncementDetailsProps = {
|
||||
close: () => void,
|
||||
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) {
|
||||
const { handleBook, status: bookStatus } = useBook(id)
|
||||
|
||||
return (
|
||||
<div
|
||||
className='modal'
|
||||
style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}
|
||||
style={styles.container}
|
||||
>
|
||||
<Modal.Dialog style={{ minWidth: '50vw' }}>
|
||||
<Modal.Header closeButton onHide={close}>
|
||||
|
||||
@ -3,27 +3,30 @@ import { Link } from 'react-router-dom'
|
||||
import addIcon from '../assets/addIcon.svg'
|
||||
import filterIcon from '../assets/filterIcon.svg'
|
||||
import userIcon from '../assets/userIcon.svg'
|
||||
import { CSSProperties } from 'react'
|
||||
|
||||
const navBarStyles: React.CSSProperties = {
|
||||
backgroundColor: 'var(--bs-success)',
|
||||
height: 56,
|
||||
width: '100%',
|
||||
const styles = {
|
||||
navBar: {
|
||||
backgroundColor: 'var(--bs-success)',
|
||||
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 = {
|
||||
width: number,
|
||||
@ -32,18 +35,18 @@ type BottomNavBarProps = {
|
||||
|
||||
function BottomNavBar({ width, toggleFilters }: BottomNavBarProps) {
|
||||
return (
|
||||
<div style={navBarStyles}>
|
||||
<div style={{ ...navBarGroupStyles, width: width }}>
|
||||
<div style={styles.navBar}>
|
||||
<div style={{ ...styles.navBarGroup, width: width }}>
|
||||
|
||||
<a style={navBarElementStyles} onClick={() => toggleFilters(true)}>
|
||||
<a style={styles.navBarElement} onClick={() => toggleFilters(true)}>
|
||||
<img src={filterIcon} alt='Фильтровать объявления' title='Фильтровать объявления' />
|
||||
</a>
|
||||
|
||||
<Link style={navBarElementStyles} to='/add' >
|
||||
<Link style={styles.navBarElement} to='/add' >
|
||||
<img src={addIcon} alt='Опубликовать объявление' title='Опубликовать объявление' />
|
||||
</Link>
|
||||
|
||||
<Link style={navBarElementStyles} to={'/user'} >
|
||||
<Link style={styles.navBarElement} to={'/user'} >
|
||||
<img src={userIcon} alt='Личный кабинет' title='Личный кабинет' />
|
||||
</Link>
|
||||
|
||||
|
||||
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
|
||||
|
||||
import App from './App.tsx'
|
||||
import './index.css'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
|
||||
@ -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 { MapContainer, TileLayer } from 'react-leaflet'
|
||||
import { latLng } from 'leaflet'
|
||||
@ -11,6 +11,19 @@ import { stations, lines, lineNames } from '../assets/metro'
|
||||
import { fallbackError, gotError } from '../hooks/api/useFetch'
|
||||
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() {
|
||||
const [addressPosition, setAddressPosition] = useState(latLng(59.972, 30.3227))
|
||||
|
||||
@ -54,8 +67,8 @@ function AddPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className='m-4' style={{ height: 'calc(100vh - 3rem)' }}>
|
||||
<Card.Body style={{ overflowY: 'auto' }} >
|
||||
<Card className='m-4' style={styles.modal}>
|
||||
<Card.Body style={styles.body} >
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Form.Group className='mb-3' controlId='name'>
|
||||
<Form.Label>Заголовок объявления</Form.Label>
|
||||
@ -84,7 +97,7 @@ function AddPage() {
|
||||
<div className='mb-3'>
|
||||
<MapContainer
|
||||
scrollWheelZoom={false}
|
||||
style={{ width: '100%', height: 400 }}
|
||||
style={styles.map}
|
||||
center={addressPosition}
|
||||
zoom={13}
|
||||
>
|
||||
@ -143,19 +156,19 @@ function AddPage() {
|
||||
<div className='mb-3'>
|
||||
{trashboxes.loading
|
||||
? (
|
||||
<div style={{ height: 400 }}>
|
||||
<div style={styles.map}>
|
||||
<p>Загрузка...</p>
|
||||
</div>
|
||||
) : (
|
||||
gotError(trashboxes) ? (
|
||||
<p
|
||||
style={{ height: 400 }}
|
||||
style={styles.map}
|
||||
className='text-danger'
|
||||
>{trashboxes.error}</p>
|
||||
) : (
|
||||
<MapContainer
|
||||
scrollWheelZoom={false}
|
||||
style={{ width: '100%', height: 400 }}
|
||||
style={styles.map}
|
||||
center={addressPosition}
|
||||
zoom={13}
|
||||
className=''
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { CSSProperties, useEffect, useState } from 'react'
|
||||
import Stories from 'react-insta-stories'
|
||||
import { Story } from 'react-insta-stories/dist/interfaces'
|
||||
|
||||
@ -44,17 +44,22 @@ const fallbackStory = (text = '', isError = false): Story[] => [{
|
||||
useEffect(() => { action('pause') }, [action])
|
||||
|
||||
return (
|
||||
<div style={{ margin: 'auto' }} className={isError ? 'text-danger' : ''}>
|
||||
<div style={styles.center} className={isError ? 'text-danger' : ''}>
|
||||
{text || <img src={puffSpinner} />}
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}]
|
||||
|
||||
const storiesContainerCSS = {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgb(17, 17, 17)'
|
||||
const styles = {
|
||||
container: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
backgroundColor: 'rgb(17, 17, 17)',
|
||||
} as CSSProperties,
|
||||
center: {
|
||||
margin: 'auto'
|
||||
} as CSSProperties,
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
@ -69,7 +74,7 @@ function HomePage() {
|
||||
|
||||
return (<>
|
||||
<Filters filter={filter} setFilter={setFilter} filterShown={filterShown} setFilterShown={setFilterShown} />
|
||||
<div style={storiesContainerCSS}>
|
||||
<div style={styles.container}>
|
||||
<Stories
|
||||
stories={stories}
|
||||
defaultInterval={11000}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user