@ -1,98 +1,339 @@
|
||||
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
||||
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label class="control-label col-xs-12 col-sm-2">{:__('Author')}:</label>-->
|
||||
<!-- <div class="col-xs-12 col-sm-8">-->
|
||||
<!-- <input id="c-author" class="form-control" name="row[author]" type="text" value="">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Author')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-author" data-rule="required" data-field="name" data-source="research/author/index" data-multiple="true" class="form-control selectpage" name="row[author]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Topic_ids')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-topic_ids" data-rule="required" data-field="title" data-source="research/topic/index" data-multiple="true" class="form-control selectpage" name="row[topic_ids]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Tag')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-tag" class="form-control" data-role="tagsinput" name="row[tag]" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Cover')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="input-group">
|
||||
<input id="c-cover_image" class="form-control" size="50" name="row[cover_image]" type="text" value="">
|
||||
<div class="input-group-addon no-border no-padding">
|
||||
<span><button type="button" id="faupload-cover_image" class="btn btn-danger faupload" data-input-id="c-cover_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
|
||||
<span><button type="button" id="fachoose-cover_image" class="btn btn-primary fachoose" data-input-id="c-cover_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
|
||||
<div class="preview">
|
||||
<div class="title">Preview</div>
|
||||
<div class="img-info">
|
||||
<ul class=" list-inline faupload-preview" id="p-cover_image">Preview</ul>
|
||||
<div class="right-info">
|
||||
<div class="name">
|
||||
<span>Joseph Bonneau</span>
|
||||
<span>Aug.4</span>
|
||||
</div>
|
||||
<div class="w-tit">Why blockchain performance is hard to measure</div>
|
||||
<div class="word">
|
||||
ante id urna tempus vulputate. Fusce eu ultricies lorem, ac convallis mi. Aenean placerat faucibus nisi vitatbus alicuet odio. vitae trstioue neque sodales eoe
|
||||
</div>
|
||||
<span class="msg-box n-right" for="c-cover_image"></span>
|
||||
</div>
|
||||
<ul class="row list-inline faupload-preview" id="p-cover_image"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-title" class="form-control" name="row[title]" type="text" value="">
|
||||
<div class="img-upload">
|
||||
<div class="up-left">
|
||||
<div class="upload">
|
||||
<input style="display: none;" id="c-cover_image" class="form-control" size="50" name="row[cover_image]" type="text" value="">
|
||||
<button type="button" id="faupload-cover_image" class="btn btn-danger faupload" data-input-id="c-cover_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover_image">Add cover image</button>
|
||||
</div>
|
||||
<div class="tips">
|
||||
Flle formats<br>
|
||||
JPG, PNG 2.5mb and below
|
||||
</div>
|
||||
</div>
|
||||
<div class="up-right">
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Author')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<select id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]">
|
||||
<option value="1" >Author1</option>
|
||||
<option value="1" >Author2</option>
|
||||
<option value="1" >Author3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Topic')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<select id="c-type" data-rule="required" class="form-control selectpicker" name="row[type]">
|
||||
<option value="1" >Topic</option>
|
||||
<option value="1" >Topic2</option>
|
||||
<option value="1" >Topic3</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Description')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-description" class="form-control" name="row[description]" type="text" value="">
|
||||
<div class="form-group">
|
||||
<input id="c-title" placeholder="Add a title" class="form-control from-title" name="row[title]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<textarea id="c-content" class="form-control editor" rows="50" name="row[content]" cols="50"></textarea>
|
||||
<div class="form-group">
|
||||
<input id="c-title" placeholder="Add a description" class="form-control from-word" name="row[title]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Views')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-views" min="0" class="form-control" name="row[views]" type="number" value="0">
|
||||
<div class="u-info">
|
||||
<textarea id="c-content" placeholder="what your content" class="form-control editor" rows="5" name="row[content]" cols="50"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
|
||||
<div class="radio">
|
||||
{foreach name="statusList" item="vo"}
|
||||
<label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="Scheduled"}checked{/in} /> {$vo}</label>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 第二步骤 -->
|
||||
<div class="second-step">
|
||||
<div class="info-box switch-box">
|
||||
<span>Publish to Medium</span>
|
||||
<input id="c-switch" name="row[switch]" type="hidden" value="0">
|
||||
<a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-switch" data-yes="1" data-no="0" >
|
||||
<i class="fa fa-toggle-on text-success fa-flip-horizontal fa-2x"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-sort" data-rule="required" min="0" class="form-control" name="row[sort]" type="number" value="0">
|
||||
<div class="info-box">
|
||||
<div class="left">
|
||||
<p>Publish Now</p>
|
||||
<p>This research will be published immediately and shown to the public</p>
|
||||
</div>
|
||||
<label class="right"><input id="222" name="333" type="radio" value="333" /> </label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Publishedtime')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-publishedtime" class="form-control datetimepicker form-control" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[publishedtime]" type="text" value="{:date('Y-m-d H:i:s')}">
|
||||
<div class="info-box time-box">
|
||||
<div class="top">
|
||||
<div class="left">
|
||||
<p>Schedule</p>
|
||||
<p>TSet a time for your research to be published</p>
|
||||
</div>
|
||||
<label class="right"><input id="222" name="333" type="radio" value="333" /> </label>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="t-label">Date</div>
|
||||
<input id="c-overtime" class="form-control datetimepicker form-control"
|
||||
data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="time" type="text"
|
||||
value="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group layer-footer">
|
||||
<label class="control-label col-xs-12 col-sm-2"></label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
|
||||
<button type="submit" class="btn btn-primary btn-embossed disabled">{:__('next')}</button>
|
||||
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
<style>
|
||||
.preview, .second-step{
|
||||
padding: 0 10%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.preview .title{
|
||||
font-size: 15px;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
.preview .img-info{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #EEE;
|
||||
}
|
||||
|
||||
.img-info .faupload-preview{
|
||||
width: 200px;
|
||||
height: 130px;
|
||||
background: #f6f6f6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
.img-info .col-xs-3{
|
||||
width: 200px;
|
||||
height: 130px;
|
||||
margin-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.img-info .col-xs-3 .thumbnail{
|
||||
width: 200px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.right-info{
|
||||
width: calc(100% - 200px);
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.right-info .name{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.right-info .name span{
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.w-tit{
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.right-info .word{
|
||||
font-size: 14px;
|
||||
color: #cbcbcb;
|
||||
margin-top: 10px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.img-upload{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.img-upload .up-left{
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.img-upload .up-left .upload{
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.img-upload .up-left .upload .btn{
|
||||
width: 170px;
|
||||
height: 100px;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
color: #b2b2b2;
|
||||
}
|
||||
|
||||
.img-upload .up-left .upload .btn:hover{
|
||||
border-color: #eee;
|
||||
}
|
||||
|
||||
.img-upload .up-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.img-upload .up-left .tips{
|
||||
font-size: 14px;
|
||||
color: #afafaf;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.img-upload .up-right{
|
||||
width: 50%;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.img-upload .control-label{
|
||||
color: #acacac;
|
||||
}
|
||||
|
||||
.up-right .btn-default{
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.from-title{
|
||||
border: none;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: #acacac;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.from-word{
|
||||
border: none;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 15px;
|
||||
color: #acacac;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.u-info .tox-statusbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tox-tinymce{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tox:not(.tox-tinymce-inline) .tox-editor-header{
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 第二步的css */
|
||||
.second-step{
|
||||
}
|
||||
|
||||
.second-step .info-box{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px 30px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.second-step .info-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.second-step .info-box .left p:nth-of-type(1){
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.second-step .info-box .left p:nth-of-type(2){
|
||||
font-size: 13px;
|
||||
color: #bababa;
|
||||
}
|
||||
|
||||
.second-step .info-box span{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.info-box .top .left p:nth-of-type(1){
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.info-box .top .left p:nth-of-type(2){
|
||||
font-size: 13px;
|
||||
color: #bababa;
|
||||
}
|
||||
|
||||
.info-box .bottom{
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-box .bottom .t-label{
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #393939;
|
||||
}
|
||||
|
||||
.time-box .top{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.time-box{
|
||||
display: block !important;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
.switch-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,98 @@
|
||||
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
||||
|
||||
<!-- <div class="form-group">-->
|
||||
<!-- <label class="control-label col-xs-12 col-sm-2">{:__('Author')}:</label>-->
|
||||
<!-- <div class="col-xs-12 col-sm-8">-->
|
||||
<!-- <input id="c-author" class="form-control" name="row[author]" type="text" value="">-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Author')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-author" data-rule="required" data-field="name" data-source="research/author/index" data-multiple="true" class="form-control selectpage" name="row[author]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Topic_ids')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-topic_ids" data-rule="required" data-field="title" data-source="research/topic/index" data-multiple="true" class="form-control selectpage" name="row[topic_ids]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Tag')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-tag" class="form-control" data-role="tagsinput" name="row[tag]" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Cover')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<div class="input-group">
|
||||
<input id="c-cover_image" class="form-control" size="50" name="row[cover_image]" type="text" value="">
|
||||
<div class="input-group-addon no-border no-padding">
|
||||
<span><button type="button" id="faupload-cover_image" class="btn btn-danger faupload" data-input-id="c-cover_image" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="false" data-preview-id="p-cover_image"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
|
||||
<span><button type="button" id="fachoose-cover_image" class="btn btn-primary fachoose" data-input-id="c-cover_image" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
|
||||
</div>
|
||||
<span class="msg-box n-right" for="c-cover_image"></span>
|
||||
</div>
|
||||
<ul class="row list-inline faupload-preview" id="p-cover_image"></ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Title')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-title" class="form-control" name="row[title]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Description')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-description" class="form-control" name="row[description]" type="text" value="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Content')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<textarea id="c-content" class="form-control editor" rows="50" name="row[content]" cols="50"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Views')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-views" min="0" class="form-control" name="row[views]" type="number" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
|
||||
<div class="radio">
|
||||
{foreach name="statusList" item="vo"}
|
||||
<label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="Scheduled"}checked{/in} /> {$vo}</label>
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-sort" data-rule="required" min="0" class="form-control" name="row[sort]" type="number" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="control-label col-xs-12 col-sm-2">{:__('Publishedtime')}:</label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<input id="c-publishedtime" class="form-control datetimepicker form-control" data-date-format="YYYY-MM-DD HH:mm:ss" data-use-current="true" name="row[publishedtime]" type="text" value="{:date('Y-m-d H:i:s')}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group layer-footer">
|
||||
<label class="control-label col-xs-12 col-sm-2"></label>
|
||||
<div class="col-xs-12 col-sm-8">
|
||||
<button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
|
||||
<button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 12 KiB |
After Width: | Height: | Size: 9.8 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 2.1 KiB |
After Width: | Height: | Size: 21 KiB |
After Width: | Height: | Size: 384 B |