deblan-mirror/TableFilter
1
0
Fork 0
mirror of https://github.com/koalyptus/TableFilter.git synced 2024-05-18 14:26:40 +02:00
Code Issues Releases Wiki Activity

Continued re-styling

Browse source
This commit is contained in:
Max Guglielmi 2015-08-07 22:10:08 +10:00
parent d3b85cbdb0
commit 7bfcf89aa8
12 changed files with 85 additions and 101 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
dist/starter.html vendored
View file

@ -450,21 +450,14 @@
<script data-config> <script data-config>
var filtersConfig = { var filtersConfig = {
base_path: 'tablefilter/', base_path: 'tablefilter/',
// col_0: 'checklist',
col_1: 'select', col_1: 'select',
col_2: 'select', col_2: 'select',
// col_3: 'multiple', col_3: 'select',
alternate_rows: true, alternate_rows: true,
rows_counter: true,
btn_reset: true, btn_reset: true,
loader: true, loader: true,
status_bar: true/*, status_bar: true,
popup_filters: true,
single_search_filter: true,
enable_icons: false,
btn: true,
btn_text: 'Go',
mark_active_columns: true, mark_active_columns: true,
col_number_format: [ col_number_format: [
null, null, 'US', null, null, 'US',
@ -488,7 +481,7 @@
'70px', '70px', '70px', '70px', '70px', '70px',
'70px', '60px', '60px' '70px', '60px', '60px'
], ],
extensions:[{ name: 'sort' }]*/ extensions:[{ name: 'sort' }]
}; };
var tf = new TableFilter('demo', filtersConfig); var tf = new TableFilter('demo', filtersConfig);

69
dist/tablefilter/style/tablefilter.css vendored
View file

@ -7,7 +7,7 @@
* Filtered column marker default style * Filtered column marker default style
*/ */
.activeHeader { .activeHeader {
background: #004080 !important; background-color: #66afe9 !important;
color: #fff !important; color: #fff !important;
} }
@ -166,6 +166,7 @@ select[multiple="multiple"].ezSelectEditor {
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
border-right: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4;
padding: 0.2em !important;
} }
.btnflt { .btnflt {
height: 35px; height: 35px;
@ -192,7 +193,7 @@ select[multiple="multiple"].ezSelectEditor {
display: block; display: block;
color: #444; color: #444;
background-color: #fff; background-color: #fff;
border: 1px solid #f4f4f4; border: 1px inset #f4f4f4;
margin: 0; margin: 0;
padding: 0 0 0 0.2em; padding: 0 0 0 0.2em;
width: 100%; width: 100%;
@ -354,8 +355,9 @@ div.grd_tblCont table td {
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 10px 15px 10px 15px; padding: 10px 15px 10px 15px;
border-left: 1px solid #ccc; border-left: 1px solid #f4f4f4;
border-right: 1px solid #ccc; border-right: 1px solid #f4f4f4;
vertical-align: top;
} }
.helpBtn:hover { .helpBtn:hover {
background-color: #f4f4f4; background-color: #f4f4f4;
@ -369,14 +371,12 @@ div.helpCont {
box-shadow: 3px 3px 2px #888; box-shadow: 3px 3px 2px #888;
position: absolute; position: absolute;
display: none; display: none;
width: 250px; width: 300px;
max-width: 300px;
overflow: auto;
padding: 10px; padding: 10px;
margin: 35px 0 0 -100px; margin: 45px 0 0 -150px;
border: 1px solid #ccc; border: 1px solid #ccc;
line-height: 20px; line-height: 20px;
font-size: 12px; font-size: inherit;
color: #333; color: #333;
background: #fff; background: #fff;
text-align: left; text-align: left;
@ -425,7 +425,6 @@ div.helpFooter {
} }
div.helpFooter h4 { div.helpFooter h4 {
margin: 2px 2px 2px 2px; margin: 2px 2px 2px 2px;
font-size: 13px;
color: #333; color: #333;
} }
@ -441,15 +440,16 @@ span.keyword {
*/ */
.loader { .loader {
position: absolute; position: absolute;
padding: 5px 10px 5px 10px; padding: 0.5em 0.7em;
margin: 20px 0 0 20px; margin: 10em 0 0 3em;
width: auto; width: auto;
z-index: 1000; z-index: 1000;
font-size: 12px; font-weight: 600;
font-weight: bold; background-color: #a7a7a8;
border: 1px solid #666;
background-color: #f4f4f4;
vertical-align: middle; vertical-align: middle;
border-radius: 10px;
color: #fff;
text-shadow: 1px 1px #333;
} }
/** /**
@ -517,15 +517,15 @@ span.rspgSpan {
* Reset button default style * Reset button default style
*/ */
input.reset { input.reset {
display: inline-block;
width: 35px; width: 35px;
height: 100%; height: 100%;
cursor: pointer !important;
border: 0; border: 0;
vertical-align: middle; background: transparent url("themes/btn_clear_filters.png") center center no-repeat;
background: transparent url("themes/btn_clear_filters.png") center center no-repeat !important; vertical-align: top;
} }
input.reset:hover { input.reset:hover {
background: #f4f4f4 url("themes/btn_clear_filters.png") center center no-repeat !important; background-color: #f4f4f4;
border-radius: 3px; border-radius: 3px;
} }
@ -535,11 +535,12 @@ input.reset:hover {
div.tot { div.tot {
float: left; float: left;
overflow: hidden; overflow: hidden;
width: 150px; min-width: 150px;
height: 15px; height: 100%;
border-right: 1px solid #ccc; border-right: 1px solid #f4f4f4;
margin: 0 5px 0 2px; margin: 0;
padding: 0 2px 0 2px; padding: 0.5em;
vertical-align: middle;
} }
div.tot span { div.tot span {
font-weight: bold; font-weight: bold;
@ -569,14 +570,14 @@ div.status {
float: left; float: left;
overflow: hidden; overflow: hidden;
width: 150px; width: 150px;
height: 15px; height: 100%;
border-right: 1px solid #ccc; border-right: 1px solid #f4f4f4;
margin: 0 5px 0 2px; margin: 0;
padding: 0 2px 0 2px; padding: 0.5em;
} }
div.status span { div.status span {
font-weight: bold; font-weight: 400;
font-size: 11px; font-size: inherit;
} }
/** /**
@ -612,7 +613,7 @@ table.TF td {
width: auto; width: auto;
height: 35px; height: 35px;
background-color: transparent; background-color: transparent;
font-size: 12px; font-size: inherit;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
@ -630,10 +631,6 @@ table.TF td {
.inf a:hover { .inf a:hover {
text-decoration: underline; text-decoration: underline;
} }
.inf span {
width: 35px;
height: 35px;
}
.ldiv { .ldiv {
float: left; float: left;
width: 30%; width: 30%;

4
static/style/active-header.styl
View file

@ -3,5 +3,5 @@
*/ */
.activeHeader .activeHeader
background #004080 !important background-color #66AFE9 !important
color #fff !important color #fff !important

8
static/style/config.styl
View file

@ -5,6 +5,8 @@
// table // table
$font-family = inherit $font-family = inherit
$padding = 0.5em 0.7em $padding = 0.5em 0.7em
$min-width = 35px
$min-height = 35px
// header cell // header cell
// $th-bg-color = #EBECEE // $th-bg-color = #EBECEE
@ -29,8 +31,9 @@ $filter-height = 35px
// toolbar container (.inf) // toolbar container (.inf)
$toolbar-bg-color = transparent $toolbar-bg-color = transparent
$toolbar-font-size = 12px $toolbar-font-size = inherit
$toolbar-border-color = #CCC $toolbar-border-color = #CCC
$toolbar-divider-color = #F4F4F4
// paging // paging
$paging-nav-button-bg-color-hover = #CAD1D6 $paging-nav-button-bg-color-hover = #CAD1D6
@ -39,6 +42,3 @@ $paging-nav-button-bg-color-hover = #CAD1D6
$grid-layout-bg-color = #C8E0FB $grid-layout-bg-color = #C8E0FB
$grid-layout-border-color = #99BBE8 $grid-layout-border-color = #99BBE8
// elements
$min-width = 35px
$min-height = 35px

3
static/style/filters.styl
View file

@ -16,6 +16,7 @@
border-top: 1px solid #CCC border-top: 1px solid #CCC
border-left 1px solid #CCC border-left 1px solid #CCC
border-right 1px solid #f4f4f4 border-right 1px solid #f4f4f4
padding 0.2em !important
// button appearance // button appearance
.btnflt .btnflt
@ -43,7 +44,7 @@
display block display block
color $filter-font-color color $filter-font-color
background-color $filter-bg-color background-color $filter-bg-color
border 1px solid $filter-border-color border 1px inset $filter-border-color
margin 0 margin 0
padding 0 0 0 0.2em padding 0 0 0 0.2em
width 100% width 100%

14
static/style/help.styl
View file

@ -11,8 +11,9 @@
display inline-block display inline-block
margin 0 margin 0
padding 10px 15px 10px 15px padding 10px 15px 10px 15px
border-left 1px solid #ccc border-left 1px solid $toolbar-divider-color
border-right 1px solid #ccc border-right 1px solid $toolbar-divider-color
vertical-align top
&:hover &:hover
background-color #F4F4F4 background-color #F4F4F4
@ -24,14 +25,12 @@ div.helpCont
box-shadow(3px 3px 2px #888) box-shadow(3px 3px 2px #888)
position absolute position absolute
display none display none
width 250px width 300px
max-width 300px
overflow auto
padding 10px padding 10px
margin 35px 0 0 -100px margin 45px 0 0 -150px
border 1px solid #CCC border 1px solid #CCC
line-height 20px line-height 20px
font-size 12px font-size inherit
color #333 color #333
background #fff background #fff
text-align left text-align left
@ -56,5 +55,4 @@ div.helpFooter
margin 10px 0 0 0 margin 10px 0 0 0
h4 h4
margin 2px 2px 2px 2px margin 2px 2px 2px 2px
font-size 13px
color #333 color #333

13
static/style/loader.styl
View file

@ -4,12 +4,13 @@
.loader .loader
position absolute position absolute
padding 5px 10px 5px 10px padding 0.5em 0.7em
margin 20px 0 0 20px margin 10em 0 0 3em
width auto width auto
z-index 1000 z-index 1000
font-size 12px font-weight 600
font-weight bold background-color #A7A7A8
border 1px solid #666
background-color #f4f4f4
vertical-align middle vertical-align middle
border-radius 10px
color #FFF
text-shadow 1px 1px #333

8
static/style/reset-button.styl
View file

@ -5,13 +5,13 @@
@import 'config' @import 'config'
input.reset input.reset
display inline-block
width $min-width width $min-width
height 100% height 100%
cursor pointer !important
border 0 border 0
vertical-align middle background: transparent url(themes/btn_clear_filters.png) center center no-repeat
background: transparent url(themes/btn_clear_filters.png) center center no-repeat !important vertical-align top
&:hover &:hover
background #F4F4F4 url(themes/btn_clear_filters.png) center center no-repeat !important background-color #F4F4F4
border-radius 3px border-radius 3px

13
static/style/rows-counter.styl
View file

@ -2,14 +2,17 @@
* Rows counter default style * Rows counter default style
*/ */
@import 'config'
div.tot div.tot
float left float left
overflow hidden overflow hidden
width 150px min-width 150px
height 15px height 100%
border-right 1px solid #ccc border-right 1px solid $toolbar-divider-color
margin 0 5px 0 2px margin 0
padding 0 2px 0 2px padding 0.5em
vertical-align middle
span span
font-weight bold font-weight bold

20
static/style/status-bar.styl
View file

@ -2,15 +2,17 @@
* Status bar default style * Status bar default style
*/ */
@import 'config'
div.status div.status
float left float left
overflow hidden overflow hidden
width 150px width 150px
height 15px height 100%
border-right 1px solid #ccc border-right 1px solid $toolbar-divider-color
margin 0 5px 0 2px margin 0
padding 0 2px 0 2px padding 0.5em
span span
font-weight bold font-weight 400
font-size 11px font-size inherit

4
static/style/toolbar.styl
View file

@ -28,10 +28,6 @@
&:hover &:hover
text-decoration underline text-decoration underline
span
width $min-width
height $min-height
// left div // left div
.ldiv .ldiv
float left float left

15
static/templates/starter.html
View file

@ -14,21 +14,14 @@
<script data-config> <script data-config>
var filtersConfig = { var filtersConfig = {
base_path: 'tablefilter/', base_path: 'tablefilter/',
// col_0: 'checklist',
col_1: 'select', col_1: 'select',
col_2: 'select', col_2: 'select',
// col_3: 'multiple', col_3: 'select',
alternate_rows: true, alternate_rows: true,
rows_counter: true,
btn_reset: true, btn_reset: true,
loader: true, loader: true,
status_bar: true/*, status_bar: true,
popup_filters: true,
single_search_filter: true,
enable_icons: false,
btn: true,
btn_text: 'Go',
mark_active_columns: true, mark_active_columns: true,
col_number_format: [ col_number_format: [
null, null, 'US', null, null, 'US',
@ -52,7 +45,7 @@
'70px', '70px', '70px', '70px', '70px', '70px',
'70px', '60px', '60px' '70px', '60px', '60px'
], ],
extensions:[{ name: 'sort' }]*/ extensions:[{ name: 'sort' }]
}; };
var tf = new TableFilter('demo', filtersConfig); var tf = new TableFilter('demo', filtersConfig);