client/general: ditch tabular forms

7 files changed, 121 insertions, 148 deletions

diff --git a/client/css/forms.styl b/client/css/forms.styl
index 9f11f2f..3590c8c 100644
--- a/client/css/forms.styl
+++ b/client/css/forms.styl
@@ -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
diff --git a/client/css/tags.styl b/client/css/tags.styl
index b91b47e..2387784 100644
--- a/client/css/tags.styl
+++ b/client/css/tags.styl
@@ -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
diff --git a/client/css/users.styl b/client/css/users.styl
index 3cd1df9..22467ad 100644
--- a/client/css/users.styl
+++ b/client/css/users.styl
@@ -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%
diff --git a/client/html/tag_delete.tpl b/client/html/tag_delete.tpl
index a406b33..13435b9 100644
--- a/client/html/tag_delete.tpl
+++ b/client/html/tag_delete.tpl
@@ -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>
diff --git a/client/html/tag_edit.tpl b/client/html/tag_edit.tpl
index e57ac79..0c89691 100644
--- a/client/html/tag_edit.tpl
+++ b/client/html/tag_edit.tpl
@@ -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>
diff --git a/client/html/tag_merge.tpl b/client/html/tag_merge.tpl
index 3b28320..5c724c9 100644
--- a/client/html/tag_merge.tpl
+++ b/client/html/tag_merge.tpl
@@ -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>
diff --git a/client/html/user_edit.tpl b/client/html/user_edit.tpl
index 079c6d5..3805c14 100644
--- a/client/html/user_edit.tpl
+++ b/client/html/user_edit.tpl
@@ -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>