feat(tables): adapt for mobiles (#76)

* feat(tables): adapt for mobiles

* feat(tables): update as per the comments

app/views/account_shares/_account_share.html.slim

@@ -7,4 +7,4 @@ tr
      td= ''
   - else
     td= link_to 'link', accept_account_share_url(token: account_share.token)
-  td= link_to :delete, account_share_path(account, account_share), method: :delete, data: {confirm: 'Delete this share?'}
+    td= link_to 'Cancel', account_share_path(account, account_share), method: :delete, data: {confirm: 'Cancel this share?'}, class: 'button is-small is-light'

app/views/account_shares/index.html.slim

@@ -1,23 +1,24 @@
-h2.title
+h2.title.is-4
   | Account shares
-  .buttons.mt-4
-    = link_to 'New private share', new_account_share_path, class: 'button is-light mr-4' 
-    = link_to 'New public share', new_account_public_account_share_path, class: 'button is-light'
-
+.buttons.mt-4
+  = link_to 'Back', account_path(account), class: 'button is-light'
+  = link_to 'New private share', new_account_share_path, class: 'button is-light mr-4'
+  = link_to 'New public share', new_account_public_account_share_path, class: 'button is-light'
 .columns
   .column
     .card
       .card-header
       .card-header-title.is-centered
-        h3.title= account.name
-      .card-content
-        table.table.is-fullwidth.is-striped
-          thead
-            tr
-              th Name
-              th Email
-              th Created
-              th Accepted
-              th Link
-              th Actions
-          = render partial: 'account_share', collection: account.account_shares.order(created_at: :desc)
+        h3.title.is-4= account.name
+      .card-content.px-1
+        .table-container
+          table.table.is-fullwidth.is-striped
+            thead
+              tr
+                th Name
+                th Email
+                th Created
+                th Accepted
+                th Link
+                th Actions
+            = render partial: 'account_share', collection: account.account_shares.order(created_at: :desc)

app/views/account_shares/new.html.slim

@@ -11,5 +11,5 @@
         = f.email_field :email, name: 'account_share[email]', type: "email"
       br
       div.buttons.is-flex.is-justify-content-flex-end
-        = link_to 'Back', account_shares_path, class: 'button is-light'
+        = link_to 'Back', account_shares_path(account), class: 'button is-light'
         = f.submit "Send invitation", class: 'button is-primary'

app/views/accounts/_objective.html.slim

@@ -6,5 +6,5 @@ tr
   td= image_tag objective.image_url
   - if public_share?(account)
     td= ''
-  -else
-    td= link_to :delete, objective_path(objective), method: :delete, data: {confirm: 'Delete this objective?'}
+  - else
+    td= link_to 'Delete', objective_path(objective), method: :delete, data: {confirm: 'Delete this objective?'}, class: 'button is-small is-light'

app/views/accounts/_transaction.html.slim

@@ -6,5 +6,5 @@ tr
   td= transaction.description
   - if public_share?(account)
     td= ''
-  -else
-    td= link_to :delete, transaction_path(transaction), method: :delete, data: {confirm: 'Delete this transaction?'}
+  - else
+    td= link_to 'Cancel', transaction_path(transaction), method: :delete, data: {confirm: 'Cancel this transaction?'}, class: 'button is-small is-light'

app/views/accounts/show.html.slim

@@ -1,22 +1,22 @@
-.columns
-  .column.is-three-quarters
-    h2.title
-      | Account details
-      - unless public_share?(account)
-        = link_to 'Edit', edit_account_path(account), class: 'button is-light'
+h2.title.is-4
+  | Account details
+.buttons
+  = link_to 'Back', my_account_path, class: 'button is-light'
   - unless public_share?(account)
-    .column.is-flex.is-justify-content-flex-end
-      = link_to 'Account shares', account_shares_path(account), class: 'button is-light'
-
+    = link_to 'Edit', edit_account_path(account), class: 'button is-light'
+    = link_to 'Account shares', account_shares_path(account), class: 'button is-light'
 .columns
   .column
     .card
       .card-header
         .card-header-title.is-centered
-          h3.title= account.name
+          h3.title.is-4= account.name
       .card-content
-        .title.has-text-centered
-          | Balance: #{account.balance}
+        nav.level
+          div.level-item.has-text-centered
+            div
+              p.heading Balance
+              p.title #{account.balance}
       - unless public_share?(account)
         .card-footer
           = link_to '+Add', new_account_topup_path(account), class: 'card-footer-item'
@@ -26,66 +26,69 @@
     .card
       .card-header
         .card-header-title.is-centered
-          h3.title History
-      .card-content
-        table.table.is-fullwidth.is-striped
-          thead
-            tr
-              th Date
-              th From
-              th To
-              th Amount
-              th Description
-              th Actions
-          = render partial: 'transaction', collection: account.transactions, account: account
-
+          h3.title.is-4 History
+      .card-content.px-1
+        .table-container
+          table.table.is-fullwidth.is-striped
+            thead
+              tr
+                th Date
+                th From
+                th To
+                th Amount
+                th Description
+                th Actions
+            tbody
+              = render partial: 'transaction', collection: account.transactions, account: account
 .columns
   .column
     .card
       .card-header
         .card-header-title.is-centered
-          h3.title Objectives
-      .card-content
-        table.table.is-fullwidth.is-striped
-          thead
-            tr
-              th Name
-              th Amount
-              th Progress
-              th Weeks # to goal
-              th Image
-              th Actions
-          = render partial: 'objective', collection: account.objectives, account: account
-      - unless public_share?(account)
-        .card-footer
-          = link_to '+Add', new_account_objective_path(account), class: 'card-footer-item'
-
+          h3.title.is-4 Objectives
+      .card-content.px-1
+        .table-container
+          table.table.is-fullwidth.is-striped
+            thead
+              tr
+                th Name
+                th Amount
+                th Progress
+                th Weeks # to goal
+                th Image
+                th Actions
+            tbody
+              = render partial: 'objective', collection: account.objectives, account: account
+        - unless public_share?(account)
+          .card-footer
+            = link_to '+Add', new_account_objective_path(account), class: 'card-footer-item'
 .columns
   .column
     .card
       .card-header
-        .card-header-title
-          .title Weekly Automatic Topups
-      .card-content
-        table.table.is-fullwidth.is-striped
-          thead
-            tr
-              th From
-              th Amount
-              th Actions
-          - account.automatic_topup_configs.each do |config|
-            tr
-              td= config.from_account.name
-              td= config.amount
-              - if public_share?(account)
-                td ''
-              - else
-                td
-                  = link_to 'edit', edit_account_account_automatic_topup_config_path(account, config)
-                  |  
-                  = link_to 'delete', account_account_automatic_topup_config_path(account, config), method: :delete, data: { confirm: 'Are you sure?' }
-      - unless public_share?(account)
-        .card-footer
-          = link_to '+ Add', new_account_account_automatic_topup_config_path(account), class: 'card-footer-item'
+        .card-header-title.is-centered
+          .title.is-4 Weekly Automatic Topups
+      .card-content.px-1
+        .table-container
+          table.table.is-fullwidth.is-striped
+            thead
+              tr
+                th From
+                th Amount
+                th Actions
+            - account.automatic_topup_configs.each do |config|
+              tr
+                td= config.from_account.name
+                td= config.amount
+                - if public_share?(account)
+                  td ''
+                - else
+                  td
+                    = link_to 'Edit', edit_account_account_automatic_topup_config_path(account, config), class: 'button is-small is-light'
+                    |  
+                    = link_to 'Cancel', account_account_automatic_topup_config_path(account, config), method: :delete, data: { confirm: 'Cancel this top up?' }, class: 'button is-small is-light'
+        - unless public_share?(account)
+          .card-footer
+            = link_to '+Add', new_account_account_automatic_topup_config_path(account), class: 'card-footer-item'
 - if account.accumulative_balance_data.present?
   = line_chart account.accumulative_balance_data, xtitle: 'Date', ytitle: 'Accumulative Balance'

app/views/my_accounts/show.html.slim

@@ -46,15 +46,17 @@
     .columns
       .column
         .card
-          .card-content
-            table.table.is-fullwidth.is-striped
-              thead
-                tr
-                  th Account
-                  th From
-                  th Created
-                  th Actions
-                = render partial: 'account_share', collection: unaccepted_shares.order(created_at: :desc)
+          .card-content.px-1
+            .table-container
+              table.table.is-fullwidth.is-striped
+                thead
+                  tr
+                    th Account
+                    th From
+                    th Created
+                    th Actions
+                tbody
+                  = render partial: 'account_share', collection: unaccepted_shares.order(created_at: :desc)
 - else
     .hero.is-medium.has-text-centered
       .hero-body

app/views/objectives/new.html.slim

@@ -1,6 +1,6 @@
 .columns.is-centered
   .column.is-one-third
-    h2.title.is-4.has-text-centered Adding new objective
+    h2.title.is-4.has-text-centered Add new objective
     = form_with url:account_objectives_path(account), method: :post do |f|
       .field
         = f.text_field :name, autofocus: true, class: "input", placeholder: "Name"

app/views/spends/new.html.slim

@@ -14,4 +14,4 @@
         = f.text_field :description, class: "input", placeholder: "Description"
       div.buttons.is-flex.is-justify-content-flex-end
         = link_to 'Back', request.referer, class: 'button is-light'
-        = f.submit 'Save', class: "button is-primary is-fullwidth"
+        = f.submit 'Save', class: "button is-primary is-fullwidth"