mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-30 10:42:41 +01:00
a4784e03ff
Summary: Converts most all tables to be directly set via `setTable` to an ObjectBox. I think this path is more flexible design wise, as we can change the box based on children, and not just CSS. We also already do this with PropertyList, Forms, ObjectList, and Header. `setCollapsed` is added to ObjectBox to all children objects to bleed to the edges (like diffs). Test Plan: I did a grep of `appendChild($table)` as well as searches for `PHUIObjectBoxView`, also with manual opening of hundreds of files. I'm sure I missed 5-8 places. If you just appendChild($table) nothing breaks, it just looks a little funny. Reviewers: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D12955
278 lines
5 KiB
CSS
278 lines
5 KiB
CSS
/**
|
|
* @provides aphront-table-view-css
|
|
*/
|
|
|
|
.device-phone .aphront-table-wrap,
|
|
.device-tablet .aphront-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.aphront-table-view {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: #fff;
|
|
border: 1px solid {$lightblueborder};
|
|
border-bottom: 1px solid {$blueborder};
|
|
}
|
|
|
|
.aphront-table-view tr.alt {
|
|
background: {$lightgreybackground};
|
|
}
|
|
|
|
.aphront-table-view th {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
color: {$bluetext};
|
|
text-shadow: 0 1px 0 white;
|
|
font-weight: bold;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
background-color: {$lightbluebackground};
|
|
}
|
|
|
|
th.aphront-table-view-sortable-selected {
|
|
background-color: {$greybackground};
|
|
}
|
|
|
|
.aphront-table-view th a,
|
|
.aphront-table-view th a:hover,
|
|
.aphront-table-view th a:link {
|
|
color: {$bluetext};
|
|
text-shadow: 0 1px 0 white;
|
|
display: block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.aphront-table-view th a:hover {
|
|
text-decoration: underline;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.aphront-table-view td.header {
|
|
padding: 4px 8px;
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
color: {$bluetext};
|
|
font-weight: bold;
|
|
}
|
|
|
|
.aphront-table-view td {
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.aphront-table-down-sort {
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
width: 0;
|
|
height: 0;
|
|
vertical-align: top;
|
|
border-top: 4px solid {$bluetext};
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent;
|
|
content: "";
|
|
}
|
|
|
|
.aphront-table-up-sort {
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
width: 0;
|
|
height: 0;
|
|
vertical-align: top;
|
|
border-bottom: 4px solid {$bluetext};
|
|
border-right: 4px solid transparent;
|
|
border-left: 4px solid transparent;
|
|
content: "";
|
|
}
|
|
|
|
/* - Padding -------------------------------------------------------------------
|
|
|
|
On desktops, we have more horizontal space and use it to space columns out.
|
|
|
|
On devices, we make each row slightly taller to create a larger hit target
|
|
for links.
|
|
|
|
*/
|
|
|
|
.aphront-table-view th {
|
|
padding: 10px 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.aphront-table-view td {
|
|
padding: 8px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.device-tablet .aphront-table-view td,
|
|
.device-phone .aphront-table-view td {
|
|
padding: 6px;
|
|
}
|
|
|
|
.device-tablet .aphront-table-view td + td,
|
|
.device-phone .aphront-table-view td + td {
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.device-tablet .aphront-table-view th,
|
|
.device-phone .aphront-table-view th {
|
|
padding: 6px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.device-tablet .aphront-table-view th + th,
|
|
.device-phone .aphront-table-view th + th {
|
|
padding-left: 0px;
|
|
}
|
|
|
|
.aphront-table-view td.sorted-column {
|
|
background: {$lightbluebackground};
|
|
}
|
|
|
|
.aphront-table-view tr.alt td.sorted-column {
|
|
background: {$greybackground};
|
|
}
|
|
|
|
.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;
|
|
color: {$darkbluetext};
|
|
}
|
|
|
|
.aphront-table-view td.wide {
|
|
white-space: normal;
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-table-view th.right,
|
|
.aphront-table-view td.right {
|
|
text-align: right;
|
|
}
|
|
|
|
.aphront-table-view td.mono {
|
|
font-family: "Monaco", monospace;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.aphront-table-view td.n {
|
|
font-family: "Monaco", monospace;
|
|
font-size: 11px;
|
|
text-align: right;
|
|
}
|
|
|
|
.aphront-table-view td.wrap {
|
|
white-space: normal;
|
|
}
|
|
|
|
.aphront-table-view td.prewrap {
|
|
font-family: "Monaco", monospace;
|
|
font-size: 11px;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
.aphront-table-view td.narrow {
|
|
width: 1px;
|
|
}
|
|
|
|
.aphront-table-view td.icon, .aphront-table-view th.icon {
|
|
width: 1px;
|
|
padding: 0px;
|
|
}
|
|
|
|
div.single-display-line-bounds {
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
span.single-display-line-content {
|
|
white-space: pre;
|
|
position: absolute;
|
|
}
|
|
|
|
.device-phone span.single-display-line-content {
|
|
white-space: nowrap;
|
|
position: static;
|
|
}
|
|
|
|
.aphront-table-view tr.highlighted {
|
|
background: #fdf9e4;
|
|
}
|
|
|
|
.aphront-table-view tr.alt-highlighted {
|
|
background: {$sh-yellowbackground};
|
|
}
|
|
|
|
.aphront-table-view tr.no-data td {
|
|
padding: 12px;
|
|
text-align: center;
|
|
color: {$lightgreytext};
|
|
font-style: italic;
|
|
}
|
|
|
|
.aphront-table-view td.thumb img {
|
|
max-width: 64px;
|
|
max-height: 64px;
|
|
}
|
|
|
|
.aphront-table-view td.threads {
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
padding: 0 0 0 8px;
|
|
}
|
|
|
|
.aphront-table-view td.threads canvas {
|
|
display: block;
|
|
}
|
|
|
|
.aphront-table-view td.radio {
|
|
text-align: center;
|
|
padding: 2px 4px 0px;
|
|
}
|
|
|
|
.aphront-table-view th.center,
|
|
.aphront-table-view td.center {
|
|
text-align: center;
|
|
}
|
|
|
|
.device .aphront-table-view td + td.center,
|
|
.device .aphront-table-view th + th.center {
|
|
padding-left: 3px;
|
|
padding-right: 3px;
|
|
}
|
|
|
|
.device-desktop .aphront-table-view-device {
|
|
display: none;
|
|
}
|
|
|
|
.device-tablet .aphront-table-view-nodevice,
|
|
.device-phone .aphront-table-view-nodevice {
|
|
display: none;
|
|
}
|
|
|
|
.aphront-table-view-device-ready {
|
|
width: 99%;
|
|
margin: 8px auto;
|
|
}
|
|
|
|
.aphront-table-view td.link {
|
|
padding: 0;
|
|
}
|
|
|
|
.aphront-table-view td.link a {
|
|
display: block;
|
|
padding: 6px 8px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.phui-object-box .aphront-table-view {
|
|
border: none;
|
|
}
|