Client - minor style change

2020-05-02 19:32:38 +02:00 · 2020-05-02 19:32:38 +02:00 · e28d609013
commit e28d609013
parent ba9290bcd8
12 changed files with 179 additions and 158 deletions
--- a/fittrackee_client/src/components/Admin/AdminApplication.jsx
+++ b/fittrackee_client/src/components/Admin/AdminApplication.jsx
@ -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">
+                  <strong>
                    {t('administration:Application configuration')}
+                  </strong>
                </div>
                <div className="card-body">
                  <form
--- a/fittrackee_client/src/components/Admin/AdminDashboard.jsx
+++ b/fittrackee_client/src/components/Admin/AdminDashboard.jsx
@ -1,18 +1,15 @@
 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-header">
+        <strong>{t('administration:Administration')}</strong>
+      </div>
      <div className="card-body">
        <AdminStats />
        <br />
@ -62,6 +59,5 @@ export default function AdminDashboard(props) {
        </dl>
      </div>
    </div>
-    </>
  )
 }
--- a/fittrackee_client/src/components/Admin/AdminSports.jsx
+++ b/fittrackee_client/src/components/Admin/AdminSports.jsx
@ -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">
--- a/fittrackee_client/src/components/Admin/AdminUsers.jsx
+++ b/fittrackee_client/src/components/Admin/AdminUsers.jsx
@ -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">
--- a/fittrackee_client/src/components/App.css
+++ b/fittrackee_client/src/components/App.css
@ -428,7 +428,7 @@ label {
 }

 .no-picture {
-  color: #40578a;
+  color: #405976;
 }

 .page-title {
@ -524,11 +524,33 @@ label {

 .user-filters {
  font-size: 0.9em;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
 }

+.user-label {
+  font-weight: bold;
+}

+.weather-img {
+  max-width: 35px;
+  max-height: 35px;
+}

+.weather-img-small {
+  max-width: 20px;
+  max-height: 20px;
+}
+
+.weather-table {
+  margin-bottom: 0;
+}
+
+.weather-table table, .weather-table th, .weather-table td{
+  font-size: 0.9em;
+  padding: 0.1em;
+}
+
+/* responsive table */
 /* adapted from https://uglyduck.ca/making-tables-responsive-with-minimal-css/ */
 .heading-span {
  background: #eee;
@ -569,29 +591,6 @@ label {
  }
 }

-.weather-img {
-  max-width: 35px;
-  max-height: 35px;
-}
-
-.weather-img-small {
-  max-width: 20px;
-  max-height: 20px;
-}
-
-.weather-table {
-  margin-bottom: 0;
-}
-
-.weather-table table, .weather-table th, .weather-table td{
-  font-size: 0.9em;
-  padding: 0.1em;
-}
-
-.user-table {
-  font-size: 0.9em;
-}
-
 /* calendar */
 :root {
  --main-color: #1a8fff;
--- a/fittrackee_client/src/components/Dashboard/index.jsx
+++ b/fittrackee_client/src/components/Dashboard/index.jsx
@ -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} />
--- a/fittrackee_client/src/components/NavBar/index.jsx
+++ b/fittrackee_client/src/components/NavBar/index.jsx
@ -117,14 +117,20 @@ class NavBar extends React.PureComponent {
                    </Link>
                  </li>
                )}
-                {picture === true && (
+                {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"
+                    />
                  )}
-                {isAuthenticated && (
                  <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>
--- a/fittrackee_client/src/components/User/ProfileDetail.jsx
+++ b/fittrackee_client/src/components/User/ProfileDetail.jsx
@ -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>
--- a/fittrackee_client/src/locales/en/common.json
+++ b/fittrackee_client/src/locales/en/common.json
@ -4,6 +4,7 @@
  "admin rights": "admin rights",
  "ascending": "ascending",
  "Back": "Back",
+  "Back to home": "Back to home",
  "Cancel": "Cancel",
  "Confirmation": "Confirmation",
  "Dashboard": "Dashboard",
--- a/fittrackee_client/src/locales/en/user.json
+++ b/fittrackee_client/src/locales/en/user.json
@ -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",
--- a/fittrackee_client/src/locales/fr/common.json
+++ b/fittrackee_client/src/locales/fr/common.json
@ -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",
--- a/fittrackee_client/src/locales/fr/user.json
+++ b/fittrackee_client/src/locales/fr/user.json
@ -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",