Default admin theme: tab appearance in Chrome

[Toutouwai]

A minor styling issue... In Chrome (Windows), the appearance of the 'WireTabs' in the admin theme is not quite right.

I use the following fix in the AdminCustomFiles module:

content .WireTabs { height:2.5em; }

[LostKobrakai]

The same happens on Chrome for Mac.

[ryancramerdesign]

I noticed the issue just popped up one day without any changes to the core, so it seems to be due to a change in the webkit engine. The problem with setting a height on .WireTabs is that it breaks the tabs when they need to occupy two lines. For instance, try going to the template editor and then collapsing the width of your screen. So far I've not found a solution, but let me know if there's anything else you can think of.

[ryancramerdesign]

Actually it looks like changing the $tabs-height var in _vars.scss to 2.6em rather than 2.5em might resolve it. I'm guessing that messes it up in other browsers, but going to test further.

[Toutouwai]

The problem with setting a height on .WireTabs is that it breaks the tabs when they need to occupy two lines.

Do you mean when the tabs switch appearance to be buttons? This happens at a device width breakpoint so you would just disable the 2.5em height rule at that breakpoint.

[ryancramerdesign]

No it's not a breakpoint. Can't be done with a breakpoint because the only way to know when tabs need to switch to 2 rows (buttons) is by using JS to measure the height. That's why setting a specific height breaks things.

On Sun, Jun 12, 2016 at 6:31 AM, Toutouwai [email protected] wrote:

The problem with setting a height on .WireTabs is that it breaks the tabs when they need to occupy two lines.

Do you mean when the tabs switch appearance to be buttons? This happens at a device width breakpoint so you would just disable the 2.5em height rule at that breakpoint.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/ryancramerdesign/ProcessWire/issues/1875#issuecomment-225425303, or mute the thread https://github.com/notifications/unsubscribe/AAUCUAUEb2HMwnvfiIvArA25jTZZhllMks5qK9_4gaJpZM4Izdhg .

[Toutouwai]

Ah, good point. How about:

#content .WireTabs { top: -2.45em; }

Works in Windows Chrome.

[somatonic]

This is tricky and not done very solid, even though there's no real solid solution. I looked into it and tested in various browsers (browserstack)

It all comes down to how you set the elements and paddings etc. Currently there's padding and a fixed height, once you take out the height you see that the padding is stretching more than the height is set.

The problem with the height on the a element is also this, when the text inside would wrap:

Also when zooming the page most often the line shows again, mostly when making it smaller.

I figured removing the height and changing the padding does fix most of the problem and it still works on all browsers. And some other minor tweaks too.

Attached the modified _wiretabs.scss

/**
 * WireTabs
 *
 */

#content .WireTabs {
    // position: relative;
    top: (-1 * $tabs-height);
    margin-bottom: (-1 * $tabs-height);

    left: 0;
    width: 100%;
    z-index: 102;
    overflow: visible;

    body.collapse-wiretabs & {
        top: 0;
        margin: 5px 0 1px 0;
    }

    li {
        background: none;
        margin: 0;
        padding: 0;
    }

    a {
        font-weight: $tabs-font-weight;
        padding: 0.4em 1em 0.4em 1em;
        display: inline-block;
        border-top-left-radius: $tabs-radius;
        border-top-right-radius: $tabs-radius;
        border: $wiretab-link-border;
        border-bottom: none;
        margin-right: -1px;
        color: $wiretab-link-color;
        // height: $tabs-height;
        background: $wiretab-link-bg;
        position: relative;
        top: 0.1em;

        body.collapse-wiretabs & {
            border: $wiretab-link-current-border;
            @include border-radius($tabs-radius);
            margin-bottom: 5px;
            margin-right: 5px;
            // padding-top: 0.4em;
        }

        em {
            border-bottom: 1px solid transparentize($wiretab-link-color, 0.8);
            font-weight: $tabs-font-weight;
            font-style: normal;
        }

        &.on {
            color: $wiretab-link-current-color;
            border: $wiretab-link-current-border;
            border-bottom: 1px solid $wiretab-link-current-bg;
            background: $wiretab-link-current-bg;
            position: relative;
            z-index: 100;

            em {
                border-color: transparent;
            }

            body.collapse-wiretabs & {
                background: $wiretab-link-active-bg;
                color: $wiretab-link-active-color;
            }
        }

        &:hover {
            border: $wiretab-link-hover-border;
            // border-bottom: none;
            color: $wiretab-link-hover-color;
            background: $wiretab-link-hover-bg;

            em {
                border: none;
            }
        }

        &:active {
            background: $wiretab-link-active-bg;
            color: $wiretab-link-active-color;
        }

    }

    #_ProcessPageEditView {
        color: $link-color;
        font-weight: normal;

        &:hover {
            background: none;
            text-decoration: underline;
            border-color: transparent;
        }
    }
}

body.collapse-wiretabs #breadcrumbs {
    border: none;
}