search

xylucien / MusicalKits_Converter

My personal Flask project
1 stars 0 forks source link

Frontend polishment #90

Open xicheng87 opened 4 years ago

xicheng87 commented 4 years ago

Before we wrap up this work, let's have some final frontend polishment.

I think a better way to organize the front page is to simply shrink the two big text box "Upload File" and "Submit Text" to clickable text like the ones we've seen here https://css-tricks.com/examples/DragAndDropFileUploading/

Then you don't have to hide the big box that allows users to drop files (yes, make the drop option a default). In addition, when users click "Submit Text", the page swap the drop-box with the text input box. In addition, please make the sizes of these two boxes identical - they are currently not.

I think you want to consider using the fonts shown in this page: https://css-tricks.com/examples/DragAndDropFileUploading/, or something similar as they look smooth. Furthermore, consider giving a short sentence / paragraph on the head of the page clarifying the purpose of this one-page web app. Something like "Music File Converter Made Easy" (I steal it from https://www.zamzar.com/, if you want to have a pro-looking layout, consider this one as a reference).

Still, let's take baby steps to get this done and not disturb the core function of this site.

xicheng87 commented 4 years ago

Thanks for the latest pull request, I think the front-end page looks better now.

Some further remarks:

1) I noticed the length of the bar for "Get Files" bottom is slightly shorter than others. 2) The "Upload Files" and "Submit Text" bottoms are still showing up but appears unresponsive in the "Result" page. This is probably due to the fact that these section does not get updated once ajax returns 3) Can we ensure that the left-top icon can always takes us back to the original setting? i.e. in result page I clicks it with the hope to return to main page but nothing happens. 4) Consider using a better font for "Musics Sheets Conversion Made Easy" 5) I think for communication purpose we need to clarify what file formats are we supporting, i.e. "Choose a file (.musicxml) or drag it here". 6) The copyright footnote takes you directly to google, I think you want to take it to your homepage or something similar?

xylucien commented 4 years ago
  1. I will change the link to my personal website when its finished later.
xicheng87 commented 4 years ago

Sounds good, can we shorten the bottom padding space of the top banner?

Furthermore, can we make the text a little less verbose? Say something like "Support conversions between Musicxml (.musicxml, .mxl), ABC Notation (.abc) and Midi (.mid, .midi)".

xylucien commented 4 years ago

pushed

xicheng87 commented 4 years ago

Let's use one sentence "Support Musicxml (.musicxml, .mxl), ABC Notation (.abc) and Midi (.mid, .midi) as input, and .... as output". I think it is better to center this sub-title for better formatting

xylucien commented 4 years ago

Done. I also added a fade-in effect at the beginning. Merged. Might take 3 minutes to deploy

xylucien commented 4 years ago

Nevermind, I just have to do Crtl+F5 to refresh the script cache.