lab2023#30 Create tables page

- Pagination controls was added - Row actions was added - Row states was added
lixiansky · Aug 11, 2013 · ebf27f1 · ebf27f1
1 parent 5a42f4b
commit ebf27f1
Show file tree

Hide file tree

Showing 2 changed files with 158 additions and 23 deletions.
diff --git 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
@@ -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