Accords-Library-Archive
/
gallery.accords-library.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/css/forms.styl
View File

@ -9,14 +9,14 @@ form
margin: 0 margin: 0
padding: 0 padding: 0
li li
margin-top: 0.5em margin-top: 1.2em
label label
display: block display: block
padding: 0.5em 0 padding: 0.3em 0
.input .input
margin-bottom: 1em margin-bottom: 1em
.buttons .buttons
margin-top: 1em margin-top: 1.5em
.input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper), .input li:first-child label:not(.radio):not(.checkbox):not(.file-dropper),
.input li:first-child .input li:first-child
padding-top: 0 padding-top: 0
@ -28,22 +28,6 @@ form
font-size: 80% font-size: 80%
line-height: 120% 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 form.horizontal
display: inline-block display: inline-block
margin-bottom: 1em margin-bottom: 1em

9
client/css/tags.styl
View File

@ -58,15 +58,8 @@
word-break: break-all word-break: break-all
line-height: 130% line-height: 130%
margin-top: 0 margin-top: 0
form .messages, form
width: 100% 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 .tag-edit
textarea textarea
height: 10em height: 10em

25
client/css/users.styl
View File

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

14
client/html/tag_delete.tpl
View File

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

96
client/html/tag_edit.tpl
View File

@ -1,54 +1,54 @@
<div class='content-wrapper tag-edit'> <div class='content-wrapper tag-edit'>
<form class='tabular'> <form>
<div class='input'> <ul>
<ul> <li class='names'>
<li class='names'> <% if (ctx.canEditNames) { %>
<% if (ctx.canEditNames) { %> <%= ctx.makeTextInput({
<%= ctx.makeTextInput({ text: 'Names',
text: 'Names', value: ctx.tag.names.join(' '),
value: ctx.tag.names.join(' '), required: true,
required: true, }) %>
}) %> <% } %>
<% } %> </li>
</li> <li class='category'>
<li class='category'> <% if (ctx.canEditCategory) { %>
<% if (ctx.canEditCategory) { %> <%= ctx.makeSelect({
<%= ctx.makeSelect({ text: 'Category',
text: 'Category', keyValues: ctx.categories,
keyValues: ctx.categories, selectedKey: ctx.tag.category,
selectedKey: ctx.tag.category, required: true,
required: true, }) %>
}) %> <% } %>
<% } %> </li>
</li> <li class='implications'>
<li class='implications'> <% if (ctx.canEditImplications) { %>
<% if (ctx.canEditImplications) { %> <%= ctx.makeTextInput({
<%= ctx.makeTextInput({ text: 'Implications',
text: 'Implications', value: ctx.tag.implications.join(' '),
value: ctx.tag.implications.join(' '), }) %>
}) %> <% } %>
<% } %> </li>
</li> <li class='suggestions'>
<li class='suggestions'> <% if (ctx.canEditSuggestions) { %>
<% if (ctx.canEditSuggestions) { %> <%= ctx.makeTextInput({
<%= ctx.makeTextInput({ text: 'Suggestions',
text: 'Suggestions', value: ctx.tag.suggestions.join(' '),
value: ctx.tag.suggestions.join(' '), }) %>
}) %> <% } %>
<% } %> </li>
</li> <li class='description'>
<li class='description'> <% if (ctx.canEditDescription) { %>
<% if (ctx.canEditDescription) { %> <%= ctx.makeTextarea({
<%= ctx.makeTextarea({ text: 'Description',
text: 'Description', value: ctx.tag.description,
value: ctx.tag.description, }) %>
}) %> <% } %>
<% } %> </li>
</li> </ul>
</ul>
</div>
<% if (ctx.canEditAnything) { %> <% if (ctx.canEditAnything) { %>
<div class='messages'></div> <div class='messages'></div>
<div class='buttons'> <div class='buttons'>
<input type='submit' class='save' value='Save changes'> <input type='submit' class='save' value='Save changes'>
</div> </div>

24
client/html/tag_merge.tpl
View File

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

79
client/html/user_edit.tpl
View File

@ -1,51 +1,46 @@
<div id='user-edit'> <div id='user-edit'>
<form class='tabular'> <form>
<div class='left'> <ul>
<div class='input'> <% if (ctx.canEditName) { %>
<ul> <li>
<% if (ctx.canEditName) { %> <%= ctx.makeTextInput({text: 'User name', id: 'user-name', name: 'name', value: ctx.user.name, pattern: ctx.userNamePattern}) %>
<li> </li>
<%= ctx.makeTextInput({text: 'User name', id: 'user-name', name: 'name', value: ctx.user.name, pattern: ctx.userNamePattern}) %> <% } %>
</li>
<% } %>
<% if (ctx.canEditPassword) { %> <% if (ctx.canEditPassword) { %>
<li> <li>
<%= ctx.makePasswordInput({text: 'Password', id: 'user-password', name: 'password', placeholder: 'leave blank if not changing', pattern: ctx.passwordPattern}) %> <%= ctx.makePasswordInput({text: 'Password', id: 'user-password', name: 'password', placeholder: 'leave blank if not changing', pattern: ctx.passwordPattern}) %>
</li> </li>
<% } %> <% } %>
<% if (ctx.canEditEmail) { %> <% if (ctx.canEditEmail) { %>
<li> <li>
<%= ctx.makeEmailInput({text: 'Email', id: 'user-email', name: 'email', value: ctx.user.email}) %> <%= ctx.makeEmailInput({text: 'Email', id: 'user-email', name: 'email', value: ctx.user.email}) %>
</li> </li>
<% } %> <% } %>
<% if (ctx.canEditRank) { %> <% if (ctx.canEditRank) { %>
<li> <li>
<%= ctx.makeSelect({text: 'Rank', id: 'user-rank', name: 'rank', keyValues: ctx.ranks, selectedKey: ctx.user.rank}) %> <%= ctx.makeSelect({text: 'Rank', id: 'user-rank', name: 'rank', keyValues: ctx.ranks, selectedKey: ctx.user.rank}) %>
</li> </li>
<% } %> <% } %>
</ul>
</div>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Save settings'/>
</div>
</div>
<% if (ctx.canEditAvatar) { %> <% if (ctx.canEditAvatar) { %>
<div class='right'> <li class='avatar'>
<ul> <label>Avatar</label>
<li> <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: '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}) %> <%= ctx.makeRadio({text: 'Manual avatar', id: 'avatar-radio', name: 'avatar-style', value: 'manual', selectedValue: ctx.user.avatarStyle}) %>
<div id='avatar-content'></div> </div>
</li> </li>
</ul> <% } %>
</div> </ul>
<% } %>
<div class='messages'></div>
<div class='buttons'>
<input type='submit' value='Save settings'/>
</div>
</form> </form>
</div> </div>