From dfdb34a5cc5fb4623a472496ab6bec753ea94a4d Mon Sep 17 00:00:00 2001
From: Jeremy Ruston <jeremy@osmosoft.com>
Date: Wed, 23 Oct 2013 17:04:10 +0100
Subject: [PATCH] Better styling for the fields editor

---
 core/ui/FieldEditor.tid              |  2 +-
 themes/tiddlywiki/snowwhite/base.tid | 23 ++++++++++++++---------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/core/ui/FieldEditor.tid b/core/ui/FieldEditor.tid
index b28bb3cfd..4e448e2c8 100644
--- a/core/ui/FieldEditor.tid
+++ b/core/ui/FieldEditor.tid
@@ -1,7 +1,7 @@
 title: $:/core/ui/FieldEditor
 
 <$fieldmangler><$setvariable name="targetTiddler" value=<<tiddlerTitle>>><div class="tw-edit-fields">
-<table><tbody><$list filter="[is[current]fields[]] -title -tags -text -creator -created -modified -modifier -[[draft.title]] -[[draft.of]]"><tr><td><<listItem>></td><td><$edit-text title=<<targetTiddler>> field=<<listItem>> placeholder="field value"/></td><td><$button message="tw-remove-field" param=<<listItem>> class="btn-invisible">{{$:/core/images/delete-button}}</$button></td>
+<table class="tw-edit-fields"><tbody><$list filter="[is[current]fields[]] -title -tags -text -creator -created -modified -modifier -[[draft.title]] -[[draft.of]]"><tr class="tw-edit-field"><td class="tw-edit-field-name"><<listItem>>:</td><td class="tw-edit-field-value"><$edit-text title=<<targetTiddler>> field=<<listItem>> placeholder="field value"/></td><td class="tw-edit-field-remove"><$button message="tw-remove-field" param=<<listItem>> class="btn-invisible">{{$:/core/images/delete-button}}</$button></td>
 </tr>
 </$list>
 </tbody>
diff --git a/themes/tiddlywiki/snowwhite/base.tid b/themes/tiddlywiki/snowwhite/base.tid
index c31d336e2..83e89b240 100644
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@@ -630,28 +630,33 @@ canvas.tw-edit-bitmapeditor  {
 	width: 48%;
 }
 
-.tw-edit-fields > .tw-list-frame > div:nth-child(odd) {
+.tw-edit-fields {
+	width: 100%;
+}
+
+
+.tw-edit-fields table, .tw-edit-fields tr, .tw-edit-fields td {
+	border: none;
+	padding: 4px;
+}
+
+.tw-edit-fields > tbody > .tw-edit-field:nth-child(odd) {
 	background-color: #f0f4f0;
 }
 
-.tw-edit-fields > .tw-list-frame > div:nth-child(even) {
+.tw-edit-fields > tbody > .tw-edit-field:nth-child(even) {
 	background-color: #e0e8e0;
 }
 
 .tw-edit-field-name {
-	display: inline-block;
-	width: 15%;
 	text-align: right;
 }
 
-.tw-edit-field-value {
-	display: inline-block;
-	width: 75%;
+.tw-edit-field-value input {
+	width: 100%;
 }
 
 .tw-edit-field-remove {
-	display: inline-block;
-	width: 5%;
 }
 
 .tw-edit-field-remove svg {