mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 16:04:10 -05:00
Improve the dashboard edit-list page on mobile
This commit is contained in:
parent
1292201b05
commit
8ba8a0e810
2 changed files with 43 additions and 18 deletions
59
resources/assets/sass/dashboard.scss
vendored
59
resources/assets/sass/dashboard.scss
vendored
|
@ -23,14 +23,21 @@ $fa-font-path: "/fonts";
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@include font-sans;
|
@include font-sans;
|
||||||
min-width: 440px;
|
min-width: 320px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background-color: $c-dashboard-dark;
|
background-color: $c-dashboard-dark;
|
||||||
.navbar-brand { font-weight: bold; }
|
|
||||||
|
.navbar-brand {
|
||||||
|
font-weight: bold;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#spark-navbar-collapse {
|
#spark-navbar-collapse {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -96,7 +103,8 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
margin-bottom: 0px;
|
margin: 3px 3px 0px 3px;
|
||||||
|
width: calc(100% - 6px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -251,6 +259,10 @@ body {
|
||||||
padding-top: 4px;
|
padding-top: 4px;
|
||||||
padding-bottom: 4px;
|
padding-bottom: 4px;
|
||||||
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
margin: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
.sort-icon {
|
.sort-icon {
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -259,35 +271,49 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-column {
|
.title-column {
|
||||||
float: left;
|
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
font-family: "Lucida Console", Monaco, monospace;
|
font-family: "Lucida Console", Monaco, monospace;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
font-size: 12px;
|
text-align: center;
|
||||||
|
|
||||||
|
.column {
|
||||||
|
margin-right: 3px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&.spacer {
|
||||||
|
display: block;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
@media (min-width: $screen-sm-min) {
|
||||||
float: left;
|
&, .column {
|
||||||
margin-right: 10px;
|
float: left;
|
||||||
|
|
||||||
@media (max-width: $screen-sm-max) {
|
|
||||||
&:nth-child(n+4) { display: none; }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
.column {
|
||||||
&:nth-child(n+2) { display: none; }
|
margin-right: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-column {
|
.button-column {
|
||||||
float: right;
|
|
||||||
padding-right: 0px;
|
padding-right: 0px;
|
||||||
padding-left: 0px;
|
padding-left: 0px;
|
||||||
text-align: right;
|
|
||||||
|
@media (max-width: $screen-xs-max) {
|
||||||
|
padding-bottom: 5px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: $screen-sm-min) {
|
||||||
|
float: right;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
margin: 3px;
|
margin: 3px;
|
||||||
|
@ -297,8 +323,7 @@ body {
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-max) {
|
@media (max-width: $screen-xs-max) {
|
||||||
height: 20px;
|
min-width: 33%;
|
||||||
font-size: 11px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,7 @@
|
||||||
<div class="column">{{ $row[$col] }}</div>
|
<div class="column">{{ $row[$col] }}</div>
|
||||||
|
|
||||||
@if(!$loop->last)
|
@if(!$loop->last)
|
||||||
<div class="column">|</div>
|
<div class="column spacer">|</div>
|
||||||
@endif
|
@endif
|
||||||
@endif
|
@endif
|
||||||
@endforeach
|
@endforeach
|
||||||
|
|
Loading…
Reference in a new issue