1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-23 14:00:56 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-object-box.css
epriestley 8f8e863613 When users follow an email login link but an install does not use passwords, try to get them to link an account
Summary:
Ref T13249. See PHI774. When users follow an email login link ("Forgot password?", "Send Welcome Email", "Send a login link to your email address.", `bin/auth recover`), we send them to a password reset flow if an install uses passwords.

If an install does not use passwords, we previously dumped them unceremoniously into the {nav Settings > External Accounts} UI with no real guidance about what they were supposed to do. Since D20094 we do a slightly better job here in some cases. Continue improving this workflow.

This adds a page like "Reset Password" for "Hey, You Should Probably Link An Account, Here's Some Options".

Overall, this stuff is still pretty rough in a couple of areas that I imagine addressing in the future:

  - When you finish linking, we still dump you back in Settings. At least we got you to link things. But better would be to return you here and say "great job, you're a pro".
  - This UI can become a weird pile of buttons in certain configs and generally looks a little unintentional. This problem is shared among all the "linkable" providers, and the non-login link flow is also weird.

So: step forward, but more work to be done.

Test Plan: {F6211115}

Reviewers: amckinley

Reviewed By: amckinley

Maniphest Tasks: T13249

Differential Revision: https://secure.phabricator.com/D20170
2019-02-15 14:41:31 -08:00

165 lines
3.4 KiB
CSS

/**
* @provides phui-object-box-css
*/
.phui-object-box {
position: relative;
padding: 12px 12px 4px 12px;
}
.phui-object-box.phui-object-box-collapsed {
padding: 12px 0 0 0;
}
.device-phone .phui-object-box.phui-object-box-collapsed {
padding: 8px 0 0 0;
}
.phui-object-box.phui-object-box-collapsed .phui-header-shell {
padding: 0 8px 12px 16px;
}
.device-phone .phui-object-box.phui-object-box-collapsed .phui-header-shell {
padding: 0 8px 8px;
}
div.phui-object-box.phui-object-box-flush {
margin-top: 0;
}
.phui-object-box .phui-header-shell + .phui-info-view {
margin: 12px 0 0 0;
}
.phui-object-box.phui-object-box-collapsed
.phui-header-shell + .phui-info-view {
margin: 0;
border-radius: 0;
border: 0;
border-bottom: 1px solid {$thinblueborder};
}
.device-phone .phui-object-box {
margin: 8px;
padding: 8px 8px 4px 8px;
}
.device-phone .phui-object-box .phui-header-shell {
padding: 4px 0 12px 4px;
}
.device-tablet .phui-object-box {
margin: 8px 8px 0 8px;
}
.phui-object-box .phui-header-header .phui-tag-view {
margin-left: 8px;
}
.phui-object-box .phui-header-header .phui-tag-core {
border-color: transparent;
padding: 1px 6px;
font-size: {$normalfontsize};
}
/* - Object Box Colors ------------------------------------------------------ */
.phui-box-border.phui-object-box-green {
border: 1px solid {$green};
}
.phui-box-border.phui-object-box-green .phui-header-view {
color: {$green};
}
.phui-box-border.phui-object-box-green .phui-header-shell {
border-bottom-color: {$lightgreen};
}
.phui-box-border.phui-object-box-blue {
border: 1px solid {$blue};
}
.phui-box-border.phui-object-box-blue .phui-header-view {
color: {$blue};
}
.phui-box-border.phui-object-box-blue .phui-header-shell {
border-bottom-color: {$lightblue};
}
.phui-box-border.phui-object-box-red {
border: 1px solid {$red};
}
.phui-box-border.phui-object-box-red .phui-header-view {
color: {$red};
}
.phui-box-border.phui-object-box-red .phui-header-shell {
border-bottom-color: {$lightred};
}
.phui-object-box-hidden-content {
background: {$lightgreybackground};
border-bottom: 1px solid {$thinblueborder};
}
.phui-object-box.phui-object-box-collapsed .phui-object-box-hidden-content {
margin: 0;
}
/* - Double Object Box Override --------------------------------------------- */
.phui-object-box .phui-object-box {
padding: 0;
}
/* eh oh el */
.phui-object-box .phui-object-box + .phui-object-box {
border-top: 1px solid {$thinblueborder};
}
.phui-object-box .phui-object-box .phui-header-shell .phui-header-header {
font-family: {$fontfamily};
}
.phui-object-box .phui-box-border {
border-width: 0;
padding: 0;
margin: 0;
}
.phui-object-box .phui-box-border.phui-box-blue-property {
border-width: 1px;
}
.phui-object-box .phui-object-box .phui-header-shell .phui-header-header {
font-size: {$normalfontsize};
margin: 0;
color: {$darkbluetext};
font-weight: bold;
}
.phui-object-box .phui-object-box .phui-header-shell {
margin: 0;
padding: 4px 8px;
background-color: {$lightgreybackground};
}
/* - Pager at the bottom ---------------------------------------------------- */
.phui-object-box-pager {
background-color: {$bluebackground};
border-top: 1px solid {$lightblueborder};
}
.phui-object-box-pager a.button {
margin-top: 8px;
margin-bottom: 8px;
}
.phui-object-box-instructions {
padding: 16px;
border-bottom: 1px solid {$thinblueborder};
}