search

ConnectProject / mavoix-app

0 stars 1 forks source link

Pictogram sizes should be standardised, prevent image cropping and overflowing of text #42

Closed r03ert0 closed 3 years ago

r03ert0 commented 3 years ago

Let's call pictogram the combination of and image and a text. Currently, the text inside a pictogram can spill from its frame (see "Charly and Lola"):

More generally, the size of pictograms should be standardised:

The images in the pictogram should be squared. In addition to that, there should be the space for the text. The text should not hide the image, nor overflow the space of the pictogram.

The width of the pictogram should be the width of the image; and the height of the pictogram should be the height of the image plus the height of the text (with space for 2 lines of text, with a very small line height). Images are often 3cm*3cm, which should correspond to >7 em. Let's make them 8 em (and make them relative to the root size, so 8 rem). Font size is currently at 1.25 rem, and looks good. We can use a height of 2 rem for the text in a pictogram, using 1.25 rem for the font size if there's only a line of text, and 0.9 rem for the font size if there is 2 lines.

Defining all sizes in rem, thus relative to the global size, should allow us to adapt more easily to the pixel density of the devices. What's important from the perspective of the users is that the image is more or less of the same real size, independently of the device (the limitations may be visual, but also motor).

For the height of the voice bar, it should be the hight of an image plus a fixed margin. Let's say 9 rem.

ntraut commented 3 years ago

For the size of the text, if "Charly and Lola" was not overflowing before c20323c84679c36275ee8c25e65bbc010c73b7be, it's because before this commit the size of the text was not proportional to vignette size, so it was not overflowing on larger devices but overflowing on smaller devices (the vignette size is proportional to the screen size). I set font size to be rowHeight/8, maybe it is slightly too big.

Currently the layout grid is 4 rows x 3 columns is landscape and 3 rows x 4 columns in portrait (the voice bar counts for a row). So there is already a standardization but contrary to what you want, vignette sizes are not fixed but relative to screen size.