Front end enhancements needs and suggestions

[abalioni]

Leave here your requests, needs and suggestions for the front end.

[rfschubert]

I think few improvments are:

• Labels on inputs.
• Small description of what is the site for

The screen is just a map with 2 inputs and a button. Doesn't tell much about what it was designed for.

[Isaachi1]

Maybe it's a good idea to let the map where the mud avalanche has passed. And the app has to be something very simple, without many buttons and tals. With labels and inputs with a design that is easy to identify by the user, because at the time of the race runs could be that it hinders the visibility. And the description of the places is very visible too. My sugestion. 😅

[guilhermearmelo]

I think creating /css and /js folderss make the hole project to be slower, even minifying files. It's better just import bootstrap library with:
CSS
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

[avlm]

what about a page with official places for gathering donations, sorted by state/city. Someone sent to the whatsapp group that people are sharing fake donation places.

[qgustavor]

As I said on #23, some ideas:

• Rename the Leaflet tutorial title...
• Stylesheets could use CDNs, like scripts (the main issue from Getting Bootstrap #23);
• Inline styles and scripts could be moved to their own files.
• border-radius doesn't need vendor prefixes, so those can be removed.
• There are some unused variables on the website code, like this one.

I can send a pull request fixing the above points, but I also have some questions:

• How about using a linter?
• Is it OK to keep using modern JavaScript features (like async/await and fetch)?
• If the website becomes complex try to keep it "vanilla" or use some library?

In most of my projects I like using Vue (which I think it's easy to learn and is also "incrementally adoptable", something like "no build process required, just add a <script> tag") and Standard (which some people might not like because it avoids semicolons... but, well, Python don't use those).

But those are my personal preferences, I can try to keep using the same code style if you prefer. Current code just uses Bootstrap CSS and Leaflet (so... no jQuery). The code style uses both single quotes and double quotes. Python and JavaScript code uses four spaces for indentation (so it's better to avoid Standard, which uses two spaces).

About the design how about something like this? https://wireframe.cc/RGczK7

[waghcwb]

If the technology used is vue I can help with the frontend too..

[guilhermearmelo]

I can help on frontend too

[guifelix]

https://github.com/smaprs/BrumadinhoDam

[guifelix]

another suggestion is to use Tailwind

[eduardolomb]

I don't know whether a 2D map would be better for machines with fewer resources (like tablets and mobile phones). People should be able to use it on site...

[qgustavor]

Is someone working on internationalization? The current, non-functional, language switcher was made with something like vue-i18n in mind. In the other hand, as now Django is being used, other choice can be using django.utils.translation. Seems using Django features will make it easier for most people. It also support catalogs which will help translating strings on script.js, like "Localização inicial" and "Localização selecionada".