diff options
Diffstat (limited to 'extensions/BMO')
| -rw-r--r-- | extensions/BMO/template/en/default/global/choose-product.html.tmpl | 71 | ||||
| -rw-r--r-- | extensions/BMO/web/styles/choose_product.css | 76 |
2 files changed, 107 insertions, 40 deletions
diff --git a/extensions/BMO/template/en/default/global/choose-product.html.tmpl b/extensions/BMO/template/en/default/global/choose-product.html.tmpl index 57d0b0740..4329b716a 100644 --- a/extensions/BMO/template/en/default/global/choose-product.html.tmpl +++ b/extensions/BMO/template/en/default/global/choose-product.html.tmpl @@ -68,11 +68,12 @@ %] </div> -<h2>or choose from the following selections</h2> +<section id="product-list"> + <h2>or choose from the following selections</h2> [% IF NOT ((cgi.param("full")) OR (user.settings.product_chooser.value == 'full_product_chooser')) %] - <table align="center" border="0" width="600" cellpadding="5" cellspacing="0"> + <div class="tile"> [% INCLUDE easyproduct name="Core" icon="component.png" @@ -109,21 +110,19 @@ name="Data Platform and Tools" icon="sync.png" %] - <tr> - <td><a href="[% target FILTER uri %]?full=1 - [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] - [%- IF classification %]&classification=[% classification FILTER uri %][% END -%] - [%- IF format %]&format=[% format FILTER uri %][% END %]"> - <img src="extensions/BMO/web/producticons/other.png" height="64" width="64" border="0"></a></td> - <td><h2 align="left" style="margin-bottom: 0px;"><a href="[% target FILTER uri %]?full=1 - [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] - [%- IF classification %]&classification=[% classification FILTER uri %][% END -%] - [%- IF format %]&format=[% format FILTER uri %][% END %]"> - Other Products</a></h2> - <p style="margin-top: 0px;">Other Mozilla products which aren't listed here</p> - </td> - </tr> - </table> + <section class="product other"> + <h3> + <a href="[% target FILTER uri %]?full=1 + [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] + [%- IF classification %]&classification=[% classification FILTER uri %][% END -%] + [%- IF format %]&format=[% format FILTER uri %][% END %]"> + <img src="extensions/BMO/web/producticons/other.png" height="64" width="64" alt=""> + <span>Other Products</span> + </a> + </h3> + <p>Other Mozilla products which aren't listed here</p> + </section> + </div> [% ELSE %] @@ -171,15 +170,14 @@ [% END %] [% END %] -<br> +</section> </div> <div id="guided"> - <a id="guided_img" href="enter_bug.cgi?format=guided"><img - src="extensions/BMO/web/images/guided.png" width="16" height="16" border="0" align="absmiddle"></a> - <a id="guided_link" href="enter_bug.cgi?format=guided" - >Switch to the [% terms.Bugzilla %] Helper</a> - | <a href="page.cgi?id=custom_forms.html">Custom [% terms.bug %] entry forms</a> + <a href="enter_bug.cgi?format=guided"> + <img src="extensions/BMO/web/images/guided.png" width="16" height="16"> + Switch to the [% terms.Bugzilla %] Helper</a> | + <a href="page.cgi?id=custom_forms.html">Custom [% terms.bug %] entry forms</a> </div> [% PROCESS global/footer.html.tmpl %] @@ -192,20 +190,19 @@ [% FOREACH c = classifications %] [% FOREACH p = c.products %] [% IF p.name == name %] - <tr> - <td><a href="[% target FILTER uri %]?product=[% p.name FILTER uri %] - [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] - [%- IF format %]&format=[% format FILTER uri %][% END %]"> - <img src="extensions/BMO/web/producticons/[% icon FILTER uri %]" height="64" width="64" border="0"></a></td> - <td><h2 align="left" style="margin-bottom: 0px"><a href="[% target FILTER uri %]?product=[% p.name FILTER uri %] - [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] - [%- IF format %]&format=[% format FILTER uri %][% END %]"> - [% caption || name FILTER html FILTER no_break %]</a>:</h2> - [% IF p.description %] - <p style="margin-top: 0px;">[% p.description FILTER html_light %]</p> - [% END %] - </td> - </tr> + <section class="product major"> + <h3> + <a href="[% target FILTER uri %]?product=[% p.name FILTER uri %] + [%- IF cloned_bug_id %]&cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%] + [%- IF format %]&format=[% format FILTER uri %][% END %]"> + <img src="extensions/BMO/web/producticons/[% icon FILTER uri %]" height="64" width="64" alt=""> + <span>[% caption || name FILTER html %]</span> + </a> + </h3> + [% IF p.description %] + <p>[% p.description FILTER html_light %]</p> + [% END %] + </section> [% LAST %] [% END %] [% END %] diff --git a/extensions/BMO/web/styles/choose_product.css b/extensions/BMO/web/styles/choose_product.css index 053af542f..bcca3428e 100644 --- a/extensions/BMO/web/styles/choose_product.css +++ b/extensions/BMO/web/styles/choose_product.css @@ -6,11 +6,81 @@ * defined by the Mozilla Public License, v. 2.0. */ #choose_product h2, -#choose_product p { - text-align: center; +#choose_product p, +#guided { + text-align: center; } #choose_product td h2, #choose_product td p { - text-align: left; + text-align: left; +} + +#product-list { + margin: 32px 0; +} + +#product-list .tile { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + margin: 0 auto; +} + +#product-list .tile .product { + overflow: hidden; + box-sizing: border-box; + margin: 16px 0; + padding: 0 16px 0 80px; +} + +#product-list .tile .product h3 { + margin: 0; + font-size: 150%; +} + +#product-list .tile .product img { + float: left; + margin: 0 0 0 -80px; +} + +#product-list .tile .product p { + margin: 4px 0 0; + line-height: 1.5; + text-align: left; +} + +#guided img { + vertical-align: text-bottom; +} + +@media screen and (min-width: 1024px) { + #product-list .tile { + width: 960px; + } + + #product-list .tile .product { + width: 50%; + } +} + +@media screen and (min-width: 768px) and (max-width: 1023px) { + #product-list .tile { + width: 720px; + } + + #product-list .tile .product { + width: 50%; + } +} + +@media screen and (max-width: 767px) { + #product-list .tile { + width: auto; + max-width: 480px; + } + + #product-list .tile .product { + width: 100%; + } } |