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

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

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

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

@ -527,6 +527,48 @@ label {
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 {
max-width: 35px;
max-height: 35px;