From 9aa59a228e38a8cba10c8463fa10e1effcccfddb Mon Sep 17 00:00:00 2001
From: rr- <rr-@sakuya.pl>
Date: Sat, 22 Oct 2016 12:28:09 +0200
Subject: [PATCH] client/css: align radioboxes to first line

---
 client/css/core-forms.styl        | 11 +++---
 client/css/post-upload.styl       |  8 +++--
 client/css/post-view.styl         |  9 ++---
 client/html/post_edit_sidebar.tpl | 38 +++++++++++----------
 client/js/util/views.js           | 56 +++++++++++++++++--------------
 5 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/client/css/core-forms.styl b/client/css/core-forms.styl
index 6e60c4c..5fe44e4 100644
--- a/client/css/core-forms.styl
+++ b/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
diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl
index b9d18a5..01a215d 100644
--- a/client/css/post-upload.styl
+++ b/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
diff --git a/client/css/post-view.styl b/client/css/post-view.styl
index 996410a..689ec73 100644
--- a/client/css/post-view.styl
+++ b/client/css/post-view.styl
@@ -120,11 +120,12 @@
             margin-bottom: 1em
 
     .safety
-        display: flex
-        flex-wrap: wrap
-        label:not(.radio)
+        &>label
             width: 100%
-        .radio
+        .radio-wrapper
+            display: flex
+            flex-wrap: wrap
+        .radio-wrapper label
             flex-grow: 1
             display: inline-block
 
diff --git a/client/html/post_edit_sidebar.tpl b/client/html/post_edit_sidebar.tpl
index 392d4e4..b8f176b 100644
--- a/client/html/post_edit_sidebar.tpl
+++ b/client/html/post_edit_sidebar.tpl
@@ -7,24 +7,26 @@
         <% if (ctx.canEditPostSafety) { %>
             <section class='safety'>
                 <label>Safety</label>
-                <%= ctx.makeRadio({
-                    name: 'safety',
-                    class: 'safety-safe',
-                    value: 'safe',
-                    selectedValue: ctx.post.safety,
-                    text: 'Safe'}) %>
-                <%= ctx.makeRadio({
-                    name: 'safety',
-                    class: 'safety-sketchy',
-                    value: 'sketchy',
-                    selectedValue: ctx.post.safety,
-                    text: 'Sketchy'}) %>
-                <%= ctx.makeRadio({
-                    name: 'safety',
-                    value: 'unsafe',
-                    selectedValue: ctx.post.safety,
-                    class: 'safety-unsafe',
-                    text: 'Unsafe'}) %>
+                <div class='radio-wrapper'>
+                    <%= ctx.makeRadio({
+                        name: 'safety',
+                        class: 'safety-safe',
+                        value: 'safe',
+                        selectedValue: ctx.post.safety,
+                        text: 'Safe'}) %>
+                    <%= ctx.makeRadio({
+                        name: 'safety',
+                        class: 'safety-sketchy',
+                        value: 'sketchy',
+                        selectedValue: ctx.post.safety,
+                        text: 'Sketchy'}) %>
+                    <%= ctx.makeRadio({
+                        name: 'safety',
+                        value: 'unsafe',
+                        selectedValue: ctx.post.safety,
+                        class: 'safety-unsafe',
+                        text: 'Unsafe'}) %>
+                </div>
             </section>
         <% } %>
 
diff --git a/client/js/util/views.js b/client/js/util/views.js
index 9573213..a1c2a94 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -53,35 +53,41 @@ function makeThumbnail(url) {
 
 function makeRadio(options) {
     _imbueId(options);
-    return makeVoidElement(
-        'input',
-        {
-            id: options.id,
-            name: options.name,
-            value: options.value,
-            type: 'radio',
-            checked: options.selectedValue === options.value,
-            disabled: options.readonly,
-            required: options.required,
-        }) +
-    _makeLabel(options, {class: 'radio'});
+    return makeNonVoidElement(
+        'label',
+        {for: options.id},
+        makeVoidElement(
+            'input',
+            {
+                id: options.id,
+                name: options.name,
+                value: options.value,
+                type: 'radio',
+                checked: options.selectedValue === options.value,
+                disabled: options.readonly,
+                required: options.required,
+            }) +
+        makeNonVoidElement('span', {class: 'radio'}, options.text));
 }
 
 function makeCheckbox(options) {
     _imbueId(options);
-    return makeVoidElement(
-        'input',
-        {
-            id: options.id,
-            name: options.name,
-            value: options.value,
-            type: 'checkbox',
-            checked: options.checked !== undefined ?
-                options.checked : false,
-            disabled: options.readonly,
-            required: options.required,
-        }) +
-    _makeLabel(options, {class: 'checkbox'});
+    return makeNonVoidElement(
+        'label',
+        {for: options.id},
+        makeVoidElement(
+            'input',
+            {
+                id: options.id,
+                name: options.name,
+                value: options.value,
+                type: 'checkbox',
+                checked: options.checked !== undefined ?
+                    options.checked : false,
+                disabled: options.readonly,
+                required: options.required,
+            }) +
+        makeNonVoidElement('span', {class: 'checkbox'}, options.text));
 }
 
 function makeSelect(options) {