Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-26 12:20:56 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1852148 - Switch Open Tabs card layout to 2 columns on narrow viewports in Firefox View r=jsudiaman,desktop-theme-reviewers,fxview-reviewers,sfoster

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D188876
This commit is contained in:
Kelly Cochrane 2023-09-22 22:50:07 +00:00
parent 2699cc2873
commit ba0fca5c2e
2 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
browser/components/firefoxview/opentabs.mjs
View File

@ -149,6 +149,14 @@ class OpenTabsInView extends ViewPage {
"height-limited": this.windows.size > 3,
"width-limited": this.windows.size > 1,
});
let cardCount;
if (this.windows.size <= 1) {
cardCount = "one";
} else if (this.windows.size === 2) {
cardCount = "two";
} else {
cardCount = "three-or-more";
}
return html`
<link
rel="stylesheet"
@ -162,12 +170,8 @@ class OpenTabsInView extends ViewPage {
<h2 class="page-header" data-l10n-id="firefoxview-opentabs-header"></h2>
</div>
<div
class="${classMap({
"view-opentabs-card-container": true,
"one-column": this.windows.size <= 1,
"two-columns": this.windows.size === 2,
"three-columns": this.windows.size >= 3,
})} cards-container"
card-count=${cardCount}
class="view-opentabs-card-container cards-container"
>
${when(
currentWindowIndex && currentWindowTabs,

11
browser/components/firefoxview/view-opentabs.css
View File

@ -7,14 +7,19 @@
gap: 1em;
}
.one-column {
[card-count="one"] {
grid-template-columns: 1fr;
}
.two-columns {
[card-count="two"] {
grid-template-columns: repeat(2, 1fr);
}
.three-columns {
[card-count="three-or-more"] {
grid-template-columns: repeat(3, 1fr);
@media (max-width: 85rem) {
/* Switch to 2-column layout on narrow viewports */
grid-template-columns: repeat(2, 1fr);
}
}