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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.aphront-form-control-submit button,
|
|
|
|
|
.aphront-form-control-submit a.button {
|
|
|
|
|
float: right;
|
2011-01-26 00:19:06 +01:00
|
|
|
margin: 0.5em 0 0em 2%;
|
|
|
|
|
}
|
|
|
|
|
|
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-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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.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;
|
|
|
|
|
}
|
