Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5790)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/md_history/app.vulcanized.html

Issue 2318343004: MD History: Truncate long search terms in card title box (Closed)
Patch Set: truncate device name Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | chrome/browser/resources/md_history/history_item.html » ('j') | chrome/browser/resources/md_history/synced_device_card.html » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/md_history/app.vulcanized.html
diff --git a/chrome/browser/resources/md_history/app.vulcanized.html b/chrome/browser/resources/md_history/app.vulcanized.html
index 001182810d02bec71e7ecac9959cc4c9c9861a65..c9ffe590d263f5c70d7551e1aa130b6b5d755c48 100644
--- a/chrome/browser/resources/md_history/app.vulcanized.html
+++ b/chrome/browser/resources/md_history/app.vulcanized.html
@@ -2825,8 +2825,7 @@ h1 {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -2834,6 +2833,11 @@ h1 {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -2905,8 +2909,7 @@ button.more-vert-button div {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -2914,6 +2917,11 @@ button.more-vert-button div {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -3743,8 +3751,7 @@ paper-ripple {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -3752,6 +3759,11 @@ paper-ripple {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -3842,7 +3854,7 @@ button.more-vert-button div {
}
:host([is-card-start]) #date-accessed {
- display: flex;
+ display: block;
}
#item-container {
@@ -4006,8 +4018,7 @@ paper-checkbox {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4015,6 +4026,11 @@ paper-checkbox {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -4235,8 +4251,7 @@ history-item {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4244,6 +4259,11 @@ history-item {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -4335,8 +4355,7 @@ history-item {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4344,6 +4363,11 @@ history-item {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -4523,8 +4547,7 @@ dialog .body {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4532,6 +4555,11 @@ dialog .body {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -4608,10 +4636,21 @@ button.more-vert-button div {
padding: 8px 0;
}
+#title-text {
+ overflow: hidden;
+ padding-right: 3px;
+ text-overflow: ellipsis;
+}
+
#last-update-time {
color: var(--secondary-text-color);
}
+#left-content {
+ display: flex;
+ overflow: hidden;
+}
+
#right-buttons {
-webkit-margin-end: 4px;
}
@@ -4647,8 +4686,10 @@ button.more-vert-button div {
</style>
<div id="history-item-container">
<div class="card-title" id="card-heading" aria-expanded$="[[opened]]" aria-controls="collapse" on-tap="toggleTabCard">
- <div>
- [[device]]
+ <div id="left-content">
+ <div id="title-text">
+ [[device]]
+ </div>
<span id="last-update-time">[[lastUpdateTime]]</span>
</div>
<div id="right-buttons">
@@ -4688,8 +4729,7 @@ button.more-vert-button div {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4697,6 +4737,11 @@ button.more-vert-button div {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -4908,8 +4953,7 @@ paper-spinner {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -4917,6 +4961,11 @@ paper-spinner {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
@@ -5079,8 +5128,7 @@ iron-selector > a.iron-selected {
}
.card-title {
- -webkit-padding-start: 20px;
- align-items: center;
+ align-items: center;
border-bottom: 1px solid var(--card-border-color);
border-radius: 2px 2px 0 0;
color: var(--primary-text-color);
@@ -5088,6 +5136,11 @@ iron-selector > a.iron-selected {
font-size: 14px;
font-weight: 500;
height: 48px;
+ line-height: 48px;
+ overflow: hidden;
+ padding: 0 20px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.centered-message {
« no previous file with comments | « no previous file | chrome/browser/resources/md_history/history_item.html » ('j') | chrome/browser/resources/md_history/synced_device_card.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698