2011-01-25 20:31:40 +01:00
|
|
|
/**
|
|
|
|
|
* @provides aphront-form-view-css
|
|
|
|
|
*/
|
|
|
|
|
|
2011-06-10 00:28:29 +02:00
|
|
|
/**
|
|
|
|
|
* These styles are overrides for .aphront-form-view
|
|
|
|
|
*/
|
|
|
|
|
.aphront-form-view-shaded {
|
2013-01-15 22:54:49 +01:00
|
|
|
border: 1px solid #d4dae0;
|
|
|
|
|
background: #f4f5f8;
|
2011-06-10 00:28:29 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-view-padded {
|
2011-01-25 20:31:40 +01:00
|
|
|
padding: 1em;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-26 02:40:21 +01:00
|
|
|
.aphront-form-view label.aphront-form-label {
|
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-top: 5px;
|
2011-01-25 22:26:09 +01:00
|
|
|
width: 19%;
|
2011-01-25 20:31:40 +01:00
|
|
|
float: left;
|
|
|
|
|
text-align: right;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 13px;
|
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
|
|
|
color: #757c88;
|
|
|
|
|
text-shadow: 0 1px rgba(255,255,255,1);
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2013-05-14 21:21:00 +02:00
|
|
|
.device-phone .aphront-form-view label.aphront-form-label,
|
|
|
|
|
.aphront-form-full-width.aphront-form-view label.aphront-form-label {
|
2013-01-19 23:30:26 +01:00
|
|
|
display: block;
|
|
|
|
|
float: none;
|
|
|
|
|
text-align: left;
|
|
|
|
|
width: 100%;
|
2013-03-13 07:30:03 +01:00
|
|
|
margin-bottom: 3px;
|
2013-01-19 23:30:26 +01:00
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
.aphront-form-input {
|
2011-01-25 22:26:09 +01:00
|
|
|
margin-left: 20%;
|
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
|
|
|
margin-right: 20%;
|
|
|
|
|
width: 60%;
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2013-05-14 21:21:00 +02:00
|
|
|
.device-phone .aphront-form-input,
|
|
|
|
|
.aphront-form-full-width .aphront-form-input {
|
2013-01-19 23:30:26 +01:00
|
|
|
margin-left: 0%;
|
|
|
|
|
margin-right: 0%;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
.aphront-form-error {
|
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
|
|
|
width: 18%;
|
2011-01-25 20:31:40 +01:00
|
|
|
float: right;
|
|
|
|
|
color: #aa0000;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
padding-top: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-14 21:21:00 +02:00
|
|
|
.aphront-dialog-body .aphront-form-full-width {
|
|
|
|
|
margin-top: -10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .aphront-form-error,
|
|
|
|
|
.aphront-form-full-width .aphront-form-error {
|
2013-01-19 23:30:26 +01:00
|
|
|
float: none;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.device-phone .aphront-form-drag-and-drop-upload {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
2012-08-15 23:15:12 +02:00
|
|
|
.aphront-form-required {
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
color: #888888;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
}
|
|
|
|
|
|
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
|
|
|
.aphront-form-input input {
|
2011-01-25 20:31:40 +01:00
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-input textarea {
|
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
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
box-sizing: border-box;
|
2011-01-25 20:31:40 +01:00
|
|
|
height: 12em;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control {
|
|
|
|
|
padding: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-22 00:28:43 +02:00
|
|
|
.aphront-form-full-width .aphront-form-control {
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
.aphront-form-control-submit button,
|
|
|
|
|
.aphront-form-control-submit a.button {
|
|
|
|
|
float: right;
|
2013-05-24 21:38:27 +02:00
|
|
|
margin: 0.5em 0 0 2%;
|
2011-01-26 00:19:06 +01:00
|
|
|
}
|
|
|
|
|
|
Add a basic multipage form
Summary:
Ref T2232. Very busy day on IRC so I feel like I've made 20 minutes of progress in 1-minute spurts here, but this adds the basics for a form that can have multiple pages and automatically handle pagination and reading to/from the request, objects and responses.
The UIExample is reasonably instructive. Basically, you make a form, add pages to the form, and add controls to the pages. The core flow control looks like this:
if ($request->isFormPost()) {
$form->readFromRequest($request); // (1)
if ($form->isComplete()) { // (2)
$response = $form->writeToResponse($response); // (3)
// Process result here. // (4)
}
} else {
$form->readFromObject($object); // (5)
}
The key parts are:
# This reads the form state from the request, including reading all the inactive pages.
# This tests if all pages are valid and the user just clicked "Done" on the last page.
# This produces a "response", which might be writing to an object (for simpler forms) or creating a transaction record (for more complex forms).
# Here, we would save the object or apply the transactions.
# When the user views the form for the first time, we preload all the values from some object (which might just be empty).
Ultimate goal here is to fix repository creation to not be a terrible pit of awfulness.
There are probably a lot of rough edges and missing features still, but this seems to not be totally crazy.
I'm using two submit buttons with different names which doesn't work on IE7 or something, but we can JS our way out of that if we need to.
Test Plan: Paged forward and backward through the form.
Reviewers: btrahan, chad
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T2232
Differential Revision: https://secure.phabricator.com/D6003
2013-05-23 23:39:01 +02:00
|
|
|
.phui-form-control-multi-submit input {
|
|
|
|
|
float: right;
|
|
|
|
|
margin: 0.5em 0 0em 2%;
|
|
|
|
|
width: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-26 02:17:19 +01:00
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-short {
|
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
|
|
|
height: 44px;
|
2011-01-26 02:17:19 +01:00
|
|
|
}
|
|
|
|
|
|
2011-02-05 21:20:18 +01:00
|
|
|
.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
|
|
|
|
|
height: 24em;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-26 00:19:06 +01:00
|
|
|
.aphront-form-control-select .aphront-form-input {
|
|
|
|
|
padding-top: 2px;
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-view .aphront-form-caption {
|
2013-01-09 23:40:12 +01:00
|
|
|
font-size: 12px;
|
|
|
|
|
color: #888;
|
|
|
|
|
padding: 2px;
|
2011-01-25 20:31:40 +01:00
|
|
|
text-align: right;
|
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
|
|
|
margin-right: 20%;
|
2011-01-26 02:40:21 +01:00
|
|
|
margin-left: 20%;
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2013-05-14 21:21:00 +02:00
|
|
|
.device-phone .aphront-form-view .aphront-form-caption,
|
|
|
|
|
.aphront-form-full-width .aphront-form-view .aphront-form-caption {
|
2013-01-19 23:30:26 +01:00
|
|
|
margin-right: 0%;
|
|
|
|
|
}
|
|
|
|
|
|
2012-03-05 22:51:25 +01:00
|
|
|
/* override for when inside an aphront-panel-view */
|
|
|
|
|
.aphront-panel-view .aphront-form-view h1 {
|
|
|
|
|
padding: 0em 0em .8em 0em;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
.aphront-form-instructions {
|
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
|
|
|
width: 60%;
|
|
|
|
|
margin-left: 20%;
|
|
|
|
|
padding: 10px 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-24 21:38:27 +02:00
|
|
|
|
|
|
|
|
|
2013-05-14 21:21:00 +02:00
|
|
|
.device .aphront-form-instructions,
|
|
|
|
|
.aphront-form-full-width .aphront-form-instructions {
|
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
|
|
|
width: 100%;
|
|
|
|
|
margin: 0;
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2011-09-06 18:37:35 +02:00
|
|
|
.aphront-form-important {
|
|
|
|
|
margin: .5em 0;
|
|
|
|
|
background: #ffffdd;
|
|
|
|
|
padding: .5em 1em;
|
|
|
|
|
}
|
|
|
|
|
.aphront-form-important code {
|
|
|
|
|
display: block;
|
|
|
|
|
padding: .25em;
|
|
|
|
|
margin: .5em 2em;
|
|
|
|
|
}
|
|
|
|
|
|
2012-02-22 19:21:39 +01:00
|
|
|
.aphront-form-control-static .aphront-form-input,
|
|
|
|
|
.aphront-form-control-markup .aphront-form-input {
|
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-top: 6px;
|
2011-01-25 20:31:40 +01:00
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
2011-01-26 02:40:21 +01:00
|
|
|
|
2011-04-04 00:50:06 +02:00
|
|
|
.aphront-form-control-togglebuttons .aphront-form-input {
|
2013-03-13 07:30:03 +01:00
|
|
|
padding: 2px 0 0 0;
|
2011-04-04 00:50:06 +02:00
|
|
|
}
|
|
|
|
|
|
Improve Herald personal/global UI/UX
Summary:
- Default "personal" vs "global" choice to "personal".
- Don't show global rules under "My Rules".
- After editing or creating a global rule, redirect back to global rule list.
- Use radio buttons for "personal" vs "global" and add captions explaining the
difference.
- For "global" rules, don't show the owner/author in the rule detail view --
they effectively have no owner (see also D1387).
- For "global" rules, don't show the owner/author in the rule list view, as
above.
- For admin views, show rule type (global vs personal).
Test Plan:
- Created and edited new global and personal rules.
- Viewed "my", "global" and "admin" views.
Reviewers: btrahan, jungejason, nh, xela
Reviewed By: btrahan
CC: aran, epriestley
Differential Revision: https://secure.phabricator.com/D1518
2012-01-31 21:09:29 +01:00
|
|
|
table.aphront-form-control-radio-layout,
|
2011-01-26 02:40:21 +01:00
|
|
|
table.aphront-form-control-checkbox-layout {
|
|
|
|
|
margin-top: 3px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
}
|
|
|
|
|
|
Improve Herald personal/global UI/UX
Summary:
- Default "personal" vs "global" choice to "personal".
- Don't show global rules under "My Rules".
- After editing or creating a global rule, redirect back to global rule list.
- Use radio buttons for "personal" vs "global" and add captions explaining the
difference.
- For "global" rules, don't show the owner/author in the rule detail view --
they effectively have no owner (see also D1387).
- For "global" rules, don't show the owner/author in the rule list view, as
above.
- For admin views, show rule type (global vs personal).
Test Plan:
- Created and edited new global and personal rules.
- Viewed "my", "global" and "admin" views.
Reviewers: btrahan, jungejason, nh, xela
Reviewed By: btrahan
CC: aran, epriestley
Differential Revision: https://secure.phabricator.com/D1518
2012-01-31 21:09:29 +01:00
|
|
|
table.aphront-form-control-radio-layout th,
|
2011-01-26 02:40:21 +01:00
|
|
|
table.aphront-form-control-checkbox-layout th {
|
|
|
|
|
padding-top: 2px;
|
|
|
|
|
padding-left: 0.35em;
|
2011-12-23 03:08:05 +01:00
|
|
|
padding-bottom: 4px;
|
2011-01-26 02:40:21 +01:00
|
|
|
}
|
|
|
|
|
|
Improve Herald personal/global UI/UX
Summary:
- Default "personal" vs "global" choice to "personal".
- Don't show global rules under "My Rules".
- After editing or creating a global rule, redirect back to global rule list.
- Use radio buttons for "personal" vs "global" and add captions explaining the
difference.
- For "global" rules, don't show the owner/author in the rule detail view --
they effectively have no owner (see also D1387).
- For "global" rules, don't show the owner/author in the rule list view, as
above.
- For admin views, show rule type (global vs personal).
Test Plan:
- Created and edited new global and personal rules.
- Viewed "my", "global" and "admin" views.
Reviewers: btrahan, jungejason, nh, xela
Reviewed By: btrahan
CC: aran, epriestley
Differential Revision: https://secure.phabricator.com/D1518
2012-01-31 21:09:29 +01:00
|
|
|
.aphront-form-control-radio-layout td input,
|
2011-01-26 02:40:21 +01:00
|
|
|
.aphront-form-control-checkbox-layout td input {
|
2011-12-23 03:08:05 +01:00
|
|
|
margin-top: 4px;
|
2011-01-26 02:40:21 +01:00
|
|
|
width: auto;
|
|
|
|
|
}
|
2011-02-06 08:56:06 +01:00
|
|
|
|
Improve Herald personal/global UI/UX
Summary:
- Default "personal" vs "global" choice to "personal".
- Don't show global rules under "My Rules".
- After editing or creating a global rule, redirect back to global rule list.
- Use radio buttons for "personal" vs "global" and add captions explaining the
difference.
- For "global" rules, don't show the owner/author in the rule detail view --
they effectively have no owner (see also D1387).
- For "global" rules, don't show the owner/author in the rule list view, as
above.
- For admin views, show rule type (global vs personal).
Test Plan:
- Created and edited new global and personal rules.
- Viewed "my", "global" and "admin" views.
Reviewers: btrahan, jungejason, nh, xela
Reviewed By: btrahan
CC: aran, epriestley
Differential Revision: https://secure.phabricator.com/D1518
2012-01-31 21:09:29 +01:00
|
|
|
.aphront-form-radio-caption {
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
color: #444444;
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-06-26 17:14:15 +02:00
|
|
|
.aphront-form-control-image span {
|
|
|
|
|
margin: 0px 4px 0px 2px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-image .default-image {
|
2013-01-25 02:23:05 +01:00
|
|
|
display: inline;
|
2012-06-26 17:14:15 +02:00
|
|
|
width: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
2011-02-06 08:56:06 +01:00
|
|
|
.aphront-form-input hr {
|
|
|
|
|
border: none;
|
|
|
|
|
background: #bbbbbb;
|
|
|
|
|
height: 1px;
|
|
|
|
|
position: relative;
|
2011-03-24 19:07:36 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-inset {
|
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
|
|
|
margin: 0 0 10px;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background: #fff;
|
|
|
|
|
border: 1px solid #d4dae0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-inset h1 {
|
|
|
|
|
color: #777;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
padding-bottom: 10px;
|
2011-03-24 19:07:36 +01:00
|
|
|
}
|
Improve drag-and-drop uploader
Summary:
Make it discoverable, show uploading progress, show file thumbnails, allow you
to remove files, make it a generic form component.
Test Plan:
Uploaded ducks
Reviewed By: tomo
Reviewers: aran, tomo, jungejason, tuomaspelkonen
CC: anjali, aran, epriestley, tomo
Differential Revision: 334
2011-05-23 01:11:41 +02:00
|
|
|
|
|
|
|
|
.aphront-form-drag-and-drop-file-list {
|
|
|
|
|
width: 400px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.drag-and-drop-instructions {
|
|
|
|
|
color: #333333;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
padding: 6px 8px;
|
|
|
|
|
}
|
2011-07-15 23:17:55 +02:00
|
|
|
|
2012-10-08 22:26:41 +02:00
|
|
|
.drag-and-drop-file-target {
|
|
|
|
|
border: 1px dashed #bfbfbf;
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
2011-07-15 23:17:55 +02:00
|
|
|
.aphront-textarea-drag-and-drop {
|
|
|
|
|
background: #99ff99;
|
|
|
|
|
border-color: #669966;
|
|
|
|
|
}
|
2012-04-04 21:14:10 +02:00
|
|
|
|
2013-02-06 23:03:52 +01:00
|
|
|
.aphront-form-crop .crop-box {
|
|
|
|
|
cursor: move;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-crop .crop-box .crop-image {
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 0px;
|
|
|
|
|
left: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
2012-04-04 21:14:10 +02:00
|
|
|
.calendar-button {
|
Make date control include times
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
2012-10-23 21:00:20 +02:00
|
|
|
display: inline;
|
2012-04-04 21:14:10 +02:00
|
|
|
background: url(/rsrc/image/icon/fatcow/calendar_edit.png)
|
|
|
|
|
no-repeat center center;
|
Make date control include times
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
2012-10-23 21:00:20 +02:00
|
|
|
padding: 8px 12px;
|
|
|
|
|
margin: 2px 8px 2px 2px;
|
|
|
|
|
position: relative;
|
2012-04-04 21:14:10 +02:00
|
|
|
border: 1px solid transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-date-container {
|
|
|
|
|
position: relative;
|
|
|
|
|
display: inline;
|
|
|
|
|
}
|
|
|
|
|
|
Make date control include times
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
2012-10-23 21:00:20 +02:00
|
|
|
.aphront-form-date-container select {
|
2012-04-04 21:14:10 +02:00
|
|
|
margin: 2px;
|
Make date control include times
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
2012-10-23 21:00:20 +02:00
|
|
|
display: inline;
|
|
|
|
|
}
|
2013-05-31 01:19:43 +02:00
|
|
|
.aphront-form-date-container input.aphront-form-date-enabled-input {
|
|
|
|
|
width: auto;
|
|
|
|
|
display: inline;
|
|
|
|
|
margin-right: 8px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
}
|
Make date control include times
Summary:
See discussion in T404. Basically, the problem with date-only controls is that they may behave unpredictably in the presence of timezones. When you say "This needs to be done by Oct 23", you probably mean "Oct 23 5PM PST" or something like that, but someone in China may see the "Oct 24" and hit the deadline in good faith but be 10 hours too late. T404 has more discussion and examples. There are ways to fake this, but they get more complicated if the guy in China needs to move the date forward 24 hours.
I think the best solution to this is to not have date-only controls, and always display the time. This makes it absolutley unambiguous what something means, because the guy in the US will set "Oct 23 5PM" and the guy in China will see that accurately in local time.
The downside is that it's slightly more visual clutter and work for the user to specify things precisely, but I added some hints (start/end of day, start/end of business) that will hopefully let us pick the right default in most cases.
Test Plan:
Set some dates.
{F21956}
This has a couple of edge case issues on resize and some not-so-edge-case issues on mobile, but should be good to build T407 on without API changes.
Reviewers: btrahan
Reviewed By: btrahan
CC: aran
Maniphest Tasks: T404, T407
Differential Revision: https://secure.phabricator.com/D3793
2012-10-23 21:00:20 +02:00
|
|
|
|
|
|
|
|
.aphront-form-date-container input.aphront-form-date-time-input {
|
|
|
|
|
width: 7em;
|
|
|
|
|
display: inline;
|
2012-04-04 21:14:10 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 240px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core {
|
|
|
|
|
padding: 1px;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
font-family: Verdana;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .month-table,
|
|
|
|
|
.fancy-datepicker-core .day-table {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
border-collapse: separate;
|
|
|
|
|
border-spacing: 1px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .month-table {
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .month-table td.lrbutton {
|
|
|
|
|
width: 20%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .month-table td {
|
|
|
|
|
padding: 4px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #444444;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .month-table td.lrbutton {
|
|
|
|
|
background: #e6e6e6;
|
|
|
|
|
border: 1px solid;
|
|
|
|
|
border-color: #a6a6a6 #969696 #868686 #a6a6a6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td {
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
background: #f6f6f6;
|
|
|
|
|
vertical-align: center;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border: 1px solid #d6d6d6;
|
|
|
|
|
padding: 4px 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td.day-placeholder {
|
|
|
|
|
border-color: transparent;
|
|
|
|
|
background: transparent;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td.weekend {
|
|
|
|
|
color: #666666;
|
|
|
|
|
border-color: #e6e6e6;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td.day-name {
|
|
|
|
|
background: transparent;
|
|
|
|
|
border: 1px transparent;
|
|
|
|
|
vertical-align: bottom;
|
|
|
|
|
color: #888888;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td.today {
|
|
|
|
|
background: #eeee99;
|
|
|
|
|
border-color: #aaaa66;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core .day-table td.datepicker-selected {
|
|
|
|
|
background: #0099ff;
|
|
|
|
|
border-color: #0066cc;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core td {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.fancy-datepicker-core td.novalue {
|
|
|
|
|
cursor: inherit;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picker-open .calendar-button,
|
|
|
|
|
.fancy-datepicker-core {
|
|
|
|
|
background-color: white;
|
|
|
|
|
border: 1px solid #777777;
|
|
|
|
|
|
|
|
|
|
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picker-open .calendar-button {
|
|
|
|
|
border-left: 1px solid white;
|
|
|
|
|
}
|
2013-03-07 22:02:36 +01:00
|
|
|
|
|
|
|
|
.login-to-comment {
|
|
|
|
|
padding: 12px;
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
2013-03-13 19:01:15 +01:00
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons {
|
|
|
|
|
padding-top: 7px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle-fixed {
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle .counter {
|
|
|
|
|
font-size: smaller;
|
|
|
|
|
display: none;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: -9px;
|
|
|
|
|
right: -8px;
|
|
|
|
|
padding: 0px 3px;
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons:hover .toggle .counter {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle .counter {
|
|
|
|
|
background: gray;
|
|
|
|
|
color: #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle-selected .counter {
|
|
|
|
|
color: white;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-counted-togglebuttons .toggle.disabled:hover {
|
|
|
|
|
background-color: #a7a7a7;
|
|
|
|
|
}
|
2013-05-24 21:38:27 +02:00
|
|
|
|
|
|
|
|
.phui-form-divider hr {
|
|
|
|
|
height: 1px;
|
|
|
|
|
border: 0;
|
|
|
|
|
background: #c0c0c0;
|
|
|
|
|
width: 85%;
|
|
|
|
|
margin: 15px auto;
|
|
|
|
|
}
|
