search

legumeinfo / jekyll-theme-legumeinfo

A Jekyll theme for the Legume Information System and related biodata websites
https://www.legumeinfo.org/
Apache License 2.0
1 stars 1 forks source link

Fixed bug in default layout #88

Closed alancleary closed 8 months ago

alancleary commented 8 months ago

I noticed on my big monitor that the content on Jekyll sites was taking the entire width of the page rather than being confined to the maximum width of its container. This PR fixes that.

svengato commented 8 months ago

I do not see any difference between main and default-layout-fix on the PeanutBase Jekyll site, both seem to display all content without running off the page. Do you have an example page in mind?

alancleary commented 8 months ago

I do not see any difference between main and default-layout-fix on the PeanutBase Jekyll site, both seem to display all content without running off the page. Do you have an example page in mind?

Yes. Look at the Contact page on legumeinfo on a wide monitor. Notice how the content simply fills all of the horizontal space. This content is inside a container that has a maximum width that should prevent this!

svengato commented 8 months ago

I added a couple of the wide paragraphs from the legumeinfo contact page to the PeanutBase contact page (otherwise not especially wide), and can see that when I build the site with the main branch of the theme, the content is within HTML like

<div class="tm-main uk-section uk-section-default uk-flex">
  <div class="uk-container uk-width-1-1">

while with the default-layout-fix branch, it is within HTML like

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-flex">
    <div class="uk-width-1-1">

as expected, yet the wide paragraphs take up almost the entire page width in both cases.

How wide should the content <div> be? And how wide does the monitor need to be to notice a difference? Mine is 22" but I can try to find a larger one.

svengato commented 8 months ago

Just noticed that in the default-layout-fix case, both margins are about an inch inward than in the main case, so that is a good sign.

[Update: can no longer reproduce this, even after clearing cache.]

[Update 2: can reproduce when the browser window is full screen. So maybe the effect kicks in around my screen width?]

svengato commented 8 months ago

Just asked to borrow a larger monitor - see updates to the previous comment.

alancleary commented 8 months ago

@svengato You don't need an extra wide monitor for this, just add a UIkit size modifier to the container so its maximum horizontal size is smaller. The problem is that the flex layout overrides these size constraints.

svengato commented 8 months ago

In this configuration, the wide paragraphs are about half the page width, but still near the left margin.

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-flex">
    <div class="uk-width-1-2">

In this configuration, they are about half the page width, but centered.

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-container-small uk-flex">
    <div class="uk-width-1-1">

Does that seem reasonable?

alancleary commented 8 months ago

In this configuration, the wide paragraphs are about half the page width, but still near the left margin.

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-flex">
    <div class="uk-width-1-2">

In this configuration, they are about half the page width, but centered.

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-container-small uk-flex">
    <div class="uk-width-1-1">

Does that seem reasonable?

No. You shouldn't be changing the uk-width-1-1 class. Just add the uk-container-xsmall class to the uk-container div branch in the main branch and then do the same thing in the default-layout-fix branch. The width of the div in the default-layout-fix branch should respond to this whereas the width of the div in the main branch should not. That's the bug.

svengato commented 8 months ago

Confirmed that if I add either uk-container-small or uk-container-xsmall in _layouts/default.html, it makes the wide paragraphs narrower (and still centered) on the default-layout-fix branch but not the main branch.

<div class="tm-main uk-section uk-section-default">
  <div class="uk-container uk-container-small uk-flex">
    <div class="uk-width-1-1">
alancleary commented 8 months ago

Great! Can you have look at pages using the tools menu and the card columns as well? I need another set of eyes to confirm that there aren't any unintended side effects.

svengato commented 8 months ago

It seems to work with the Home page, the middle section ("About PeanutBase ...") gets narrower, with a wider left margin. If you make the browser window too narrow, the card column on the right disappears, but I think it did that before. I can show you on a videoconference if you like.

alancleary commented 8 months ago

It seems to work with the Home page, the middle section ("About PeanutBase ...") gets narrower, with a wider left margin. If you make the browser window too narrow, the card column on the right disappears, but I think it did that before. I can show you on a videoconference if you like.

This sounds like the correct behavior. Thanks for verifying!