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

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

2
resources/views/dashboard/edit-list.blade.php
View file

@ -18,7 +18,7 @@
<input id="filter-input" class="search" placeholder="Filter" /> <input id="filter-input" class="search" placeholder="Filter" />
@endif @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) @foreach($rows as $row)
<li class="list-group-item" data-id="{{ $row['id'] }}"> <li class="list-group-item" data-id="{{ $row['id'] }}">
<div class="container-fluid"> <div class="container-fluid">

36
resources/views/dashboard/home.blade.php
View file

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