Client - minor style changes

This commit is contained in:
Sam 2020-05-01 18:06:05 +02:00
parent 8f48c34bed
commit d6615795ba
11 changed files with 238 additions and 262 deletions

View File

@ -1,23 +1,38 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet'
import AdminStats from './AdminStats'
import { capitalize } from '../../utils'
const menuItems = ['application', 'sports', 'users']
export default function AdminDashboard(props) {
const { t } = props
return (
<div>
<>
<Helmet>
<title>{t('administration:FitTrackee administration')}</title>
</Helmet>
<div className="card activity-card">
<div className="card-header">
<strong>{t('administration:FitTrackee administration')}</strong>
</div>
<div className="card-header">{t('administration:Administration')}</div>
<div className="card-body">
<AdminStats />
<ul className="admin-items">
{menuItems.map(item => (
<li key={item}>
<Link
to={{
pathname: `/admin/${item}`,
}}
>
{t(`administration:${capitalize(item)}`)}
</Link>
</li>
))}
</ul>
</div>
</div>
</div>
</>
)
}

View File

@ -1,27 +0,0 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { capitalize } from '../../utils/index'
const menuItems = ['application', 'sports', 'users']
export default function AdminMenu(props) {
const { t } = props
return (
<div>
<ul className="admin-items">
{menuItems.map(item => (
<li key={item}>
<Link
to={{
pathname: `/admin/${item}`,
}}
>
{t(`administration:${capitalize(item)}`)}
</Link>
</li>
))}
</ul>
</div>
)
}

View File

@ -14,9 +14,8 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
</title>
</Helmet>
<Message message={message} t={t} />
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="col">
<div className="card">
<div className="card-header">
{t('administration:Application configuration')}
@ -24,7 +23,7 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
<div className="card-body">
<div className="row">
<div className="col">
<table className="table">
<table className="table table-borderless">
<tbody>
<tr>
<th scope="row">
@ -58,13 +57,13 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
</table>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
className="btn btn-primary"
onClick={() => updateIsInEdition()}
value={t('common:Edit')}
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
className="btn btn-secondary"
onClick={() => history.push('/admin')}
value={t('common:Back')}
/>
@ -75,6 +74,5 @@ export default function Config({ appConfig, message, t, updateIsInEdition }) {
</div>
</div>
</div>
</div>
)
}

View File

@ -57,7 +57,6 @@ class AdminApplication extends React.Component {
</Helmet>
{message && <Message message={message} t={t} />}
{Object.keys(formData).length > 0 && (
<div className="container">
<div className="row">
<div className="col-md-12">
<div className="card">
@ -120,8 +119,7 @@ class AdminApplication extends React.Component {
className="col-sm-6 col-form-label"
htmlFor="max_zip_file_size"
>
{t('administration:Max. size of zip archive (in Mb)')}
:
{t('administration:Max. size of zip archive (in Mb)')}:
</label>
<input
className="col-sm-5"
@ -153,12 +151,12 @@ class AdminApplication extends React.Component {
</div>
<input
type="submit"
className="btn btn-primary btn-lg btn-block"
className="btn btn-primary"
value={t('common:Submit')}
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
className="btn btn-secondary"
onClick={() => updateIsInEdition()}
value={t('common:Cancel')}
/>
@ -167,7 +165,6 @@ class AdminApplication extends React.Component {
</div>
</div>
</div>
</div>
)}
</div>
)

View File

@ -19,12 +19,13 @@ class AdminSports extends React.Component {
<title>FitTrackee - {t('administration:Administration')}</title>
</Helmet>
{message && <Message message={message} t={t} />}
<div className="container">
<div className="row">
<div className="col card">
<div className="col">
<div className="card">
<div className="card-header">{t('administration:Sports')}</div>
<div className="card-body">
{sports.length > 0 && (
<table className="table">
<table className="table table-borderless">
<thead>
<tr>
<th>{t('administration:id')}</th>
@ -93,7 +94,7 @@ class AdminSports extends React.Component {
)}
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
className="btn btn-secondary"
onClick={() => history.push('/admin/')}
value={t('administration:Back')}
/>

View File

@ -26,7 +26,7 @@ class AdminUsers extends React.Component {
<div className="row">
<div className="col card">
<div className="card-body">
<table className="table user-table">
<table className="table table-borderless">
<thead>
<tr>
<th>#</th>
@ -103,7 +103,7 @@ class AdminUsers extends React.Component {
</table>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
className="btn btn-secondary"
onClick={() => history.push('/admin/')}
value={t('administration:Back')}
/>

View File

@ -2,11 +2,10 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { Link, Route, Switch } from 'react-router-dom'
import { Route, Switch } from 'react-router-dom'
import AdminApplication from './Application'
import AdminDashboard from './AdminDashboard'
import AdminMenu from './AdminMenu'
import AdminSports from './Sports'
import AdminUsers from './Users'
import NotFound from './../Others/NotFound'
@ -14,30 +13,12 @@ import NotFound from './../Others/NotFound'
function Admin(props) {
const { t, user } = props
return (
<div>
<>
<Helmet>
<title>FitTrackee - {t('administration:Administration')}</title>
</Helmet>
<div className="container dashboard">
{user.admin ? (
<div className="row">
<div className="col-md-3">
<div className="card activity-card">
<div className="card-header">
<Link
to={{
pathname: '/admin/',
}}
>
{t('administration:Administration')}
</Link>
</div>
<div className="card-body">
<AdminMenu t={t} />
</div>
</div>
</div>
<div className="col-md-9">
<Switch>
<Route
exact
@ -61,13 +42,11 @@ function Admin(props) {
/>
<Route component={NotFound} />
</Switch>
</div>
</div>
) : (
<NotFound />
)}
</div>
</div>
</>
)
}

View File

@ -187,6 +187,10 @@ label {
font-weight: bold;
}
.btn {
margin-right: 10px;
}
.card {
text-align: left;
}
@ -286,6 +290,9 @@ label {
font-weight: bold;
}
.dashboard {
height: 100%;
}
.dashboard, .history {
margin-top: 30px;
}
@ -316,6 +323,10 @@ label {
content: " ✔";
}
.error-message {
margin-top: 10px;
}
.fa-as-link {
cursor:pointer;
color: #40578a;

View File

@ -12,7 +12,7 @@ export default class Message extends React.PureComponent {
)}`
: t(`messages:${message}`)
return (
<>
<div className="error-message">
{singleMessage !== '' && <code>{singleMessage}</code>}
{messages && messages.length > 0 && (
<code>
@ -23,7 +23,7 @@ export default class Message extends React.PureComponent {
</ul>
</code>
)}
</>
</div>
)
}
}

View File

@ -19,7 +19,6 @@ export default function Form(props) {
<div className="row">
<div className="col-md-3" />
<div className="col-md-6">
<hr />
<br />
{props.formType === 'register' && !props.isRegistrationAllowed ? (
<div className="card">

View File

@ -74,7 +74,6 @@ class ProfileEdit extends React.Component {
<Helmet>
<title>FitTrackee - {t('user:Profile Edition')}</title>
</Helmet>
<Message message={message} t={t} />
{formData.isAuthenticated && (
<div className="container">
{displayModal && (
@ -266,23 +265,27 @@ class ProfileEdit extends React.Component {
</select>
</label>
</div>
<input
<button type="submit" className="btn btn-primary">
{t('common:Submit')}
</button>
<button
className="btn btn-danger"
onClick={event => {
event.preventDefault()
this.displayModal(true)
}}
>
{t('user:Delete my account')}
</button>
<button
type="submit"
className="btn btn-primary btn-lg btn-block"
value={t('common:Submit')}
/>
<input
className="btn btn-danger btn-lg btn-block"
onClick={() => this.displayModal(true)}
defaultValue={t('user:Delete my account')}
/>
<input
type="submit"
className="btn btn-secondary btn-lg btn-block"
className="btn btn-secondary"
onClick={() => history.push('/profile')}
value={t('common:Cancel')}
/>
>
{t('common:Cancel')}
</button>
</form>
<Message message={message} t={t} />
</div>
</div>
</div>