From d06cae1c677177a8f87db7038f4886dbc9a8c68e Mon Sep 17 00:00:00 2001
From: Kevin MacMartin <prurigro@gmail.com>
Date: Tue, 24 Apr 2018 00:17:42 -0400
Subject: [PATCH] Fine-tune the dashboard edit-item layout

---
 resources/assets/sass/dashboard.scss          | 36 +++++++++++++++----
 resources/views/dashboard/edit-item.blade.php |  4 ++-
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/resources/assets/sass/dashboard.scss b/resources/assets/sass/dashboard.scss
index 7285120..c8e2f40 100644
--- a/resources/assets/sass/dashboard.scss
+++ b/resources/assets/sass/dashboard.scss
@@ -609,6 +609,7 @@ body {
 }
 
 .edit-item {
+    $label-height: 30px;
     margin-top: 10px;
 
     .CodeMirror {
@@ -641,12 +642,19 @@ body {
     }
 
     label {
-        height: 32px;
-        line-height: 32px;
+        min-height: $label-height;
+        line-height: $label-height;
+
+        @include media-breakpoint-up(md) {
+            margin-bottom: 0px;
+        }
+    }
+
+    .text-display, .mkd-editor-container, input, select {
+        margin-bottom: 15px;
     }
 
     input {
-        margin-bottom: 15px;
         display: block;
         width: 100%;
 
@@ -657,6 +665,11 @@ body {
             transition: border-color 150ms;
         }
 
+        &[type="file"] {
+            height: $label-height;
+            font-size: 14px;
+        }
+
         &.date-picker {
             cursor: pointer;
         }
@@ -718,18 +731,29 @@ body {
     }
 
     .back-button, .submit-button {
-        margin: 25px 15px 15px 15px;
+        margin: 20px 15px 15px 15px;
 
         @include media-breakpoint-down(sm) {
             float: none;
             width: calc(100% - 30px);
 
             &:first-child {
-                margin: 25px 15px 5px 15px;
+                margin-top: 20px;
+                margin-bottom: 5px;
             }
 
             &: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%;
             }
         }
     }
diff --git a/resources/views/dashboard/edit-item.blade.php b/resources/views/dashboard/edit-item.blade.php
index 53d2091..ecd0b29 100644
--- a/resources/views/dashboard/edit-item.blade.php
+++ b/resources/views/dashboard/edit-item.blade.php
@@ -36,7 +36,9 @@
                             @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) }}" />
                             @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')
                                 <select class="text-input" name="{{ $column['name'] }}" id="{{ $column['name'] }}">
                                     @foreach($column['options'] as $option)