mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-21 23:52:31 -05:00
Clean up the dashboard view table spacing on mobile
This commit is contained in:
parent
0c5cd33462
commit
315a4893ec
2 changed files with 55 additions and 43 deletions
64
resources/assets/sass/dashboard.scss
vendored
64
resources/assets/sass/dashboard.scss
vendored
|
@ -195,35 +195,45 @@ body {
|
|||
&, &:hover, &:focus { text-decoration: none; }
|
||||
}
|
||||
|
||||
.table {
|
||||
> thead > tr > th { border-bottom: 1px solid #666; }
|
||||
|
||||
@media (max-width: $screen-md-max) {
|
||||
tr {
|
||||
&.heading-row { display: none; }
|
||||
&:not(:first-child) { border-top: 1px solid #ddd; }
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
&:first-child { padding-top: 20px; }
|
||||
&:last-child { padding-bottom: 20px; }
|
||||
}
|
||||
|
||||
> tbody > tr {
|
||||
&:first-child > td:first-child { padding-top: 0px; }
|
||||
&:last-child > td:last-child { padding-bottom: 0px; }
|
||||
|
||||
> td {
|
||||
display: block;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
.view-table-container {
|
||||
@media (max-width: $screen-xs-max) {
|
||||
padding: 10px 5px;
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
> tbody > tr > td { padding: 20px 8px; }
|
||||
> tbody > tr:last-child > td { padding-bottom: 0px; }
|
||||
.mobile-heading { display: none; }
|
||||
.table {
|
||||
margin-bottom: 0px;
|
||||
|
||||
> thead > tr > th {
|
||||
border-bottom: 1px solid #666;
|
||||
}
|
||||
|
||||
@media (max-width: $screen-md-max) {
|
||||
tr {
|
||||
&.heading-row { display: none; }
|
||||
&:not(:first-child) { border-top: 1px solid #ddd; }
|
||||
}
|
||||
|
||||
> tbody > tr > td {
|
||||
&:first-child { padding-top: 20px; }
|
||||
&:last-child { padding-bottom: 20px; }
|
||||
}
|
||||
|
||||
> tbody > tr {
|
||||
&:first-child > td:first-child { padding-top: 0px; }
|
||||
&:last-child > td:last-child { padding-bottom: 0px; }
|
||||
|
||||
> td {
|
||||
display: block;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $screen-lg-min) {
|
||||
> tbody > tr > td { padding: 20px 8px; }
|
||||
> tbody > tr:last-child > td { padding-bottom: 0px; }
|
||||
.mobile-heading { display: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -7,23 +7,25 @@
|
|||
@endsection
|
||||
|
||||
@section('dashboard-body')
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="heading-row">
|
||||
@foreach($columns as $column)
|
||||
<th>{{ $column[0] }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach($rows as $row)
|
||||
<tr>
|
||||
<div class="view-table-container">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr class="heading-row">
|
||||
@foreach($columns as $column)
|
||||
<td><strong class="mobile-heading">{{ $column[0] }}: </strong>{{ $row[$column[1]] }}</td>
|
||||
<th>{{ $column[0] }}</th>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
@foreach($rows as $row)
|
||||
<tr>
|
||||
@foreach($columns as $column)
|
||||
<td><strong class="mobile-heading">{{ $column[0] }}: </strong>{{ $row[$column[1]] }}</td>
|
||||
@endforeach
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@endsection
|
||||
|
|
Loading…
Reference in a new issue