kevin/hypothetical
1
0
Fork 0
mirror of https://github.com/prurigro/hypothetical.git synced 2024-11-22 07:54:11 -05:00
Code Issues Projects Releases Packages Wiki Activity

Clean up the dashboard view table spacing on mobile

Browse source
This commit is contained in:
Kevin MacMartin 2018-01-21 22:40:42 -05:00
parent 0c5cd33462
commit 315a4893ec
2 changed files with 55 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
resources/assets/sass/dashboard.scss vendored
View file

@ -195,35 +195,45 @@ body {
&, &:hover, &:focus { text-decoration: none; } &, &:hover, &:focus { text-decoration: none; }
} }
.table { .view-table-container {
> thead > tr > th { border-bottom: 1px solid #666; } @media (max-width: $screen-xs-max) {
padding: 10px 5px;
@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) { .table {
> tbody > tr > td { padding: 20px 8px; } margin-bottom: 0px;
> tbody > tr:last-child > td { padding-bottom: 0px; }
.mobile-heading { display: none; } > 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; }
}
} }
} }

34
resources/views/dashboard/view.blade.php
View file

@ -7,23 +7,25 @@
@endsection @endsection
@section('dashboard-body') @section('dashboard-body')
<table class="table"> <div class="view-table-container">
<thead> <table class="table">
<tr class="heading-row"> <thead>
@foreach($columns as $column) <tr class="heading-row">
<th>{{ $column[0] }}</th>
@endforeach
</tr>
</thead>
<tbody>
@foreach($rows as $row)
<tr>
@foreach($columns as $column) @foreach($columns as $column)
<td><strong class="mobile-heading">{{ $column[0] }}: </strong>{{ $row[$column[1]] }}</td> <th>{{ $column[0] }}</th>
@endforeach @endforeach
</tr> </tr>
@endforeach </thead>
</tbody>
</table> <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 @endsection