fix(ui): fixup! fixup! fixup! fixup! fixup! fixup! responsive ui for …

…tablets

app/assets/stylesheets/templates/_edit_account.scss

@@ -0,0 +1,58 @@
+@import "../config/mixins";
+
+.edit-account {
+  display: flex;
+
+  .column {
+    flex: none;
+    width: 33.3333%;
+
+    @include fullhd {
+      width: 40%;
+    }
+
+    @include widescreen {
+      width: 50%;
+    }
+
+    @include tablet {
+      width: 60%;
+    }
+
+    @include mobile {
+      width: 100%;
+    }
+
+    #account-background {
+      display: flex;
+      justify-content: space-between;
+
+      .image-inputs {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        margin-right: 1rem;
+
+        .file {
+          .file-cta {
+            .file-label {
+              @include desktop {
+                display: none;
+              }
+            }
+
+            .file-icon {
+              @include desktop {
+                margin: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .buttons {
+      justify-content: space-between;
+    }
+  }
+}

app/assets/stylesheets/templates/_new_account.scss

@@ -0,0 +1,35 @@
+@import "../config/mixins";
+
+.new-account {
+  display: flex;
+
+  .column {
+    flex: none;
+    width: 33.3333%;
+
+    @include fullhd {
+      width: 40%;
+    }
+
+    @include widescreen {
+      width: 50%;
+    }
+
+    @include tablet {
+      width: 60%;
+    }
+
+    @include mobile {
+      width: 100%;
+    }
+
+    form .columns {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .buttons {
+      justify-content: flex-end
+    }
+  }
+}

app/views/accounts/edit.html.slim

@@ -1,42 +1,28 @@
-.columns.is-centered
-  .column.is-one-third
+.columns.is-centered.edit-account
+  .column
     h2.title.is-4.has-text-centered Edit account
     = form_with model: account do |f|
-      .columns.is-mobile.is-justify-content-space-between#account-background(style="#{"background-image: url('#{url_for(account.background)}');" if account.background.attached?}" class="#{'account-has-bg' if account.background.attached?}")
-        .column.is-one-third
-          .field
-            .figure.image.is-128x128(class="#{'bg-around-image' if account.background.attached?}")
+      .columns#account-background(style="#{"background-image: url('#{url_for(account.background)}');" if account.background.attached?}" class="#{'account-has-bg' if account.background.attached?}")
+        .field.m-4
+          .figure.image.is-128x128(class="#{'bg-around-image' if account.background.attached?}")
               = image_tag(avatar_for(account), id:'account-image', class:"is-rounded",  alt: 'avatar')
-        .is-flex.is-flex-direction-column.is-align-items-flex-end.mr-4.for-desktop
-          .file#file-input.is-light.is-pulled-right.my-4
+        .image-inputs
+          .file#file-input.is-light.my-4
             label.file-label.is-light
               = f.file_field :avatar, class: 'file-input'
               span.file-cta
                 span.file-icon
                   i.fa.fa-camera
                 span.file-label
                   | Change Avatar
-          .file#background-input.is-light.is-pulled-right
+          .file#background-input.is-light
             label.file-label.is-light
               = f.file_field :background, class: 'file-input'
               span.file-cta
                 span.file-icon
                   i.fa.fa-picture-o
                 span.file-label
                   | Change Background
-        .is-flex.is-flex-direction-column.is-align-items-flex-end.mr-4.for-mobile
-          .file#file-input.is-light.is-pulled-right.my-4
-            label.file-label.is-light
-              = f.file_field :avatar, class: 'file-input'
-              span.file-cta
-                span.file-icon.m-0
-                  i.fa.fa-camera
-          .file#background-input.is-light.is-pulled-right
-            label.file-label.is-light
-              = f.file_field :background, class: 'file-input'
-              span.file-cta
-                span.file-icon.m-0
-                  i.fa.fa-picture-o
       - if current_user.parent?
         .field.mb-4
           = f.text_field :name, autofocus: true, class: "input", placeholder: "Name"
@@ -53,7 +39,7 @@
           .notification.is-light.mt-3
             | If checked, all users with access to your kid's account, including you, will get email notifications 
             | about balance changes.
-      buttons.is-flex.is-justify-content-space-between.for-desktop
+      .buttons
         - if current_user.parent?
           - if current_user.owner?(account)
             = link_to archive_account_path(account), data: { confirm: 'Archive this account?' }, class: 'button is-budgeting-kid-danger', style: "width: 180px" do
@@ -65,28 +51,7 @@
               span.icon
                 i.fa.fa-sign-out
               |   Decline Share
-        div
-          = link_to account_path(account), class: 'button is-white is-bordered mr-2' do
-            span.file-icon
-              i.fa.fa-chevron-left
-            | Back
-          = button_to account_path, class: 'button is-primary' do
-            span.file-icon
-              i.fa.fa-hdd-o
-            | Save
-      buttons.is-flex.is-flex-direction-column.for-mobile
-        - if current_user.parent?
-          - if current_user.owner?(account)
-            = link_to archive_account_path(account), data: { confirm: 'Archive this account?' }, class: 'button is-budgeting-kid-danger mb-4', style: "width: 180px" do
-              span.icon
-                i.fa.fa-archive
-              |   Archive Account
-          - else
-            = link_to terminate_shared_account_path(account), method: :patch, data: {confirm: 'Would you like to decline this share?'}, class: 'button is-budgeting-kid-danger mb-4' do
-              span.icon
-                i.fa.fa-sign-out
-              |   Decline Share
-        .is-flex.is-justify-content-flex-end
+        .action-buttons
           = link_to account_path(account), class: 'button is-white is-bordered mr-2' do
             span.file-icon
               i.fa.fa-chevron-left

app/views/accounts/new.html.slim

@@ -1,22 +1,20 @@
 #topup-utc-time data-utc-time= topup_utc_time
-.columns.is-centered
-  .column.is-one-third
+.columns.is-centered.new-account
+  .column
     h2.title.is-4.has-text-centered New account
     = form_with url: accounts_path do |form|
-      .columns.is-mobile
-        .column.is-one-third
-          .field
-            .figure.image.is-128x128
-              = image_tag('user.svg', class:'is-rounded', id:'account-image', alt: 'avatar')
-        .column
-          .file#file-input.is-light.is-pulled-right
-            label.file-label.is-light
-              = form.file_field :avatar, class: "file-input"
-              span.file-cta
-                span.file-icon
-                  i.fa.fa-camera
-                span.file-label
-                  | Add photo
+      .columns
+        .field
+          .figure.image.is-128x128
+            = image_tag('user.svg', class:'is-rounded', id:'account-image', alt: 'avatar')
+        .file#file-input.is-light.is-pulled-right
+          label.file-label.is-light
+            = form.file_field :avatar, class: "file-input"
+            span.file-cta
+              span.file-icon
+                i.fa.fa-camera
+              span.file-label
+                | Add photo
       = form.text_field :name, autofocus: true, class: "input", placeholder: "Name"
       .field
       = form.fields_for :automatic_topup do |auto_topup_form|
@@ -25,7 +23,7 @@
           | This amount will be automatically added to the account every Friday at 
           span#formatted-time
           |. You will receive an email notification about that
-      .buttons.is-flex.is-justify-content-flex-end
+      .buttons
         = link_to my_account_path, class: 'button is-light' do
           span.icon
             i.fa.fa-chevron-left