Spoiler styling, close #64

CHANGELOG.md

@@ -2,6 +2,7 @@ seaweedchan:
 - Hide stub link added in menus of stubs
 - #dump-button moved into #qr-filename-container as a simple + link
 - QR with 4chan Pass made a little wider
+- Styling changes for spoiler label, also added `.has-spoiler` class for QR
 
 ### 1.1.17 - 2013-05-08
 seaweedchan:

src/General/css/style.css

@@ -712,7 +712,7 @@ input.field.tripped:not(:hover):not(:focus) {
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 89%;
+  max-width: 88%;
 }
 #qr-no-file {
   color: #AAA;
@@ -751,6 +751,25 @@ input.field.tripped:not(:hover):not(:focus) {
 #qr select {
   float: right;
 }
+#qr.has-spoiler .has-file #qr-spoiler-label {
+  width: 6.7%;
+  min-width: 6.7%;
+  max-width: 6.7%;
+  display: inline-block;
+  text-align: center;
+  vertical-align: top;
+}
+#qr.has-spoiler #file-n-submit:not(.has-file) #qr-spoiler-label {
+  display: none;
+}
+#qr.has-spoiler .has-file #qr-filename-container {
+  max-width: 67.9%;
+  min-width: 67.9%;
+}
+#qr-spoiler-label input {
+  position: relative;
+  top: 3px;
+}
 /* Dumping UI */
 .dump #dump-list-container {
   display: block;

src/General/html/Features/QuickReply.html

@@ -31,12 +31,12 @@
         <a id=dump-button title='Dump list'>+</a>
       </span>
     </span>
-    <input type=submit tabindex=60>
+    <label id=qr-spoiler-label>
+      <input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=70>
+    </label>
+    <input type=submit tabindex=80>
   </div>
   <input type=file multiple>
-  <label id=qr-spoiler-label>
-    <input type=checkbox id=qr-file-spoiler title='Spoiler image' tabindex=90>Spoiler?
-  </label>
 </form>
 <datalist id="list-name"></datalist>
 <datalist id="list-email"></datalist>

src/Posting/QuickReply.coffee

@@ -912,7 +912,10 @@ QR =
     <% } %>
 
     QR.spoiler = !!$ 'input[name=spoiler]'
-    nodes.spoiler.parentElement.hidden = !QR.spoiler
+    if QR.spoiler
+      $.addClass QR.nodes.el, 'has-spoiler'
+    else
+      nodes.spoiler.parentElement.hidden = true
 
     if g.BOARD.ID is 'f'
       nodes.flashTag = $.el 'select',