Alexander/FitTrackee
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client - minor style change

Browse Source
This commit is contained in:
Sam 2020-05-02 19:32:38 +02:00
parent ba9290bcd8
commit e28d609013
12 changed files with 179 additions and 158 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
fittrackee_client/src/components/Admin/AdminApplication.jsx
View File

@ -1,6 +1,5 @@
import React from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import Message from '../Common/Message'
import { updateAppConfig } from '../../actions/application'
@ -56,16 +55,15 @@ class AdminApplication extends React.Component {
const { formData, isInEdition } = this.state
return (
<div>
<Helmet>
FitTrackee - {t('administration:Application configuration')}
</Helmet>
{message && <Message message={message} t={t} />}
{Object.keys(formData).length > 0 && (
<div className="row">
<div className="col-md-12">
<div className="card">
<div className="card-header">
{t('administration:Application configuration')}
<strong>
{t('administration:Application configuration')}
</strong>
</div>
<div className="card-body">
<form

108
fittrackee_client/src/components/Admin/AdminDashboard.jsx
View File

@ -1,67 +1,63 @@
import React from 'react'
import { Link } from 'react-router-dom'
import { Helmet } from 'react-helmet'
import AdminStats from './AdminStats'
export default function AdminDashboard(props) {
const { t } = props
return (
<>
<Helmet>
<title>{t('administration:FitTrackee administration')}</title>
</Helmet>
<div className="card activity-card">
<div className="card-header">{t('administration:Administration')}</div>
<div className="card-body">
<AdminStats />
<br />
<dl className="admin-items">
<dt>
<Link
to={{
pathname: '/admin/application',
}}
>
{t('administration:Application')}
</Link>
</dt>
<dd>
{t(
'administration:Update application configuration ' +
'(maximum number of registered users, maximum files size).'
)}{' '}
</dd>
<br />
<dt>
<Link
to={{
pathname: '/admin/sports',
}}
>
{t('administration:Sports')}
</Link>
</dt>
<dd>{t('administration:Enable/disable sports.')}</dd>
<br />
<dt>
<Link
to={{
pathname: '/admin/users',
}}
>
{t('administration:Users')}
</Link>
</dt>
<dd>
{t(
'administration:Add/remove admin rigths, ' +
'delete user account.'
)}
</dd>
</dl>
</div>
<div className="card activity-card">
<div className="card-header">
<strong>{t('administration:Administration')}</strong>
</div>
</>
<div className="card-body">
<AdminStats />
<br />
<dl className="admin-items">
<dt>
<Link
to={{
pathname: '/admin/application',
}}
>
{t('administration:Application')}
</Link>
</dt>
<dd>
{t(
'administration:Update application configuration ' +
'(maximum number of registered users, maximum files size).'
)}{' '}
</dd>
<br />
<dt>
<Link
to={{
pathname: '/admin/sports',
}}
>
{t('administration:Sports')}
</Link>
</dt>
<dd>{t('administration:Enable/disable sports.')}</dd>
<br />
<dt>
<Link
to={{
pathname: '/admin/users',
}}
>
{t('administration:Users')}
</Link>
</dt>
<dd>
{t(
'administration:Add/remove admin rigths, ' +
'delete user account.'
)}
</dd>
</dl>
</div>
</div>
)
}

8
fittrackee_client/src/components/Admin/AdminSports.jsx
View File

@ -1,6 +1,5 @@
import React from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import Message from '../Common/Message'
import { getOrUpdateData } from '../../actions'
@ -15,14 +14,13 @@ class AdminSports extends React.Component {
const { message, sports, t, updateSport } = this.props
return (
<div>
<Helmet>
<title>FitTrackee - {t('administration:Administration')}</title>
</Helmet>
{message && <Message message={message} t={t} />}
<div className="row">
<div className="col">
<div className="card">
<div className="card-header">{t('administration:Sports')}</div>
<div className="card-header">
<strong>{t('administration:Sports')}</strong>
</div>
<div className="card-body">
{sports.length > 0 && (
<table className="table">

8
fittrackee_client/src/components/Admin/AdminUsers.jsx
View File

@ -1,7 +1,6 @@
import { format } from 'date-fns'
import React from 'react'
import { connect } from 'react-redux'
import { Helmet } from 'react-helmet'
import { Link } from 'react-router-dom'
import Message from '../Common/Message'
@ -70,15 +69,14 @@ class AdminUsers extends React.Component {
const translatedSortOrders = translateValues(t, sortOrders)
return (
<div>
<Helmet>
<title>FitTrackee - {t('administration:Administration')}</title>
</Helmet>
{message && <Message message={message} t={t} />}
<div className="container">
<div className="row">
<div className="col">
<div className="card">
<div className="card-header">{t('administration:Users')}</div>
<div className="card-header">
<strong>{t('administration:Users')}</strong>
</div>
<div className="card-body">
<div className="row user-filters">
<div className="col-lg-4 col-md-6 col-sm-12">

87
fittrackee_client/src/components/App.css
View File

@ -428,7 +428,7 @@ label {
}
.no-picture {
color: #40578a;
color: #405976;
}
.page-title {
@ -524,49 +524,11 @@ label {
.user-filters {
font-size: 0.9em;
margin-bottom: 5px;
margin-bottom: 10px;
}
/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
.heading-span {
background: #eee;
color: dimgrey;
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
}
@media(max-width: 1024px) {
table thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
table tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
table td {
border: 1px solid lightgrey;
margin: 0 -1px -1px 0;
padding-top: 35px !important;
position: relative;
text-align: center;
width: 50%;
}
.heading-span {
display: block;
}
.user-label {
font-weight: bold;
}
.weather-img {
@ -588,8 +550,45 @@ label {
padding: 0.1em;
}
.user-table {
font-size: 0.9em;
/* responsive table */
/* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
.heading-span {
background: #eee;
color: dimgrey;
display: none;
font-size: 10px;
font-weight: bold;
padding: 5px;
position: absolute;
text-transform: uppercase;
top: 0;
left: 0;
}
@media(max-width: 1024px) {
table thead {
left: -9999px;
position: absolute;
visibility: hidden;
}
table tr {
border-bottom: 0;
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 40px;
}
table td {
border: 1px solid lightgrey;
margin: 0 -1px -1px 0;
padding-top: 35px !important;
position: relative;
text-align: center;
width: 50%;
}
.heading-span {
display: block;
}
}
/* calendar */

1
fittrackee_client/src/components/Dashboard/index.jsx
View File

@ -49,6 +49,7 @@ class DashBoard extends React.Component {
<Message message={message} t={t} />
) : (
activities &&
user.total_duration &&
sports.length > 0 && (
<div className="container dashboard">
<UserStatistics user={user} t={t} />

23
fittrackee_client/src/components/NavBar/index.jsx
View File

@ -117,14 +117,20 @@ class NavBar extends React.PureComponent {
</Link>
</li>
)}
{picture === true && (
<img
alt="Avatar"
src={`${apiUrl}users/${username}/picture?${Date.now()}`}
className="img-fluid App-nav-profile-img"
/>
)}
{isAuthenticated && (
<>
{picture === true ? (
<img
alt="Avatar"
src={`${apiUrl}users/${username}/picture?${Date.now()}`}
className="img-fluid App-nav-profile-img"
/>
) : (
<i
className="fa fa-user-circle-o fa-2x no-picture"
aria-hidden="true"
/>
)}
<li className="nav-item">
<Link
className="nav-link"
@ -135,8 +141,6 @@ class NavBar extends React.PureComponent {
{username}
</Link>
</li>
)}
{isAuthenticated && (
<li className="nav-item">
<Link
className="nav-link"
@ -147,6 +151,7 @@ class NavBar extends React.PureComponent {
{t('common:Logout')}
</Link>
</li>
</>
)}
<li><LanguageDropdown /></li>
</ul>

90
fittrackee_client/src/components/User/ProfileDetail.jsx
View File

@ -3,7 +3,6 @@ import React from 'react'
import { Helmet } from 'react-helmet'
import { withTranslation } from 'react-i18next'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Message from '../Common/Message'
import { deletePicture, uploadPicture } from '../../actions/user'
@ -40,57 +39,64 @@ function ProfileDetail({
<div className="col-md-12">
<div className="card">
<div className="card-header userName">
{user.username}{' '}
{editable && (
<Link
to={{
pathname: '/profile/edit',
}}
>
<i className="fa fa-pencil-square-o" aria-hidden="true" />
</Link>
)}{' '}
{isDeletable && (
<i
className="fa fa-user-times fa-as-link"
aria-hidden="true"
onClick={() => displayModal(true)}
/>
)}
<strong>{user.username}</strong>
</div>
<div className="card-body">
<div className="row">
<div className="col-md-8">
<p>
{t('user:Email')}: {user.email}
{/* eslint-disable-next-line max-len */}
<span className="user-label">
{t('user:Email')}
</span>: {user.email}
</p>
<p>
{t('user:Registration Date')}: {createdAt}
<span className="user-label">
{t('user:Registration Date')}
</span>
: {createdAt}
</p>
<p>
{t('user:First Name')}: {user.first_name}
<span className="user-label">{t('user:First Name')}</span>
: {user.first_name}
</p>
<p>
{t('user:Last Name')}: {user.last_name}
{/* eslint-disable-next-line max-len */}
<span className="user-label">
{t('user:Last Name')}
</span>: {user.last_name}
</p>
<p>
{t('user:Birth Date')}: {birthDate}
<span className="user-label">{t('user:Birth Date')}</span>
: {birthDate}
</p>
<p>
{t('user:Location')}: {user.location}
{/* eslint-disable-next-line max-len */}
<span className="user-label">
{t('user:Location')}
</span>: {user.location}
</p>
<p>
{t('user:Bio')}: {user.bio}
<span className="user-label">{t('user:Bio')}</span>:{' '}
{user.bio}
</p>
<p>
{t('user:Language')}: {user.language}
{/* eslint-disable-next-line max-len */}
<span className="user-label">
{t('user:Language')}
</span>: {user.language}
</p>
<p>
{t('user:Timezone')}: {user.timezone}
{/* eslint-disable-next-line max-len */}
<span className="user-label">
{t('user:Timezone')}
</span>: {user.timezone}
</p>
<p>
{t('user:First day of week')}:{' '}
{user.weekm ? t('user:Monday') : t('user:Sunday')}
<span className="user-label">
{t('user:First day of week')}
</span>
: {user.weekm ? t('user:Monday') : t('user:Sunday')}
</p>
</div>
<div className="col-md-4">
@ -136,12 +142,28 @@ function ProfileDetail({
)}{' '}
</div>
</div>
<input
type="submit"
{editable && (
<button
className="btn btn-primary"
onClick={() => history.push('/profile/edit')}
>
{t('common:Edit')}
</button>
)}
{isDeletable && (
<button
className="btn btn-danger"
onClick={() => displayModal(true)}
>
{t('user:Delete user account')}
</button>
)}
<button
className="btn btn-secondary"
onClick={() => history.go(-1)}
value={t('common:Back')}
/>
onClick={() => history.push('/')}
>
{t('common:Back to home')}
</button>
</div>
</div>
</div>

1
fittrackee_client/src/locales/en/common.json
View File

@ -4,6 +4,7 @@
"admin rights": "admin rights",
"ascending": "ascending",
"Back": "Back",
"Back to home": "Back to home",
"Cancel": "Cancel",
"Confirmation": "Confirmation",
"Dashboard": "Dashboard",

1
fittrackee_client/src/locales/en/user.json
View File

@ -6,6 +6,7 @@
"Birth Date": "Birth Date",
"Delete my account": "Delete my account",
"Delete picture": "Delete picture",
"Delete user account": "Delete user account",
"Edit Profile": "Edit Profile",
"Email": "Email",
"Enter a username": "Enter a username",

1
fittrackee_client/src/locales/fr/common.json
View File

@ -4,6 +4,7 @@
"admin rights": "droits d'admin",
"ascending": "ascendant",
"Back": "Revenir à la page précédente",
"Back to home": "Retour à l'accueil",
"Cancel": "Annuler",
"Confirmation": "Confirmation",
"Dashboard": "Tableau de Bord",

1
fittrackee_client/src/locales/fr/user.json
View File

@ -6,6 +6,7 @@
"Birth Date": "Date de naissance",
"Delete my account": "Supprimer mon compte",
"Delete picture": "Supprimer l'image",
"Delete user account": "Supprimer le compte",
"Edit Profile": "Editer le profil",
"Email": "Email",
"Enter a username": "Saisir un nom",