1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-23 18:17:20 +00:00

Better styling for the fields editor

This commit is contained in:
Jeremy Ruston 2013-10-23 17:04:10 +01:00
parent 6f2dbd0978
commit dfdb34a5cc
2 changed files with 15 additions and 10 deletions

View File

@ -1,7 +1,7 @@
title: $:/core/ui/FieldEditor title: $:/core/ui/FieldEditor
<$fieldmangler><$setvariable name="targetTiddler" value=<<tiddlerTitle>>><div class="tw-edit-fields"> <$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> </tr>
</$list> </$list>
</tbody> </tbody>

View File

@ -630,28 +630,33 @@ canvas.tw-edit-bitmapeditor {
width: 48%; 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; 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; background-color: #e0e8e0;
} }
.tw-edit-field-name { .tw-edit-field-name {
display: inline-block;
width: 15%;
text-align: right; text-align: right;
} }
.tw-edit-field-value { .tw-edit-field-value input {
display: inline-block; width: 100%;
width: 75%;
} }
.tw-edit-field-remove { .tw-edit-field-remove {
display: inline-block;
width: 5%;
} }
.tw-edit-field-remove svg { .tw-edit-field-remove svg {