Move the dashboard edit-list sortable drag handle to the left on mobile instead of having it positioned against the text, make a bunch of minor tweaks to the list-group styles to keep things consistently spaced at all responsive sizes, improve the dashboard home list, and remove some unused styles

This commit is contained in:
Kevin MacMartin 2018-01-12 23:48:21 -05:00
parent dda0ba7eb9
commit 71d218f04c
3 changed files with 98 additions and 98 deletions

View file

@ -33,6 +33,7 @@ body {
min-width: 320px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
}
.navbar {
@ -225,112 +226,103 @@ body {
.list-group {
margin-bottom: 0px;
padding-bottom: 15px;
&.linked-list {
margin-bottom: 0px;
&.menu-list .list-group-item {
position: relative;
padding: 0px;
.list-group-item {
padding: 0px;
&-link {
display: block;
padding: 10px 15px;
background-color: transparent;
color: $c-text;
transition: background-color 150ms;
a {
display: block;
padding: 10px 15px;
background-color: #fff;
color: $c-dashboard-dark;
transition: background-color 100ms, color 100ms;
&:focus, &:hover { text-decoration: none; }
&:hover {
background-color: $c-dashboard-dark;
color: $c-dashboard-light;
}
}
&:first-child a {
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
&:last-child a {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
&:hover {
background-color: fade-out(#000, 0.97);
text-decoration: none;
}
}
}
&.edit-list {
.list-group-item {
position: relative;
padding-top: 4px;
padding-bottom: 4px;
&.edit-list .list-group-item {
padding-top: 4px;
padding-bottom: 4px;
@media (max-width: $screen-xs-max) {
margin: 3px;
padding-left: 60px;
}
.title-column {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
font-family: "Lucida Console", Monaco, monospace;
@media (max-width: $screen-xs-max) {
margin: 3px;
text-align: center;
}
.title-column {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 0px;
font-family: "Lucida Console", Monaco, monospace;
@media (min-width: $screen-sm-min) {
float: left;
}
.sort-icon {
margin-right: 10px;
display: inline-block;
cursor: grab;
cursor: -webkit-grabbing;
@media (max-width: $screen-xs-max) {
text-align: center;
.column {
margin-right: 3px;
display: inline-block;
&.spacer {
display: block;
font-size: 0;
}
}
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
}
@media (min-width: $screen-sm-min) {
&, .column {
float: left;
}
.column {
margin-right: 10px;
}
}
.sort-icon {
margin-right: 10px;
.column {
@media (max-width: $screen-xs-max) {
margin-right: 3px;
display: inline-block;
cursor: grab;
cursor: -webkit-grabbing;
}
}
.button-column {
padding-right: 0px;
padding-left: 0px;
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
text-align: center;
&.spacer {
display: block;
font-size: 0;
}
}
@media (min-width: $screen-sm-min) {
float: right;
text-align: right;
float: left;
margin-right: 10px;
}
}
}
.btn {
margin: 3px;
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
.button-column {
padding-right: 0px;
padding-left: 0px;
@media (max-width: $screen-xs-max) {
min-width: 33%;
}
@media (max-width: $screen-xs-max) {
padding-bottom: 5px;
text-align: center;
}
@media (min-width: $screen-sm-min) {
float: right;
text-align: right;
}
.btn {
margin: 3px;
min-width: 70px;
height: 26px;
padding-top: 1px;
padding-bottom: 2px;
@media (max-width: $screen-xs-max) {
min-width: 33%;
}
}
}

View file

@ -18,7 +18,7 @@
<input id="filter-input" class="search" placeholder="Filter" />
@endif
<ul id="edit-list" class="list-group edit-list list" data-model="{{ $model }}" data-path="{{ isset($path) ? $path : $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
<ul id="edit-list" class="list-group edit-list" data-model="{{ $model }}" data-path="{{ isset($path) ? $path : $model }}" {{ $sortcol != false ? "data-sort=$sortcol" : '' }}>
@foreach($rows as $row)
<li class="list-group-item" data-id="{{ $row['id'] }}">
<div class="container-fluid">

View file

@ -1,21 +1,29 @@
@extends('dashboard.core')
@section('dashboard-body')
@foreach(App\Models\DashboardMenu::$menu as $menu_item)
@if(is_array($menu_item[1]))
@foreach($menu_item[1] as $submenu_item)
<div class="list-group menu-list">
@foreach(App\Models\DashboardMenu::$menu as $menu_item)
@if(is_array($menu_item[1]))
@foreach($menu_item[1] as $submenu_item)
<li class="list-group-item">
<a
class="list-group-item-link"
href="{{ url('/dashboard/' . $submenu_item[1]) }}">
{{ $menu_item[0] }}: {{ $submenu_item[0] }}
</a>
</li>
@endforeach
@else
<li class="list-group-item">
<a href="{{ url('/dashboard/' . $submenu_item[1]) }}">
{{ $menu_item[0] }}: {{ $submenu_item[0] }}
<a
class="list-group-item-link"
href="{{ url('/dashboard/' . $menu_item[1]) }}">
{{ $menu_item[0] }}
</a>
</li>
@endforeach
@else
<li class="list-group-item">
<a href="{{ url('/dashboard/' . $menu_item[1]) }}">
{{ $menu_item[0] }}
</a>
</li>
@endif
@endforeach
@endif
@endforeach
</div>
@endsection