client/general: ditch tabular forms

This commit is contained in:
rr- 2016-07-29 12:38:36 +02:00
parent 797e5d4244
commit d91352a3b0
7 changed files with 121 additions and 148 deletions

View File

@ -9,14 +9,14 @@ form
margin: 0
padding: 0
li
margin-top: 0.5em
margin-top: 1.2em
label
display: block
padding: 0.5em 0
padding: 0.3em 0
.input
margin-bottom: 1em
.buttons
margin-top: 1em
margin-top: 1.5em
.input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
.input li:first-child
padding-top: 0
@ -28,22 +28,6 @@ form
font-size: 80%
line-height: 120%
form.tabular
ul
display: table
table-layout: fixed
width: 100%
li
display: table-row
label:not(.radio):not(.checkbox):not(.file-dropper)
box-sizing: border-box
display: table-cell
width: 33%
text-align: right
padding-right: 1em
.messages, .buttons
margin-left: 33%
form.horizontal
display: inline-block
margin-bottom: 1em

View File

@ -58,15 +58,8 @@
word-break: break-all
line-height: 130%
margin-top: 0
form
.messages, form
width: 100%
label:not(.radio):not(.checkbox):not(.file-dropper)
width: 7em
.messages, .buttons
margin-left: 7em
.tag-delete
.messages, .buttons
margin-left: 0 !important
.tag-edit
textarea
height: 10em

View File

@ -49,18 +49,19 @@
#user-edit
form
width: 100%
display: flex
.left
.avatar
#avatar-content
float: right
width: 65%
.right
width: 35%
margin-left: 1em
.file-dropper-holder
position: relative
.file-dropper
position: absolute
left: 0
right: 0
margin-top: .5em
#avatar-radio
float: left
width: 30%
&:after
content: ' '
display: block
height: 1px
clear: both
#user-delete form
width: 100%

View File

@ -4,14 +4,14 @@
<p>For extra <s>paranoia</s> safety, only tags that are unused can be deleted.</p>
<p>Check <a href='/posts/query=<%- encodeURIComponent(ctx.tag.names[0]) %>'>which posts</a> are tagged with <%- ctx.tag.names[0] %>.</p>
<% } else { %>
<div class='input'>
<ul>
<li>
<%= ctx.makeCheckbox({id: 'confirm-deletion', name: 'confirm-deletion', required: true, text: 'I confirm that I want to delete this tag.'}) %>
</li>
</ul>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Delete tag'/>
</div>

View File

@ -1,6 +1,5 @@
<div class='content-wrapper tag-edit'>
<form class='tabular'>
<div class='input'>
<form>
<ul>
<li class='names'>
<% if (ctx.canEditNames) { %>
@ -46,9 +45,10 @@
<% } %>
</li>
</ul>
</div>
<% if (ctx.canEditAnything) { %>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' class='save' value='Save changes'>
</div>

View File

@ -1,20 +1,20 @@
<div class='tag-merge'>
<form class='tabular'>
<form>
<p>Proceeding will remove this tag and retag its posts with the tag
specified below. Aliases, suggestions and implications are discarded
and need to be handled manually.</p>
<div class='input'>
<ul>
<li class='target'>
<%= ctx.makeTextInput({required: true, text: 'Target tag', pattern: ctx.tagNamePattern}) %>
</li>
<li class='confirm'>
<label></label>
<%= ctx.makeCheckbox({required: true, text: 'I confirm that I want to merge this tag.'}) %>
</li>
</ul>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Merge tag'/>
</div>

View File

@ -1,7 +1,5 @@
<div id='user-edit'>
<form class='tabular'>
<div class='left'>
<div class='input'>
<form>
<ul>
<% if (ctx.canEditName) { %>
<li>
@ -26,26 +24,23 @@
<%= ctx.makeSelect({text: 'Rank', id: 'user-rank', name: 'rank', keyValues: ctx.ranks, selectedKey: ctx.user.rank}) %>
</li>
<% } %>
</ul>
<% if (ctx.canEditAvatar) { %>
<li class='avatar'>
<label>Avatar</label>
<div id='avatar-content'></div>
<div id='avatar-radio'>
<%= ctx.makeRadio({text: 'Gravatar', id: 'gravatar-radio', name: 'avatar-style', value: 'gravatar', selectedValue: ctx.user.avatarStyle}) %>
<%= ctx.makeRadio({text: 'Manual avatar', id: 'avatar-radio', name: 'avatar-style', value: 'manual', selectedValue: ctx.user.avatarStyle}) %>
</div>
</li>
<% } %>
</ul>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Save settings'/>
</div>
</div>
<% if (ctx.canEditAvatar) { %>
<div class='right'>
<ul>
<li>
<%= ctx.makeRadio({text: 'Gravatar', id: 'gravatar-radio', name: 'avatar-style', value: 'gravatar', selectedValue: ctx.user.avatarStyle}) %>
</li>
<li>
<%= ctx.makeRadio({text: 'Manual avatar', id: 'avatar-radio', name: 'avatar-style', value: 'manual', selectedValue: ctx.user.avatarStyle}) %>
<div id='avatar-content'></div>
</li>
</ul>
</div>
<% } %>
</form>
</div>