revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-10-23 17:18:51 +02:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/fuel/fuel-grid.css

32 lines
670 B
CSS
Raw Normal View History

Improve desktop and mobile layouts for new "CommitGridView" 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
2020-07-12 23:07:17 +02:00
/**
* @provides fuel-grid-css
*/
Improve commit action item layout on mobile Summary: Ref T13552. Build the "commit list" elements so that the menu action items collapse under the element on mobile. Also change the mobile breakpoint to 512px because my Safari window can't go any narrower than 508px. Future changes to responsive design will be more content-aware anyway. Test Plan: Looked at commits in various interfaces, at desktop and mobile widths. Maniphest Tasks: T13552 Differential Revision: https://secure.phabricator.com/D21430
2020-07-17 20:57:10 +02:00
.device-desktop .fuel-grid,
.device-tablet .fuel-grid-tablet > .fuel-grid {
Improve desktop and mobile layouts for new "CommitGridView" 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
2020-07-12 23:07:17 +02:00
display: table;
table-layout: fixed;
}
Improve commit action item layout on mobile Summary: Ref T13552. Build the "commit list" elements so that the menu action items collapse under the element on mobile. Also change the mobile breakpoint to 512px because my Safari window can't go any narrower than 508px. Future changes to responsive design will be more content-aware anyway. Test Plan: Looked at commits in various interfaces, at desktop and mobile widths. Maniphest Tasks: T13552 Differential Revision: https://secure.phabricator.com/D21430
2020-07-17 20:57:10 +02:00
.device-desktop .fuel-grid-body,
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body {
Improve desktop and mobile layouts for new "CommitGridView" 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
2020-07-12 23:07:17 +02:00
display: table-row-group;
}
Improve commit action item layout on mobile Summary: Ref T13552. Build the "commit list" elements so that the menu action items collapse under the element on mobile. Also change the mobile breakpoint to 512px because my Safari window can't go any narrower than 508px. Future changes to responsive design will be more content-aware anyway. Test Plan: Looked at commits in various interfaces, at desktop and mobile widths. Maniphest Tasks: T13552 Differential Revision: https://secure.phabricator.com/D21430
2020-07-17 20:57:10 +02:00
.device-desktop .fuel-grid-row,
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body >
.fuel-grid-row {
Improve desktop and mobile layouts for new "CommitGridView" 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
2020-07-12 23:07:17 +02:00
display: table-row;
}
Improve commit action item layout on mobile Summary: Ref T13552. Build the "commit list" elements so that the menu action items collapse under the element on mobile. Also change the mobile breakpoint to 512px because my Safari window can't go any narrower than 508px. Future changes to responsive design will be more content-aware anyway. Test Plan: Looked at commits in various interfaces, at desktop and mobile widths. Maniphest Tasks: T13552 Differential Revision: https://secure.phabricator.com/D21430
2020-07-17 20:57:10 +02:00
.device-desktop .fuel-grid-cell,
.device-tablet .fuel-grid-tablet > .fuel-grid > .fuel-grid-body >
.fuel-grid-row > .fuel-grid-cell {
Improve desktop and mobile layouts for new "CommitGridView" 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
2020-07-12 23:07:17 +02:00
display: table-cell;
vertical-align: top;
}
.fuel-grid-property-list > .fuel-grid {
width: 100%;
}
Copy permalink