Better support for mobile devices on login and account pages
This commit is contained in:
parent
941c585c73
commit
5c3d3f6ce9
7 changed files with 18 additions and 12 deletions
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
|
<form class="login-box" method="post"
|
||||||
v-on:submit.prevent="submitForm"
|
v-on:submit.prevent="submitForm"
|
||||||
>
|
>
|
||||||
<div class="flex flex-wrap -mx-3 mb-6">
|
<div class="flex flex-wrap -mx-3 mb-6">
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
|
<form class="login-box" method="post"
|
||||||
v-on:submit.prevent="submitForm"
|
v-on:submit.prevent="submitForm"
|
||||||
>
|
>
|
||||||
<div class="flex flex-wrap -mx-3 mb-6">
|
<div class="flex flex-wrap -mx-3 mb-6">
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<form class="bg-white shadow-lg rounded-lg pt-10 px-8 pb-6 mb-4 animate fadein" method="post"
|
<form class="login-box" method="post"
|
||||||
v-on:submit.prevent="submitToken"
|
v-on:submit.prevent="submitToken"
|
||||||
>
|
>
|
||||||
<div class="flex flex-wrap -mx-3 mb-6">
|
<div class="flex flex-wrap -mx-3 mb-6">
|
||||||
|
|
|
@ -1,22 +1,22 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<navigation/>
|
<navigation/>
|
||||||
<div class="container animate fadein mt-6">
|
<div class="container animate fadein mt-2 sm:mt-6">
|
||||||
<modal :show="modalVisible" v-on:close="modalVisible = false">
|
<modal :show="modalVisible" v-on:close="modalVisible = false">
|
||||||
<TwoFactorAuthentication/>
|
<TwoFactorAuthentication/>
|
||||||
</modal>
|
</modal>
|
||||||
<flash container="mt-6 mb-2 mx-4"/>
|
<flash container="mt-2 sm:mt-6 mb-2 sm:mx-4"/>
|
||||||
<div class="flex flex-wrap">
|
<div class="flex flex-wrap">
|
||||||
<div class="w-full md:w-1/2">
|
<div class="w-full md:w-1/2">
|
||||||
<div class="m-4 md:ml-0">
|
<div class="sm:m-4 md:ml-0">
|
||||||
<update-email class="mb-8"/>
|
<update-email class="mb-4 sm:mb-8"/>
|
||||||
<div class="content-box text-center">
|
<div class="content-box text-center mb-4 sm:mb-0">
|
||||||
<button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
|
<button class="btn btn-green btn-sm" type="submit" v-on:click="modalVisible = true">Configure 2-Factor Authentication</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="w-full md:w-1/2">
|
<div class="w-full md:w-1/2">
|
||||||
<change-password class="m-4 md:mr-0"/>
|
<change-password class="sm:m-4 md:mr-0"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,3 +1,9 @@
|
||||||
.login-box {
|
.login-box {
|
||||||
@apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
|
@apply .bg-white .shadow-lg .rounded-lg .pt-10 .px-8 .pb-6 .mb-4;
|
||||||
|
|
||||||
|
@screen xsx {
|
||||||
|
@apply .rounded-none;
|
||||||
|
margin-top: 25%;
|
||||||
|
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2), 0 -15px 30px 0 rgba(0, 0, 0, .2);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,8 +3,8 @@
|
||||||
])
|
])
|
||||||
|
|
||||||
@section('container')
|
@section('container')
|
||||||
<div class="w-full max-w-xs sm:max-w-sm m-auto mt-8">
|
<div class="w-full sm:max-w-sm m-auto mt-8">
|
||||||
<div class="text-center">
|
<div class="text-center hidden sm:block">
|
||||||
<img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
|
<img src="/favicons/android-chrome-512x512.png" class="max-w-xxs">
|
||||||
</div>
|
</div>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
@section('container')
|
@section('container')
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
<div class="w-full m-auto mt-0 container">
|
<div class="w-full m-auto mt-0 container">
|
||||||
<p class="text-right text-grey-dark text-xs">
|
<p class="text-center sm:text-right text-grey-dark text-xs">
|
||||||
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
{!! trans('strings.copyright', ['year' => date('Y')]) !!}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue