Make download button at library.kiwix.org more conspicuous

[Popolechien]

We've received repeat comments from users that they at first can't figure out where the download function is. The download button as it stands could be a bit more conspicuous, including an actual download icon.

The file size that is also included in the download text could be moved somewhere else on the card so as to make space for the download icon.

[Jaifroid]

I think just giving the "Download" button more height (it's very narrow), and maybe styling it to look more button-like, ought to do the trick.

An alternative would be to make a click anywhere on the tile open the download menu, and have "Browse this ZIM" as one item in that menu.

[kelson42]

The size could be given if the layer proposing the multiple methids of download. We should then be able to propose a proper download button at the bottom of the tile.

[kelson42]

@Popolechien At this stage we need a proposal in HTML. Nothin fancy:

• a button a the bottom of the tile
• Add the size in download overlay

[juuz0]

what about this? :>

Screencast.from.2024-05-12.18-28-41.webm

[kelson42]

@juuz0 Thank you for helping moving forward but:

• Make it full width, below the tags and language (it should be more visible and if we have many tags, we will have problem)
• Put the size in the overlay

[juuz0]

@kelson42
I kept the size in Download button (and also added in the overlay), but can remove if you want - I felt it would be wise to not lose information

Screencast.from.2024-05-13.23-43-51.webm

[kelson42]

@juuz0 Not sire about all details, but this is more or less what I had in mind. @Popolechien ?

[Popolechien]

LGTM. Does this means that the rest of the card is clickable to display the zim content? If yes then maybe increase the button's height a teeny weeny bit.

[kelson42]

LGTM. Does this means that the rest of the card is clickable to display the zim content? If yes then maybe increase the button's height a teeny weeny bit.

@Popolechien Yes, thanks for the feedback.
@juuz0 Could you please share here your HTML mockup, so I can try to tweak it a bit?

[D3V-D]

I have an additional suggestion, which I can make a mock-up for, but basically I feel a lot of users would want to preview a ZIM first, then download. Thus, it makes sense to have a download button in the ZIM preview page. I'll send a demo here soon

[kelson42]

I have an additional suggestion, which I can make a mock-up for, but basically I feel a lot of users would want to preview a ZIM first, then download. Thus, it makes sense to have a download button in the ZIM preview page. I'll send a demo here soon

I 100% agree with this but this should be handled in an other issue.

[D3V-D]

Sure; should I go ahead and create it?

[juuz0]

@juuz0 Could you please share here your HTML mockup, so I can try to tweak it a bit?

@kelson42 its in the downloadBtn branch, you can fetch and tweak.
I increased the padding a bit so it looks like this currently:

[kelson42]

@juuz0 Sorry stiil have taken the time, but will do.