This was ridiculous, or, in other words, par for the course when
you're dealing with HTML5 drag-and-drop.
Folders are now clickable divs instead of buttons. This turned out
not to be necessary as it was a different issue that was causing
drag-and-drop to fail, but I'd already changed everything over when
I discovered the real bug. Oh well, some things are slightly nicer
this way.
The team selector now hides teams that aren't for the format, by
default. Other teams can still be selected with a 'more' button.
There's now a Teambuilder button to be taken straight to making
or editing teams for that format.
The folders are really just format filter views, but in theory, this
should be all people need.
This implementation is very basic but I'm pretty sure I've gotten all
the bugs out. On small screens, the folders simply don't appear, on
the assumption that this will only happen on mobile, where people
shouldn't be creating enough teams to need folders, anyway. (I'll
fully support mobile later.)
Third-party servers may need to re-style the Edit and Delete buttons,
since they're black on transparent, which may interact poorly with
certain edgy background styles.
PS's UI is now updated to make it clearer whether or not you're
connected to a server, and which features are and aren't
available while disconnected.
The Reconnect? popup's "close" button has been renamed "Work offline",
to make it clearer that it's for people who want to continue using
the teambuilder or whatever while disconnected.
The button is a slight misnomer since some features, like the
Ladder, don't work without an internet connection.
2.7ish years ago, when I redesigned PS, PS's mascot was Meloetta,
and in the old design, there was a Meloetta-P icon on "Look for a
battle" and a Meloetta-A in the backgroud of the chat room.
The new design was built around custom backgrounds, and there
wasn't really room to fit Meloetta back in.
Well, now, I've finally fit Meloetta back in next to the user count
and battle count, and it actually looks pretty good there. Now more
people can be aware that PS has a mascot!
When you looks for a battle you get this grey color which doesn't really suite the red button: http://prntscr.com/8z9e9g
So I changed it to the border's color (a bit darker): http://prntscr.com/8z9hx4
Font Awesome 3 -> 4 was a backwards-incompatible change, so this
update is pretty invasive. I tested everything we use it for and it
still works, though. Including supporting both Font Awesome versions
in battle.js.
The validate button sends the current team and a validation request to the
server. The server will respond with a positive acknowledgement for valid teams,
or else a list of problems (the same list as when seeking a battle).
User and battle count are now buttons! Also, tables for layout,
but to be fair, the data is sort of tabular, and this is
basically the best option for this layout. Flexbox supposedly
fixes this, but we support plenty of browsers that don't
support flexbox, and I'm pragmatic enough to use tables here.
Some wording/layout is changed to look less ugly. This does come
with one major change, though: The team dropdown is now visible
at all times after clicking 'Join', and your selected team will
stay selected throughout the entire tournament.
The teambuilder honestly isn't great in mobile, but since it's
impossible to zoom out in mobile, it's better to start zoomed out
and let the user zoom in, than start zoomed in and not give the
user a choice.
With the tab overflow menu being perfect, I might as well fix the
button that opens it. It used to use default browser styles, which
was mostly fine in OS X but ugly on other systems, and nearly
unusable in iOS. The new one looks lovely on all OSes.
.button styling has been consolidated in CSS, and the tab overflow
menu has been adjusted to use button styling, which is the "more
improvements in the future" mentioned by 69524e935b.
I now declare the tab overflow menu officially out of beta. Now
for the rest of PS!
The Ladder now also uses the new button styling, but it's not out
of beta yet, I just wanted to see how it looked.
- Highlighted messages now span the entire width of the chat.
- Highlighted and personal messages are more vertically centered.
- Links and code are again properly hidden by spoilers
