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

49 lines
928 B
CSS
Raw Normal View History

Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
/**
* @provides phabricator-form-view-css
*/
.phabricator-form-view {
Update form styles, implement in many places Summary: This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things: - Font Styles are correctly applied for form elements now. - Everything lines up! - Selects are larger, easier to read, interact. - Inputs have been squared. - Consistant CSS applied glow (try it!) - Improved Mobile Responsiveness - CSS applied to all form elements, not just Aphront - Many other minor tweaks. I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try. Test Plan: Tested many applications, forms, mobile and tablet. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
padding: 20px;
background: #f4f5f8;
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
border-width: 1px 0;
border-style: solid;
Update form styles, implement in many places Summary: This creates a common form look and feel across the site. I spent a bit of time working out a number of kinks in our various renderings. Some things: - Font Styles are correctly applied for form elements now. - Everything lines up! - Selects are larger, easier to read, interact. - Inputs have been squared. - Consistant CSS applied glow (try it!) - Improved Mobile Responsiveness - CSS applied to all form elements, not just Aphront - Many other minor tweaks. I tried to hit as many high profile forms as possible in an effort to increase consistency. Stopped for now and will follow up after this lands. I know Evan is not a super fan of the glow, but after working with it for a week, it's way cleaner and responsive than the OS controls. Give it a try. Test Plan: Tested many applications, forms, mobile and tablet. Reviewers: epriestley, btrahan Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5860
2013-05-07 23:07:06 +02:00
border-color: rgb(199, 201, 214);
}
.device-phone .phabricator-form-view {
padding: 10px 5px 10px 10px;
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
}
Simplify ".device-phone X, .device-tablet X { ... }" rules Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }". Test Plan: Browsed the site a bit without incident. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T1960 Differential Revision: https://secure.phabricator.com/D4103
2012-12-07 22:37:10 +01:00
.device .phabricator-form-view .aphront-form-control .aphront-form-label {
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
display: block;
float: none;
text-align: left;
margin: 0;
padding: 0;
}
Simplify ".device-phone X, .device-tablet X { ... }" rules Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }". Test Plan: Browsed the site a bit without incident. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T1960 Differential Revision: https://secure.phabricator.com/D4103
2012-12-07 22:37:10 +01:00
.device .phabricator-form-view .aphront-form-control .aphront-form-caption {
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
display: block;
float: none;
text-align: left;
margin: 0;
padding: 0;
}
Simplify ".device-phone X, .device-tablet X { ... }" rules Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }". Test Plan: Browsed the site a bit without incident. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T1960 Differential Revision: https://secure.phabricator.com/D4103
2012-12-07 22:37:10 +01:00
.device .phabricator-form-view .aphront-form-control .aphront-form-input {
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
float: none;
display: block;
text-align: left;
margin: .25em 0 0 0;
width: 99%;
padding: 0;
}
Simplify ".device-phone X, .device-tablet X { ... }" rules Summary: Add a ".device" rule which means "phone or tablet". Simplify about 5000 rules which were written ".device-phone X, device-tablet X { ... }". Test Plan: Browsed the site a bit without incident. Reviewers: chad Reviewed By: chad CC: aran Maniphest Tasks: T1960 Differential Revision: https://secure.phabricator.com/D4103
2012-12-07 22:37:10 +01:00
.device .phabricator-form-view .aphront-form-control .aphront-form-error {
Make the paste creation form work on phones Summary: This is the first time I've ever had CSS actually work like it promises it does (i.e., markup the "right" way and then you don't have to change the markup later). Since I laboriously laid this whole thing out with <divs> originally, I was able to just override some of the styles and make the layout reasonable for devices. The only differences for existing forms are: - No colon after labels (looks cleaner anyway). - Non-error required text is no longer a red star but a the grey word "Required" (this is clearer). Test Plan: Viewed paste form on a phone. Viewed ~20 other forms on the site to verify that I didn't break anything. Reviewers: btrahan, chad, vrana Reviewed By: btrahan CC: aran Maniphest Tasks: T1569 Differential Revision: https://secure.phabricator.com/D3298
2012-08-15 23:15:12 +02:00
float: none;
text-align: left;
display: block;
margin: 0;
padding: 0;
}
Copy permalink