midgard/tab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Change styling filters to bootstrap

Browse source
This commit is contained in:
benji 2015-09-11 15:18:36 +02:00
parent bd5f444869
commit 5db705d8d4
2 changed files with 37 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/assets/stylesheets/users.css.scss
View file

@ -31,7 +31,7 @@ table.pure-table-striped {
}
.data-table-filters {
.pure-g {
.row {
padding: 10px;
padding-top: 20px;
&:first-child {
@ -40,28 +40,5 @@ table.pure-table-striped {
&:last-child {
margin-bottom: 0;
}
.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;
&[type="date"] {
height: 34px;
vertical-align: bottom;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
}
.panel-body .form-inline > .input-group > .filter-align {
width: 200px;
}

66
app/views/users/show.html.haml
View file

@ -6,36 +6,42 @@
.panel-heading
%h3.panel-title Filters
.panel-body
.pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'date-range', 'data-filter-name': 'Time' }
%form.form-inline
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-calendar
%input.lower-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-calendar
%input.upper-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.pure-g
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', 'data-filter-name': 'Amount' }
%form.form-inline
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-euro
%input.lower-bound.form-control.filter-align{type: 'number', placeholder: 'Minimum'}
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-euro
%input.upper-bound.form-control.filter-align{type: 'number', placeholder: 'Maximum'}
.pure-g
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Issuer' }
%input{type: 'text', placeholder: 'Filter on Issuer'}
.input-listen.pure-u-md-1-4{ 'data-input-type': 'text', 'data-filter-name': 'Peer' }
%input{type: 'text', placeholder: 'Filter on Peer'}
.input-listen.pure-u-md-1-2{ 'data-input-type': 'text', 'data-filter-name': 'Message' }
%input{type: 'text', placeholder: 'Filter on Message'}
.row
.col-md-8.col-md-offset-2
.bound.input-listen{ 'data-input-type': 'date-range', 'data-filter-name': 'Time' }
.row
.col-md-6
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-calendar
%input.lower-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.col-md-6
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-calendar
%input.upper-bound.form-control.filter-align{type: 'date', placeholder: 'after', class: 'pure-group-addon'}
.bound.input-listen.pure-u-1{ 'data-input-type': 'number-range', 'data-filter-name': 'Amount' }
.row
.col-md-6
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-euro
%input.lower-bound.form-control.filter-align{type: 'number', placeholder: 'Minimum'}
.col-md-6
.input-group
%span.input-group-addon
%span.glyphicon.glyphicon-euro
%input.upper-bound.form-control.filter-align{type: 'number', placeholder: 'Maximum'}
.row
.col-md-4
.input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Issuer' }
%input{type: 'text', placeholder: 'Filter on Issuer', class: "form-control" }
.col-md-4
.input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Peer' }
%input{type: 'text', placeholder: 'Filter on Peer', class: "form-control" }
.col-md-4
.input-listen{ 'data-input-type': 'text', 'data-filter-name': 'Message' }
%input{type: 'text', placeholder: 'Filter on Message', class: "form-control" }
%table#transactions.pure-table.pure-table-striped{data: { source: user_path(@user) }}
%thead