From ac7cefb83f9d6f3c5602716f61c406c932516d85 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 16 Jun 2018 16:43:52 -0700
Subject: [PATCH] Make the account page mobile friendly

---
 .../scripts/components/dashboard/Account.vue     | 16 ++++++++++------
 .../dashboard/account/ChangePassword.vue         |  2 +-
 .../components/dashboard/account/UpdateEmail.vue |  2 +-
 .../assets/styles/components/miscellaneous.css   |  7 +++++++
 4 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/resources/assets/scripts/components/dashboard/Account.vue b/resources/assets/scripts/components/dashboard/Account.vue
index 3b481a817..b764dc1c6 100644
--- a/resources/assets/scripts/components/dashboard/Account.vue
+++ b/resources/assets/scripts/components/dashboard/Account.vue
@@ -6,14 +6,18 @@
                 <TwoFactorAuthentication/>
             </modal>
             <flash container="mt-6 mb-2 mx-4"/>
-            <div class="flex">
-                <div class="flex-1 m-4 ml-0">
-                    <update-email class="mb-8"/>
-                    <div class="bg-white p-6 border border-grey-light rounded rounded-1 text-center">
-                        <button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
+            <div class="flex flex-wrap">
+                <div class="w-full md:w-1/2">
+                    <div class="m-4 md:ml-0">
+                        <update-email class="mb-8"/>
+                        <div class="content-box text-center">
+                            <button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
+                        </div>
                     </div>
                 </div>
-                <change-password class="flex-1 m-4 mr-0"/>
+                <div class="w-full md:w-1/2">
+                    <change-password class="m-4 md:mr-0"/>
+                </div>
             </div>
         </div>
     </div>
diff --git a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
index 52ad65a95..c9f8944a7 100644
--- a/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
+++ b/resources/assets/scripts/components/dashboard/account/ChangePassword.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <form action="" method="post">
-            <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+            <div class="content-box">
                 <h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
                 <div class="mt-6">
                     <label for="grid-password-current" class="input-label">Current password</label>
diff --git a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
index 5ad0089f2..8ff9543a4 100644
--- a/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
+++ b/resources/assets/scripts/components/dashboard/account/UpdateEmail.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class>
         <form method="post" v-on:submit.prevent="submitForm">
-            <div class="bg-white p-6 border border-grey-light rounded rounded-1">
+            <div class="content-box">
                 <h2 class="mb-6 text-grey-darkest font-medium">Update your email</h2>
                 <div>
                     <label for="grid-email" class="input-label">Email address</label>
diff --git a/resources/assets/styles/components/miscellaneous.css b/resources/assets/styles/components/miscellaneous.css
index ad52cbbb5..fffc6205e 100644
--- a/resources/assets/styles/components/miscellaneous.css
+++ b/resources/assets/styles/components/miscellaneous.css
@@ -42,6 +42,13 @@ code {
     }
 }
 
+/**
+ * Styling for elements that contain the core page content.
+ */
+.content-box {
+    @apply .bg-white .p-6 .border .border-grey-light .rounded;
+}
+
 /**
  * Flex boxes for server listing on user dashboard.
  */