133 lines
4.6 KiB
PHP
133 lines
4.6 KiB
PHP
<style>
|
|
.d-flex {
|
|
display: flex;
|
|
}
|
|
.col-8 {
|
|
flex-basis: 66.66%;
|
|
}
|
|
.col-4 {
|
|
flex-basis: 33.33%;
|
|
}
|
|
.col-3 {
|
|
flex-basis: 25%;
|
|
}
|
|
.p-15 {
|
|
padding: 15px;
|
|
}
|
|
.mb-15 {
|
|
margin-bottom: 15px;
|
|
}
|
|
.float-right {
|
|
float: right;
|
|
}
|
|
.d-none {
|
|
display: none;
|
|
}
|
|
.custom-form-group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.custom-form-group label {
|
|
margin-bottom: 0;
|
|
}
|
|
.mr-15 {
|
|
margin-right: 15px;
|
|
}
|
|
.filter-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.mt-0 {
|
|
margin-top: 0;
|
|
}
|
|
</style>
|
|
|
|
<div class="d-flex panel panel-white">
|
|
<div class="form-wrapper col-4 p-15">
|
|
|
|
<div id="add-form-wrapper">
|
|
<h4 class="mt-0">Add new blog</h4>
|
|
<form id="add-form">
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Blog ID: </label>
|
|
<input type="text" name="blog_id" class="form-control">
|
|
</div>
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Description: </label>
|
|
<input type="text" name="description" class="form-control">
|
|
</div>
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Status: </label>
|
|
<select name="status" class="form-control">
|
|
<option value="1">Active</option>
|
|
<option value="0">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary float-right">Create</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="update-form-wrapper" class="d-none">
|
|
<h4 class="mt-0">Update blog <span class="badge badge-primary" onclick="showAddForm()" style="cursor: pointer">New</span></h4>
|
|
<form id="update-form">
|
|
<input type="hidden" name="id">
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Blog ID: </label>
|
|
<input type="text" name="blog_id" class="form-control">
|
|
</div>
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Description: </label>
|
|
<input type="text" name="description" class="form-control">
|
|
</div>
|
|
<div class="custom-form-group">
|
|
<label style="width: 95px;">Status: </label>
|
|
<select name="status" class="form-control">
|
|
<option value="1">Active</option>
|
|
<option value="0">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<button class="btn btn-primary float-right">Update</button>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="blog-wrapper col-8 p-15">
|
|
<form id="filter-form" class="filter-wrapper">
|
|
<input type="text" name="blog_id" class="form-control col-3 mr-15" placeholder="Blog ID">
|
|
<input type="text" name="description" class="form-control col-3 mr-15" placeholder="Description">
|
|
<select name="status" class="form-control col-3 mr-15">
|
|
<option value="-1" selected>All statuses</option>
|
|
<option value="1">Active</option>
|
|
<option value="0">Inactive</option>
|
|
</select>
|
|
<button class="btn btn-primary">Search</button>
|
|
</form>
|
|
<h5 id="blog-table-loading" class="d-none">Loading...</h5>
|
|
<table id="blog-table" class="table-bordered table-condensed table-hover table-striped table-condensed d-none mb-15" style="background-color:#f0f8ff;" width="100%">
|
|
<thead class="bg-indigo">
|
|
<th width="83px">Blog ID</th>
|
|
<th>Description</th>
|
|
<th width="79px">Status</th>
|
|
<th width="104px" style="text-align: center">Action</th>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>No result</td>
|
|
<td>No result</td>
|
|
<td>No result</td>
|
|
<td>No result</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div id="blog-pagination" class="text-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/assets/js/plugins/pagination/bootpag.min.js"></script>
|
|
<script src="/assets/js/pages/blog/index.js"></script>
|
|
|
|
<script>
|
|
loadPage();
|
|
</script> |