client/general: ditch tabular forms
This commit is contained in:
rr-
parent
797e5d4244
commit
d91352a3b0
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -49,18 +49,19 @@
|
|||
#user-edit
|
||||
form
|
||||
width: 100%
|
||||
display: flex
|
||||
.left
|
||||
width: 65%
|
||||
.right
|
||||
width: 35%
|
||||
margin-left: 1em
|
||||
.file-dropper-holder
|
||||
position: relative
|
||||
.file-dropper
|
||||
position: absolute
|
||||
left: 0
|
||||
right: 0
|
||||
.avatar
|
||||
#avatar-content
|
||||
float: right
|
||||
width: 65%
|
||||
margin-top: .5em
|
||||
#avatar-radio
|
||||
float: left
|
||||
width: 30%
|
||||
&:after
|
||||
content: ' '
|
||||
display: block
|
||||
height: 1px
|
||||
clear: both
|
||||
|
||||
#user-delete form
|
||||
width: 100%
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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 class='messages'></div>
|
||||
|
||||
<div class='buttons'>
|
||||
<input type='submit' value='Delete tag'/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,54 +1,54 @@
|
|||
<div class='content-wrapper tag-edit'>
|
||||
<form class='tabular'>
|
||||
<div class='input'>
|
||||
<ul>
|
||||
<li class='names'>
|
||||
<% if (ctx.canEditNames) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Names',
|
||||
value: ctx.tag.names.join(' '),
|
||||
required: true,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='category'>
|
||||
<% if (ctx.canEditCategory) { %>
|
||||
<%= ctx.makeSelect({
|
||||
text: 'Category',
|
||||
keyValues: ctx.categories,
|
||||
selectedKey: ctx.tag.category,
|
||||
required: true,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='implications'>
|
||||
<% if (ctx.canEditImplications) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Implications',
|
||||
value: ctx.tag.implications.join(' '),
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='suggestions'>
|
||||
<% if (ctx.canEditSuggestions) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Suggestions',
|
||||
value: ctx.tag.suggestions.join(' '),
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='description'>
|
||||
<% if (ctx.canEditDescription) { %>
|
||||
<%= ctx.makeTextarea({
|
||||
text: 'Description',
|
||||
value: ctx.tag.description,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form>
|
||||
<ul>
|
||||
<li class='names'>
|
||||
<% if (ctx.canEditNames) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Names',
|
||||
value: ctx.tag.names.join(' '),
|
||||
required: true,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='category'>
|
||||
<% if (ctx.canEditCategory) { %>
|
||||
<%= ctx.makeSelect({
|
||||
text: 'Category',
|
||||
keyValues: ctx.categories,
|
||||
selectedKey: ctx.tag.category,
|
||||
required: true,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='implications'>
|
||||
<% if (ctx.canEditImplications) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Implications',
|
||||
value: ctx.tag.implications.join(' '),
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='suggestions'>
|
||||
<% if (ctx.canEditSuggestions) { %>
|
||||
<%= ctx.makeTextInput({
|
||||
text: 'Suggestions',
|
||||
value: ctx.tag.suggestions.join(' '),
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
<li class='description'>
|
||||
<% if (ctx.canEditDescription) { %>
|
||||
<%= ctx.makeTextarea({
|
||||
text: 'Description',
|
||||
value: ctx.tag.description,
|
||||
}) %>
|
||||
<% } %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<% if (ctx.canEditAnything) { %>
|
||||
<div class='messages'></div>
|
||||
|
||||
<div class='buttons'>
|
||||
<input type='submit' class='save' value='Save changes'>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<ul>
|
||||
<li class='target'>
|
||||
<%= ctx.makeTextInput({required: true, text: 'Target tag', pattern: ctx.tagNamePattern}) %>
|
||||
</li>
|
||||
<li class='confirm'>
|
||||
<%= ctx.makeCheckbox({required: true, text: 'I confirm that I want to merge this tag.'}) %>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class='messages'></div>
|
||||
|
||||
<div class='buttons'>
|
||||
<input type='submit' value='Merge tag'/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,46 @@
|
|||
<div id='user-edit'>
|
||||
<form class='tabular'>
|
||||
<div class='left'>
|
||||
<div class='input'>
|
||||
<ul>
|
||||
<% if (ctx.canEditName) { %>
|
||||
<li>
|
||||
<%= ctx.makeTextInput({text: 'User name', id: 'user-name', name: 'name', value: ctx.user.name, pattern: ctx.userNamePattern}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
<form>
|
||||
<ul>
|
||||
<% if (ctx.canEditName) { %>
|
||||
<li>
|
||||
<%= ctx.makeTextInput({text: 'User name', id: 'user-name', name: 'name', value: ctx.user.name, pattern: ctx.userNamePattern}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (ctx.canEditPassword) { %>
|
||||
<li>
|
||||
<%= ctx.makePasswordInput({text: 'Password', id: 'user-password', name: 'password', placeholder: 'leave blank if not changing', pattern: ctx.passwordPattern}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
<% if (ctx.canEditPassword) { %>
|
||||
<li>
|
||||
<%= ctx.makePasswordInput({text: 'Password', id: 'user-password', name: 'password', placeholder: 'leave blank if not changing', pattern: ctx.passwordPattern}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (ctx.canEditEmail) { %>
|
||||
<li>
|
||||
<%= ctx.makeEmailInput({text: 'Email', id: 'user-email', name: 'email', value: ctx.user.email}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
<% if (ctx.canEditEmail) { %>
|
||||
<li>
|
||||
<%= ctx.makeEmailInput({text: 'Email', id: 'user-email', name: 'email', value: ctx.user.email}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (ctx.canEditRank) { %>
|
||||
<li>
|
||||
<%= ctx.makeSelect({text: 'Rank', id: 'user-rank', name: 'rank', keyValues: ctx.ranks, selectedKey: ctx.user.rank}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</div>
|
||||
<div class='messages'></div>
|
||||
<div class='buttons'>
|
||||
<input type='submit' value='Save settings'/>
|
||||
</div>
|
||||
</div>
|
||||
<% if (ctx.canEditRank) { %>
|
||||
<li>
|
||||
<%= ctx.makeSelect({text: 'Rank', id: 'user-rank', name: 'rank', keyValues: ctx.ranks, selectedKey: ctx.user.rank}) %>
|
||||
</li>
|
||||
<% } %>
|
||||
|
||||
<% if (ctx.canEditAvatar) { %>
|
||||
<div class='right'>
|
||||
<ul>
|
||||
<li>
|
||||
<% 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}) %>
|
||||
</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>
|
||||
<% } %>
|
||||
</div>
|
||||
</li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
<div class='messages'></div>
|
||||
|
||||
<div class='buttons'>
|
||||
<input type='submit' value='Save settings'/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue