Display different number of images/row with different image sizes

[Jack-42]

This is a feature requested by Jeremy. Rather than displaying 3 images/row for all image sizes, display more images per row for smaller image sizes (whatever will fit).

The "Help" page has also been updated, I've added myself as a co-developer. Let me know if the wording seems ok.

utils.py and base.html were also cleaned up some, removing unused functions and scripts (some scripts just gave 404 errors and had no impact on functionality).

[Priyansh-Kedia]

Hello @Jack-42 Displaying images according to the image size is a good feature, however, I would like to ask you to maintain the margins and alignment for the page.

I think the images should be aligned from the center, and equal spacing should be maintained at the page start and end.

Please find the images below for comparisons (Image 1 is current, Image 2 is expected)

Image 1

Image 2

Also, see images below, to see center alignment of images (ignore image count in this case, only alignment is relevant)

Current

Expected

Also, as you can see in the images above, I think it is a good idea to add borders (or maybe show images in table format) around the images, which would make it easier to separate the different images.

Please let me know if you have any issues or concerns

Thanks

[Jack-42]

@Priyansh-Kedia thanks for your comments, I added padding between the left/right sides of the page and also made it so images are centered correctly. I also added borders to all images (thanks for pointing this out, I always use a dark theme so I had overlooked how images blend into the background on default browser settings).

One thing to note is that if an input molecule has a long name then they get a larger grid cell than other molecules with shorter names (for example, see how benzylpenicillin affects the alignment of columns in the image below).

I was wondering if you thought it would make sense to abbreviate molecule names so that all cells are the same size, or if it would be best to just leave the full molecule name as-is?

[Priyansh-Kedia]

Hello @Jack-42 Thanks for the changes

I am not particularly sure what you mean by abbreviating the long molecular names. I would suggest using text overflow ellipsis property to tackle the issue

Thanks

[Jack-42]

@Priyansh-Kedia yeah, sorry if that wasn't clear I had just meant cutting off the name if it got too long for the container. The most recent commit uses ellipsis for long names as you suggested. The display looks like this now:

Note how all columns are even. If this looks ok to you I can go ahead and merge

[Priyansh-Kedia]

@Priyansh-Kedia yeah, sorry if that wasn't clear I had just meant cutting off the name if it got too long for the container. The most recent commit uses ellipsis for long names as you suggested. The display looks like this now:

Note how all columns are even. If this looks ok to you I can go ahead and merge

Looks good to me Thanks for the changes