client/css: align radioboxes to first line

client/css/core-forms.styl

@@ -65,10 +65,9 @@ input[type=radio], input[type=checkbox]
 .radio:before, .checkbox:before
     transition: border-color 0.1s linear
     position: absolute
-    top: 50%
     left: 0
+    top: 0.15em
     display: block
-    margin-top: -10px
     width: 16px
     height: 16px
     background: $input-enabled-background-color
@@ -79,10 +78,10 @@ input[type=radio], input[type=checkbox]
     background: $main-color
     transition: opacity 0.1s linear
     position: absolute
-    top: 50%
     left: 5px
+    top: 0.15em
+    margin-top: 5px
     display: block
-    margin-top: -5px
     width: 10px
     height: 10px
     border-radius: 50%
@@ -92,10 +91,10 @@ input[type=radio], input[type=checkbox]
 .checkbox:after
     transition: opacity 0.1s linear
     position: absolute
-    top: 50%
+    top: 0.15em
     left: 6px
     display: block
-    margin-top: -7px
+    margin-top: 3px
     width: 5px
     height: 9px
     border-right: 3px solid $main-color

client/css/post-upload.styl

@@ -39,20 +39,24 @@ $cancel-button-color = tomato
         margin-top: 1em
 
     .uploadables-container
-        line-height: 200%
-
         li
             margin: 0 0 1.2em 0
 
         .uploadable
             .file
+                margin: 0.3em 0
                 overflow: hidden
                 white-space: nowrap
                 text-align: left
                 text-overflow: ellipsis
 
+            .anonymous
+                margin: 0.3em 0
+
             .safety
+                margin: 0.3em 0
                 label
+                    display: inline-block
                     margin-right: 1em
 
             .thumbnail-wrapper

client/css/post-view.styl

@@ -120,11 +120,12 @@
             margin-bottom: 1em
 
     .safety
-        display: flex
+        &>label
-        flex-wrap: wrap
-        label:not(.radio)
             width: 100%
-        .radio
+        .radio-wrapper
+            display: flex
+            flex-wrap: wrap
+        .radio-wrapper label
             flex-grow: 1
             display: inline-block
 

client/html/post_edit_sidebar.tpl

@@ -7,24 +7,26 @@
         <% if (ctx.canEditPostSafety) { %>
             <section class='safety'>
                 <label>Safety</label>
-                <%= ctx.makeRadio({
+                <div class='radio-wrapper'>
-                    name: 'safety',
+                    <%= ctx.makeRadio({
-                    class: 'safety-safe',
+                        name: 'safety',
-                    value: 'safe',
+                        class: 'safety-safe',
-                    selectedValue: ctx.post.safety,
+                        value: 'safe',
-                    text: 'Safe'}) %>
+                        selectedValue: ctx.post.safety,
-                <%= ctx.makeRadio({
+                        text: 'Safe'}) %>
-                    name: 'safety',
+                    <%= ctx.makeRadio({
-                    class: 'safety-sketchy',
+                        name: 'safety',
-                    value: 'sketchy',
+                        class: 'safety-sketchy',
-                    selectedValue: ctx.post.safety,
+                        value: 'sketchy',
-                    text: 'Sketchy'}) %>
+                        selectedValue: ctx.post.safety,
-                <%= ctx.makeRadio({
+                        text: 'Sketchy'}) %>
-                    name: 'safety',
+                    <%= ctx.makeRadio({
-                    value: 'unsafe',
+                        name: 'safety',
-                    selectedValue: ctx.post.safety,
+                        value: 'unsafe',
-                    class: 'safety-unsafe',
+                        selectedValue: ctx.post.safety,
-                    text: 'Unsafe'}) %>
+                        class: 'safety-unsafe',
+                        text: 'Unsafe'}) %>
+                </div>
             </section>
         <% } %>
 

client/js/util/views.js

@@ -53,35 +53,41 @@ function makeThumbnail(url) {
 
 function makeRadio(options) {
     _imbueId(options);
-    return makeVoidElement(
+    return makeNonVoidElement(
-        'input',
+        'label',
-        {
+        {for: options.id},
-            id: options.id,
+        makeVoidElement(
-            name: options.name,
+            'input',
-            value: options.value,
+            {
-            type: 'radio',
+                id: options.id,
-            checked: options.selectedValue === options.value,
+                name: options.name,
-            disabled: options.readonly,
+                value: options.value,
-            required: options.required,
+                type: 'radio',
-        }) +
+                checked: options.selectedValue === options.value,
-    _makeLabel(options, {class: 'radio'});
+                disabled: options.readonly,
+                required: options.required,
+            }) +
+        makeNonVoidElement('span', {class: 'radio'}, options.text));
 }
 
 function makeCheckbox(options) {
     _imbueId(options);
-    return makeVoidElement(
+    return makeNonVoidElement(
-        'input',
+        'label',
-        {
+        {for: options.id},
-            id: options.id,
+        makeVoidElement(
-            name: options.name,
+            'input',
-            value: options.value,
+            {
-            type: 'checkbox',
+                id: options.id,
-            checked: options.checked !== undefined ?
+                name: options.name,
-                options.checked : false,
+                value: options.value,
-            disabled: options.readonly,
+                type: 'checkbox',
-            required: options.required,
+                checked: options.checked !== undefined ?
-        }) +
+                    options.checked : false,
-    _makeLabel(options, {class: 'checkbox'});
+                disabled: options.readonly,
+                required: options.required,
+            }) +
+        makeNonVoidElement('span', {class: 'checkbox'}, options.text));
 }
 
 function makeSelect(options) {