mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-12-22 17:50:22 -05:00
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
parent
dda0ba7eb9
commit
71d218f04c
3 changed files with 98 additions and 98 deletions
158
resources/assets/sass/dashboard.scss
vendored
158
resources/assets/sass/dashboard.scss
vendored
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue