Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-02-17 06:09:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1433530 - revealing truncated text of shortcut tiles on hover and focus states. r=home-newtab-reviewers,nbarrett

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D228267
This commit is contained in:
Reem H 2024-11-21 01:50:56 +00:00
parent 82124d60a7
commit 3c89951723
4 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
browser/components/newtab/content-src/components/TopSites/TopSite.jsx
View File

@ -395,6 +395,7 @@ export class TopSiteLink extends React.PureComponent {
{link.isPinned && <div className="icon icon-pin-small" />}
{title || <br />}
</span>
<br />
<span
className="sponsored-label"
data-l10n-id="newtab-topsite-sponsored"

54
browser/components/newtab/content-src/components/TopSites/_TopSites.scss
View File

@ -12,11 +12,18 @@ $default-icon-offset: 6px;
$half-base-gutter: math.div($base-gutter, 2);
$hover-transition-duration: 150ms;
$letter-fallback-color: $white;
$calculated-max-width-medium: $break-point-medium + $card-width;
$calculated-max-width-large: $break-point-large + $card-width;
$calculated-max-width-twice-large: $break-point-large + 2 * $card-width;
$calculated-max-width-widest: $break-point-widest + $card-width;
$calculated-max-width-twice-widest: $break-point-widest + 2 * $card-width;
.top-sites-list {
list-style: none;
margin: 0 (-$half-base-gutter);
padding: 0;
display: flex;
flex-wrap: wrap;
.layout-variant-a &,
.layout-variant-b & {
@ -72,33 +79,33 @@ $letter-fallback-color: $white;
}
}
@media (min-width: $break-point-medium) and (max-width: $break-point-medium + $card-width) {
@media (min-width: $break-point-medium) and (max-width: $calculated-max-width-medium) {
:nth-child(4n+3) {
@include context-menu-open-left;
}
}
// Six columns
@media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {
@media (min-width: $break-point-large) and (max-width: $calculated-max-width-twice-large) {
:nth-child(6n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-large) and (max-width: $break-point-large + $card-width) {
@media (min-width: $break-point-large) and (max-width: $calculated-max-width-large) {
:nth-child(6n+5) {
@include context-menu-open-left;
}
}
// Eight columns
@media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {
@media (min-width: $break-point-widest) and (max-width: $calculated-max-width-twice-widest) {
:nth-child(8n) {
@include context-menu-open-left;
}
}
@media (min-width: $break-point-widest) and (max-width: $break-point-widest + $card-width) {
@media (min-width: $break-point-widest) and (max-width: $calculated-max-width-widest) {
:nth-child(8n+7) {
@include context-menu-open-left;
}
@ -356,13 +363,6 @@ $letter-fallback-color: $white;
fill: currentColor;
}
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sponsored-label {
color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
@ -702,6 +702,36 @@ $letter-fallback-color: $white;
}
}
.top-sites-list {
.top-site-outer {
.top-site-button {
display: flex;
flex-direction: column;
}
span[dir='auto'] {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 20px;
margin-bottom: -19px;
}
&:hover,
&:focus-within {
span[dir='auto'] {
overflow: unset;
text-overflow: normal;
white-space: normal;
text-wrap: wrap;
contain: size;
word-break: break-all;
}
}
}
}
// used for tooltips below form element
@keyframes fade-up-tt {
0% {

29
browser/components/newtab/css/activity-stream.css
View File

@ -753,6 +753,8 @@ main section {
list-style: none;
margin: 0 -16px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
.layout-variant-a .top-sites-list, .layout-variant-b .top-sites-list {
display: grid;
@ -1052,12 +1054,6 @@ main section {
margin-inline-end: 2px;
fill: currentColor;
}
.top-site-outer .title span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.top-site-outer .title .sponsored-label {
color: var(--newtab-contextual-text-secondary-color);
font-size: 0.9em;
@ -1320,6 +1316,27 @@ main section {
border: 1px dotted var(--newtab-primary-action-background);
}
.top-sites-list .top-site-outer .top-site-button {
display: flex;
flex-direction: column;
}
.top-sites-list .top-site-outer span[dir=auto] {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-height: 20px;
margin-bottom: -19px;
}
.top-sites-list .top-site-outer:hover span[dir=auto], .top-sites-list .top-site-outer:focus-within span[dir=auto] {
overflow: unset;
text-overflow: normal;
white-space: normal;
text-wrap: wrap;
contain: size;
word-break: break-all;
}
@keyframes fade-up-tt {
0% {
opacity: 0;

2
browser/components/newtab/data/content/activity-stream.bundle.js
View File

@ -7787,7 +7787,7 @@ class TopSiteLink extends (external_React_default()).PureComponent {
...addButtonl10n
}), link.isPinned && /*#__PURE__*/external_React_default().createElement("div", {
className: "icon icon-pin-small"
}), title || /*#__PURE__*/external_React_default().createElement("br", null)), /*#__PURE__*/external_React_default().createElement("span", {
}), title || /*#__PURE__*/external_React_default().createElement("br", null)), /*#__PURE__*/external_React_default().createElement("br", null), /*#__PURE__*/external_React_default().createElement("span", {
className: "sponsored-label",
"data-l10n-id": "newtab-topsite-sponsored"
}))), children, impressionStats));