mirror of
https://github.com/flarum/framework.git
synced 2025-02-02 14:18:46 +08:00
1d6616a419
Mobile responsive design with a very native feel, all in pure CSS (no templating differences between versions — even though some things are in very different positions.) I’ve been working on this whole thing in my head for a while now, planning out how certain components will be laid out on the mobile version, and how to reason about them in the templates so that a substantially different layout can still be achieved by only using CSS. Today I finally wrote the CSS and it’s come together pretty damn perfectly. Still to come: - Swiping left or right on discussions to reveal controls - Tablet version
41 lines
1.7 KiB
Handlebars
41 lines
1.7 KiB
Handlebars
<div class="modal-content">
|
|
<button class="close btn btn-icon btn-link back-control" {{action "closeModal"}}>{{fa-icon "times"}}</button>
|
|
<form {{action "submit" on="submit"}}>
|
|
<div class="modal-header">
|
|
<h3 class="title-control">Sign Up</h3>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-centered">
|
|
<div class="form-group">
|
|
{{input value=username name="username" type="text" class="form-control" placeholder="Username" disabled=loading}}
|
|
</div>
|
|
<div class="form-group">
|
|
{{input value=email name="email" type="text" class="form-control" placeholder="Email" disabled=loading}}
|
|
</div>
|
|
<div class="form-group">
|
|
{{input value=password name="password" type="password" class="form-control" placeholder="Password" disabled=loading}}
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary btn-block" {{bind-attr disabled=loading}}>Sign Up</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<p class="log-in-link">Already have an account? <a href="#" {{action "login"}}>Log In</a></p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{{ui/loading-indicator classNameBindings=":modal-loading loading:active"}}
|
|
|
|
{{#if welcomeUser}}
|
|
<div {{bind-attr class=":signup-welcome" style=welcomeStyle}}>
|
|
{{user-avatar welcomeUser}}
|
|
<h3>Welcome, {{welcomeUser.username}}!</h3>
|
|
|
|
{{#unless welcomeUser.isConfirmed}}
|
|
<p>We've sent a confirmation email to <strong>{{welcomeUser.email}}</strong>. If it doesn't arrive soon, check your spam folder.</p>
|
|
<p><a {{bind-attr href=emailProviderUrl}} class="btn btn-default">Go to {{emailProviderName}}</a></p>
|
|
{{/unless}}
|
|
</div>
|
|
{{/if}}
|