From d8fe61aa28aaabf542e2935b6a29ad5ee0c667e6 Mon Sep 17 00:00:00 2001 From: Max Guglielmi Date: Sun, 9 Aug 2015 00:17:22 +1000 Subject: [PATCH] Continued restyling --- demos/advanced-grid.html | 8 +- dist/tablefilter/style/colsVisibility.css | 2 +- dist/tablefilter/style/filtersVisibility.css | 2 +- dist/tablefilter/style/tablefilter.css | 57 ++++++++++-- .../style/themes/default/default.css | 2 +- .../style/themes/mytheme/mytheme.css | 2 +- .../style/themes/skyblue/skyblue.css | 2 +- static/style/config.styl | 2 +- static/style/grid-layout.styl | 87 ++++++++++++++----- static/style/help.styl | 3 +- static/style/toolbar.styl | 2 +- static/templates/advanced-grid.html | 8 +- 12 files changed, 130 insertions(+), 47 deletions(-) diff --git a/demos/advanced-grid.html b/demos/advanced-grid.html index 3964dcd2..a7967e7a 100644 --- a/demos/advanced-grid.html +++ b/demos/advanced-grid.html @@ -13029,10 +13029,12 @@ col_1: 'select', col_2: 'select', col_widths: [ - "150px", "70px", "70px", - "120px", "120px", "100px", - "100px", "100px", "100px" + '150px', '85px', '70px', + '120px', '120px', '100px', + '100px', '100px', '100px' ], + paging: true, + results_per_page: ['Records: ', [10,25,50,100]], extensions:[ { name: 'advancedGrid', diff --git a/dist/tablefilter/style/colsVisibility.css b/dist/tablefilter/style/colsVisibility.css index 6cf7e235..90853600 100644 --- a/dist/tablefilter/style/colsVisibility.css +++ b/dist/tablefilter/style/colsVisibility.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** diff --git a/dist/tablefilter/style/filtersVisibility.css b/dist/tablefilter/style/filtersVisibility.css index 88534cd4..0665adf0 100644 --- a/dist/tablefilter/style/filtersVisibility.css +++ b/dist/tablefilter/style/filtersVisibility.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** diff --git a/dist/tablefilter/style/tablefilter.css b/dist/tablefilter/style/tablefilter.css index 288c935e..ce1f0200 100644 --- a/dist/tablefilter/style/tablefilter.css +++ b/dist/tablefilter/style/tablefilter.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** @@ -275,6 +275,9 @@ div.popUpFilter:before { * Grid layout default style */ div.grd_Cont { + -webkit-box-shadow: 4px 4px 10px 0px rgba(50,50,50,0.75); + -moz-box-shadow: 4px 4px 10px 0px rgba(50,50,50,0.75); + box-shadow: 4px 4px 10px 0px rgba(50,50,50,0.75); width: 800px; height: auto; overflow: hidden; @@ -314,7 +317,6 @@ div.grd_headTblCont { } div.grd_tblCont table, div.grd_headTblCont table { - font-size: 12px; border-collapse: collapse; table-layout: fixed; } @@ -324,37 +326,74 @@ div.grd_tblCont table { div.grd_tblCont table th, div.grd_headTblCont table th, div.grd_headTblCont table td { + height: 35px; background-color: #c8e0fb; - padding: 2px 2px 2px 2px !important; + padding: 0.1em 0.5em; color: #333; border-right: 1px solid #99bbe8 !important; overflow: hidden; text-overflow: ellipsis; } +div.grd_headTblCont table td { + padding: 0.2em 0.2em; +} div.grd_tblCont table td { - padding: 2px 2px 2px 2px !important; - border-bottom: 1px solid #ccc !important; + padding: 0.5em 0.7em; + border-bottom: 1px solid #99bbe8; overflow: hidden; text-overflow: ellipsis; } .grd_inf { clear: both; width: auto; - height: 25px; + height: 35px; background-color: #c8e0fb; - font-size: 11px; margin: 0; padding: 1px 3px 1px 3px; border-top: 1px solid #99bbe8; } +.grd_inf a { + color: #333; + text-decoration: none; + font-weight: bold; +} +.grd_inf a:hover { + text-decoration: underline; + background-color: transparent; +} +.grd_inf input.reset:hover { + background-color: transparent; +} +.mdiv { + width: 40% !important; +} +.ldiv div { + border: 0; +} +.helpBtn { + border: 0 !important; +} +div.status { + position: absolute; + float: none !important; + height: auto !important; + margin: 19px 0 !important; + font-size: 12px; + color: #333; + border: 0 !important; +} +div.tot { + border: 0 !important; +} /** * Help box default style */ .helpBtn { display: inline-block; + height: 35px; margin: 0; - padding: 10px 15px 10px 15px; + padding: 8px 15px 8px 15px; border-left: 1px solid #f4f4f4; border-right: 1px solid #f4f4f4; vertical-align: top; @@ -645,7 +684,7 @@ table.TF td { clear: both; width: auto; height: 35px; - background-color: transparent; + background-color: #fff; font-size: inherit; margin: 0; padding: 0; diff --git a/dist/tablefilter/style/themes/default/default.css b/dist/tablefilter/style/themes/default/default.css index dc8f19b3..9bef8c23 100644 --- a/dist/tablefilter/style/themes/default/default.css +++ b/dist/tablefilter/style/themes/default/default.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** diff --git a/dist/tablefilter/style/themes/mytheme/mytheme.css b/dist/tablefilter/style/themes/mytheme/mytheme.css index 418bfc12..f195f608 100644 --- a/dist/tablefilter/style/themes/mytheme/mytheme.css +++ b/dist/tablefilter/style/themes/mytheme/mytheme.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** diff --git a/dist/tablefilter/style/themes/skyblue/skyblue.css b/dist/tablefilter/style/themes/skyblue/skyblue.css index 9fec6fa7..7e492e04 100644 --- a/dist/tablefilter/style/themes/skyblue/skyblue.css +++ b/dist/tablefilter/style/themes/skyblue/skyblue.css @@ -1,6 +1,6 @@ /** * TableFilter v0.0.0 by Max Guglielmi - * build date: 2015-08-07T07:26:43.498Z + * build date: 2015-08-08T07:46:20.939Z * MIT License */ /** diff --git a/static/style/config.styl b/static/style/config.styl index 06253637..ebb18fac 100644 --- a/static/style/config.styl +++ b/static/style/config.styl @@ -29,7 +29,7 @@ $filter-border-color = #F4F4F4 $filter-height = 35px // toolbar container (.inf) -$toolbar-bg-color = transparent +$toolbar-bg-color = #FFF $toolbar-font-size = inherit $toolbar-border-color = #CCC $toolbar-divider-color = #F4F4F4 diff --git a/static/style/grid-layout.styl b/static/style/grid-layout.styl index 82413175..4621bbef 100644 --- a/static/style/grid-layout.styl +++ b/static/style/grid-layout.styl @@ -3,9 +3,11 @@ */ @import 'config' +@import 'mixins/box-shadow' // main container div.grd_Cont + box-shadow(4px 4px 10px 0px rgba(50, 50, 50, 0.75)) width 800px height auto overflow hidden @@ -51,37 +53,74 @@ div.grd_headTblCont // tables div.grd_tblCont table, div.grd_headTblCont table - font-size 12px - border-collapse collapse - table-layout fixed + border-collapse collapse + table-layout fixed div.grd_tblCont table - border-right 1px solid $grid-layout-border-color + border-right 1px solid $grid-layout-border-color // headers -div.grd_tblCont table th, -div.grd_headTblCont table th, +div.grd_tblCont table th +div.grd_headTblCont table th + height $th-height + background-color $grid-layout-bg-color + padding 0.1em 0.5em + color #333 + border-right 1px solid $grid-layout-border-color !important + overflow hidden + text-overflow ellipsis + div.grd_headTblCont table td - background-color $grid-layout-bg-color - padding 2px 2px 2px 2px !important - color #333 - border-right 1px solid $grid-layout-border-color !important - overflow hidden - text-overflow ellipsis + @extend div.grd_headTblCont table th + padding 0.2em 0.2em div.grd_tblCont table td - padding 2px 2px 2px 2px !important - border-bottom 1px solid #ccc !important - overflow hidden - text-overflow ellipsis + padding $padding + border-bottom 1px solid $grid-layout-border-color + overflow hidden + text-overflow ellipsis // toolbar container .grd_inf - clear both - width auto - height 25px - background-color $grid-layout-bg-color - font-size 11px - margin 0 - padding 1px 3px 1px 3px - border-top 1px solid $grid-layout-border-color + clear both + width auto + height $min-height + background-color $grid-layout-bg-color + margin 0 + padding 1px 3px 1px 3px + border-top 1px solid $grid-layout-border-color + + // link appearence + a + color #333 + text-decoration none + font-weight bold + &:hover + text-decoration underline + background-color transparent + + input.reset + &:hover + background-color transparent + +.mdiv + width 40% !important + +.ldiv + div + border 0 + +.helpBtn + border 0 !important + +div.status + position absolute + float none !important + height auto !important + margin 19px 0 !important + font-size 12px + color #333 + border 0 !important + +div.tot + border 0 !important \ No newline at end of file diff --git a/static/style/help.styl b/static/style/help.styl index 44eaeb5e..024d054c 100644 --- a/static/style/help.styl +++ b/static/style/help.styl @@ -9,8 +9,9 @@ // help button .helpBtn display inline-block + height $min-height margin 0 - padding 10px 15px 10px 15px + padding 8px 15px 8px 15px border-left 1px solid $toolbar-divider-color border-right 1px solid $toolbar-divider-color vertical-align top diff --git a/static/style/toolbar.styl b/static/style/toolbar.styl index 914b3676..d01066c0 100644 --- a/static/style/toolbar.styl +++ b/static/style/toolbar.styl @@ -8,7 +8,7 @@ .inf clear both width auto - height 35px + height $min-height background-color $toolbar-bg-color font-size $toolbar-font-size margin 0 diff --git a/static/templates/advanced-grid.html b/static/templates/advanced-grid.html index 38c87008..3e926c35 100644 --- a/static/templates/advanced-grid.html +++ b/static/templates/advanced-grid.html @@ -52,10 +52,12 @@ col_1: 'select', col_2: 'select', col_widths: [ - "150px", "70px", "70px", - "120px", "120px", "100px", - "100px", "100px", "100px" + '150px', '85px', '70px', + '120px', '120px', '100px', + '100px', '100px', '100px' ], + paging: true, + results_per_page: ['Records: ', [10,25,50,100]], extensions:[ { name: 'advancedGrid',