Make the account page mobile friendly

This commit is contained in:
Dane Everitt 2018-06-16 16:43:52 -07:00
parent 4e4a183f48
commit ac7cefb83f
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
4 changed files with 19 additions and 8 deletions

View file

@ -6,14 +6,18 @@
<TwoFactorAuthentication/> <TwoFactorAuthentication/>
</modal> </modal>
<flash container="mt-6 mb-2 mx-4"/> <flash container="mt-6 mb-2 mx-4"/>
<div class="flex"> <div class="flex flex-wrap">
<div class="flex-1 m-4 ml-0"> <div class="w-full md:w-1/2">
<update-email class="mb-8"/> <div class="m-4 md:ml-0">
<div class="bg-white p-6 border border-grey-light rounded rounded-1 text-center"> <update-email class="mb-8"/>
<button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button> <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>
</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> </div>
</div> </div>

View file

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<form action="" method="post"> <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> <h2 class="mb-6 text-grey-darkest font-medium">Change your password</h2>
<div class="mt-6"> <div class="mt-6">
<label for="grid-password-current" class="input-label">Current password</label> <label for="grid-password-current" class="input-label">Current password</label>

View file

@ -1,7 +1,7 @@
<template> <template>
<div :class> <div :class>
<form method="post" v-on:submit.prevent="submitForm"> <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> <h2 class="mb-6 text-grey-darkest font-medium">Update your email</h2>
<div> <div>
<label for="grid-email" class="input-label">Email address</label> <label for="grid-email" class="input-label">Email address</label>

View file

@ -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. * Flex boxes for server listing on user dashboard.
*/ */