search

ThreeSixtyGiving / Insights

Combining and visualising 360Giving and charity data to answer questions about grantmaking
https://insights.threesixtygiving.org/
GNU General Public License v3.0
3 stars 2 forks source link

styling for fetch file dialogue #52

Closed drkane closed 5 years ago

drkane commented 5 years ago

Loading modal with two states:

1. Data is loading

Needs 2 progress bars, plus an explanation of what is happening

image

2. Data has been fetched

Needs a prominent button for "Data fetched - view results"

image

morchickit commented 5 years ago

We can make this box a lot smaller, no? Is that what you mean David?

On Tue, 12 Feb 2019 at 09:04, David Kane notifications@github.com wrote:

[image: image] https://user-images.githubusercontent.com/1049910/52623838-337fb600-2ea5-11e9-8f23-8774ec923d59.png

[image: image] https://user-images.githubusercontent.com/1049910/52623865-41353b80-2ea5-11e9-955c-709553b4a068.png

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/ThreeSixtyGiving/Insights/issues/52, or mute the thread https://github.com/notifications/unsubscribe-auth/ADHzuxO0Qp4MAPJPA4ds_ts-GbXaAfgMks5vMoO6gaJpZM4a16bw .

-- Mor Rubinstein Data Labs Manager 360Giving http://www.threesixtygiving.org/ Twitter - @morchickit https://twitter.com/Morchickit Cell: +44(0)7904191881 / Office: 020 3752 5775 Skype: mor.rubinstein We are finalists for a DigitalAgenda 2019 Impact Award. Vote for us here https://www.impact-awards.co.uk/finalists! 360Giving is a company https://beta.companieshouse.gov.uk/company/09668396 limited by guarantee and a registered charity http://beta.charitycommission.gov.uk/charity-details/?regid=1164883&subid=0 . Read our privacy notice http://www.threesixtygiving.org/privacy/ to find out how we collect and use personal data.

[image: cid:image001.png@01D122F0.5ED3A880]

drkane commented 5 years ago

It probably could be a bit smaller, but it needs to have the users' attention as it's what's preventing them from getting to the data. So it's more about having some prominent progress bars and a prominent button when the data has finished loading.

claudioccm commented 5 years ago

@drkane - From a user perspective, the information that matters is that the website is fetching the data and not stalled. That is why we have the spinner.

From my conversation with Arthur, it is pretty simple to make the Spinner work. Just need to remove the class hidden from this component and add a class lock on the html body. This will make our spinner work properly.

I'm pretty sure this can be tied to the dash-loader div via JS or JQuery.

Please, let me know if this isn't clear.

Cheers, Claudio

drkane commented 5 years ago

Hi @claudioccm - this is a bit of a different case to the normal loading spinner.

In this case the site is fetching and processing a file that the user has selected - and the process can take a while, much longer than a normal page load that the spinner would cover.

The idea of the progress bars is both:

This process isn't performed every time the file is used - the results are cached so loading is much quicker the second time and the process is skipped. But I'd still like more than just a spinner to help users.

claudioccm commented 5 years ago

@drkane - got it. thanks

claudioccm commented 5 years ago

homepage - progress homepage - fetching 100

@morchickit and @drkane, please review these two mockups, and I will ark Arthur to create the HTML/CSS for us.

Three things I'd like your your opinioins: 1- I added an overall percentage there. Those numbers were a bit confusing to me. 2- I assumed the 44/193 was the overall progress. If I got it wrong, please let me know. 3- The second screen, when it reaches 100%, I removed the name of the file, and some of the wording, and just communicated the "It's ready" with a change in the state of the button on the bottom. I believe this is a more straight forward way to communicate that the file is ready, without using text. Let me know what you think

drkane commented 5 years ago

@claudioccm - looks gorgeous, very happy with it.

2- I assumed the 44/193 was the overall progress. If I got it wrong, please let me know.

It's actually the other way round, but no problem - just the headings need to swap over.

claudioccm commented 5 years ago

@drkane thanks man! I will just wait for @morchickit to send her feedback, and we will code this HTML/CSS. Probably tomorrow you will have this ready

morchickit commented 5 years ago

ME LIKE! <3

Let's code this beautiful thing :-)

On Tue, 19 Feb 2019 at 22:03, Claudio Mendonca notifications@github.com wrote:

@drkane https://github.com/drkane thanks man! I will just wait for @morchickit https://github.com/morchickit to send her feedback, and we will code this HTML/CSS. Probably tomorrow you will have this ready

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/ThreeSixtyGiving/Insights/issues/52#issuecomment-465329373, or mute the thread https://github.com/notifications/unsubscribe-auth/ADHzu5y6y3EmYehL2WteBAErruK2c1n9ks5vPHSngaJpZM4a16bw .

-- Mor Rubinstein Data Labs Manager 360Giving http://www.threesixtygiving.org/ Twitter - @morchickit https://twitter.com/Morchickit Cell: +44(0)7904191881 / Office: 020 3752 5775 Skype: mor.rubinstein We are finalists for a DigitalAgenda 2019 Impact Award. Vote for us here https://www.impact-awards.co.uk/finalists! 360Giving is a company https://beta.companieshouse.gov.uk/company/09668396 limited by guarantee and a registered charity http://beta.charitycommission.gov.uk/charity-details/?regid=1164883&subid=0 . Read our privacy notice http://www.threesixtygiving.org/privacy/ to find out how we collect and use personal data.

[image: cid:image001.png@01D122F0.5ED3A880]

morchickit commented 5 years ago

@claudioccm - what's the progress here?

claudioccm commented 5 years ago

@drkane - here is the commit with the styles: https://github.com/ccmdesign/360-insights/commit/f56efd9c94e63c19490c1888924ab62dfbc0cdc0