Song Creation form is not sufficiently user friendly

[disqonnected]

Some frequent problems and misunderstandings happen due to mistakes in song creation (verbatim from @riipah):

• Songs missing producers or Vocaloids (there is a warning for this)
• Wrong Romanization (usually Romanizing loanwords - this should be more clearly on the edit page)
• Cover/remix is missing mention of original (there is warning for this)
• Unnecessary text in the title (usually this happens if the Nico title doesn't follow the common format and can't be automatically parsed, some people include "cover" or artists)
• Covers that are added as originals (song type should be cover)

We can help users avoid these issues by changing the form's functionality as described below. The idea is to keep the old form around for experienced users, but make this one the default.

1. A group is available while there is no failure preceding it.
2. Checks are client-side.
3. Greyed out elements show why they are greyed out (icon with hover text).
4. Warning text should look scary

{}      Group (Visually distinct)
[]      Text input
< ()>   Drop-down (default option first, other options follow)
▣ □     Checkbox
◉ ○     Radio
(X)     Group-local selection identifier

*       "On selection of..."
%       "On field focus..."
@       "On form submission..."

!       "Fail while..."
?       "If"
->      "Do"

MSG     Display message
DRF     Force-enable {Draft}
REP     Submit report

{URL}

    [original PV]
    [reprint of the PV]

{Intro}

    ○ "Song has vocaloids singing in it" (A)
    ○ "Song does not have vocaloids singing in it" (B)
        □ "Song is part of an album that contains vocaloid songs"
        □ "Song is the Original to many vocaloid covers"

    /------------
    | * ? (B) -> MSG http://wiki.vocadb.net/wiki/39/vocadb-editing-faq
    | @ ? (B) -> DRF
    | ! (B) is the _only_ selection.
    \------------

{Title}

    <Original Title Language ("Please Select", ..., "Other")> (A)    ( FIXME: Disambiguate "Title". Someone might think "lyrics" )

    ? (A) != "English":
        [Non-English]
        □ "The artist has provided an English translation"      ( Skip if user.knows_language(lang) )
            [English]
        [Romanized]                                             ( Un-grey if user.has_read_romanization_guide )

    ? (A) == "English":
        [English]

    /------------
    | % MSG Short description and wiki URL
    | * ? (A) != "Please select" -> Un-grey the rest of the group
    | * ? BAD_TITLE_PCRE -> MSG
    | @ ? BAD_TITLE_PCRE -> REP, DRF
    | ! All are blank
    \------------

    Example: BAD_TITLE_PCRE = /-P$|\bf(ea)?t[. ]|【|】|\b(cover|remix)\b/

{Producers}

    [Producers]

    /------------
    | % MSG http://wiki.vocadb.net/wiki/21/artist-roles
    | ! No producer added || {Intro} says there are no vocaloids
    \------------

{Vocaloid/UTAU}

    [Vocaloids]    ( Return only humans if {Intro} says there are no vocaloids )

    ▣ "I am not 100% sure about the vocaloid versions used" (A)

    /------------
    | @ ? (A) -> DRF, REP
    | ! No vocalist added
    \------------

{PVs}

    ◉ "A PV is available" (A)
        [Original PV]
        [Reprint PV]
    ○ "No PV is available" (B)

    /------------
    | * ? (B) -> MSG cases where lack of PV is OK
    | @ ? (B) -> DRF, REP
    | ! (A) checked && URL missing / duplicate.
    \------------

{Type}

    <Song Type ("Not sure", ...)> (A)

    ? (A) in ("Cover", "Remix"):
        [Original Song]                                         ( Grey if (B) )
        □ "The original song is out of scope" (B)

    /------------
    | * MSG http://wiki.vocadb.net/wiki/6/song-types
    | ? (A) == "Not sure" || (B) -> DRF, REP
    \------------

{Draft}

    □ Draft

[dset0x]

I was about to open an issue for #14, but realized I wrote this a few years ago. Sorry if this leads to some confusion.

I made a mock-up of a new version of /Song/Create, incorporating some fixes from this issue. It doesn't solve everything, since I avoided writing any code for now.

Here's a gist with the changes that result in the above (excuse the sloppy work; I just hacked this together in a bus)
https://gist.github.com/dset0x/4e42a6fc6d9c9a95b3b7335aa35337bc

Also note that I shortened the descriptions to help people read them. Unfortunately this means that translations would also have to be updated.

Note that the auto-update of the song type description broke with these changes (In the patch above, search for the string "FIXME", which I added to prevent it from disappearing)

[ycanardeau]

@dset0x Could you please fork the repo and create a new branch for the patch so that I can pull your changes?

[dset0x]

I was hoping to get some feedback about the layout first, before I start figuring out where to actually make the relevant changes in the code.

[szc126]

It's an intriguing and clear redesign, but I'm personally not a fan of the massive amounts of whitespace.