inline moderate panel ux updates

[e-five256]

This changes the UX of the moderate panel shown for entry/post/entry comment/post comment. The initial design seemed a bit confusing; for example needing to check or uncheck the "18+ / NSFW" checkbox and then knowing that you had to click the label of the text to save the setting. There was also the fact that everything was a button, but styled so that you couldn't tell they were buttons.

Main changes:

• everything is now styled as buttons / input that the rest of the site has
  • things are definitely spaced out a bit more now, smaller views might flow over to new lines. I'm hesitant to put too much effort in keeping things a single line, on mobile it will obviously be multiple. There might be ways to take elements out, I was especially thinking of pulling out some elements and showing/hiding with javascript like change magazine but don't want the moderate panel to require javascript
• reordered the elements, placing safer actions to the left. don't mind discussion on this. I tend to believe the easiest elements to click are on edges (left/right), so generally put more dangerous ones in the middle, but obviously screen size and such can change the order itself so trying for a specific order can be a headache
• change magazine text box has a placeholder of the magazine it is currently in just as a helpful reminder
• can no longer submit change magazine with a "" value, which caused a 500
• is_adult checkbox is now just a button that swaps between the two values (the checkbox is hidden and given the state of the reverse value of what it is)
  • removed the confirm prompt, it seems reversible enough that checking seemed overkill
• a popup that lets you know success on updating a thread as nsfw, maybe we want to use this flash message for all of the changes, but since I think your settings might allow hiding nsfw, felt a popup just in case it disappeared from view would be helpful

How it looks now (as a global mod, it looks the same but the purge button is omitted, as a regular mod believe both purge and change magazine options are omitted):

• entry
  
• post
  
• entry comment
  
• post comment
  
• mobile entry
  

iteration 1 (old):

• entry
  

• post
  

• entry comment
  

• post comment
  

• updating nsfw flash message
  

• mobile entry
  

How it looked previously:

• entry
  

• post
  

• entry comment
  

• post comment
  

• mobile entry
  

[nobodyatroot]

Not an UI person, so please push back if it's too much work, but is it possible to "spawn" the mod functions within the same "box" as the thread or comment instead of making a new container or whatever you call it just for the mod functions? Basically get rid of the gap in the red box:

[nobodyatroot]

Also, there doesn't seem to be a way to close out/cancel the mod tools without refreshing the page?

[e-five256]

Not an UI person, so please push back if it's too much work, but is it possible to "spawn" the mod functions within the same "box" as the thread or comment instead of making a new container or whatever you call it just for the mod functions? Basically get rid of the gap in the red box:

done, updated screenshots

Also, there doesn't seem to be a way to close out/cancel the mod tools without refreshing the page?

this was true originally as well, but I've changed it so clicking moderate after the first time will toggle its display, hiding and re-showing it accordingly. (I did have a concern on if the AJAX failed it would just be hiding and showing an empty div, but it looks like if the AJAX fails to load it redirects the entire browser to the non-inline /moderate page)

I rewrote a lot to achieve this in regards to the grid layout, css hierarchy, and js (e.g. the moderate panel is now in the grid area and appears above inline previews). tried to spot check everything but may have missed some thing so let me know if anything appears out of place

[nobodyatroot]

Nice work! I like it, makes the admin/mod experience more consistent with our button experience elsewhere.