revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-23 15:22:41 +01:00
Code Issues Releases Wiki Activity
phorge-phorge/webroot/rsrc/css/phui/phui-two-column-view.css

338 lines
6.9 KiB
CSS
Raw Normal View History

Add similiar questions sidebar to Ponder Summary: Ref T9099. Testing out a two column layout in Ponder, with the main idea being creating a more browsable, discoverable product. I'd like the side column though to be a little smarter and provide project based searching. Ideally, if I'm reading Resolved Maniphest questions, other Resolved Maniphest questions are likely interesting. Another scenario is if I'm answering questions, in which case browsing more Open questions would also be interesting. Ponder "Main Column" still needs to be redesigned. Test Plan: Browse open questions, resolved questions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13849
2015-08-10 23:55:43 +02:00
/**
* @provides phui-two-column-view-css
*/
Switch fluid to fixed on PHUITwoColumnView Summary: We don't ever set fluid, since it already is fluid, also no CSS. Add an actual fixed version. Test Plan: For use in Instances. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18336
2017-08-04 04:52:35 +02:00
.phui-two-column-fixed {
max-width: 1140px;
margin: 0 auto;
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.phui-two-column-view .phui-two-column-header {
Add an Experimental Dark Mode to Phabricator Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
2017-07-17 20:08:17 +02:00
background-color: {$page.content};
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
border-bottom: 1px solid rgba({$alphagrey}, .12);
margin-bottom: 24px;
Redesign PonderQuestionView Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth. Test Plan: Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact. {F1120961} {F1120962} {F1120963} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15315
2016-02-23 16:23:58 +01:00
}
Update EditEngine pages to take a page header separate Summary: This simplifies EditEngine pages in general by removing the dual header, and extending to allow setting of a custom PHUIHeaderView if needed (like settings). Test Plan: Review all settings pages, review task, project pages. This should all be fine, but is a big change maybe some layouts I'm not considering. Tested these all mobile, destkop as well. {F5166181} Reviewers: epriestley Reviewed By: epriestley Spies: Korvin Differential Revision: https://secure.phabricator.com/D18527
2017-09-06 05:02:11 +02:00
.phui-two-column-view.without-header {
margin-top: 24px;
}
Update Maniphest for PHUITwoColumnView Summary: Reworks Maniphest into a two column view. Moves priority and color to header, assignee to sidebar. quest points to header, and author to gutter. may be some confusion since priority only displays on open tickets. Test Plan: with and without description, custom fields, points, tablet, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15396
2016-03-05 00:44:24 +01:00
.device .phui-two-column-view .phui-two-column-header {
margin-bottom: 12px;
}
Add a top level tab navigation option to PHUITwoColumnView Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages Test Plan: Tested at mobile, tablet, and desktop breakpoints {F5012429} {F5012430} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18148
2017-06-22 21:10:48 +02:00
.phui-two-column-view.with-tabs .phui-two-column-header,
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.phui-two-column-view.with-subheader .phui-two-column-header {
margin-bottom: 0;
}
.phui-two-column-header .phui-header-header {
font-size: 20px;
Add an Experimental Dark Mode to Phabricator Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
2017-07-17 20:08:17 +02:00
color: {$blacktext};
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
.device-phone .phui-two-column-header .phui-header-header {
Clean up mobile css on config page Summary: I seemed to have missed this, lots of funky desktop padding on mobile. Test Plan: Review Config / Maniphest / etc on a mobile browser. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16731
2016-10-20 00:01:41 +02:00
font-size: 16px;
Redesign PonderQuestionView Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth. Test Plan: Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact. {F1120961} {F1120962} {F1120963} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15315
2016-02-23 16:23:58 +01:00
}
.phui-two-column-view .phui-two-column-header .phui-header-shell {
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
padding: 24px 32px 28px;
border: none;
}
.phui-two-column-view .phui-two-column-header
.phui-profile-header.phui-header-shell {
padding-bottom: 20px;
}
.device .phui-two-column-view .phui-two-column-header .phui-header-shell {
padding: 12px 12px 16px;
}
.phui-two-column-header .phui-header-subheader {
margin-top: 12px;
Redesign PonderQuestionView Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth. Test Plan: Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact. {F1120961} {F1120962} {F1120963} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15315
2016-02-23 16:23:58 +01:00
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.phui-two-column-subheader {
padding: 12px 32px;
Redesign PonderQuestionView Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth. Test Plan: Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact. {F1120961} {F1120962} {F1120963} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15315
2016-02-23 16:23:58 +01:00
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-two-column-subheader {
padding: 12px 16px;
Redesign PonderQuestionView Summary: Full new UI, testing some upcoming treatments for consideration in other View controllers. Small tweaks to allow PHUITwoColumnView to have fixed and fluid width, and let TransactionCommentView go fullWidth. Test Plan: Tested a number of Ponder cases, New Question, with and without summary, with and without answers, with and without comments. Mobile, Tablet, and Desktop layouts. Verify Project and Profile UI's still in tact. {F1120961} {F1120962} {F1120963} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15315
2016-02-23 16:23:58 +01:00
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device-desktop .phui-two-column-content {
padding: 0 32px;
Add similiar questions sidebar to Ponder Summary: Ref T9099. Testing out a two column layout in Ponder, with the main idea being creating a more browsable, discoverable product. I'd like the side column though to be a little smarter and provide project based searching. Ideally, if I'm reading Resolved Maniphest questions, other Resolved Maniphest questions are likely interesting. Another scenario is if I'm answering questions, in which case browsing more Open questions would also be interesting. Ponder "Main Column" still needs to be redesigned. Test Plan: Browse open questions, resolved questions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13849
2015-08-10 23:55:43 +02:00
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-two-column-content {
padding: 0 12px;
Add similiar questions sidebar to Ponder Summary: Ref T9099. Testing out a two column layout in Ponder, with the main idea being creating a more browsable, discoverable product. I'd like the side column though to be a little smarter and provide project based searching. Ideally, if I'm reading Resolved Maniphest questions, other Resolved Maniphest questions are likely interesting. Another scenario is if I'm answering questions, in which case browsing more Open questions would also be interesting. Ponder "Main Column" still needs to be redesigned. Test Plan: Browse open questions, resolved questions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13849
2015-08-10 23:55:43 +02:00
}
.device-desktop .phui-two-column-view .phui-main-column {
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
float: left;
width: calc(100% - 320px);
Add similiar questions sidebar to Ponder Summary: Ref T9099. Testing out a two column layout in Ponder, with the main idea being creating a more browsable, discoverable product. I'd like the side column though to be a little smarter and provide project based searching. Ideally, if I'm reading Resolved Maniphest questions, other Resolved Maniphest questions are likely interesting. Another scenario is if I'm answering questions, in which case browsing more Open questions would also be interesting. Ponder "Main Column" still needs to be redesigned. Test Plan: Browse open questions, resolved questions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13849
2015-08-10 23:55:43 +02:00
}
.device-desktop .phui-two-column-view .phui-side-column {
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
float: right;
width: 300px;
}
Make PHUITwoColumnView a little more printable Summary: Hide navbar, and make curtain behave like on a phone, when printing. Test Plan: {F5197340} Reviewers: epriestley, #blessed_reviewers Reviewed By: epriestley, #blessed_reviewers Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18583
2017-09-25 21:56:22 +02:00
!print .phui-two-column-view .phui-main-column {
float: unset;
width: unset;
margin-bottom: 20px;
}
!print .phui-two-column-view .phui-side-column {
float: unset;
width: unset;
margin-bottom: 20px;
}
!print .device-desktop .phui-two-column-view .phui-main-column {
float: unset;
width: unset;
margin-bottom: 20px;
}
!print .device-desktop .phui-two-column-view .phui-side-column {
float: unset;
width: unset;
margin-bottom: 20px;
}
Update Settings/Config UI Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall. Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15659
2016-04-09 00:00:38 +02:00
.device-desktop .phui-two-column-view.phui-side-column-left .phui-main-column {
float: right;
width: calc(100% - 280px);
}
.device-desktop .phui-two-column-view.phui-side-column-left .phui-side-column {
float: left;
width: 260px;
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-side-column {
margin-bottom: 20px;
}
.phui-two-column-view .phui-two-column-content
.phui-object-box {
margin: 0 0 20px 0;
}
/* Timeline */
.phui-two-column-view .phui-timeline-view {
padding: 0;
Polish up timeline for PHIUTwoColumnView Summary: This inverts colors and icons a bit, so they're not as harsh. So instead of a dark green item with white icon, its now light green with a dark green icon. I've also changed all text and comment boxes to be "grey" visually to separate out the UI from converation/actions. Give it a spin and let me know how this feels. I still need to update the comment UI. Test Plan: UIExamples, lots of various tasks and diffs. {F1163837} {F1163839} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15442
2016-03-09 02:50:01 +01:00
background-position: 80px;
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
.phui-two-column-view .phui-main-column .phui-object-box + .phui-timeline-view {
margin-top: -20px;
}
.device .phui-two-column-view .phui-timeline-view {
background-position: 16px;
padding: 0;
}
.device-phone .phui-two-column-view .phui-timeline-event-view {
margin: 0;
}
Expand scope of addActionItem in PHUIHeaderView Summary: Gives a bit more flexibility to add anything to the right side of PHUIHeaderView. Test Plan: Test Maniphest, Workboards, Project Home, Differential. Grep for `addActionIcon` use. Fixes T10518 Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10518 Differential Revision: https://secure.phabricator.com/D15402
2016-03-05 03:34:37 +01:00
.phui-main-column > .phui-timeline-view:first-child {
Update Maniphest for PHUITwoColumnView Summary: Reworks Maniphest into a two column view. Moves priority and color to header, assignee to sidebar. quest points to header, and author to gutter. may be some confusion since priority only displays on open tickets. Test Plan: with and without description, custom fields, points, tablet, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15396
2016-03-05 00:44:24 +01:00
border-top: 1px solid {$thinblueborder};
}
Polish up timeline for PHIUTwoColumnView Summary: This inverts colors and icons a bit, so they're not as harsh. So instead of a dark green item with white icon, its now light green with a dark green icon. I've also changed all text and comment boxes to be "grey" visually to separate out the UI from converation/actions. Give it a spin and let me know how this feels. I still need to update the comment UI. Test Plan: UIExamples, lots of various tasks and diffs. {F1163837} {F1163839} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15442
2016-03-09 02:50:01 +01:00
.device-phone .phui-main-column .phui-timeline-older-transactions-are-hidden {
margin: 0;
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
/* Main Column Properties */
.device-desktop .phui-main-column .phui-property-list-key {
margin-left: 0;
Widen property list key value Summary: Ref T12180. Seems we widened the value side, but not the key. Test Plan: Review application property page. Set item to stacked, see non-cutoff layout. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12180 Differential Revision: https://secure.phabricator.com/D17302
2017-02-02 22:27:01 +01:00
width: 180px;
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
.device-desktop .phui-main-column .phui-property-list-value {
margin-left: 8px;
Update Diffusion UI Summary: This updates (all?) of Diffusion/Audit to new UI, included edit and other extra form pages. It's fairly complete but I don't know all the nooks and crannies so to speak to fully verify I didn't mess anything up. Test Plan: Tested creating new repositories, browsing, searching, auditing. Need more eyes. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15487
2016-03-17 20:01:22 +01:00
width: calc(100% - 200px);
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
/* Property / Action List */
.phui-two-column-properties .phabricator-action-list-view {
padding-top: 4px;
Update Almanac for PHUITwoColumnView Summary: Updates Almanac to the new layout, adds some header icons for interest. Test Plan: Click on all the different almanac pages. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15381
2016-03-02 17:45:53 +01:00
padding-bottom: 12px;
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
.device-desktop .phui-two-column-view .phui-property-list-container {
Update Diffusion UI Summary: This updates (all?) of Diffusion/Audit to new UI, included edit and other extra form pages. It's fairly complete but I don't know all the nooks and crannies so to speak to fully verify I didn't mess anything up. Test Plan: Tested creating new repositories, browsing, searching, auditing. Need more eyes. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15487
2016-03-17 20:01:22 +01:00
padding: 16px 0;
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
}
Couple of Diffusion tweaks Summary: - Fix spacing on InfoView inside collasped boxes - Fix spacing on stacked PropertyLists in TwoColumn - Fix spacing on Readmes on Tablets - Fix unset variable on importing commits Test Plan: Review each of the above cases. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15496
2016-03-18 20:01:15 +01:00
.device-desktop .phui-two-column-view
.phui-property-list-properties-wrap.phui-property-list-stacked {
padding: 0 16px;
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-two-column-view .phui-property-list-container {
padding: 12px 8px;
}
Update Diffusion UI Summary: This updates (all?) of Diffusion/Audit to new UI, included edit and other extra form pages. It's fairly complete but I don't know all the nooks and crannies so to speak to fully verify I didn't mess anything up. Test Plan: Tested creating new repositories, browsing, searching, auditing. Need more eyes. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15487
2016-03-17 20:01:22 +01:00
.phui-two-column-view .phui-property-list-container
.keyboard-shortcuts-available {
display: none;
}
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-two-column-content .phui-two-column-properties.phui-object-box {
padding: 0 12px;
}
.phui-two-column-view .phui-property-list-section-header,
.phui-two-column-view .phui-property-list-text-content {
margin: 0 16px;
Add similiar questions sidebar to Ponder Summary: Ref T9099. Testing out a two column layout in Ponder, with the main idea being creating a more browsable, discoverable product. I'd like the side column though to be a little smarter and provide project based searching. Ideally, if I'm reading Resolved Maniphest questions, other Resolved Maniphest questions are likely interesting. Another scenario is if I'm answering questions, in which case browsing more Open questions would also be interesting. Ponder "Main Column" still needs to be redesigned. Test Plan: Browse open questions, resolved questions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9099 Differential Revision: https://secure.phabricator.com/D13849
2015-08-10 23:55:43 +02:00
}
Fix pre-wrap in two-column-view Summary: Fixes T9154, tables have special needs with widths and pres Test Plan: Test a long piece of code in a Ponder question Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9154 Differential Revision: https://secure.phabricator.com/D13904
2015-08-17 02:50:11 +02:00
Solidify PHUITwoColumnView as a page layout Summary: Rolls out a new "Object Page" design with PHUITwoColumnView. This is reasonably polished, but wanted to post it up for you now for feedback before chasing down minor bugs. This implements TwoColumn in the following applications: - Ponder - Paste - Slowvote - Countdown - Projects - Profile - Passphrase This helped track down display issues and inconsistencies and make sure the layout was flexible for different pages. Test Plan: Test each of the applications on mobile, tablet, and desktop breakpoints. {F1135705} {F1135706} {F1135707} {F1135708} {F1135709} {F1135710} {F1135711} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15366
2016-02-26 23:34:51 +01:00
.device .phui-two-column-view .phui-property-list-section-header,
.device .phui-two-column-view .phui-property-list-text-content {
margin: 0 8px;
Fix pre-wrap in two-column-view Summary: Fixes T9154, tables have special needs with widths and pres Test Plan: Test a long piece of code in a Ponder question Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T9154 Differential Revision: https://secure.phabricator.com/D13904
2015-08-17 02:50:11 +02:00
}
Update Almanac for PHUITwoColumnView Summary: Updates Almanac to the new layout, adds some header icons for interest. Test Plan: Click on all the different almanac pages. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15381
2016-03-02 17:45:53 +01:00
Add a top level tab navigation option to PHUITwoColumnView Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages Test Plan: Tested at mobile, tablet, and desktop breakpoints {F5012429} {F5012430} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18148
2017-06-22 21:10:48 +02:00
.phui-two-column-tabs {
padding: 0 32px;
margin-bottom: 32px;
Add an Experimental Dark Mode to Phabricator Summary: Mostly this is an exercise to clean up our CSS and Celerity processor by making sure all important color decisions are generatable. It's somewhat resonable to use if you don't review code. Posting it up here mostly so I don't lose the work. Test Plan: Visit lots and lots of pages with dark mode on and off. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18227
2017-07-17 20:08:17 +02:00
background: {$page.content};
Add a top level tab navigation option to PHUITwoColumnView Summary: Builds out a responsive tab bar system for PHUITwoColumnView pages Test Plan: Tested at mobile, tablet, and desktop breakpoints {F5012429} {F5012430} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18148
2017-06-22 21:10:48 +02:00
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2);
}
.device-phone .phui-two-column-tabs {
padding: 0 12px;
}
Add pattern search to diffusion home Summary: Moves the method up to DiffusionController, so it can be more universally used. Also now center aligns tabs on mobile. Still todo, get search nicely toggled on mobile Test Plan: Test mobile, desktop. Test search from home, from browse, and browsing a specific path. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18432
2017-08-15 23:14:08 +02:00
.device-phone .phui-two-column-tabs .phui-list-view.phui-list-tabbar {
text-align: center;
}
.device-phone .phui-two-column-tabs .phui-list-view.phui-list-tabbar > li {
float: none;
display: inline-block;
}
Update Almanac for PHUITwoColumnView Summary: Updates Almanac to the new layout, adds some header icons for interest. Test Plan: Click on all the different almanac pages. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15381
2016-03-02 17:45:53 +01:00
/* Info View */
Update EditEngine for two column Summary: Cleans up EditEngine, adds new layout to EditEngine and descendents Test Plan: Test creating a new form, reordering, marking and unmarking defaults. View new forms. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15531
2016-03-28 18:05:22 +02:00
.phui-two-column-view .phui-info-view {
Update Almanac for PHUITwoColumnView Summary: Updates Almanac to the new layout, adds some header icons for interest. Test Plan: Click on all the different almanac pages. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15381
2016-03-02 17:45:53 +01:00
margin: 0 0 20px 0;
Update Badges for PHUITwoColumnView Summary: Updates the layout to two column, moves "Add Receipients" to dialog. Ref T10318 Test Plan: Give badges, revoke badges. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T10318 Differential Revision: https://secure.phabricator.com/D15382
2016-03-02 20:05:26 +01:00
padding: 16px;
}
Clean up mobile spacing on info views in a column Summary: When we have an info view in a column, the css isn't specific enough to override the core info-view css. Test Plan: Review an importing repository, see info view properly spaced. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16331
2016-07-26 21:49:12 +02:00
.device .phui-two-column-view .phui-info-view {
margin: 0 0 20px 0;
padding: 12px;
}
Redesign header menus and search Summary: Still lots to fix here, punting up since I'm running into a few roadblocks. TODO: [] Sort Personal/Global correctly [] Quicksand in Help Items correctly on page changes Test Plan: Verify new menus work on desktop, tablet, mobile. Test logged in menus, logged out menus. Logging out via a menu, verify each link works as expected. Help menus get build when using an app like Maniphest, Differential. Check that search works, preferences still save. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Maniphest Tasks: T12107 Differential Revision: https://secure.phabricator.com/D17209
2017-01-17 21:04:28 +01:00
.phui-two-column-view .phui-oi-empty .phui-info-view {
margin: 0;
}
Reorganize phui-object-item CSS, add drag ui Summary: Reorgaizes the CSS here a bit, by object list style, adds in a new drag ui class, which will be used in menu ordering. Test Plan: Workboards, Home Apps. {F2126266} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17057
2016-12-14 20:35:51 +01:00
.phui-two-column-view .phui-side-column .phui-oi-empty
Fix margin on blank members boxes on projects Summary: Possible side effect of fixing other info views yesterday. Removes bottom margin on empty member boxes. Test Plan: Review various projects with and without members. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16002
2016-06-01 22:19:21 +02:00
.phui-info-view {
margin-bottom: 0;
}
Update Phortune for two column, spruce up UI Summary: Moves everything I could find in Phortune to new UI layouts. Test Plan: Tested every page I could get two, unclear how to test subscriptions. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15513
2016-03-23 19:03:30 +01:00
.phui-two-column-view .phui-box-blue-property
.phui-header-shell + .phui-info-view {
margin: 16px;
}
Update Settings/Config UI Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall. Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15659
2016-04-09 00:00:38 +02:00
Clean up spacing on mobile form instructions Summary: This padding is a little off / custom. Normalizes it to the form on mobile. Test Plan: Review some settings forms, save form changes. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D16330
2016-07-26 21:32:56 +02:00
.device .phui-two-column-view .phui-box-blue-property
.phui-header-shell + .phui-info-view {
margin: 8px;
}
Update Settings/Config UI Summary: Testing out a new 'nav' layout in Settings / Config. Spent a few days here and couldn't find much better overall. Test Plan: View each page in Settings and in Config. Save some config options. Test mobile, desktop, tablet. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15659
2016-04-09 00:00:38 +02:00
/* Navigation */
.phui-two-column-view .side-has-nav .phabricator-nav-local {
width: auto;
position: static;
margin: 0;
}
.device .phui-two-column-view .side-has-nav {
display: none;
}
/* Document View */
.phui-two-column-view .phui-two-column-content .phui-document-fluid
.phui-document-view {
margin: 0 0 20px 0;
}
Update Settings to use TwoColumn fixed layout Summary: Simplifies the page, adds base support for PHUITwoColumn fixed from Instances (which I'll delete css there). Test Plan: click on every settings page, UI seems in tact, check mobile, desktop, mobile menus. {F5102572} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18436
2017-08-17 05:12:19 +02:00
/*- Fixed Styles with Navigation -------------------------------------------- */
.phui-two-column-fixed.phui-two-column-view .phui-two-column-header {
background: transparent;
border: none;
margin-bottom: 0;
}
.phui-two-column-fixed.phui-two-column-view .phui-side-column
.phui-box-border {
background: transparent;
border: none;
padding: 0;
width: 180px;
}
.device-desktop
.phui-two-column-fixed.phui-two-column-view.phui-side-column-left
.phui-side-column {
width: 200px;
}
.device-desktop
.phui-two-column-fixed.phui-two-column-view.phui-side-column-left
.phui-main-column {
width: calc(100% - 200px)
}
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
.phabricator-side-menu {
background: transparent;
}
.phui-two-column-fixed.phui-two-column-view
.phui-basic-nav .phabricator-side-menu .phui-list-item-selected {
border-radius: 3px;
Align sidenavs better, use sky to highlight Summary: Simplifies the UI here by removing various borders, instead using just background colors and better alignment. Test Plan: Test instances, settings, home, projects, workboards. Reviewers: epriestley Reviewed By: epriestley Spies: Korvin Differential Revision: https://secure.phabricator.com/D18488
2017-08-29 01:07:22 +02:00
background-color: {$sky};
Update Settings to use TwoColumn fixed layout Summary: Simplifies the page, adds base support for PHUITwoColumn fixed from Instances (which I'll delete css there). Test Plan: click on every settings page, UI seems in tact, check mobile, desktop, mobile menus. {F5102572} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18436
2017-08-17 05:12:19 +02:00
}
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
.phabricator-side-menu .phui-list-item-href {
border-radius: 3px;
}
Align sidenavs better, use sky to highlight Summary: Simplifies the UI here by removing various borders, instead using just background colors and better alignment. Test Plan: Test instances, settings, home, projects, workboards. Reviewers: epriestley Reviewed By: epriestley Spies: Korvin Differential Revision: https://secure.phabricator.com/D18488
2017-08-29 01:07:22 +02:00
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
.phabricator-side-menu .phui-list-item-selected a {
color: #fff;
}
.phui-two-column-fixed.phui-two-column-view .phui-basic-nav
.phabricator-side-menu .phui-list-item-selected a .phui-icon-view {
color: #fff;
}
Update Settings to use TwoColumn fixed layout Summary: Simplifies the page, adds base support for PHUITwoColumn fixed from Instances (which I'll delete css there). Test Plan: click on every settings page, UI seems in tact, check mobile, desktop, mobile menus. {F5102572} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18436
2017-08-17 05:12:19 +02:00
.phui-two-column-fixed.phui-two-column-view .phui-header-action-links
.phui-mobile-menu {
display: block;
}
Make PHUITwoColumnView a little more printable Summary: Hide navbar, and make curtain behave like on a phone, when printing. Test Plan: {F5197340} Reviewers: epriestley, #blessed_reviewers Reviewed By: epriestley, #blessed_reviewers Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D18583
2017-09-25 21:56:22 +02:00
!print .phabricator-side-menu {
display: none !important;
}
Copy permalink