You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
339 lines
9.5 KiB
339 lines
9.5 KiB
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<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 class="form-group">
|
|
<input id="c-title" placeholder="Add a title" class="form-control from-title" name="row[title]" type="text" value="">
|
|
</div>
|
|
<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 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="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 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 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">{:__('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> |