1071591 - Add CSS class download-desc

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: General, defect)

Description

[Eric Shepherd [:sheppy]]

What feature should be changed? Please provide the URL of the feature if possible.
==================================================================================
We need to add the following CSS to the custom CSS:

/* help ensure the vertical alignment of elements in a row of download boxes */
.download-desc { min-height: 172px; }


What problems would this solve?
===============================
This corrects a visual problem on the /docs/Firefox page.

Who would use this?
===================
All

What would users see?
=====================
Nicer display of elements.

What would users do? What would happen as a result?
===================================================
Revel in the wonderfulness of horizontally aligned content.

Is there anything else we should know?
======================================
Ideally this should be near the other classes prefixed "download-".

Comment 1

[Luke Crouch [:groovecoder]]

:shobson, :davidwalsh, :openjck - in addition to adding this, how do we want to do this in the future? Do we want devs to add this, or ask :sheppy and writers to send pull requests?

Comment 2

[David Walsh :davidwalsh]

I'm fine with implementing it for them, though I'm thinking there may be a better way in this case.

Sheppy:  What URL or content does this apply to?

Comment 3

[Eric Shepherd [:sheppy]]

This is used on https://developer.mozilla.org/en-US/Firefox to tidy the appearance of the four channel download boxes. This was the best advice I was able to get when I was working on this issue yesterday.

Comment 4

[John Karahalis [:openjck]]

(In reply to Luke Crouch [:groovecoder] from comment #1)
> :shobson, :davidwalsh, :openjck - in addition to adding this, how do we want
> to do this in the future? Do we want devs to add this, or ask :sheppy and
> writers to send pull requests?

Either way. Whatever works for the writers, really.

If we do decide to manage these changes through bugs, I would love for us to promise 24-hour turnarounds.

Comment 5

[John Karahalis [:openjck]]

Or more accurately, 24-hour replies. Some changes will benefit from further discussion, and I wouldn't want us to rush implementation in those cases.

Comment 6

[Eric Shepherd [:sheppy]]

I would prefer to use bugs rather than PRs because, honestly, keeping a stable build environment intact for the purpose of tweaking CSS is a lot to ask. :)

Comment 7

[Luke Crouch [:groovecoder]]

I think it's fair to send the PR with CSS changes without a build environment running.

Comment 8

[Eric Shepherd [:sheppy]]

(In reply to Luke Crouch [:groovecoder] from comment #7)
> I think it's fair to send the PR with CSS changes without a build
> environment running.

Someone will have to explain how to do that, because I don't know.

In the meantime, can someone please deploy this fix? :)

Comment 9

[Stephanie Hobson [:shobson]]

Would it be okay if I took a different approach here? I'd like to do something that will work on mobile as well.

Comment 10

[Stephanie Hobson [:shobson]]

The goal is to make the buttons line up at the bottom, correct?

Comment 11

[Eric Shepherd [:sheppy]]

Okay, this has taken over a week now. I'm about ready to throw the waffle flag so we can start using CustomCSS again. There's no way this should have taken this long, given that we were told that you guys would respond quickly to requests to push CSS tweaks. :)

Yes, the goal is to line the buttons up at the bottom, *and* the headings at the top.

Comment 12

[Luke Crouch [:groovecoder]]

:shobson - to whom was your question directed in comment 10?

Comment 13

[Stephanie Hobson [:shobson]]

:groovecoder It was directed at Sheppy and he answered it.

Comment 14

[Stephanie Hobson [:shobson]]

Pull request is under review.

Comment 15

[[github robot]]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/4f26bf6b8977ab82a1b71344ea4caa89c129024c
Fix Bug 1071591 - Download description alignments

To keep headings aligned at the top I removed vertical-align:centre and to keep buttons aligned at the bottom I absolutely position them at the bottom in a space created by adding padding to the bottom of the description.

Also added a fix to keep the "headings" on a separate line on mobile since they look weird on the same line as the image.

https://github.com/mozilla/kuma/commit/5cf8101742c077e8be3da4416e4fcbeb51529dac
Merge pull request #2792 from stephaniehobson/BUG-1071591-download-desc-align

Fix Bug 1071591 - Download description alignments