Client - update style to make tables more responsive
This commit is contained in:
parent
2fda3b1330
commit
b0f1d7468f
@ -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-${
|
||||
|
@ -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-${
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user