client/views: replace fieldsets with divs

Although it has nice semantic name, fieldset gives troubles to flexbox,
so I'm dropping it.
This commit is contained in:
rr- 2016-04-10 00:24:14 +02:00
parent 8f5890ab67
commit 58e0d2e295
6 changed files with 27 additions and 38 deletions

View file

@ -2,17 +2,6 @@ form {
display: block;
width: 20em;
}
form fieldset {
margin: 0;
padding: 0;
border: 0;
}
form fieldset legend {
display: block;
text-align: center;
width: 100%;
font-size: 17pt;
}
form ul {
list-style-type: none;
margin: 0;
@ -180,12 +169,12 @@ input[type=password]:focus {
border-color: var(--main-color);
}
form.show-validation fieldset.input input:invalid {
form.show-validation .input input:invalid {
outline: none;
border: 2px solid var(--input-bad-border-color);
background: var(--input-bad-background-color);
}
form.show-validation fieldset.input input:valid {
form.show-validation .input input:valid {
outline: none;
border: 2px solid var(--input-good-border-color);
background: var(--input-good-background-color);

View file

@ -1,7 +1,7 @@
<div class='content-wrapper' id='login'>
<h1>Log in</h1>
<form>
<fieldset class='input'>
<div class='input'>
<ul>
<li>
<label for='user-name'>User name</label>
@ -16,13 +16,13 @@
<label for='remember-user' class='checkbox'>Remember me</label>
</li>
</ul>
</fieldset>
<fieldset class='messages'></fieldset>
<fieldset class='buttons'>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Log in'/>
{{#if this.canSendMails}}
<a href='/password-reset'>Forgot the password?</a>
{{/if}}
</fieldset>
</div>
</form>
</div>

View file

@ -1,20 +1,20 @@
<div class='content-wrapper' id='password-reset'>
<h1>Password reset</h1>
<form autocomplete='off'>
<fieldset class='input'>
<div class='input'>
<ul>
<li>
<label for='user-name'>User name or e-mail address</label>
<input id='user-name' name='user-name' type='text' autocomplete='off' required/>
</li>
</ul>
</fieldset>
</div>
<p><small>Proceeding will send an e-mail that contains a password reset
link. Clicking it is going to generate a new password for your account.
It is recommended to change that password to something else.</small></p>
<fieldset class='messages'></fieldset>
<fieldset class='buttons'>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Proceed'/>
</fieldset>
</div>
</form>
</div>

View file

@ -1,6 +1,6 @@
<div id='user-delete'>
<form>
<fieldset class='input'>
<div class='input'>
<ul>
<li>
<input id='confirm-deletion' name='confirm-deletion' type='checkbox' required/>
@ -9,10 +9,10 @@
</label>
</li>
</ul>
</fieldset>
<fieldset class='messages'></fieldset>
<fieldset class='buttons'>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Delete account'/>
</fieldset>
</div>
</form>
</div>

View file

@ -1,6 +1,6 @@
<div id='user-edit'>
<form class='tabular'>
<fieldset class='input'>
<div class='input'>
<ul>
{{#if this.canEditName}}
<li>
@ -35,10 +35,10 @@
{{/if}}
</ul>
<!-- TODO: avatar -->
</fieldset>
<fieldset class='messages'></fieldset>
<fieldset class='buttons'>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Save settings'/>
</fieldset>
</div>
</form>
</div>

View file

@ -1,7 +1,7 @@
<div class='content-wrapper' id='user-registration'>
<h1>Registration</h1>
<form autocomplete='off'>
<fieldset class='input'>
<div class='input'>
<ul>
<li>
<label for='user-name'>User name</label>
@ -17,11 +17,11 @@
<p class='hint'>Used for password reminder and to show a <a href='http://gravatar.com/'>Gravatar</a>. Leave blank for random Gravatar.</p>
</li>
</ul>
</fieldset>
<fieldset class='messages'></fieldset>
<fieldset class='buttons'>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Create an account'/>
</fieldset>
</div>
</form>
<div class='info'>
<p>Registered users can:</p>