Skip to content

E
ESYTD
Commit b7dd0273 authored by Merekeyev Dias's avatar Merekeyev Dias
Browse files
Options

refactor styling

parent 24fa6480
Hide whitespace changes
Inline Side-by-side
Showing with 171 additions and 90 deletions
index.html
View file @ b7dd0273
...@@ -5,13 +5,9 @@ ...@@ -5,13 +5,9 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ЕСУТД</title> <title>ЕСУТД</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
rel="stylesheet">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>
\ No newline at end of file
src/App.css
View file @ b7dd0273
:root {
--main-blue: #041225;
--icon-blue: #0E2B52;
}
.container {
width: 100%;
max-width: 1500px;
margin: 0 auto;
}
.text-blue {
color: var(--icon-blue);
}
.text-1 {
font-size: 1rem !important;
}
.text-125 {
font-size: 1.25rem !important;
}
.text-15 {
font-size: 1.5rem !important;
}
\ No newline at end of file
src/components/Header/Header.css → src/components/Header/Header.module.css
View file @ b7dd0273
.header { .header {
background-color: #041225; background-color: var(--main-blue);
color: #fff; color: #fff;
display: flex; display: flex;
padding: 1rem .5rem; padding: 1rem .5rem;
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
.header_left { .header_left {
display: flex; display: flex;
align-items: center; align-items: center;
gap: .5rem;
} }
.header_title { .header_title {
...@@ -25,30 +26,30 @@ ...@@ -25,30 +26,30 @@
} }
/* Customizing drawer */ /* Customizing drawer */
.custom-drawer { .custom_drawer {
color: #fff; color: #fff;
background-color: #041225 !important; background-color: var(--main-blue) !important;
} }
.custom-drawer .ant-drawer-header { .custom_drawer :global(.ant-drawer-header) {
padding-bottom: 1.35rem; padding-bottom: 1.35rem;
border-bottom: 2px solid; border-bottom: 2px solid;
} }
.custom-drawer .ant-drawer-header-title { .custom_drawer :global(.ant-drawer-header-title) {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
.custom-drawer .ant-drawer-title { .custom_drawer :global(.ant-drawer-title) {
font-size: 1.1rem; font-size: 1.1rem;
letter-spacing: 1px; letter-spacing: 1px;
} }
.custom-drawer .ant-drawer-close span{ .custom_drawer :global(.ant-drawer-close span) {
color: #fff; color: #fff;
} }
.custom-drawer .ant-drawer-body { .custom_drawer :global(.ant-drawer-body) {
margin-top: 1.2rem; margin-top: 1.2rem;
padding: 0; padding: 0;
} }
\ No newline at end of file
src/components/Header/Header.tsx
View file @ b7dd0273
...@@ -5,7 +5,7 @@ import { Menu, Button, Drawer } from 'antd'; ...@@ -5,7 +5,7 @@ import { Menu, Button, Drawer } from 'antd';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { clearToken } from '@/store/store'; import { clearToken } from '@/store/store';
import './Header.css'; import styles from './Header.module.css';
type MenuItem = Required<MenuProps>['items'][number]; type MenuItem = Required<MenuProps>['items'][number];
...@@ -47,23 +47,22 @@ const Header: React.FC = () => { ...@@ -47,23 +47,22 @@ const Header: React.FC = () => {
}; };
return ( return (
<header className="header"> <header className={styles.header}>
<div className="header_left"> <div className={styles.header_left}>
<Button <Button
type='text' type='text'
onClick={() => { onClick={() => {
setOpenMenu(true); setOpenMenu(true);
}} }}
> icon={<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>menu</span>}
<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>menu</span> />
</Button>
<Drawer <Drawer
open={openMenu} open={openMenu}
onClose={() => { onClose={() => {
setOpenMenu(false); setOpenMenu(false);
}} }}
placement='left' placement='left'
className='custom-drawer' className={styles.custom_drawer}
title="ЕСУТД" title="ЕСУТД"
> >
<Menu <Menu
...@@ -71,15 +70,18 @@ const Header: React.FC = () => { ...@@ -71,15 +70,18 @@ const Header: React.FC = () => {
items={MenuItems} items={MenuItems}
selectedKeys={[currentNav]} selectedKeys={[currentNav]}
mode='inline' mode='inline'
className="menu" className={styles.menu}
onClick={handleMenuClick} onClick={handleMenuClick}
/> />
</Drawer> </Drawer>
<h1 className="header_title">ЕСУТД</h1> <h1 className={styles.header_title}>ЕСУТД</h1>
</div> </div>
<Button type='text' className="header_logout" onClick={handleLogout}> <Button
<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>logout</span> type='text'
</Button> className={styles.header_logout}
onClick={handleLogout}
icon={<span className='material-icons' style={{fontSize: 24, color: '#fff'}}>logout</span>}
/>
</header> </header>
); );
}; };
......
src/index.css
View file @ b7dd0273
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
html, html,
body { body {
box-sizing: border-box; box-sizing: border-box;
font-family: Open Sans;
font-weight: 700; font-weight: 700;
} }
......
src/main.tsx
View file @ b7dd0273
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import './index.css';
import App from './App.tsx';
import {store, persistor} from '../src/store/store.ts'; import {store, persistor} from '../src/store/store.ts';
import { PersistGate } from 'redux-persist/integration/react'; import { PersistGate } from 'redux-persist/integration/react';
import '../node_modules/material-icons/iconfont/material-icons.css' import '../node_modules/material-icons/iconfont/material-icons.css'
import './index.css';
export type RootState = ReturnType<typeof store.getState>; export type RootState = ReturnType<typeof store.getState>;
ReactDOM.createRoot(document.getElementById('root')!).render( ReactDOM.createRoot(document.getElementById('root')!).render(
...@@ -16,4 +18,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render( ...@@ -16,4 +18,4 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
</PersistGate> </PersistGate>
</Provider> </Provider>
</React.StrictMode>, </React.StrictMode>,
); );
\ No newline at end of file
src/pages/HomePage/Columns.tsx
View file @ b7dd0273
...@@ -5,9 +5,10 @@ import { Button, Space, Tag, Modal, Checkbox, message } from 'antd'; ...@@ -5,9 +5,10 @@ import { Button, Space, Tag, Modal, Checkbox, message } from 'antd';
import type { TableProps } from 'antd'; import type { TableProps } from 'antd';
import { useDeleteOrganizationMutation } from '@/api/organizationApi'; import { useDeleteOrganizationMutation } from '@/api/organizationApi';
import { addCheckedCode, removeCheckedCode } from '@/store/slices/syncBtn'; import { addCheckedCode, removeCheckedCode } from '@/store/slices/syncBtnSlice';
import { setCurrentPage } from '@/store/slices/mainPagination'; import { setCurrentPage } from '@/store/slices/mainPaginationSlice';
import { getStatusText, getStatusColor } from './utils'; import { getStatusText, getStatusColor } from './utils';
import styles from './Homepage.module.css';
export interface DataType { export interface DataType {
id: number; id: number;
...@@ -53,7 +54,7 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -53,7 +54,7 @@ export const columns: TableProps<DataType>['columns'] = [
dataIndex: "status", dataIndex: "status",
key: "status", key: "status",
render: (_, record) => ( render: (_, record) => (
<Tag color={getStatusColor(record.status)} style={{ fontSize: '14px' }}> <Tag color={getStatusColor(record.status)}>
{getStatusText(record.status)} {getStatusText(record.status)}
</Tag> </Tag>
) )
...@@ -86,7 +87,7 @@ export const CheckboxColumn: React.FC<{ data: DataType }> = ({ data }) => { ...@@ -86,7 +87,7 @@ export const CheckboxColumn: React.FC<{ data: DataType }> = ({ data }) => {
return ( return (
<Checkbox <Checkbox
className='checkbox_org--custom' className={styles.custom_checkbox}
checked={checked} checked={checked}
onChange={handleCheck} onChange={handleCheck}
id={`checkbox-${data.id}`} id={`checkbox-${data.id}`}
...@@ -132,12 +133,12 @@ export const ActionColumn: React.FC<{ data: DataType }> = ({ data }) => { ...@@ -132,12 +133,12 @@ export const ActionColumn: React.FC<{ data: DataType }> = ({ data }) => {
<Space> <Space>
<Button <Button
onClick={handleEditClick} onClick={handleEditClick}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>visibility</span>} icon={<span className='material-icons text-blue text-125'>visibility</span>}
type='text' type='text'
/> />
<Button <Button
onClick={showDeleteModal} onClick={showDeleteModal}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>delete</span>} icon={<span className='material-icons text-blue text-125'>delete</span>}
type='text' type='text'
/> />
<Modal <Modal
......
src/pages/HomePage/HomePage.tsx
View file @ b7dd0273
...@@ -6,10 +6,10 @@ import { TableRef } from 'antd/es/table'; ...@@ -6,10 +6,10 @@ import { TableRef } from 'antd/es/table';
import { useGetOrganizationsQuery } from '@/api/organizationApi'; import { useGetOrganizationsQuery } from '@/api/organizationApi';
import { useUpdateDictionaryMutation } from '@/api/manualApi'; import { useUpdateDictionaryMutation } from '@/api/manualApi';
import { setCurrentPage, setTotalOrgNumber } from '@/store/slices/mainPagination'; import { setCurrentPage, setTotalOrgNumber } from '@/store/slices/mainPaginationSlice';
import { setDisabled, clearCheckedCodes } from '@/store/slices/syncBtn'; import { setDisabled, clearCheckedCodes } from '@/store/slices/syncBtnSlice';
import { DataType, columns } from './Columns'; import { DataType, columns } from './Columns';
import './Homepage.css'; import styles from './Homepage.module.css';
const HomePage: React.FC = () => { const HomePage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -72,7 +72,7 @@ const HomePage: React.FC = () => { ...@@ -72,7 +72,7 @@ const HomePage: React.FC = () => {
scroll={{ scroll={{
scrollToFirstRowOnChange: true, scrollToFirstRowOnChange: true,
x: 'max-content', x: 'max-content',
y: 470 y: window.innerHeight - 250
}} }}
pagination={{ pagination={{
position: ['bottomCenter'], position: ['bottomCenter'],
...@@ -107,30 +107,28 @@ const HomePage: React.FC = () => { ...@@ -107,30 +107,28 @@ const HomePage: React.FC = () => {
}, [checkedCodes, dispatch]) }, [checkedCodes, dispatch])
return ( return (
<div className="container"> <div className='container'>
<section className='section'> <Space className={styles.btn_section} size={'middle'}>
<Space size={'middle'}> <Button
<Button className={styles.btn}
className='add_title' onClick={handleAddClick}
onClick={handleAddClick} icon={<span className='material-icons text-blue text-15'>add_circle</span>}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>add_circle</span>} >
> Добавить
Добавить </Button>
</Button> <Button
<Button className={styles.btn}
className='add_title' onClick={handleSyncClick}
onClick={handleSyncClick} disabled={syncBtnState}
disabled={syncBtnState} loading={isSyncLoading}
loading={isSyncLoading} icon={<span className='material-icons text-blue text-15'>sync</span>}
icon={<span className='material-icons' style={{fontSize: 22, color: '#0E2B52'}}>sync</span>} >
> Синхронизировать справочники
Синхронизировать справочники </Button>
</Button> </Space>
</Space> <div className="data">
<div className="data"> {table}
{table} </div>
</div>
</section>
</div> </div>
); );
} }
......
src/pages/HomePage/Homepage.css → src/pages/HomePage/Homepage.module.css
View file @ b7dd0273
.add_title { .btn_section {
font-size: 12px; margin: 1rem 0;
line-height: 18px; }
text-decoration: none;
.btn {
font-size: .8rem;
font-weight: 700; font-weight: 700;
margin-left: -10px; text-decoration: none;
margin-left: .5rem;
} }
/* Custom antd checkbox */ /* Custom antd checkbox */
.checkbox_org--custom .ant-checkbox-inner { .custom_checkbox :global(.ant-checkbox-inner) {
border-color: #33333386; border-color: #33333386;
} }
\ No newline at end of file
src/pages/HomePage/utils.ts
View file @ b7dd0273
...@@ -14,4 +14,4 @@ export const getStatusColor = (status: number) => { ...@@ -14,4 +14,4 @@ export const getStatusColor = (status: number) => {
case 2: return 'green'; case 2: return 'green';
default: return 'grey'; default: return 'grey';
} }
} }
\ No newline at end of file
src/pages/ManageOrganization/ManageOrganization.tsx
View file @ b7dd0273
...@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux'; ...@@ -4,7 +4,7 @@ import { useSelector, useDispatch } from 'react-redux';
import { Form, Input, Button, Select, message } from 'antd'; import { Form, Input, Button, Select, message } from 'antd';
import { useEditOrganizationMutation, useGetOrganizationQuery, useGetOrganizationsQuery } from '@/api/organizationApi'; import { useEditOrganizationMutation, useGetOrganizationQuery, useGetOrganizationsQuery } from '@/api/organizationApi';
import { setTotalOrgNumber, setCurrentPage } from '@/store/slices/mainPagination'; import { setTotalOrgNumber, setCurrentPage } from '@/store/slices/mainPaginationSlice';
import './ManageOrganization.css'; import './ManageOrganization.css';
interface OrganizationValues { interface OrganizationValues {
......
src/pages/RequestPage/Columns.tsx
View file @ b7dd0273
...@@ -4,6 +4,7 @@ import type { TableProps } from 'antd'; ...@@ -4,6 +4,7 @@ import type { TableProps } from 'antd';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { getStatusText, getStatusColor, openXMLInNewPage, downloadXML } from './utils'; import { getStatusText, getStatusColor, openXMLInNewPage, downloadXML } from './utils';
import styles from './RequestPage.module.css';
export interface DataType { export interface DataType {
id: number; id: number;
...@@ -31,22 +32,33 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -31,22 +32,33 @@ export const columns: TableProps<DataType>['columns'] = [
key: "xml", key: "xml",
width: '1%', width: '1%',
render: (_, record) => ( render: (_, record) => (
<div style={{display: 'flex', alignItems: 'center', gap: 5}}> <div className={styles.data_interchange_btnGroup}>
<Button <Button
className={styles.data_interchange_btn}
type='link' type='link'
onClick={() => downloadXML(record.xml, record.id)} onClick={() => openXMLInNewPage(record.xml)}
style={{padding: 0}} >
icon={<span className='material-icons'>download</span>} Открыть
</Button>
<Button
className={styles.data_interchange_btn}
type='link'
onClick={() => downloadXML(record.xml, record.id)}
icon={<span className='material-icons text-125'>download</span>}
/> />
<Button type='link' onClick={() => openXMLInNewPage(record.xml)} style={{padding: 0}}>Открыть XML</Button>
</div> </div>
), ),
}, },
{
title: "JSON",
key: "json",
width: '5%',
},
{ {
title: "Дата отправки", title: "Дата отправки",
dataIndex: "sendDate", dataIndex: "sendDate",
key: "sendDate", key: "sendDate",
width: '6%', width: '7%',
render: (_, record) => ( render: (_, record) => (
<span>{dayjs(record.sendDate).format('DD-MM-YYYY HH:mm:ss')}</span> <span>{dayjs(record.sendDate).format('DD-MM-YYYY HH:mm:ss')}</span>
) )
...@@ -69,7 +81,7 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -69,7 +81,7 @@ export const columns: TableProps<DataType>['columns'] = [
key: "status", key: "status",
width: '1%', width: '1%',
render: (_, record) => ( render: (_, record) => (
<Tag color={getStatusColor(record.status)} style={{ fontSize: '12px' }}> <Tag color={getStatusColor(record.status)}>
{getStatusText(record.status)} {getStatusText(record.status)}
</Tag> </Tag>
) )
...@@ -80,14 +92,20 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -80,14 +92,20 @@ export const columns: TableProps<DataType>['columns'] = [
key: "errorMessage", key: "errorMessage",
width: '1%', width: '1%',
render: (_, record) => ( render: (_, record) => (
<Button type='link' onClick={() => openXMLInNewPage(record.xml)} style={{padding: 0}}>Открыть сообщение</Button> <Button
className={styles.data_interchange_btn}
type='link'
onClick={() => openXMLInNewPage(record.xml)}
>
Открыть сообщение
</Button>
) )
}, },
{ {
title: "Дата переотправки", title: "Дата переотправки",
dataIndex: "resendDate", dataIndex: "resendDate",
key: "resendDate", key: "resendDate",
width: '6%' width: '6%',
}, },
{ {
title: "Количество попыток", title: "Количество попыток",
...@@ -97,10 +115,11 @@ export const columns: TableProps<DataType>['columns'] = [ ...@@ -97,10 +115,11 @@ export const columns: TableProps<DataType>['columns'] = [
}, },
{ {
width: '1%', width: '1%',
align: 'center',
render: (_, record) => { render: (_, record) => {
return ( return (
<ResendColumn <ResendColumn
data={record} data={record}
/> />
) )
} }
...@@ -129,10 +148,10 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => { ...@@ -129,10 +148,10 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => {
}; };
return ( return (
<div style={{textAlign: 'center'}}> <>
<Button <Button
onClick={showResendModal} onClick={showResendModal}
icon={<span className='material-icons' style={{fontSize: 20, color: '#0E2B52'}}>mail</span>} icon={<span className='material-icons text-blue text-125'>mail</span>}
type='text' type='text'
/> />
<Modal <Modal
...@@ -140,9 +159,9 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => { ...@@ -140,9 +159,9 @@ export const ResendColumn: React.FC<{ data: DataType }> = ({ data }) => {
title={`Вы уверены, что хотите переотправить запрос с id ${data.id}?`} title={`Вы уверены, что хотите переотправить запрос с id ${data.id}?`}
onCancel={handleResendModalCancel} onCancel={handleResendModalCancel}
onOk={handleResendModalOk} onOk={handleResendModalOk}
> >
<p>Подтвердите переотправку запроса.</p> <p>Подтвердите переотправку запроса.</p>
</Modal> </Modal>
</div> </>
) )
} }
\ No newline at end of file
src/pages/RequestPage/RequestPage.css → src/pages/RequestPage/RequestPage.module.css
View file @ b7dd0273
.filter { .filter_section {
margin: 1rem 1rem 1rem; margin: 1rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
...@@ -8,4 +8,14 @@ ...@@ -8,4 +8,14 @@
.fields { .fields {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
}
.data_interchange_btnGroup {
display: flex;
align-items: center;
gap: 5px;
}
.data_interchange_btn {
padding: 0;
} }
\ No newline at end of file
src/pages/RequestPage/RequestPage.tsx
View file @ b7dd0273
...@@ -7,9 +7,9 @@ import { DatePicker, Select, Button, Table } from 'antd'; ...@@ -7,9 +7,9 @@ import { DatePicker, Select, Button, Table } from 'antd';
import { TableRef } from 'antd/es/table'; import { TableRef } from 'antd/es/table';
import { useGetRequestsQuery } from '@/api/requestApi'; import { useGetRequestsQuery } from '@/api/requestApi';
import { setCurrentPage, setTotalReqNumber } from '@/store/slices/reqPagination' import { setCurrentPage, setTotalReqNumber } from '@/store/slices/reqPaginationSlice'
import { columns, DataType } from './Columns'; import { columns, DataType } from './Columns';
import './RequestPage.css'; import styles from './RequestPage.module.css';
const DATE_FORMAT = 'YYYY-MM-DD'; const DATE_FORMAT = 'YYYY-MM-DD';
const DEFAULT_DATES = { const DEFAULT_DATES = {
...@@ -88,9 +88,9 @@ const RequestPage: React.FC = () => { ...@@ -88,9 +88,9 @@ const RequestPage: React.FC = () => {
let max: number = -Infinity; let max: number = -Infinity;
if (isSuccess) { if (isSuccess) {
console.log(window.innerHeight)
reqs.list.forEach((req) => { reqs.list.forEach((req) => {
const dateValue = new Date(req.sendDate).valueOf(); const dateValue = new Date(req.sendDate).valueOf();
console.log(dateValue);
if (min > dateValue && dateValue!=0) { if (min > dateValue && dateValue!=0) {
min = dateValue; min = dateValue;
} }
...@@ -107,7 +107,7 @@ const RequestPage: React.FC = () => { ...@@ -107,7 +107,7 @@ const RequestPage: React.FC = () => {
scroll={{ scroll={{
scrollToFirstRowOnChange: true, scrollToFirstRowOnChange: true,
x: 'max-content', x: 'max-content',
y: 400 y: window.innerHeight - 270
}} }}
pagination={{ pagination={{
position: ['bottomCenter'], position: ['bottomCenter'],
...@@ -136,10 +136,11 @@ const RequestPage: React.FC = () => { ...@@ -136,10 +136,11 @@ const RequestPage: React.FC = () => {
return ( return (
<div className="container"> <div className="container">
<div className="filter"> <div className={styles.filter_section}>
<div className="fields"> <div className={styles.fields}>
<div className="dates"> <div className="dates">
<DatePicker.RangePicker <DatePicker.RangePicker
id={{start: 'startDate', end: 'endDate'}}
onChange={onRangeChange} onChange={onRangeChange}
defaultValue={[ defaultValue={[
dayjs(DEFAULT_DATES.startDate, DATE_FORMAT), dayjs(DEFAULT_DATES.startDate, DATE_FORMAT),
......
src/store/store.ts
View file @ b7dd0273
...@@ -3,9 +3,9 @@ import storage from 'redux-persist/lib/storage'; ...@@ -3,9 +3,9 @@ import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist'; import { persistReducer, persistStore } from 'redux-persist';
import { apiSlice } from '../api/mainApi'; import { apiSlice } from '../api/mainApi';
import mainPaginationReducer from './slices/mainPagination'; import mainPaginationReducer from './slices/mainPaginationSlice';
import reqPaginationReducer from './slices/reqPagination'; import reqPaginationReducer from './slices/reqPaginationSlice';
import syncBtnReducer from './slices/syncBtn'; import syncBtnReducer from './slices/syncBtnSlice';
interface AuthState { interface AuthState {
token: string | null; token: string | null;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment