feat: detail page UI rearrangement

[kunfang98927]

• Initialize image uploading modal;
• make image uploading & Edit buttons only display when users log in;
• Adjust row orders: Instrument Names in Different Languages on the top; then Image; Wikidata ID, Hornbostel-Sachs Classification and MIMO Classification at the bottom;
• Images should be smaller in the detail page;
• UI should support displaying more than one images in the future;

Resolves: #128

[kunfang98927]

Here is a preview for authenticated users:

[fujinaga]

Not sure why you have two rows for names in different languages.
If I'm uploading an image of a new instrument, I would initially put a name (in a specified language), then the website would need to help me create a new Wikidata entry.
If I'm uploading an image of an existing instrument, the UMIL needs to search the Wikidata, confirm that it is the correct instrument then add that image.
If I'm adding a name of an instrument of an existing instrument, the the UMIL needs to search the Wikidata, confirm that it is the correct instrument then add that name (with the language).

I think we should separate the Display mode and Edit/Add mode.
For the Display, we may just go directly to the Wikidata page. To be discussed.

[kunfang98927]

Not sure why you have two rows for names in different languages.

My understanding is: for one musical instrument, if we have names in two languages, we display two rows; if we have ten languages, we display ten rows. Is that correct?

[fujinaga]

In general, yes; but if there are 100 languages, that would be unwieldy. That’s why I’m suggesting using Wikidata, which displays only a few unless the user clicks “All entered languages”.