Skip to content
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 from

Conversation

@jaraco
Copy link
Contributor

@jaraco 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 2 commits Aug 2, 2016
Copy link
Contributor

@agjohnson agjohnson left a comment

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
Copy link
Contributor Author

@jaraco 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
Copy link
Contributor Author

@jaraco jaraco commented May 1, 2017

I should mention that this fixes #2261.

@jaraco
Copy link
Contributor Author

@jaraco 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
Copy link

@hwine hwine commented Nov 18, 2017

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

@agjohnson
Copy link
Contributor

@agjohnson 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
Copy link
Contributor Author

@jaraco jaraco commented Nov 18, 2017

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

@agjohnson
Copy link
Contributor

@agjohnson 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
Copy link
Contributor Author

@jaraco 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
Copy link

@karlcow 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
Copy link

@karlcow 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
Copy link

@karlcow 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
Copy link

@karlcow 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 issue Feb 1, 2018
@davidfischer
Copy link
Contributor

@davidfischer davidfischer commented Feb 1, 2018

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

@agjohnson
Copy link
Contributor

@agjohnson 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 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
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

5 participants