1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-12-24 00:50:28 +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
<$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>

View File

@ -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 {