Gaia/TipsTricks

Tips and Tricks Related to Gaia

Collect werid or unusal tips and tricks found by Gaia developers. Contribution is welcome.

CSS

Calc DOM's Height According to Its Width

Related Bug: Bug 903920

Provided by: Rex, George

Use 'padding-bottom': it calc the property according to width, not height. So:

 padding-bottom: calc(70% - 3rem)

Would map the '70%' to (element's width) * 70%

Vertical Alignment Without Table

Related Bug: Bug 903920 Provided by: Arthur, John

The reason of having that is to have a new UI for large device. We need to align the video title and information at the bottom of preview. We had tried multiple ways to have that. From the vertical-align: bottom to display: flex. Because the performance issue on display: table-cell. We choose display:flex as the final decision:

 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 align-items: flex-start;

A good doc can be found at [1]. If you still feel that's too hard to understand what's going on, you should just play this one: [2]

Building Tools

Let your browser icon and bootstrap screen comes with Firefox's logo

Provided by: Gary

 MOZILLA_OFFICIAL=1 make reset-gaia