JavaScript: make image zoom always full width

[jjrsylvestre]

When an image is in a knowl or in a multi-column or side-by-side (or combinations of those...) the "zoom" function sometimes only makes the image as wide as the container. This edit always makes it the full-width of the content pane.

[rbeezer]

@ascholerChemeketa - would you be able to take a look at this one?

[ascholerChemeketa]

Other than the question about background color, this works as advertised across different themes.

Looks good.

[rbeezer]

I think maybe something is still not right for backgrounds.

Try Figure 26.13 in the sample article. Before PR: opaque when zoomed out. After PR: transparent when zoomed out.

[jjrsylvestre]

I think maybe something is still not right for backgrounds.

Try Figure 26.13 in the sample article. Before PR: opaque when zoomed out. After PR: transparent when zoomed out.

Images in Figure 26.13 are opaque in dark mode, only transparent in light mode.

Probably the CSS only anticipated that a white background would be needed in dark mode...

[jjrsylvestre]

To be honest, I can't find the rule that is causing the zoomed image to have a white background in dark mode. If I use the browser's developer tools to add background:blue; to the element.style of the div.mag_popup_container that is created when you click-to-zoom, then the background is only blue in light mode, and it remains white in dark mode...

grep -r mag_popup pretext/css was not enlightening...

[rbeezer]

I can't find the rule

Yes, SCSS is a good idea, but it makes drive-by contributions harder. I wonder if a brief tutorial/explanation in the Guide would be helpful for those who know "plain" CSS well? I have a new assistant who could make an initial draft. ;-)

[jjrsylvestre]

Yes, SCSS is a good idea, but it makes drive-by contributions harder. I wonder if a brief tutorial/explanation in the Guide would be helpful for those who know "plain" CSS well? I have a new assistant who could make an initial draft. ;-)

SCSS isn't that difficult to understand. It's more that "drive-by" contributors like me might go months without thinking about CSS at all and get rusty.

I've found the entries responsible for the discrepancy between light and dark mode behaviour:

_color-vars.scss
79:  "ptx-image-bg": transparent,

_palette-dark.scss
67:  "ptx-image-bg": white,

@ascholerChemeketa Would you prefer those both to be white, or for a new background rule for div.mag_popup_container to be added somewhere? I imagine that the choice of transparent is to respect themes that have a light-mode background for .ptx-content that is not white?

[ascholerChemeketa]

@jjrsylvestre IMO the popup should have a background that matches the page. .mag_popup_container (_media.scss line 69) getting background: var(--content-background); would do that.

The image background is a separate thing. Applying a white background to images in dark mode (via ptx-image-bg) is a bit of a hack to handle existing images with transparency. It eventually should go away, or at least allow for more control, so that if an author's images do support color schemes (https://cassidyjames.com/blog/prefers-color-scheme-svg-light-dark/), they aren't forced to have a white background behind their SVGs.

[jjrsylvestre]

@jjrsylvestre IMO the popup should have a background that matches the page. .mag_popup_container (_media.scss line 69) getting background: var(--content-background); would do that.

Sounds good, thanks for the help!

[ascholerChemeketa]

@rbeezer I really don't think scss is the root of the problem you are worried about.

Figuring out "why is this element styled like that" is a core CSS/HTML developer skill. Open the browser's inspector and figure out what styles are being applied and where they come from:

Doing that is necessary to make a reasonably informed PR whether the source language is CSS or SCSS. And doing that points to exactly where in the scss the rules are. The scss files are for the most part just css.

Supporting light/dark and different themes is absolutely a source of complexity. But that usually just requires avoiding hardcoding in values like white or black and using the css variables. that are described in _color-vars.scss. That complexity would be the same (actually worse) if we were just using plain css.

There is already a pretty significant Readme in the css directory. Maybe some of it could get hoisted into the guide.

[jjrsylvestre]

I just want click-to-zoom to actually, you know, zoom my images when I click on them. I couldn't care less about the optimal structure of the SCSS/CSS, or the "core CSS/HTML developer skills". I'm a math instructor, not a web developer.

[rbeezer]

There is already a pretty significant Readme in the css directory.

Right. Thanks for the reminder. My assistant will like that.

I want to keep knowlegeable and helpful contributors, like @jjrsylvestre, contributing and being productive. So I probably will develop some materials to help, and perhaps @ascholerChemeketa can help with a review.

[ascholerChemeketa]

That was no shade at you @jjrsylvestre
Having the image zoom work in nested contexts will be a much needed improvement!