Fine-tune the dashboard edit-item layout

This commit is contained in:
Kevin MacMartin 2018-04-24 00:17:42 -04:00
parent a71404bb09
commit d06cae1c67
2 changed files with 33 additions and 7 deletions

View file

@ -609,6 +609,7 @@ body {
} }
.edit-item { .edit-item {
$label-height: 30px;
margin-top: 10px; margin-top: 10px;
.CodeMirror { .CodeMirror {
@ -641,12 +642,19 @@ body {
} }
label { label {
height: 32px; min-height: $label-height;
line-height: 32px; line-height: $label-height;
@include media-breakpoint-up(md) {
margin-bottom: 0px;
}
}
.text-display, .mkd-editor-container, input, select {
margin-bottom: 15px;
} }
input { input {
margin-bottom: 15px;
display: block; display: block;
width: 100%; width: 100%;
@ -657,6 +665,11 @@ body {
transition: border-color 150ms; transition: border-color 150ms;
} }
&[type="file"] {
height: $label-height;
font-size: 14px;
}
&.date-picker { &.date-picker {
cursor: pointer; cursor: pointer;
} }
@ -718,18 +731,29 @@ body {
} }
.back-button, .submit-button { .back-button, .submit-button {
margin: 25px 15px 15px 15px; margin: 20px 15px 15px 15px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
float: none; float: none;
width: calc(100% - 30px); width: calc(100% - 30px);
&:first-child { &:first-child {
margin: 25px 15px 5px 15px; margin-top: 20px;
margin-bottom: 5px;
} }
&:last-child { &:last-child {
margin: 5px 15px 25px 15px; margin-top: 5px;
margin-bottom: 20px;
}
}
&.no-horizontal-margins {
margin-right: 0px;
margin-left: 0px;
@include media-breakpoint-down(sm) {
width: 100%;
} }
} }
} }

View file

@ -36,7 +36,9 @@
@elseif($column['type'] == 'date') @elseif($column['type'] == 'date')
<input class="date-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value == '' ? date('Y-m-d', time()) : preg_replace('/:[0-9][0-9]$/', '', $value) }}" /> <input class="date-picker" type="text" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value == '' ? date('Y-m-d', time()) : preg_replace('/:[0-9][0-9]$/', '', $value) }}" />
@elseif($column['type'] == 'mkd') @elseif($column['type'] == 'mkd')
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea> <div class="mkd-editor-container">
<textarea class="mkd-editor" name="{{ $column['name'] }}" id="{{ $column['name'] }}" value="{{ $value }}"></textarea>
</div>
@elseif($column['type'] == 'select') @elseif($column['type'] == 'select')
<select class="text-input" name="{{ $column['name'] }}" id="{{ $column['name'] }}"> <select class="text-input" name="{{ $column['name'] }}" id="{{ $column['name'] }}">
@foreach($column['options'] as $option) @foreach($column['options'] as $option)