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-box.css

88 lines
1.7 KiB
CSS
Raw Normal View History

PHUIBoxView Summary: Adds a basic div box that takes some styles. Not sure this is the best approach for the spacing, but overall hoping people can spend less time in CSS and just use this class. Test Plan: UIExamples Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin, AnhNhan Differential Revision: https://secure.phabricator.com/D5723
2013-04-18 20:34:02 +02:00
/**
* @provides phui-box-css
*/
Update Form Layouts Summary: This attempts some consistency in form layouts. Notably, they all now contain headers and are 16px off the sides and tops of pages. Also updated dialogs to the same look and feel. I think I got 98% of forms with this pass, but it's likely I missed some buried somewhere. TODO: will take another pass as consolidating these colors and new gradients in another diff. Test Plan: Played in my sandbox all week. Please play with it too and let me know how they feel. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6806
2013-08-26 20:53:11 +02:00
.phui-box-border {
UIColor Blues and common color integration Summary: This adds standard 'blues' and start integration of standard colors for text, backgrounds, and borders. Test Plan: sb Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6857
2013-09-02 17:10:47 +02:00
border: 1px solid {$lightblueborder};
Update Form Layouts Summary: This attempts some consistency in form layouts. Notably, they all now contain headers and are 16px off the sides and tops of pages. Also updated dialogs to the same look and feel. I think I got 98% of forms with this pass, but it's likely I missed some buried somewhere. TODO: will take another pass as consolidating these colors and new gradients in another diff. Test Plan: Played in my sandbox all week. Please play with it too and let me know how they feel. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6806
2013-08-26 20:53:11 +02:00
background-color: #fff;
[Redesign] First rough pass at new ObjectBoxView Summary: Ref T8099. These are still in progress, but helps visualize the major UI changes before getting deep into the details. Test Plan: Visit basic dashboard, task, diff, and edit pages. {F395806} Reviewers: btrahan, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T8099 Differential Revision: https://secure.phabricator.com/D12757
2015-05-07 23:11:44 +02:00
border-radius: 3px;
Update Form Layouts Summary: This attempts some consistency in form layouts. Notably, they all now contain headers and are 16px off the sides and tops of pages. Also updated dialogs to the same look and feel. I think I got 98% of forms with this pass, but it's likely I missed some buried somewhere. TODO: will take another pass as consolidating these colors and new gradients in another diff. Test Plan: Played in my sandbox all week. Please play with it too and let me know how they feel. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: Korvin, aran Differential Revision: https://secure.phabricator.com/D6806
2013-08-26 20:53:11 +02:00
}
Use standard UI elements to render pull requests in Releeph Summary: Ref T3718. Ref T3644. Ref T3092. Switches from the Releeph UI elements to standard ones. I'll attach some screenshots. Also fixes CSRF against the request action endpoint. Test Plan: - Viewed request details. - Took actions on a request from detail page. - Viewed request list. - Took actions on a request from list page. - Used keyboard shortcuts to navigate list. - Used keyboard shortcuts to take actions. - Simulated errors. - Viewed on devices. Reviewers: chad, btrahan Reviewed By: btrahan Subscribers: grp, FacebookPOC, mattlqx, tala, beng, LegNeato, epriestley Maniphest Tasks: T3718, T3092, T3644 Differential Revision: https://secure.phabricator.com/D8771
2014-04-18 15:44:45 +02:00
.phui-box.focus {
box-shadow: 0 0 5px 5px rgba(255, 255, 0, 0.90);
}
Add basic grey and blue styles for PHUIBoxView Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame. Test Plan: Phame, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15069
2016-01-20 21:18:01 +01:00
.phui-box-grey {
Normalize colors a bit better on Profiles/Projects, add Workboard backgrounds Summary: Cleans up the backgrounds a little on Projects/Profiles and adds a number of colour choices for Workboards. Test Plan: Manually add each color for testing. Test new project / profile layouts with and without properties. {F1109325} {F1109326} {F1109327} {F1109328} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15269
2016-02-13 20:55:14 +01:00
background-color: #F7F7F9;
Add basic grey and blue styles for PHUIBoxView Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame. Test Plan: Phame, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15069
2016-01-20 21:18:01 +01:00
border-radius: 3px;
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-color: rgba({$alphagrey},.2);
Add basic grey and blue styles for PHUIBoxView Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame. Test Plan: Phame, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15069
2016-01-20 21:18:01 +01:00
}
.phui-box-blue {
background-color: {$bluebackground};
border-radius: 3px;
Normalize colors a bit better on Profiles/Projects, add Workboard backgrounds Summary: Cleans up the backgrounds a little on Projects/Profiles and adds a number of colour choices for Workboards. Test Plan: Manually add each color for testing. Test new project / profile layouts with and without properties. {F1109325} {F1109326} {F1109327} {F1109328} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15269
2016-02-13 20:55:14 +01:00
border-color: {$thinblueborder};
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
}
.phui-box-blue .phui-object-item,
.phui-box-grey .phui-object-item {
background: transparent;
}
.phui-box-blue .phui-object-item-link,
.phui-box-grey .phui-object-item-link {
color: {$darkbluetext};
}
Normalize colors a bit better on Profiles/Projects, add Workboard backgrounds Summary: Cleans up the backgrounds a little on Projects/Profiles and adds a number of colour choices for Workboards. Test Plan: Manually add each color for testing. Test new project / profile layouts with and without properties. {F1109325} {F1109326} {F1109327} {F1109328} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15269
2016-02-13 20:55:14 +01:00
.phui-box-blue .phui-object-item-list-view,
.phui-box-grey .phui-object-item-list-view {
background-color: #fff;
}
.phui-box-blue .phui-header-shell {
border-color: {$thinblueborder};
}
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
.phui-box-grey .phui-header-shell {
Move rgba rules into CelerityDefaultPostprocessor Summary: Should make it simpler here to have more `rgba` rules in CSS for things like hovers, selected states. Maybe only use `rgb` colors? Color pallette probably needs an overhaul. Test Plan: Bounce around random pages, buttons, menus. Everything appears normal. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15273
2016-02-15 06:29:56 +01:00
border-color: rgba({$alphagrey},.1);
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
}
Update Profiles to look like Project UI Summary: Updates People profiles to look more like Project profiles. This removes Conpherence and Flag links. Don't think you like Conpherence links much and for Flags maybe we can put them in the quick create menu? Test Plan: View profiles with and without Badges. {F1069365} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15111
2016-01-25 02:04:55 +01:00
.phui-object-box.phui-box-blue div.phui-info-severity-nodata,
.phui-object-box.phui-box-grey div.phui-info-severity-nodata {
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
background: transparent;
Normalize colors a bit better on Profiles/Projects, add Workboard backgrounds Summary: Cleans up the backgrounds a little on Projects/Profiles and adds a number of colour choices for Workboards. Test Plan: Manually add each color for testing. Test new project / profile layouts with and without properties. {F1109325} {F1109326} {F1109327} {F1109328} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15269
2016-02-13 20:55:14 +01:00
padding: 20px 4px 24px;
First cut of new Project Home Summary: First pass at a new Project Home page. This is starting to sprawl, so punting this up now before it gets too large. - Project homes now have "large header" - Custom Fields / Descriptions are in the main column - Feed is simpler visually - new "Background" option for PHUIObjectBoxView - move header buttons globally to "Grey" instead of "Simple" - New color and hover states for "Grey" - Transitions on Buttons haha - Edit Icon on Nav is now under "Manage" panel - New "Manage" Panel TODO: - More testing of bad cases of Custom Fields - Members Page in flux, needs design - Um still not sure how to make Custom Field not show UI Test Plan: Lots of random Project page visits. Save project, watch project, edit project, etc. {F1068191} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15097
2016-01-24 01:02:29 +01:00
text-align: center;
Update Profiles to look like Project UI Summary: Updates People profiles to look more like Project profiles. This removes Conpherence and Flag links. Don't think you like Conpherence links much and for Flags maybe we can put them in the quick create menu? Test Plan: View profiles with and without Badges. {F1069365} Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15111
2016-01-25 02:04:55 +01:00
border: none;
color: {$greytext};
Add basic grey and blue styles for PHUIBoxView Summary: We plan to use these more in future mocks. Adds base colors and re-uses in Phame. Test Plan: Phame, mobile and desktop. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D15069
2016-01-20 21:18:01 +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
/* Property Boxes */
.phui-box.phui-box-blue-property {
border-radius: 3px;
border-color: {$lightblueborder};
margin: 0;
padding: 0;
}
.device .phui-box.phui-box-blue-property {
padding: 0;
}
.phui-box.phui-object-box.phui-box-blue-property .phui-header-shell {
background-color: #eff3fc;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
padding: 6px 16px;
}
.device .phui-box.phui-box-blue-property .phui-header-shell {
padding: 6px 12px;
}
.phui-box.phui-box-blue-property .phui-header-header {
font-size: 13px;
color: {$bluetext};
}
Copy permalink