added md and lg layouts for signin dialog

This commit is contained in:
Danny Coates 2019-03-01 16:19:55 -08:00
parent 8f74ccdb48
commit 1ddfeac81f
No known key found for this signature in database
GPG Key ID: 4C442633C62E00CB
1 changed files with 13 additions and 5 deletions

View File

@ -10,15 +10,21 @@ module.exports = function(trigger) {
let submitting = false; let submitting = false;
return html` return html`
<send-signup-dialog <send-signup-dialog
class="flex flex-col md:flex-row justify-center px-8 md:px-24 w-full h-full" class="flex flex-col lg:flex-row justify-center px-8 md:px-24 w-full h-full"
> >
<img <img
src="${assets.get('firefox_logo-only.svg')}" src="${assets.get('firefox_logo-only.svg')}"
class="h-16 mt-1 mb-4" class="h-16 mt-1 mb-4"
/> />
<section class="flex flex-col flex-no-shrink self-center mx-6 max-w-xs"> <section
<h1 class="font-bold">${state.translate('accountBenefitTitle')}</h1> class="flex flex-col flex-no-shrink self-center lg:mx-6 lg:max-w-xs"
<ul class="leading-normal text-grey-darkest my-2 mt-4 pl-4"> >
<h1 class="font-bold text-center lg:text-left">
${state.translate('accountBenefitTitle')}
</h1>
<ul
class="leading-normal text-grey-darkest my-2 mt-4 pl-4 md:self-center"
>
<li> <li>
${state.translate('accountBenefitLargeFiles', { ${state.translate('accountBenefitLargeFiles', {
size: bytes(state.LIMITS.MAX_FILE_SIZE) size: bytes(state.LIMITS.MAX_FILE_SIZE)
@ -31,7 +37,9 @@ module.exports = function(trigger) {
<li>${state.translate('accountBenefitSync')}</li> <li>${state.translate('accountBenefitSync')}</li>
</ul> </ul>
</section> </section>
<section class="flex flex-col flex-grow self-center m-4 max-w-xs"> <section
class="flex flex-col flex-grow m-4 md:self-center md:w-128 lg:max-w-xs"
>
<form onsubmit=${submitEmail} data-no-csrf> <form onsubmit=${submitEmail} data-no-csrf>
<input <input
id="email-input" id="email-input"