From 7bfcf89aa8d4d28b3a6ebaef6859ddd08e906f43 Mon Sep 17 00:00:00 2001
From: Max Guglielmi <max.guglielmi@nearmap.com>
Date: Fri, 7 Aug 2015 22:10:08 +1000
Subject: [PATCH] Continued re-styling

---
 dist/starter.html                      | 15 ++----
 dist/tablefilter/style/tablefilter.css | 69 ++++++++++++--------------
 static/style/active-header.styl        |  4 +-
 static/style/config.styl               |  8 +--
 static/style/filters.styl              |  3 +-
 static/style/help.styl                 | 14 +++---
 static/style/loader.styl               | 13 ++---
 static/style/reset-button.styl         |  8 +--
 static/style/rows-counter.styl         | 13 +++--
 static/style/status-bar.styl           | 20 ++++----
 static/style/toolbar.styl              |  4 --
 static/templates/starter.html          | 15 ++----
 12 files changed, 85 insertions(+), 101 deletions(-)

diff --git a/dist/starter.html b/dist/starter.html
index f4b52ec1..cbb6ccac 100644
--- a/dist/starter.html
+++ b/dist/starter.html
@@ -450,21 +450,14 @@
 <script data-config>
     var filtersConfig = {
         base_path: 'tablefilter/',
-        // col_0: 'checklist',
         col_1: 'select',
         col_2: 'select',
-        // col_3: 'multiple',
+        col_3: 'select',
         alternate_rows: true,
+        rows_counter: true,
         btn_reset: true,
         loader: true,
-        status_bar: true/*,
-        popup_filters: true,
-        single_search_filter: true,
-        enable_icons: false,
-        btn: true,
-        btn_text: 'Go',
-
-
+        status_bar: true,
         mark_active_columns: true,
         col_number_format: [
             null, null, 'US',
@@ -488,7 +481,7 @@
             '70px', '70px', '70px',
             '70px', '60px', '60px'
         ],
-        extensions:[{ name: 'sort' }]*/
+        extensions:[{ name: 'sort' }]
     };
 
     var tf = new TableFilter('demo', filtersConfig);
diff --git a/dist/tablefilter/style/tablefilter.css b/dist/tablefilter/style/tablefilter.css
index 6dd50f9c..c4bf1622 100644
--- a/dist/tablefilter/style/tablefilter.css
+++ b/dist/tablefilter/style/tablefilter.css
@@ -7,7 +7,7 @@
  * Filtered column marker default style
  */
 .activeHeader {
-  background: #004080 !important;
+  background-color: #66afe9 !important;
   color: #fff !important;
 }
 
@@ -166,6 +166,7 @@ select[multiple="multiple"].ezSelectEditor {
   border-top: 1px solid #ccc;
   border-left: 1px solid #ccc;
   border-right: 1px solid #f4f4f4;
+  padding: 0.2em !important;
 }
 .btnflt {
   height: 35px;
@@ -192,7 +193,7 @@ select[multiple="multiple"].ezSelectEditor {
   display: block;
   color: #444;
   background-color: #fff;
-  border: 1px solid #f4f4f4;
+  border: 1px inset #f4f4f4;
   margin: 0;
   padding: 0 0 0 0.2em;
   width: 100%;
@@ -354,8 +355,9 @@ div.grd_tblCont table td {
   display: inline-block;
   margin: 0;
   padding: 10px 15px 10px 15px;
-  border-left: 1px solid #ccc;
-  border-right: 1px solid #ccc;
+  border-left: 1px solid #f4f4f4;
+  border-right: 1px solid #f4f4f4;
+  vertical-align: top;
 }
 .helpBtn:hover {
   background-color: #f4f4f4;
@@ -369,14 +371,12 @@ div.helpCont {
   box-shadow: 3px 3px 2px #888;
   position: absolute;
   display: none;
-  width: 250px;
-  max-width: 300px;
-  overflow: auto;
+  width: 300px;
   padding: 10px;
-  margin: 35px 0 0 -100px;
+  margin: 45px 0 0 -150px;
   border: 1px solid #ccc;
   line-height: 20px;
-  font-size: 12px;
+  font-size: inherit;
   color: #333;
   background: #fff;
   text-align: left;
@@ -425,7 +425,6 @@ div.helpFooter {
 }
 div.helpFooter h4 {
   margin: 2px 2px 2px 2px;
-  font-size: 13px;
   color: #333;
 }
 
@@ -441,15 +440,16 @@ span.keyword {
  */
 .loader {
   position: absolute;
-  padding: 5px 10px 5px 10px;
-  margin: 20px 0 0 20px;
+  padding: 0.5em 0.7em;
+  margin: 10em 0 0 3em;
   width: auto;
   z-index: 1000;
-  font-size: 12px;
-  font-weight: bold;
-  border: 1px solid #666;
-  background-color: #f4f4f4;
+  font-weight: 600;
+  background-color: #a7a7a8;
   vertical-align: middle;
+  border-radius: 10px;
+  color: #fff;
+  text-shadow: 1px 1px #333;
 }
 
 /**
@@ -517,15 +517,15 @@ span.rspgSpan {
  * Reset button default style
  */
 input.reset {
+  display: inline-block;
   width: 35px;
   height: 100%;
-  cursor: pointer !important;
   border: 0;
-  vertical-align: middle;
-  background: transparent url("themes/btn_clear_filters.png") center center no-repeat !important;
+  background: transparent url("themes/btn_clear_filters.png") center center no-repeat;
+  vertical-align: top;
 }
 input.reset:hover {
-  background: #f4f4f4 url("themes/btn_clear_filters.png") center center no-repeat !important;
+  background-color: #f4f4f4;
   border-radius: 3px;
 }
 
@@ -535,11 +535,12 @@ input.reset:hover {
 div.tot {
   float: left;
   overflow: hidden;
-  width: 150px;
-  height: 15px;
-  border-right: 1px solid #ccc;
-  margin: 0 5px 0 2px;
-  padding: 0 2px 0 2px;
+  min-width: 150px;
+  height: 100%;
+  border-right: 1px solid #f4f4f4;
+  margin: 0;
+  padding: 0.5em;
+  vertical-align: middle;
 }
 div.tot span {
   font-weight: bold;
@@ -569,14 +570,14 @@ div.status {
   float: left;
   overflow: hidden;
   width: 150px;
-  height: 15px;
-  border-right: 1px solid #ccc;
-  margin: 0 5px 0 2px;
-  padding: 0 2px 0 2px;
+  height: 100%;
+  border-right: 1px solid #f4f4f4;
+  margin: 0;
+  padding: 0.5em;
 }
 div.status span {
-  font-weight: bold;
-  font-size: 11px;
+  font-weight: 400;
+  font-size: inherit;
 }
 
 /**
@@ -612,7 +613,7 @@ table.TF td {
   width: auto;
   height: 35px;
   background-color: transparent;
-  font-size: 12px;
+  font-size: inherit;
   margin: 0;
   padding: 0;
   border-top: 1px solid #ccc;
@@ -630,10 +631,6 @@ table.TF td {
 .inf a:hover {
   text-decoration: underline;
 }
-.inf span {
-  width: 35px;
-  height: 35px;
-}
 .ldiv {
   float: left;
   width: 30%;
diff --git a/static/style/active-header.styl b/static/style/active-header.styl
index 731a64cd..f9f959f0 100644
--- a/static/style/active-header.styl
+++ b/static/style/active-header.styl
@@ -3,5 +3,5 @@
  */
 
 .activeHeader
-    background      #004080 !important
-    color           #fff !important
+    background-color        #66AFE9 !important
+    color                   #fff !important
diff --git a/static/style/config.styl b/static/style/config.styl
index 07bd59db..933bb880 100644
--- a/static/style/config.styl
+++ b/static/style/config.styl
@@ -5,6 +5,8 @@
 // table
 $font-family =                          inherit
 $padding =                              0.5em 0.7em
+$min-width =                            35px
+$min-height =                           35px
 
 // header cell
 // $th-bg-color =                          #EBECEE
@@ -29,8 +31,9 @@ $filter-height =                        35px
 
 // toolbar container (.inf)
 $toolbar-bg-color =                     transparent
-$toolbar-font-size =                    12px
+$toolbar-font-size =                    inherit
 $toolbar-border-color =                 #CCC
+$toolbar-divider-color =                #F4F4F4
 
 // paging
 $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-border-color =             #99BBE8
 
-// elements
-$min-width =                            35px
-$min-height =                           35px
diff --git a/static/style/filters.styl b/static/style/filters.styl
index 9d8ed521..cc2fe89f 100644
--- a/static/style/filters.styl
+++ b/static/style/filters.styl
@@ -16,6 +16,7 @@
         border-top:             1px solid #CCC
         border-left             1px solid #CCC
         border-right            1px solid #f4f4f4
+        padding                 0.2em !important
 
 // button appearance
 .btnflt
@@ -43,7 +44,7 @@
     display                     block
     color                       $filter-font-color
     background-color            $filter-bg-color
-    border                      1px solid $filter-border-color
+    border                      1px inset $filter-border-color
     margin                      0
     padding                     0 0 0 0.2em
     width                       100%
diff --git a/static/style/help.styl b/static/style/help.styl
index 69038658..4e433525 100644
--- a/static/style/help.styl
+++ b/static/style/help.styl
@@ -11,8 +11,9 @@
     display                 inline-block
     margin                  0
     padding                 10px 15px 10px 15px
-    border-left             1px solid #ccc
-    border-right            1px solid #ccc
+    border-left             1px solid $toolbar-divider-color
+    border-right            1px solid $toolbar-divider-color
+    vertical-align          top
 
     &:hover
         background-color    #F4F4F4
@@ -24,14 +25,12 @@ div.helpCont
     box-shadow(3px 3px 2px #888)
     position            absolute
     display             none
-    width               250px
-    max-width           300px
-    overflow            auto
+    width               300px
     padding             10px
-    margin              35px 0 0 -100px
+    margin              45px 0 0 -150px
     border              1px solid #CCC
     line-height         20px
-    font-size           12px
+    font-size           inherit
     color               #333
     background          #fff
     text-align          left
@@ -56,5 +55,4 @@ div.helpFooter
     margin              10px 0 0 0
     h4
         margin          2px 2px 2px 2px
-        font-size       13px
         color           #333
diff --git a/static/style/loader.styl b/static/style/loader.styl
index 4c0c2e0e..c89bf7c5 100644
--- a/static/style/loader.styl
+++ b/static/style/loader.styl
@@ -4,12 +4,13 @@
 
 .loader
     position            absolute
-    padding             5px 10px 5px 10px
-    margin              20px 0 0 20px
+    padding             0.5em 0.7em
+    margin              10em 0 0 3em
     width               auto
     z-index             1000
-    font-size           12px
-    font-weight         bold
-    border              1px solid #666
-    background-color    #f4f4f4
+    font-weight         600
+    background-color    #A7A7A8
     vertical-align      middle
+    border-radius       10px
+    color               #FFF
+    text-shadow         1px 1px #333
diff --git a/static/style/reset-button.styl b/static/style/reset-button.styl
index 7d29e0f7..1193dc70 100644
--- a/static/style/reset-button.styl
+++ b/static/style/reset-button.styl
@@ -5,13 +5,13 @@
 @import 'config'
 
 input.reset
+    display                 inline-block
     width                   $min-width
     height                  100%
-    cursor                  pointer !important
     border                  0
-    vertical-align          middle
-    background:             transparent url(themes/btn_clear_filters.png) center center no-repeat !important
+    background:             transparent url(themes/btn_clear_filters.png) center center no-repeat
+    vertical-align          top
 
     &:hover
-        background          #F4F4F4 url(themes/btn_clear_filters.png) center center no-repeat !important
+        background-color    #F4F4F4
         border-radius       3px
diff --git a/static/style/rows-counter.styl b/static/style/rows-counter.styl
index c7e258cf..c9d5d5da 100644
--- a/static/style/rows-counter.styl
+++ b/static/style/rows-counter.styl
@@ -2,14 +2,17 @@
  * Rows counter default style
  */
 
+@import 'config'
+
 div.tot
     float               left
     overflow            hidden
-    width               150px
-    height              15px
-    border-right        1px solid #ccc
-    margin              0 5px 0 2px
-    padding             0 2px 0 2px
+    min-width           150px
+    height              100%
+    border-right        1px solid $toolbar-divider-color
+    margin              0
+    padding             0.5em
+    vertical-align      middle
 
     span
         font-weight     bold
diff --git a/static/style/status-bar.styl b/static/style/status-bar.styl
index fbbe0074..db71edba 100644
--- a/static/style/status-bar.styl
+++ b/static/style/status-bar.styl
@@ -2,15 +2,17 @@
  * Status bar default style
  */
 
+@import 'config'
+
 div.status
-    float           left
-    overflow        hidden
-    width           150px
-    height          15px
-    border-right    1px solid #ccc
-    margin          0 5px 0 2px
-    padding         0 2px 0 2px
+    float               left
+    overflow            hidden
+    width               150px
+    height              100%
+    border-right        1px solid $toolbar-divider-color
+    margin              0
+    padding             0.5em
 
     span
-        font-weight bold
-        font-size   11px
\ No newline at end of file
+        font-weight     400
+        font-size       inherit
diff --git a/static/style/toolbar.styl b/static/style/toolbar.styl
index 0d0c6c26..34ddc0c0 100644
--- a/static/style/toolbar.styl
+++ b/static/style/toolbar.styl
@@ -28,10 +28,6 @@
         &:hover
             text-decoration     underline
 
-    span
-        width                   $min-width
-        height                  $min-height
-
 // left div
 .ldiv
     float                       left
diff --git a/static/templates/starter.html b/static/templates/starter.html
index bd49c1e6..45d28bb2 100644
--- a/static/templates/starter.html
+++ b/static/templates/starter.html
@@ -14,21 +14,14 @@
 <script data-config>
     var filtersConfig = {
         base_path: 'tablefilter/',
-        // col_0: 'checklist',
         col_1: 'select',
         col_2: 'select',
-        // col_3: 'multiple',
+        col_3: 'select',
         alternate_rows: true,
+        rows_counter: true,
         btn_reset: true,
         loader: true,
-        status_bar: true/*,
-        popup_filters: true,
-        single_search_filter: true,
-        enable_icons: false,
-        btn: true,
-        btn_text: 'Go',
-
-
+        status_bar: true,
         mark_active_columns: true,
         col_number_format: [
             null, null, 'US',
@@ -52,7 +45,7 @@
             '70px', '70px', '70px',
             '70px', '60px', '60px'
         ],
-        extensions:[{ name: 'sort' }]*/
+        extensions:[{ name: 'sort' }]
     };
 
     var tf = new TableFilter('demo', filtersConfig);