mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-30 02:32:42 +01:00
57f9450bcf
Summary: Ref T13552. The current layout doesn't work particularly well on desktops or devices. We have some device/desktop table layout code, but it isn't generic. We also have property list layout code, but it isn't generic either. Provide generic layout elements ("Fuel", from "Phabricator UI Layout" to "PHUIL"?) and narrowly specialize their display behavior. Then swap the ListItemView stuff to use it. Test Plan: Saw slightly better responsive behavior: {F7637457} Maniphest Tasks: T13552 Differential Revision: https://secure.phabricator.com/D21418
71 lines
1.4 KiB
CSS
71 lines
1.4 KiB
CSS
/**
|
|
* @provides fuel-map-css
|
|
*/
|
|
|
|
.device-desktop .fuel-map {
|
|
display: table;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
.device-desktop .fuel-map-items {
|
|
display: table-row-group;
|
|
}
|
|
|
|
.device-desktop .fuel-map-pair {
|
|
display: table-row;
|
|
}
|
|
|
|
.device-desktop .fuel-map-name,
|
|
.device-desktop .fuel-map-value {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.fuel-map-property-list {
|
|
margin: 4px;
|
|
}
|
|
|
|
.fuel-map-property-list > .fuel-map {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-name,
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-value {
|
|
padding: 2px 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-name {
|
|
color: {$bluetext};
|
|
}
|
|
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-value {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.device-desktop
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-name {
|
|
text-align: right;
|
|
min-width: 80px;
|
|
width: 80px;
|
|
}
|
|
|
|
.device-desktop
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-value {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.device
|
|
.fuel-map-property-list > .fuel-map > .fuel-map-items > .fuel-map-pair >
|
|
.fuel-map-value {
|
|
padding-left: 12px;
|
|
}
|