search

crowdAI / crowdai

Fighting for Open Science with Open Data
https://www.crowdai.org
GNU Affero General Public License v3.0
149 stars 32 forks source link

CSS issues #503

Closed marcelsalathe closed 6 years ago

marcelsalathe commented 6 years ago

on mobile, this keeps bothering me too much, so I'll give this a high priority label (especially since fix should be easy to implement):

img_0267

  1. The numbers - there, I think we could enforce a numerical precision limit, which could be changed in the challenge setting (default could perhaps be 10^-3).

  2. The name's vertical alignment seems wrong in case of long names.

  3. The footer vertical spacing on mobile seems off.

Paging @jsnrynlds for help!

scarroll32 commented 6 years ago

@marcelsalathe

  1. Yes we can implement a precision level on scores. It seems only the very long numbers are a problem (and only on mobile). The problem could also exist if we have a challenge where there is a large whole number component. It seems 13 digits, including the decimal, are too many, but 10 or 11 would be fine on mobile.

So I will just truncate (not round) for visual purposes only, so that we have a total of 10 digits, eg: 16.3367203428 is displayed as 16.3367203 on both desktop and mobile. This is easy, will do it today.

  1. @jsnrynlds will need your help here

  2. This is because we added the FAQ. I'll see if I can find a quick solution.

marcelsalathe commented 6 years ago

Thanks @seanfcarroll - I think it's better to implement a lower precision level. Even 16.3367203 is too precise - it's an irrelevant precision level. 3 seems like a good default (also happens to be the default here https://apidock.com/rails/ActionView/Helpers/NumberHelper/number_with_precision)

jsnrynlds commented 6 years ago

@seanfcarroll @marcelsalathe I'm wondering could we truncate the names @ mobile res? The table cells really need to be vertically centred when a video and expand button are present.

I've added some padding between table cells and have also fixed the footer so it works at mobile. Pushed to: https://github.com/salathegroup/crowdai-templates

marcelsalathe commented 6 years ago

sounds good to me. It's really not that important to see the full name on mobile, especially since one can click on the link. So we could write Marcel Sa... instead of Marcel Salathé

scarroll32 commented 6 years ago

Code added in templates for footer

scarroll32 commented 6 years ago

All implemented except the name issue. At present a truncate (with dots) after 10 characters has been implemented, which looks good on mobile but a bit short on desktop.

Jason to see if there is a simple CSS solution based on media queries, otherwise we can JS it. Leaving this open only for the name.

jsnrynlds commented 6 years ago

Hi Sean – I can't find a way to do this using CSS without JS... looks okay currently though.