New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed build results page on firefox (part two) #2630

Closed
wants to merge 3 commits into
base: master
from

Conversation

Projects
None yet
5 participants
@jaraco
Contributor

jaraco commented Feb 3, 2017

This PR builds on and obviates #2350 by addressing concerns about aesthetics on Chrome, by moving the hack into its own documented style definition.

I did try to track the origin of the original style, but it was part of the bulk commit in a95f08d, which lends no insight into the intention of the style, and is probably just an artifact of the author using Chrome to develop the view.

Shubheksha Jalan and others added some commits Aug 2, 2016

Shubheksha Jalan Shubheksha Jalan
Restore hack for ugly rendering on Chrome (and related browsers), usi…
…ng selector hack found at http://browserhacks.com/. Now content renders nicely on Chrome and Firefox. Fixes #2261.
@agjohnson

I'd rather avoid using CSS hacks here. Was there any attempt to rework the styling around the parent elements to remove the need for a negative margin in the first place?

@jaraco

This comment has been minimized.

Contributor

jaraco commented Feb 8, 2017

I agree it would be preferable without CSS hacks, but I don't have the skills to track down the underlying cause readily. At least this change makes the site usable and sets the stage for someone to devise a better option.

@jaraco

This comment has been minimized.

Contributor

jaraco commented May 1, 2017

I should mention that this fixes #2261.

@jaraco

This comment has been minimized.

Contributor

jaraco commented Aug 18, 2017

As proposed in the ticket, I've removed the hack and the display: block apparently implicated in the poor rendering on Chrome. According to the comment in the ticket, this should resolve the issue. I have not tested the result.

@hwine

This comment has been minimized.

hwine commented Nov 18, 2017

@agjohnson what more needs to be done here? This has been open for a long time.

@agjohnson

This comment has been minimized.

Contributor

agjohnson commented Nov 18, 2017

It needs testing. Someone tried a similar fix and it broke all other browser display. Can anyone confirm this works across browsers?

@jaraco

This comment has been minimized.

Contributor

jaraco commented Nov 18, 2017

In this comment, @karlcow asserts that the change has the desired effect. This PR implements that change.

@agjohnson

This comment has been minimized.

Contributor

agjohnson commented Nov 18, 2017

This fix breaks scrolling on command elements, I can't scroll horizontally to see the command executed.

FWIW, FF quantum looks as I would expect

@jaraco

This comment has been minimized.

Contributor

jaraco commented Nov 18, 2017

This fix breaks scrolling on command elements, I can't scroll horizontally to see the command executed.

I still would argue that being able to see the header text is more important than being able to see the trailing portion of longer lines.

I'll see if I can find another solution.

@karlcow

This comment has been minimized.

karlcow commented Nov 20, 2017

Let me check again. OK Indeed the change as it is will break the scroll. I have something which fixes it.

@karlcow

This comment has been minimized.

karlcow commented Nov 20, 2017

@jaraco Could you try this in your PR.

Removing the overflow: hidden here

div.build-command div.build-command-run, div.build-command div.build-command-output {
	display: block;
	/* overflow: hidden; */
}

and just removing the margin-bottom: -16px

div.build-command div.build-command-run > span, div.build-command div.build-command-output > span {
	display: block;
	/* margin-bottom: -16px; */
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	white-space: pre;
	overflow-x: scroll;
	overflow-y: hidden;
}

This will fix in both Chrome and Firefox.
It will increase the space for Chrome.

If I can try to work out a solution which would look the same in both with a change of markup.

@karlcow

This comment has been minimized.

karlcow commented Nov 20, 2017

ok I have a fix which seems to be working everywhere but requires markup change.
in details.css

div.build-command div.build-command-run > pre, div.build-command div.build-command-output > pre {
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    overflow-x: scroll;
    overflow-y: hidden;
    line-height: 1.5em;
    margin: 0;
}

div.build-command div.build-command-output > pre {
    padding: .5em;
}

And replace the span with a pre

<div class="build-command build-command-successful"
    data-bind="css: command_status">
    <div class="build-command-run"
        data-bind="click: toggleCommand">
        <pre data-bind="text: command">python -mvirtualenv --no-site-packages /home/docs/checkouts/readthedocs.org/user_builds/gratipay/envs/latest</pre>
    </div>
    <div class="build-command-return"
        data-bind="visible: is_showing"
        style="">
        <div class="build-command-output">
            <pre data-bind="text: output">New python executable in /home/docs/checkouts/readthedocs.org/user_builds/gratipay/envs/latest/bin/python
Installing setuptools, pip, wheel...done.
</pre>
        </div>
        <div class="build-command-meta">
            <span class="build-command-time">
                Command time:
                <span data-bind="text: run_time">2</span>s
            </span>
            <span class="build-command-exit-code">
                Return:
                <span data-bind="text: exit_code">0</span>
            </span>
        </div>
    </div>
</div>
@karlcow

This comment has been minimized.

karlcow commented Nov 20, 2017

horizontal scrolling is working. The layout is similar in both firefox and chrome.

davidfischer added a commit to davidfischer/readthedocs.org that referenced this pull request Feb 1, 2018

@davidfischer

This comment has been minimized.

Contributor

davidfischer commented Feb 1, 2018

I have an alternative fix in #3569 that doesn't require markup changes.

@agjohnson

This comment has been minimized.

Contributor

agjohnson commented Feb 5, 2018

Thanks for the investigation and help on this PR everyone! I think #3569 is closer to a fix for this issue, so I'm going to close this PR and we can hopefully merge that PR after some more testing.

@agjohnson agjohnson closed this Feb 5, 2018

@jaraco jaraco deleted the jaraco:firefox-build-results-fix branch Feb 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment