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

Client - update style to make tables more responsive

Browse Source
This commit is contained in:
Sam 2020-05-02 18:42:44 +02:00
parent 2fda3b1330
commit b0f1d7468f
3 changed files with 90 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@ class AdminSports extends React.Component {
<div className="card-header">{t('administration:Sports')}</div> <div className="card-header">{t('administration:Sports')}</div>
<div className="card-body"> <div className="card-body">
{sports.length > 0 && ( {sports.length > 0 && (
<table className="table table-borderless"> <table className="table">
<thead> <thead>
<tr> <tr>
<th>{t('administration:id')}</th> <th>{t('administration:id')}</th>
@ -38,16 +38,32 @@ class AdminSports extends React.Component {
<tbody> <tbody>
{sports.map(sport => ( {sports.map(sport => (
<tr key={sport.id}> <tr key={sport.id}>
<th scope="row">{sport.id}</th>
<td> <td>
<span className="heading-span">
{t('administration:id')}
</span>
{sport.id}
</td>
<td>
<span className="heading-span">
{t('administration:Image')}
</span>
<img <img
className="admin-img" className="admin-img"
src={sport.img ? sport.img : '/img/photo.png'} src={sport.img ? sport.img : '/img/photo.png'}
alt="sport logo" alt="sport logo"
/> />
</td> </td>
<td>{t(`sports:${sport.label}`)}</td>
<td> <td>
<span className="heading-span">
{t('administration:Label')}
</span>
{t(`sports:${sport.label}`)}
</td>
<td>
<span className="heading-span">
{t('administration:Active')}
</span>
{sport.is_active ? ( {sport.is_active ? (
<i <i
className="fa fa-check-square-o custom-fa" className="fa fa-check-square-o custom-fa"
@ -63,6 +79,9 @@ class AdminSports extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span">
{t('administration:Actions')}
</span>
<input <input
type="submit" type="submit"
className={`btn btn-${ className={`btn btn-${

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

@ -120,7 +120,7 @@ class AdminUsers extends React.Component {
</label> </label>
</div> </div>
</div> </div>
<table className="table table-borderless"> <table className="table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
@ -136,6 +136,7 @@ class AdminUsers extends React.Component {
{users.map(user => ( {users.map(user => (
<tr key={user.username}> <tr key={user.username}>
<td> <td>
<span className="heading-span">#</span>
{user.picture === true ? ( {user.picture === true ? (
<img <img
alt="Avatar" alt="Avatar"
@ -152,19 +153,38 @@ class AdminUsers extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span">
{t('user:Username')}
</span>
<Link to={`/users/${user.username}`}> <Link to={`/users/${user.username}`}>
{user.username} {user.username}
</Link> </Link>
</td> </td>
<td>{user.email}</td>
<td> <td>
<span className="heading-span">
{t('user:Email')}
</span>
{user.email}
</td>
<td>
<span className="heading-span">
{t('user:Registration Date')}
</span>
{format( {format(
new Date(user.created_at), new Date(user.created_at),
'dd/MM/yyyy HH:mm' 'dd/MM/yyyy HH:mm'
)} )}
</td> </td>
<td>{user.nb_activities}</td>
<td> <td>
<span className="heading-span">
{t('activities:Activities')}
</span>
{user.nb_activities}
</td>
<td>
<span className="heading-span">
{t('user:Admin')}
</span>
{user.admin ? ( {user.admin ? (
<i <i
className="fa fa-check-square-o custom-fa" className="fa fa-check-square-o custom-fa"
@ -180,6 +200,9 @@ class AdminUsers extends React.Component {
)} )}
</td> </td>
<td> <td>
<span className="heading-span">
{t('administration:Actions')}
</span>
<input <input
type="submit" type="submit"
className={`btn btn-${ className={`btn btn-${

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

@ -527,6 +527,48 @@ label {
margin-bottom: 5px; margin-bottom: 5px;
} }
/* 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;
}
}
.weather-img { .weather-img {
max-width: 35px; max-width: 35px;
max-height: 35px; max-height: 35px;