summaryrefslogtreecommitdiffstats
path: root/extensions
diff options
context:
space:
mode:
Diffstat (limited to 'extensions')
-rw-r--r--extensions/BMO/template/en/default/global/choose-product.html.tmpl71
-rw-r--r--extensions/BMO/web/styles/choose_product.css76
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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
- [%- IF classification %]&amp;classification=[% classification FILTER uri %][% END -%]
- [%- IF format %]&amp;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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
- [%- IF classification %]&amp;classification=[% classification FILTER uri %][% END -%]
- [%- IF format %]&amp;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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
+ [%- IF classification %]&amp;classification=[% classification FILTER uri %][% END -%]
+ [%- IF format %]&amp;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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
- [%- IF format %]&amp;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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
- [%- IF format %]&amp;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 %]&amp;cloned_bug_id=[% cloned_bug_id FILTER uri %][% END -%]
+ [%- IF format %]&amp;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%;
+ }
}