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/>
</modal>
<flash container="mt-6 mb-2 mx-4"/>
<div class="flex">
<div class="flex-1 m-4 ml-0">
<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="bg-white p-6 border border-grey-light rounded rounded-1 text-center">
<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>
<change-password class="flex-1 m-4 mr-0"/>
</div>
<div class="w-full md:w-1/2">
<change-password class="m-4 md:mr-0"/>
</div>
</div>
</div>
</div>

View file

@ -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>

View file

@ -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>

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.
*/