Edit Category Order dialog v2

This is the design for the new category ordering dialog.


  • Support both automatic (# of posts) category ordering and absolutely fixed category ordering
  • Allowing for a mix of the two would be nice
  • It must all be in one dialog - the current situation where you go around to every category edit dialog is not good


  • Every category has a numeric “position”. New categories are created at position 0. Two categories with the same “position” as each other are ordered “fluidly” - i.e. the category with more posts is higher up.
  • Everywhere categories are displayed in a list, this ordering should be respected.

UI Mockup: made with airbrush tool + touchscreen in gimp

  • The “Reset to Fixed” button will give every category its own positive position value.

  • The “Reset to Fluid” button will set every category to the position of 0.

  • The up arrow (fa-chevron-up) increases the position of that category by 1. The down arrow (fa-chevron-down) decreases the position of that category by 1.

  • If a category’s position has only 1 category in it, and the position above it has only 1 category in it, the up arrow will change to fa-toggle-up, and clicking it will swap the position of the two categories. (Same for position below it, down arrow, fa-toggle-down)

  • If a category’s position has only 1 category in it, the numerical box on the right will be editable, and on blur (if you edited it), the category will jump to that position. (This is how you do partial fluid ranks from the reset-to-fixed state.)

Edits to UI mockup:

  • Text field for the rank should appear on the left
  • The text field for the rank should appear for every category, not grouped, and will never be disabled

The thing you click will immediately move away from where you clicked, so you have to chase your target up and down the list as you move it.

Why not a drag’n’drop solution? (because it’s more work, I know :stuck_out_tongue: )

Drag and drop between two categories to change the order.
Drop onto another category to make them equivalent.

Can you sign up to Netflix and do some screen shots of its UI? They solved this problem quite completely.

  1. Drag and drop is not going to work on mobile at all.
  2. Drag and drop only works for a “single screen”, what if you have 100 items to order?

Here’s the Netflix DVD Queue UI. You can drag and drop in the visible elements, too (though again, that is pretty tough on mobile). You get a hand cursor to let you know it’s possible.