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

221 lines
5.2 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%;
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device .aphront-multi-column-outer {
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
padding: 0;
margin: 0 auto;
width: 100%;
}
.aphront-multi-column-inner .aphront-multi-column-column-last,
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device .aphront-multi-column-column {
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
margin: 0;
}
Make workboards truly 'fixed' in display Summary: **WIP** This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it. Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll. Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too! Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: qgil, epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9005
2014-05-08 23:21:32 +02:00
.device-desktop .phui-workboard-view-shadow .aphront-multi-column-inner
.aphront-multi-column-column-last {
margin-right: 8px;
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device .aphront-multi-column-outer
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
div.aphront-multi-column-column-outer {
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
width: auto;
Layout, spacing tweaks for new auth. Summary: Touches a lot of little spacing things here and there, stuck to 4px grid when possible, checked mobile views. Test Plan: Mobile, Logging In, Multiple Providers. Reviewers: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D6220
2013-06-18 07:02:16 +02:00
margin-bottom: 16px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device .aphront-multi-column-fixed .aphront-multi-column-inner {
width: 100%;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.aphront-multi-column-fixed .aphront-multi-column-column-outer {
Make workboards truly 'fixed' in display Summary: **WIP** This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it. Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll. Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too! Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: qgil, epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9005
2014-05-08 23:21:32 +02:00
width: 300px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
/* flexible, but with a minimum */
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-1-up {
min-width: 200px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-2-up {
min-width: 400px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-3-up {
min-width: 600px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-4-up {
min-width: 800px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-5-up {
min-width: 1000px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-6-up {
min-width: 1200px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device-desktop .aphront-multi-column-fluidish .aphront-multi-column-7-up {
min-width: 1400px;
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
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
/* table division */
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-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%;
}
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
/* Shadow Panels */
.aphront-multi-column-inner {
display: table;
width: 100%;
}
Make workboards truly 'fixed' in display Summary: **WIP** This sets a shadow fixed to the full screen of the browser for which panels to live in. I have some minor things to fix, but play with it. Specifically I haven't been able to dig up when stuff that overflowwed, doesn't always render even after scroll. Test Plan: Test on a board with many tasks, many panels, small screens. Test on mobile too! Reviewers: epriestley, btrahan Reviewed By: btrahan Subscribers: qgil, epriestley, Korvin Differential Revision: https://secure.phabricator.com/D9005
2014-05-08 23:21:32 +02:00
.device-desktop .aphront-multi-column-fixed .aphront-multi-column-inner {
margin: 0 0 12px 12px;
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
/* magic sauce */
.aphront-multi-column-fluid .aphront-multi-column-inner {
table-layout: fixed;
}
.device .aphront-multi-column-inner {
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
display: block;
width: auto;
}
.aphront-multi-column-column-outer {
display: table-cell;
height: 100%;
Fix a bit of the CSS on workboards Summary: Fixes the width and some other minor issues. Test Plan: Tested Mobile and Desktop Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7496
2013-11-05 00:50:43 +01:00
vertical-align: top;
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
}
Remove 'setShadow' from PHUIBoxView Summary: Removes setShadow, uses setBorder instead Test Plan: Tested multicolumn, feed, search box, many other areas. Things look less 3d. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D8192
2014-02-11 01:04:42 +01:00
.phui-box-border .aphront-multi-column-column-outer {
border-right: 1px solid {$lightblueborder};
padding-left: 8px;
padding-right: 8px;
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
}
Missed a class (multicolumn) Summary: re-grep Test Plan: View Multicolumn example, last row doesn't have line. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D8195
2014-02-11 16:47:09 +01:00
.phui-box-border .aphront-multi-colum-column-outer-last {
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
border: none;
}
Add Fluid-ish view to AphrontMultiColumnView Summary: Cleans up some CSS while adding lots of other... Mainly, this allow min-width "tables" that trigger a scroll-bar, but go full width if larger than min. Test Plan: Tested Workboard Examples and some Project pages, Chrome, Tablet and Mobile Layouts Reviewers: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D7509
2013-11-06 03:55:42 +01:00
.device .aphront-multi-column-column-outer {
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
display: block;
border: none;
}
Remove 'setShadow' from PHUIBoxView Summary: Removes setShadow, uses setBorder instead Test Plan: Tested multicolumn, feed, search box, many other areas. Things look less 3d. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D8192
2014-02-11 01:04:42 +01:00
.device .phui-box-border .aphront-multi-column-column-outer {
padding-bottom: 16px;
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
border-bottom: 1px solid #e7e7e7;
}
Remove 'setShadow' from PHUIBoxView Summary: Removes setShadow, uses setBorder instead Test Plan: Tested multicolumn, feed, search box, many other areas. Things look less 3d. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, epriestley, aran Differential Revision: https://secure.phabricator.com/D8192
2014-02-11 01:04:42 +01:00
.device .phui-box-border .aphront-multi-colum-column-outer-last {
Add Shadow Panels to PhabricatorMultiColumnView Summary: This adds the ability to have a multi-column full height container that is responsive based on PHUIBox's shadow box. Test Plan: Tested new examples in UIExamples and Workboards. Reviewers: epriestley, edward, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5996
2013-05-22 00:28:43 +02:00
border: none;
padding-bottom: 0;
}
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
Collapse Dashboards to single column when durable present and narrow Summary: Currently we punch down Dashboard columns on smaller displays. This adds another set of rules for if durable-column is present. Test Plan: Test breakpoints at 1300 and 1000 pixel wide. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7531 Differential Revision: https://secure.phabricator.com/D12056
2015-03-14 17:14:50 +01:00
/* Make Dashboards reasonably display on homepage narrow widths */
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
@media (max-width: 1000px) {
.device-desktop .dashboard-view .aphront-multi-column-inner {
display: block;
width: auto;
}
Revamp Projects with new navigation Summary: A refresh of Projects including a new navigations UI. - New Navigation UI. - Auto switch default page if Workboard has been initialized - Move Feed to it's own page - Increase 'tasks' on Project Home to 50 over 10 - Fix various display bugs on Workboards - Remove 'crumbs' from Project portal (unneeded). Test Plan: - clicked a link for a project with no workboard and saw the profile - clicked a link for a project with a workboard and saw the workboard - navigated around the various edit pages, inspecting links and making sure things linked back to the new profile uri {F266460} {F266461} {F266462} {F266463} {F266464} Reviewers: epriestley, btrahan Reviewed By: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11272
2015-01-12 19:04:01 +01:00
.device-desktop .dashboard-view .aphront-multi-column-column-outer {
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
display: block;
border: none;
}
Revamp Projects with new navigation Summary: A refresh of Projects including a new navigations UI. - New Navigation UI. - Auto switch default page if Workboard has been initialized - Move Feed to it's own page - Increase 'tasks' on Project Home to 50 over 10 - Fix various display bugs on Workboards - Remove 'crumbs' from Project portal (unneeded). Test Plan: - clicked a link for a project with no workboard and saw the profile - clicked a link for a project with a workboard and saw the workboard - navigated around the various edit pages, inspecting links and making sure things linked back to the new profile uri {F266460} {F266461} {F266462} {F266463} {F266464} Reviewers: epriestley, btrahan Reviewed By: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11272
2015-01-12 19:04:01 +01:00
.device-desktop .dashboard-view .aphront-multi-column-column.mlr {
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
margin: 0;
}
Revamp Projects with new navigation Summary: A refresh of Projects including a new navigations UI. - New Navigation UI. - Auto switch default page if Workboard has been initialized - Move Feed to it's own page - Increase 'tasks' on Project Home to 50 over 10 - Fix various display bugs on Workboards - Remove 'crumbs' from Project portal (unneeded). Test Plan: - clicked a link for a project with no workboard and saw the profile - clicked a link for a project with a workboard and saw the workboard - navigated around the various edit pages, inspecting links and making sure things linked back to the new profile uri {F266460} {F266461} {F266462} {F266463} {F266464} Reviewers: epriestley, btrahan Reviewed By: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11272
2015-01-12 19:04:01 +01:00
.device-desktop .dashboard-view .aphront-multi-column-fluid
.aphront-multi-column-2-up .aphront-multi-column-column-outer.half {
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
width: auto;
margin: 0 0 16px;
}
Revamp Projects with new navigation Summary: A refresh of Projects including a new navigations UI. - New Navigation UI. - Auto switch default page if Workboard has been initialized - Move Feed to it's own page - Increase 'tasks' on Project Home to 50 over 10 - Fix various display bugs on Workboards - Remove 'crumbs' from Project portal (unneeded). Test Plan: - clicked a link for a project with no workboard and saw the profile - clicked a link for a project with a workboard and saw the workboard - navigated around the various edit pages, inspecting links and making sure things linked back to the new profile uri {F266460} {F266461} {F266462} {F266463} {F266464} Reviewers: epriestley, btrahan Reviewed By: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11272
2015-01-12 19:04:01 +01:00
.device-desktop .dashboard-view .aphront-multi-column-fluid
.aphront-multi-column-2-up .aphront-multi-column-column-outer.thirds {
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
width: auto;
margin: 0 0 16px;
}
Revamp Projects with new navigation Summary: A refresh of Projects including a new navigations UI. - New Navigation UI. - Auto switch default page if Workboard has been initialized - Move Feed to it's own page - Increase 'tasks' on Project Home to 50 over 10 - Fix various display bugs on Workboards - Remove 'crumbs' from Project portal (unneeded). Test Plan: - clicked a link for a project with no workboard and saw the profile - clicked a link for a project with a workboard and saw the workboard - navigated around the various edit pages, inspecting links and making sure things linked back to the new profile uri {F266460} {F266461} {F266462} {F266463} {F266464} Reviewers: epriestley, btrahan Reviewed By: epriestley, btrahan Subscribers: Korvin, epriestley Differential Revision: https://secure.phabricator.com/D11272
2015-01-12 19:04:01 +01:00
.device-desktop .dashboard-view .aphront-multi-column-fluid
.aphront-multi-column-2-up .aphront-multi-column-column-outer.third {
Have home dashboards go to single column on narrow desktops Summary: Ref T6723. Because of the sidenav, some dashboard layouts may perform poorly on more narrow desktop displays. This provides an additional media query and CSS rules. Test Plan: Move viewport to 1001 px, see desktop, move to 999 pixels, see tablet-like display. {F248158} {F248159} {F248160} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T6723 Differential Revision: https://secure.phabricator.com/D10956
2014-12-10 17:51:09 +01:00
width: auto;
margin: 0 0 16px;
}
}
Collapse Dashboards to single column when durable present and narrow Summary: Currently we punch down Dashboard columns on smaller displays. This adds another set of rules for if durable-column is present. Test Plan: Test breakpoints at 1300 and 1000 pixel wide. Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7531 Differential Revision: https://secure.phabricator.com/D12056
2015-03-14 17:14:50 +01:00
/* Make Dashboards with Durable reasonably display on homepage narrow widths */
@media (max-width: 1300px) {
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-inner {
display: block;
width: auto;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-column-outer {
display: block;
border: none;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-column.mlr {
margin: 0;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.half {
width: auto;
margin: 0 0 16px;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.thirds {
width: auto;
margin: 0 0 16px;
}
.device-desktop.with-durable-column .dashboard-view
.aphront-multi-column-fluid .aphront-multi-column-2-up
.aphront-multi-column-column-outer.third {
width: auto;
margin: 0 0 16px;
}
}
Copy permalink