Open Bug 1350424 Opened 3 years ago Updated 2 months ago

Drop table layout and improve markup on Modal UI

Categories

(bugzilla.mozilla.org :: User Interface, task)

Production
task
Not set

Tracking

()

People

(Reporter: dylan, Unassigned)

References

(Blocks 6 open bugs)

Details

(Whiteboard: [october-2019-bmo-triage])

Attachments

(1 file)

46 bytes, text/x-github-pull-request
Details | Review
Currently, the modal form makes use of several techniques (including display: table) to present the modules.

The markup for this (in some initial testing I did) seems completely compatible to styling using CSS flex boxes. Once all the layout is using flex boxes, it becomes reasonable to consider many things:

1) In particularly wide screens, we can flow comments on the right-hand side of the bug modal modules.
2) On narrow screens, modules could have their content "stacked" so that instead of two columns, a module takes up only one. This would be nicer for a phone in portrait mode, for instance.

But that said, doing this will require a bunch of hours tweaking the CSS rules.
This is a bmo-small task, because it's not a good first bug but it would just require sitting down and editing CSS over and over and over.

Resources:

The file in question is https://github.com/mozilla-bteam/bmo/blob/f5436802e3ff4abb04e43fc22f8c86e549d459b1/extensions/BugModal/web/bug_modal.css

This guide I found quite helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I think CSS-Grid be better to use than flexbox since we have rows and columns in each content module. And it's now supported in a large portion of our clients.
(In reply to Emma Humphries ☕️ [:emceeaich] (UTC-8) +needinfo me from comment #1)
> I think CSS-Grid be better to use than flexbox since we have rows and
> columns in each content module. And it's now supported in a large portion of
> our clients.

As cool as that would be, flex box has wider support and actually works well with what I want to accomplish now.
Update, all our target browsers support CSS-Grid. Unless it's impossible to file a new bug in a second-support tier browser, okay to do this in Grid.
Type: enhancement → task
Duplicate of this bug: 1547980

The comment header and several other things are using an actual <table>. All has to be rewritten.

Assignee: nobody → kohei.yoshino
Blocks: 101865, 1330451
Keywords: bmo-small
Summary: Migrate from using display: table and display: table-cell to display: flex in the Modal UI → Drop table layout from the Modal UI
Blocks: 1192045

I’ll do this once Bug 1344091 is fixed.

Depends on: 1344091
Status: NEW → ASSIGNED

Working on this in prep for mobile support and 2-column layout.

Summary: Drop table layout from the Modal UI → Drop table layout and improve markup on Modal UI
Blocks: 1558096
Blocks: 1534084
Blocks: 1549162
Blocks: 1355170
No longer blocks: 1558096
Blocks: 1561380
Attached file GitHub Pull Request —

Still WIP but here’s how it will look like.

Component: User Interface: Modal → User Interface
Assignee: kohei.yoshino → nobody
Status: ASSIGNED → NEW
No longer blocks: 1330451
You need to log in before you can comment on or make changes to this bug.