From ebf27f1deae142385439cc03e800d1b53850b431 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tayfun=20O=CC=88zis=CC=A7=20ERI=CC=87KAN?= Date: Mon, 12 Aug 2013 01:51:43 +0300 Subject: [PATCH] #30 Create tables page - Pagination controls was added - Row actions was added - Row states was added --- .../assets/stylesheets/application.css.sass | 34 +++- source/tables.html.haml | 147 ++++++++++++++++-- 2 files changed, 158 insertions(+), 23 deletions(-) diff --git a/source/assets/stylesheets/application.css.sass b/source/assets/stylesheets/application.css.sass index 9816174..1ca730c 100755 --- a/source/assets/stylesheets/application.css.sass +++ b/source/assets/stylesheets/application.css.sass @@ -27,9 +27,6 @@ form .tables .panel-body - margin-left: -15px - margin-right: -15px - margin-top: -15px .table-header text-align: left padding: 10px @@ -40,13 +37,36 @@ form .input-group margin-right: -15px input - height: 33px + height: 30px + button + height: 30px + padding: 0 10px + .table-footer + background-color: lighten($panel-heading-bg, 3) + border-top: 1px solid $table-border-color + +border-bottom-left-radius(4px) + +border-bottom-right-radius(4px) + padding: 10px 10px 5px 10px + margin-bottom: -14px + .pagination + margin: 0 table + margin-bottom: 0 th:first-child, td:first-child padding-left: 15px - - - + tr.disabled + +opacity(.4) + td + text-decoration: line-through + td.action + text-decoration: none !important + td.action + width: 15% + padding: 5px + .btn + @extend .btn-sm + height: 25px + padding: 2px 6px #navbar .navbar-brand diff --git a/source/tables.html.haml b/source/tables.html.haml index 3bb48ca..15b8716 100755 --- a/source/tables.html.haml +++ b/source/tables.html.haml @@ -15,10 +15,10 @@ %a.btn{href: '#', data: {toggle: 'toolbar-tooltip'}, title: 'Reload'} %i.icon-refresh .badge 3 record - .panel-body + .panel-body.no-padding .table-header.row .col-lg-9 - Per page + TODO: Add filters here .col-lg-3 .input-group %input.form-control{placeholder: 'Quick search...', type: 'text'}/ @@ -32,43 +32,158 @@ %th First Name %th Last Name %th Username + %th.actions + Actions %tbody - %tr + %tr.success %td 1 %td Mark %td Otto %td @mdo - %tr + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.danger %td 2 %td Jacob %td Thornton %td @fat - %tr + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.warning %td 3 %td Larry %td the Bird %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.active + %td 4 + %td Mark + %td Otto + %td @mdo + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr.disabled + %td 5 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 6 + %td Larry + %td the Bird + %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 7 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 8 + %td Larry + %td the Bird + %td @twitter + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 9 + %td Mark + %td Otto + %td @mdo + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash + %tr + %td 10 + %td Jacob + %td Thornton + %td @fat + %td.action + %a.btn.btn-success{href: '#', data: {toggle: 'tooltip'}, title: 'Zoom'} + %i.icon-zoom-in + %a.btn.btn-info{href: '#'} + %i.icon-edit + %a.btn.btn-danger{href: '#'} + %i.icon-trash .table-footer %ul.pagination %li - %a{:href => "#"} « + %a{:href => '#'} « + %li.active + %a{:href => '#'} 1 + %li + %a{:href => '#'} 2 %li - %a{:href => "#"} 1 + %a{:href => '#'} 3 %li - %a{:href => "#"} 2 + %a{:href => '#'} 4 %li - %a{:href => "#"} 3 + %a{:href => '#'} 5 %li - %a{:href => "#"} 4 + %a{:href => '#'} 6 %li - %a{:href => "#"} 5 + %a{:href => '#'} 7 %li - %a{:href => "#"} » + %a{:href => '#'} 8 + %li + %a{:href => '#'} » + .pull-right + Showing 1 to 10 of 32 entries .row .col-lg-6 - .panel + .panel.tables .panel-heading %i.icon-table.icon-large Padding Table @@ -97,7 +212,7 @@ %td the Bird %td @twitter .col-lg-6 - .panel + .panel.tables .panel-heading %i.icon-table.icon-large Bordered Table @@ -127,11 +242,11 @@ %td @twitter -.panel +.panel.tables .panel-heading %i.icon-table.icon-large Condensed Table - .panel-body + .panel-body.no-padding %table.table.table-condensed %thead %tr