mirror of
https://we.phorge.it/source/phorge.git
synced 2024-09-20 09:18:48 +02:00
d7951bec56
Summary: Abstract out the multi-column code from workboards and have it be available separately. I feel like there will be some benefit here especially for custom developers in how they present infromation (like releeph). It also scales back to tablet and mobile fairly well, so they get those things for free. Test Plan: Tested mobile, tablet and chrome layouts. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5529
113 lines
2.6 KiB
CSS
113 lines
2.6 KiB
CSS
/**
|
|
* @provides aphront-multi-column-view-css
|
|
*/
|
|
|
|
.aphront-multi-column-view {
|
|
width: 100%;
|
|
}
|
|
|
|
.device-phone .aphront-multi-column-outer {
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-multi-column-column-outer {
|
|
float: left;
|
|
}
|
|
|
|
.aphront-multi-column-inner .aphront-multi-column-column-last,
|
|
.device-phone .aphront-multi-column-column {
|
|
margin: 0;
|
|
}
|
|
|
|
.device-phone .aphront-multi-column-outer
|
|
div.aphront-multi-column-column-outer {
|
|
width: 100%;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* math here is based on panel width and margins */
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-1-up {
|
|
width: 310px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-2-up {
|
|
width: 620px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-3-up {
|
|
width: 930px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-4-up {
|
|
width: 1008px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-5-up {
|
|
width: 1250px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed
|
|
.aphront-multi-column-inner.aphront-multi-column-6-up {
|
|
width: 1500px;
|
|
}
|
|
|
|
.device-phone .aphront-multi-column-fixed .aphront-multi-column-inner {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Panels require a fixed width to overflow well. */
|
|
.aphront-multi-column-fixed .aphront-multi-column-1-up
|
|
.aphront-multi-column-column-outer,
|
|
.aphront-multi-column-fixed .aphront-multi-column-2-up
|
|
.aphront-multi-column-column-outer,
|
|
.aphront-multi-column-fixed .aphront-multi-column-3-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 300px;
|
|
}
|
|
|
|
.aphront-multi-column-fixed .aphront-multi-column-4-up
|
|
.aphront-multi-column-column-outer,
|
|
.aphront-multi-column-fixed .aphront-multi-column-5-up
|
|
.aphront-multi-column-column-outer,
|
|
.aphront-multi-column-fixed .aphront-multi-column-6-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 240px;
|
|
}
|
|
|
|
/* fluid/flex styles */
|
|
.aphront-multi-column-fluid .aphront-multi-column-1-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 100%;
|
|
}
|
|
|
|
.aphront-multi-column-fluid .aphront-multi-column-2-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 50%;
|
|
}
|
|
|
|
.aphront-multi-column-fluid .aphront-multi-column-3-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 33.3333%;
|
|
}
|
|
|
|
.aphront-multi-column-fluid .aphront-multi-column-4-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 25%;
|
|
}
|
|
|
|
.aphront-multi-column-fluid .aphront-multi-column-5-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 20%;
|
|
}
|
|
|
|
.aphront-multi-column-fluid .aphront-multi-column-6-up
|
|
.aphront-multi-column-column-outer {
|
|
width: 16.6666%;
|
|
}
|