Add some css to datatables
This commit is contained in:
benji
parent
9bde05abbb
commit
0cf7faa598
4 changed files with 106 additions and 32 deletions
|
|
@ -1,18 +1,17 @@
|
|||
.error_panel {
|
||||
.panel {
|
||||
margin-bottom: 1em;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #ebccd1;
|
||||
.error_header {
|
||||
.error_title {
|
||||
border: 1px solid transparent;
|
||||
.panel-header {
|
||||
.panel-title {
|
||||
font-size: 16px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
padding: 10px 15px;
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
.error_body {
|
||||
.panel-body {
|
||||
padding: 15px;
|
||||
ul {
|
||||
margin-bottom: 0px;
|
||||
|
|
@ -20,3 +19,20 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.panel-default {
|
||||
border-color: #ddd;
|
||||
.panel-header {
|
||||
border-color: #ddd;
|
||||
background-color: #f5f5f5;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-error {
|
||||
.panel-header {
|
||||
color: #a94442;
|
||||
background-color: #f2dede;
|
||||
}
|
||||
border: 1px solid #ebccd1;
|
||||
}
|
||||
|
|
|
|||
49
app/assets/stylesheets/tables.css.scss
Normal file
49
app/assets/stylesheets/tables.css.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
table.pure-table-striped {
|
||||
border: 0;
|
||||
|
||||
/* HEADER */
|
||||
thead {
|
||||
background-color: transparent;
|
||||
th {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* BODY */
|
||||
tbody {
|
||||
tr {
|
||||
border-left: 0;
|
||||
border-bottom: 1px solid rgb(128, 128, 128);
|
||||
&:nth-child(odd) {
|
||||
background-color: #f9f9f9;
|
||||
td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
td {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
border-top: 1px solid #dddddd;
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-filters {
|
||||
.pure-g {
|
||||
padding: 10px;
|
||||
.pure-u-md-1-4, .pure-u-md-1-2 {
|
||||
input {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
}
|
||||
input {
|
||||
padding: .5em .6em;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: inset 0 1px 3px #ddd;
|
||||
border-radius: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
- if object.errors.any?
|
||||
.error_panel
|
||||
.error_header
|
||||
%h3.error_title
|
||||
.panel.panel-error
|
||||
.panel-header
|
||||
%h3.panel-title
|
||||
This transaction could not be saved.
|
||||
.error_body
|
||||
.panel-body
|
||||
%ul
|
||||
- object.errors.full_messages.each do |tr|
|
||||
%li
|
||||
|
|
|
|||
|
|
@ -1,5 +1,30 @@
|
|||
%h2= @user.name
|
||||
|
||||
.panel.panel-default.data-table-filters
|
||||
.panel-header
|
||||
%h3.panel-title Filters
|
||||
.panel-body
|
||||
.pure-g
|
||||
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range' }
|
||||
= "Between"
|
||||
%input.lower-bound{type: 'date', placeholder: 'after'}
|
||||
= "and"
|
||||
%input.upper-bound{type: 'date', placeholder: 'before'}
|
||||
.pure-g
|
||||
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range' }
|
||||
= "Between"
|
||||
%input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'}
|
||||
= "and"
|
||||
%input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'}
|
||||
.pure-g
|
||||
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Issuer'}
|
||||
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Peer'}
|
||||
.input-listen.pure-u-md-1-2{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Message'}
|
||||
|
||||
|
||||
%table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
|
||||
%thead
|
||||
%tr
|
||||
|
|
@ -9,22 +34,6 @@
|
|||
%th Issuer
|
||||
%th Message
|
||||
%tbody
|
||||
%tfoot
|
||||
%tr
|
||||
%td.bound.input-listen{ 'data-input-type': 'date-range' }
|
||||
%input.lower-bound{type: 'date', placeholder: 'after'}
|
||||
= "<= Time <="
|
||||
%input.upper-bound{type: 'date', placeholder: 'before'}
|
||||
%td.bound.input-listen{ 'data-input-type': 'number-range' }
|
||||
%input.lower-bound{type: 'number', placeholder: 'lower', class: 'pure-u-1-5'}
|
||||
= "<= Amount <="
|
||||
%input.upper-bound{type: 'number', placeholder: 'upper', class: 'pure-u-1-5'}
|
||||
%td.input-listen{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Issuer'}
|
||||
%td.input-listen{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Peer'}
|
||||
%td.input-listen{ 'data-input-type': 'text' }
|
||||
%input{type: 'text', placeholder: 'Filter on Message'}
|
||||
|
||||
:javascript
|
||||
$(document).ready(function() {
|
||||
|
|
@ -39,11 +48,11 @@
|
|||
autoWidth: false,
|
||||
responsive: true,
|
||||
columns: [
|
||||
{ data: 'time', name: 'Time', className: 'min-tablet-l'},
|
||||
{ data: 'amount', name: 'Amount', className: 'min-mobile'},
|
||||
{ data: 'peer', name: 'Peer', className: 'min-mobile'},
|
||||
{ data: 'issuer', name: 'Issuer', className: 'min-desktop'},
|
||||
{ data: 'message', name: 'Message', className: 'min-tablet-p'},
|
||||
{ data: 'time', name: 'Time', width: "15%", className: 'min-tablet-l'},
|
||||
{ data: 'amount', name: 'Amount', width: "10%", className: 'min-mobile'},
|
||||
{ data: 'peer', name: 'Peer', width: "15%", className: 'min-mobile'},
|
||||
{ data: 'issuer', name: 'Issuer', width: "15%", className: 'min-desktop'},
|
||||
{ data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'},
|
||||
]
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue