search

colouring-cities / colouring-core

The Core Platform for the Colouring Cities Research Programme (CCRP)
https://colouringcities.org
GNU General Public License v3.0
48 stars 43 forks source link

something went wrong with logo #1411

Open matkoniecz opened 3 weeks ago

matkoniecz commented 3 weeks ago

screen01 not sure why it was not caught in my earlier tests?

matkoniecz commented 3 weeks ago

It looks like longer text caused box to become wider and failing out of their lines.

Forcing them with max-width: 107px; works but obviously it is not a solution.

matkoniecz commented 3 weeks ago

font-size: .8em; in .category-title is a bit more proper hack but... Still a hack.

mdsimpson42 commented 2 weeks ago

This did happen when we originally changed the category names, but I tested it at a range of Zoom levels on my local machine and on Staging... The little logo at the top and in the key was getting stretched, which I fixed.

I just tried it now, locally, on staging and on production and I can't replicate. Does it happen at particular zoom levels or resolutions?

mdsimpson42 commented 2 weeks ago

Or in a particular browser?

matkoniecz commented 2 weeks ago

not sure why it was not caught in my earlier tests?

That is because for body following definition is new, and replaced older: font-family: var(--bs-font-sans-serif);

I just tried it now, locally, on staging and on production and I can't replicate.

note that production has additional change reducing text size

Does it happen at particular zoom levels or resolutions?

100%, 1920 x 1200 px

Or in a particular browser?

Firefox 130.0.1 (64-bit)

matkoniecz commented 2 weeks ago

problem disappears on heavy zooming

it appears to be reliably triggered by editing labels, say with inspector to have oversized text length:

screen09

matkoniecz commented 2 days ago 
.category-title {
    display: block;
    text-align: center;
    font-size: .9em;
    margin: 0;
    padding: .6em;
}

removing padding: .6em; reduces problem and text looks fine

screen02 screen01

still, Age & history looks better with larger padding

And it still does not eliminate root cause.

Adding soft hyphens sort-of works but may result in splitting words where it is not really needed.

screen03

mdsimpson42 commented 2 days ago

Yeah, it's a tricky one. The padding was to try and make it look nice, Polly wanted, for example, Age & History not to appear all in one line, as it does on the second picture. I think she wanted the "&" in Typology and size would be on the next line too. I was just trying to do something that doesn't require too much additional code or adding custom code for each category...