revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 23:32:40 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/aphront/multi-column.css

126 lines
2.9 KiB
CSS
Raw Normal View History

Build an AphrontMultiColumnView, use on workboards. 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
2013-04-02 20:23:24 +02:00
/**
* @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;
}
Add a 7th column to AphrontMultiColumnView Summary: Adds a 7th column, useful for fluid calendars. Test Plan: UIExamples Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T2898 Differential Revision: https://secure.phabricator.com/D5597
2013-04-06 16:23:59 +02:00
.aphront-multi-column-fixed
.aphront-multi-column-inner.aphront-multi-column-7-up {
width: 1750px;
}
Build an AphrontMultiColumnView, use on workboards. 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
2013-04-02 20:23:24 +02:00
.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
Add a 7th column to AphrontMultiColumnView Summary: Adds a 7th column, useful for fluid calendars. Test Plan: UIExamples Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T2898 Differential Revision: https://secure.phabricator.com/D5597
2013-04-06 16:23:59 +02:00
.aphront-multi-column-column-outer,
.aphront-multi-column-fixed .aphront-multi-column-7-up
Build an AphrontMultiColumnView, use on workboards. 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
2013-04-02 20:23:24 +02:00
.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%;
}
Add a 7th column to AphrontMultiColumnView Summary: Adds a 7th column, useful for fluid calendars. Test Plan: UIExamples Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Maniphest Tasks: T2898 Differential Revision: https://secure.phabricator.com/D5597
2013-04-06 16:23:59 +02:00
.aphront-multi-column-fluid .aphront-multi-column-7-up
.aphront-multi-column-column-outer {
width: 14.2857%;
}
Copy permalink