jon48 / webtrees-theme-rural

Rural theme for webtrees
GNU General Public License v3.0
11 stars 2 forks source link

2.0.4-v.2 - Windows key + Left arrow - scaling problem #10

Closed TheDutchJewel closed 4 years ago

TheDutchJewel commented 4 years ago

When I adjust the size of the browser page with the Windows key + the left arrow, the right side of boxes with the family members, does not look good:

afbeelding

afbeelding

Tested configuration Device: desktop pc OS: Windows10 x64 Home v1909 Browsers: Edge v83.0.478.45 and Firefox v77.0.1 webtrees: 2.0.5 PHP: 7.3.18

TheDutchJewel commented 4 years ago

The problem seems to be caused by the Vesta Webtrees Custom Module 'Classic Look & Feel'. If I disable this module, everything looks fine: afbeelding

I opened an issue on github/vesta-webtrees-2-custom-modules/vesta_classic_laf, hoping the author will look into it.

jon48 commented 4 years ago

Hello, This is not entirely due to the Vesta module, I can reproduce it when I reduce enough with some long names. image

As mentioned by @ric2016 in https://github.com/vesta-webtrees-2-custom-modules/vesta_classic_laf/issues/11#issuecomment-643970204, the sidebar is a bit problematic, and I am not even sure there will be a good approach to it (the standard webtrees theme actually has the issue as well).

I can think of 2 attempts to fix it, but I am not really convinced by the outcome of any of them, which have impact even when there is enough space:

I am happy to get your opinion on any of those options, but I think this is one I will leave as is, and accept the overflow.

ric2016 commented 4 years ago

I tried various options as well, I think a fixed table layout works best:

[dir] .wt-family-navigator-family {
  table-layout: fixed;
}

[dir] .wt-family-navigator-family th {
  width: 30%;
}

[dir] .wt-family-navigator-family .dropdown-toggle {
  white-space: normal;
}

[dir] .wt-family-navigator-family .dropdown-item {
  white-space: normal;
}

is what I ended up with. This breaks long names properly (only the family dropdown still is problematic), and the columbs align nicely across multiple tables.

TheDutchJewel commented 4 years ago

I am happy to get your opinion on any of those options, but I think this is one I will leave as is, and accept the overflow.

Both have their own issues and none of them looks better than the overflow problem. If it can't be solved completely, I understand if you'll leave it as it is.

jon48 commented 4 years ago

Thanks @ric2016 , your suggestion looks like a good compromise indeed. I will go for it.

image