From 0cf7faa598b2f2f3a7b3ae52ee5d4a2175357d29 Mon Sep 17 00:00:00 2001 From: benji Date: Thu, 10 Sep 2015 21:12:03 +0200 Subject: [PATCH] Add some css to datatables --- app/assets/stylesheets/forms.css.scss | 30 +++++++++---- app/assets/stylesheets/tables.css.scss | 49 ++++++++++++++++++++++ app/views/partials/_form_errors.html.haml | 8 ++-- app/views/users/show.html.haml | 51 +++++++++++++---------- 4 files changed, 106 insertions(+), 32 deletions(-) create mode 100644 app/assets/stylesheets/tables.css.scss diff --git a/app/assets/stylesheets/forms.css.scss b/app/assets/stylesheets/forms.css.scss index 5a6d32d..7fefc2c 100644 --- a/app/assets/stylesheets/forms.css.scss +++ b/app/assets/stylesheets/forms.css.scss @@ -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; +} diff --git a/app/assets/stylesheets/tables.css.scss b/app/assets/stylesheets/tables.css.scss new file mode 100644 index 0000000..c020abe --- /dev/null +++ b/app/assets/stylesheets/tables.css.scss @@ -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; + } +} diff --git a/app/views/partials/_form_errors.html.haml b/app/views/partials/_form_errors.html.haml index 46a401d..fe4a850 100644 --- a/app/views/partials/_form_errors.html.haml +++ b/app/views/partials/_form_errors.html.haml @@ -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 diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index 288c694..beb88c2 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -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'}, ] });