mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-27 16:00:59 +01:00
35d03d36c7
Summary: See T372. Always render commit messages on one display line, so the table doesn't jump around as they AJAX in on browse views. The goal here is to have the cell choose a size naturally and for its content to render with "overflow: hidden" if the natural size isn't large enough to contain the content. "white-space: pre" or "white-space: nowrap" would prevent wrapping but potentially make the table exceed the display width when a better behavior is to hide some of the commit message. Also use utf8-aware shortening, now that we have a function for it. Casting a wide net in case anyone has a better way to do the CSS here. It's kind of nasty that we have to use so many DOM nodes. Test Plan: - Resized window while viewing browse and history views in Safari, Chrome and Firefox. Table exhibited described behavior. - Verified summaries render sensibly and are properly truncated to 100 characters. Reviewed By: aran Reviewers: aran, jungejason, tuomaspelkonen, tomo, mroch, cpojer CC: aran, epriestley Differential Revision: 750
108 lines
1.8 KiB
CSS
108 lines
1.8 KiB
CSS
/**
|
|
* @provides aphront-table-view-css
|
|
*/
|
|
|
|
.aphront-table-view {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: #fdfdfd;
|
|
border: 1px solid #003366;
|
|
}
|
|
|
|
.aphront-table-view tr.alt {
|
|
background: #efefef;
|
|
}
|
|
|
|
.aphront-table-view th {
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
padding: 4px 8px;
|
|
background: #003366;
|
|
color: white;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aphront-table-view td.header {
|
|
padding: 4px 8px;
|
|
background: #3b5998;
|
|
color: white;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
}
|
|
|
|
.aphront-table-view td {
|
|
vertical-align: top;
|
|
padding: 4px 8px;
|
|
font-size: 11px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aphront-table-view td.action {
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.aphront-table-view td.larger {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.aphront-table-view td.pri {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.aphront-table-view td.wide {
|
|
white-space: normal;
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-table-view td.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.aphront-table-view td.mono {
|
|
font-family: "Monaco", monospace;
|
|
font-size: 10px;
|
|
}
|
|
|
|
.aphront-table-view td.n {
|
|
font-family: "Monaco", monospace;
|
|
font-size: 10px;
|
|
text-align: right;
|
|
}
|
|
|
|
.aprhont-table-view td.wrap {
|
|
white-space: normal;
|
|
}
|
|
|
|
div.single-display-line-bounds {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
span.single-display-line-content {
|
|
white-space: pre;
|
|
position: absolute;
|
|
}
|
|
|
|
.aphront-table-view tr.highlighted {
|
|
background: #ffff99;
|
|
}
|
|
|
|
.aphront-table-view tr.alt-highlighted {
|
|
background: #f3f399;
|
|
}
|
|
|
|
|
|
.aphront-table-view tr.no-data td {
|
|
padding: 1em;
|
|
text-align: center;
|
|
color: #888888;
|
|
font-style: italic;
|
|
}
|
|
|
|
.aphront-table-view td.thumb img {
|
|
max-width: 64px;
|
|
max-height: 64px;
|
|
}
|
|
|