修改字段布局

增加字段的可用性
This commit is contained in:
fen
2013-11-25 12:05:20 +08:00
parent fa55695621
commit cc57832b8f
8 changed files with 88 additions and 55 deletions

View File

@@ -892,9 +892,7 @@ a.operate-reply {
#custom-field.fold table, #custom-field.fold .description {
display: none; }
#custom-field .description {
margin: 0;
padding: 10px 0;
border-top: 1px solid #F0F0EC;
margin-top: 10px;
text-align: right; }
#custom-field .description button {
float: left; }
@@ -903,14 +901,16 @@ a.operate-reply {
cursor: pointer; }
#custom-field .typecho-label:hover {
color: #467B96; }
#custom-field th, #custom-field td {
padding: 10px 5px;
text-align: left;
font-size: .92857em;
font-weight: normal; }
#custom-field table {
margin-top: 10px; }
#custom-field td {
border-top: 1px solid #F0F0EC;
padding: 10px 5px;
font-size: .92857em;
border-bottom: 1px solid #F0F0EC;
vertical-align: top; }
#custom-field td label {
font-size: 1em;
font-weight: normal; }
#custom-field select {
height: 27px; }
@@ -1043,13 +1043,13 @@ a.operate-reply {
.icon-sprite-hack {
background: url('../img/icons-s2ebed63329.png'); }
.i-edit, .i-delete, .i-caret-up, .i-caret-down, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow {
.i-edit, .i-delete, .i-exlink, .mime-office, .mime-text, .mime-image, .mime-html, .mime-archive, .mime-application, .mime-audio, .mime-script, .mime-video, .mime-unknow {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: text-bottom;
background: url(../img/icons.png) no-repeat; }
.i-edit:hover, .i-delete:hover, .i-caret-up:hover, .i-caret-down:hover, .i-exlink:hover, .mime-office:hover, .mime-text:hover, .mime-image:hover, .mime-html:hover, .mime-archive:hover, .mime-application:hover, .mime-audio:hover, .mime-script:hover, .mime-video:hover, .mime-unknow:hover {
.i-edit:hover, .i-delete:hover, .i-exlink:hover, .mime-office:hover, .mime-text:hover, .mime-image:hover, .mime-html:hover, .mime-archive:hover, .mime-application:hover, .mime-audio:hover, .mime-script:hover, .mime-video:hover, .mime-unknow:hover {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
opacity: 0.75; }
@@ -1059,11 +1059,20 @@ a.operate-reply {
.i-delete {
background-position: 0 -16px; }
.i-caret-up {
background-position: 0 -208px; }
.i-caret-up, .i-caret-down, .i-caret-left, .i-caret-right {
display: inline-block;
border-style: solid;
border-color: transparent transparent #BBB transparent;
border-width: 0 4px 5px;
vertical-align: middle; }
.i-caret-down {
background-position: 0 -128px; }
border-color: #BBB transparent transparent transparent;
border-width: 5px 4px 0; }
.i-caret-right {
border-color: transparent transparent transparent #BBB;
border-width: 4px 0 4px 5px; }
.i-exlink {
background-position: 0 0; }
@@ -1172,10 +1181,13 @@ a.operate-reply {
padding: 2px 4px;
background: #F3F3F0;
font-size: .92857em; }
#wmd-preview code {
color: #B94A48; }
#wmd-preview pre {
padding: 1em; }
#wmd-preview pre code {
padding: 0; }
padding: 0;
color: #444; }
#wmd-preview blockquote {
margin: 1em 1.5em;
padding-left: 1.5em;
@@ -1189,9 +1201,8 @@ a.operate-reply {
#wmd-preview .summary:after {
display: block;
margin: 2em 0;
border: 1px dashed #D9D9D6;
border-width: 1px 0;
color: #999;
background: #FFF9E8;
color: #ce9900;
font-size: .85714em;
text-align: center;
content: "- more -"; }

View File

@@ -4,7 +4,7 @@ $fields = isset($post) ? $post->getFieldItems() : $page->getFieldItems();
$defaultFields = isset($post) ? $post->getDefaultFieldItems() : $post->getDefaultFieldItems();
?>
<section id="custom-field" class="typecho-post-option fold">
<label id="custom-field-expand" class="typecho-label"><?php _e('自定义字段'); ?></label>
<label id="custom-field-expand" class="typecho-label"><?php _e('自定义字段'); ?> <i class="i-caret-down"></i></label>
<table class="typecho-list-table mono">
<colgroup>
<col width="25%"/>
@@ -37,23 +37,30 @@ $defaultFields = isset($post) ? $post->getDefaultFieldItems() : $post->getDefaul
<?php endforeach; ?>
<?php if (empty($defaultFields) && empty($fields)): ?>
<tr>
<td><input type="text" name="fieldNames[]" placeholder="<?php _e('字段名称'); ?>" class="text-s w-100"></td>
<td>
<label for="title" class="visuallyhidden"><?php _e('字段名称'); ?></label>
<input type="text" name="fieldNames[]" placeholder="<?php _e('字段名称'); ?>" class="text-s w-100">
</td>
<td>
<label for="title" class="visuallyhidden"><?php _e('字段类型'); ?></label>
<select name="fieldTypes[]" id="">
<option value="str"><?php _e('字符'); ?></option>
<option value="int"><?php _e('整数'); ?></option>
<option value="float"><?php _e('小数'); ?></option>
</select>
</td>
<td><textarea name="fieldValues[]" placeholder="<?php _e('字段值'); ?>" class="text-s w-100" rows="2"></textarea></td>
<td>
<label for="title" class="visuallyhidden"><?php _e('字段值'); ?></label>
<textarea name="fieldValues[]" placeholder="<?php _e('字段值'); ?>" class="text-s w-100" rows="2"></textarea>
</td>
<td>
<button type="button" class="btn-xs"><?php _e('删除'); ?></button>
</td>
</tr>
<?php endif; ?>
</table>
<p class="description">
<div class="description clearfix">
<button type="button" class="btn-xs operate-add"><?php _e('+添加字段'); ?></button>
<?php _e('自定义字段可以扩展你的模板功能, 使用方法参见 <a href="">帮助文档</a>'); ?>
</p>
</div>
</section>

View File

@@ -31,14 +31,24 @@ $icons-2x: sprite-map("icons-2x/*.png");
@extend %i-16;
background-position: sprite-position($icons, icon-delete);
}
.i-caret-up {
@extend %i-16;
background-position: sprite-position($icons, icon-caret-up);
// 小箭头
.i-caret-up, .i-caret-down, .i-caret-left, .i-caret-right {
display: inline-block;
border-style: solid;
border-color: transparent transparent #BBB transparent;
border-width: 0 4px 5px;
vertical-align: middle;
}
.i-caret-down {
@extend %i-16;
background-position: sprite-position($icons, icon-caret-down);
border-color: #BBB transparent transparent transparent;
border-width: 5px 4px 0;
}
.i-caret-right {
border-color: transparent transparent transparent #BBB;
border-width: 4px 0 4px 5px;
}
.i-exlink {
@extend %i-16;
background-position: sprite-position($icons, icon-exlink);

View File

@@ -74,9 +74,13 @@
background: #F3F3F0;
font-size: .92857em;
}
code { color: #B94A48; }
pre {
padding: 1em;
code { padding: 0; }
code {
padding: 0;
color: #444;
}
}
blockquote {
margin: 1em 1.5em;
@@ -90,17 +94,14 @@
border: 1px solid #E9E9E6;
border-width: 2px 0 0 0;
}
.summary {
&:after {
display: block;
margin: 2em 0;
border: 1px dashed #D9D9D6;
border-width: 1px 0;
color: #999;
font-size: .85714em;
text-align: center;
content: "- more -";
}
.summary:after {
display: block;
margin: 2em 0;
background: #FFF9E8;
color: darken(#FFF9E8, 55%);
font-size: .85714em;
text-align: center;
content: "- more -";
}
}

View File

@@ -673,9 +673,7 @@ a.operate-reply {
}
.description {
margin: 0;
padding: 10px 0;
border-top: 1px solid #F0F0EC;
margin-top: 10px;
text-align: right;
button {
float: left;
@@ -689,16 +687,18 @@ a.operate-reply {
color: #467B96;
}
}
th, td {
padding: 10px 5px;
text-align: left;
font-size: .92857em;
font-weight: normal;
table {
margin-top: 10px;
}
td {
border-top: 1px solid #F0F0EC;
padding: 10px 5px;
font-size: .92857em;
border-bottom: 1px solid #F0F0EC;
vertical-align: top;
label {
font-size: 1em;
font-weight: normal;
}
}
select { height: 27px; }
}

View File

@@ -80,7 +80,7 @@ Typecho_Widget::widget('Widget_Contents_Page_Edit')->to($page);
<?php Typecho_Plugin::factory('admin/write-page.php')->option($page); ?>
<button type="button" id="advance-panel-btn" class="btn-xs"><?php _e('高级选项'); ?></button>
<button type="button" id="advance-panel-btn" class="btn-xs"><?php _e('高级选项'); ?> <i class="i-caret-down"></i></button>
<div id="advance-panel">
<section class="typecho-post-option visibility-option">
<label class="typecho-label"><?php _e('公开度'); ?></label>

View File

@@ -94,7 +94,7 @@ Typecho_Widget::widget('Widget_Contents_Post_Edit')->to($post);
<?php Typecho_Plugin::factory('admin/write-post.php')->option($post); ?>
<button type="button" id="advance-panel-btn" class="btn-xs"><?php _e('高级选项'); ?></button>
<button type="button" id="advance-panel-btn" class="btn-xs"><?php _e('高级选项'); ?> <i class="i-caret-down"></i></button>
<div id="advance-panel">
<?php if($user->pass('editor', true)): ?>
<section class="typecho-post-option visibility-option">

View File

@@ -26,21 +26,25 @@ a:hover, a:active {
}
pre, code {
padding: 2px 4px;
background: #EEE;
background: #F3F3F0;
font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;
font-size: .92857em;
}
code { color: #B94A48; }
pre {
padding: 8px;
overflow: auto;
max-height: 400px;
}
pre code { padding: 0; }
pre code {
padding: 0;
color: #444;
}
blockquote {
margin: 1em 1.5em;
padding-left: 1.5em;
border-left: 4px solid #EEE;
border-left: 4px solid #F3F3F0;
color: #777;
}