Add some css to datatables

This commit is contained in:
benji 2015-09-10 21:12:03 +02:00
parent 9bde05abbb
commit 0cf7faa598
4 changed files with 106 additions and 32 deletions

View file

@ -1,18 +1,17 @@
.error_panel { .panel {
margin-bottom: 1em; margin-bottom: 1em;
border-radius: 3px; border-radius: 3px;
border: 1px solid #ebccd1; border: 1px solid transparent;
.error_header { .panel-header {
.error_title { .panel-title {
font-size: 16px; font-size: 16px;
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
padding: 10px 15px; padding: 10px 15px;
color: #a94442; border-bottom: 1px solid transparent;
background-color: #f2dede;
} }
.error_body { .panel-body {
padding: 15px; padding: 15px;
ul { ul {
margin-bottom: 0px; 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;
}

View 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;
}
}

View file

@ -1,9 +1,9 @@
- if object.errors.any? - if object.errors.any?
.error_panel .panel.panel-error
.error_header .panel-header
%h3.error_title %h3.panel-title
This transaction could not be saved. This transaction could not be saved.
.error_body .panel-body
%ul %ul
- object.errors.full_messages.each do |tr| - object.errors.full_messages.each do |tr|
%li %li

View file

@ -1,5 +1,30 @@
%h2= @user.name %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) }} %table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
%thead %thead
%tr %tr
@ -9,22 +34,6 @@
%th Issuer %th Issuer
%th Message %th Message
%tbody %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 :javascript
$(document).ready(function() { $(document).ready(function() {
@ -39,11 +48,11 @@
autoWidth: false, autoWidth: false,
responsive: true, responsive: true,
columns: [ columns: [
{ data: 'time', name: 'Time', className: 'min-tablet-l'}, { data: 'time', name: 'Time', width: "15%", className: 'min-tablet-l'},
{ data: 'amount', name: 'Amount', className: 'min-mobile'}, { data: 'amount', name: 'Amount', width: "10%", className: 'min-mobile'},
{ data: 'peer', name: 'Peer', className: 'min-mobile'}, { data: 'peer', name: 'Peer', width: "15%", className: 'min-mobile'},
{ data: 'issuer', name: 'Issuer', className: 'min-desktop'}, { data: 'issuer', name: 'Issuer', width: "15%", className: 'min-desktop'},
{ data: 'message', name: 'Message', className: 'min-tablet-p'}, { data: 'message', name: 'Message', width: "45%", className: 'min-tablet-p'},
] ]
}); });