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

resources/assets/sass/dashboard.scss

@@ -33,6 +33,7 @@ body {
     min-width: 320px;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+    -webkit-overflow-scrolling: touch;
 }
 
 .navbar {
@@ -225,48 +226,32 @@ body {
 
 .list-group {
     margin-bottom: 0px;
-    padding-bottom: 15px;
 
-    &.linked-list {
+    &.menu-list .list-group-item {
-        margin-bottom: 0px;
+        position: relative;
-
-        .list-group-item {
         padding: 0px;
 
-            a {
+        &-link {
             display: block;
             padding: 10px 15px;
-                background-color: #fff;
+            background-color: transparent;
-                color: $c-dashboard-dark;
+            color: $c-text;
-                transition: background-color 100ms, color 100ms;
+            transition: background-color 150ms;
-                &:focus, &:hover { text-decoration: none; }
 
             &:hover {
-                    background-color: $c-dashboard-dark;
+                background-color: fade-out(#000, 0.97);
-                    color: $c-dashboard-light;
+                text-decoration: none;
-                }
-            }
-
-            &: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;
             }
         }
     }
 
-    &.edit-list {
+    &.edit-list .list-group-item {
-        .list-group-item {
-            position: relative;
         padding-top: 4px;
         padding-bottom: 4px;
 
         @media (max-width: $screen-xs-max) {
             margin: 3px;
+            padding-left: 60px;
         }
 
         .title-column {
@@ -277,8 +262,28 @@ body {
 
             @media (max-width: $screen-xs-max) {
                 text-align: center;
+            }
+
+            @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) {
+                    position: absolute;
+                    top: 50%;
+                    left: 20px;
+                    transform: translateY(-50%);
+                }
+            }
 
             .column {
+                @media (max-width: $screen-xs-max) {
                     margin-right: 3px;
                     display: inline-block;
 
@@ -287,24 +292,12 @@ body {
                         font-size: 0;
                     }
                 }
-                }
 
                 @media (min-width: $screen-sm-min) {
-                    &, .column {
                     float: left;
-                    }
-
-                    .column {
                     margin-right: 10px;
                 }
             }
-
-                .sort-icon {
-                    margin-right: 10px;
-                    display: inline-block;
-                    cursor: grab;
-                    cursor: -webkit-grabbing;
-                }
         }
 
         .button-column {
@@ -335,7 +328,6 @@ body {
         }
     }
 }
-}
 
 .edit-item {
     margin-top: 10px;

resources/views/dashboard/edit-list.blade.php

@@ -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">

resources/views/dashboard/home.blade.php

@@ -1,21 +1,29 @@
 @extends('dashboard.core')
 
 @section('dashboard-body')
+    <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 href="{{ url('/dashboard/' . $submenu_item[1]) }}">
+                        <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/' . $menu_item[1]) }}">
+                    <a
+                        class="list-group-item-link"
+                        href="{{ url('/dashboard/' . $menu_item[1]) }}">
+
                         {{ $menu_item[0] }}
                     </a>
                 </li>
             @endif
         @endforeach
+    </div>
 @endsection