Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[A11y]Fixing a missed horizontal scroll bar case #8353

Merged
merged 3 commits into from
Jan 14, 2021
Merged

[A11y]Fixing a missed horizontal scroll bar case #8353

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
41db291
Adding some style workarounds for narrow screen
ryuyu Dec 15, 2020
fcba5f2
Update similar snippet for 2FA dialog
ryuyu Dec 15, 2020
08791ec
Remove display flex from login account row
ryuyu Dec 16, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions src/Bootstrap/dist/css/bootstrap-theme.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion src/Bootstrap/less/theme/page-account-settings.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@

.login-account-row {
padding-top: 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
Expand Down
12 changes: 6 additions & 6 deletions src/NuGetGallery/Views/Users/_UserAccountChangeExternalCredential.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@
@Html.AntiForgeryToken()

<div class="login-account-row">
<span>
<span class="col-sm-9" style="padding: 0;">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's with the padding: 0? Do these spans need to be wrapped by a <div class="row"> ... </div> or something?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that and it behaved very strangely. Currently, overriding this for this line was the most robust solution in practice in terms of reflow. btn-block appears to make the button behave oddly for reflowing.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am aslo not sure padding: 0 here, I tried build your changes locally, it appears display improperly
Capture

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good eye @lyndaidaii ! I noticed when testing on dev that I forgot to push a CSS change that needs to accompany this. It is now pushed.

Microsoft account: <b>@cred.Identity</b>
</span>
<span class="col-sm-3">
<span class="col-sm-3" style="padding: 0;">
<button class="btn btn-default btn-block" type="submit"
data-confirm="This action will replace all of your linked accounts and password login with the new login account. Are you sure you want to change your login account?">
Change Account
Expand Down Expand Up @@ -69,10 +69,10 @@
<div class="login-account-row">
@if (Model.User.EnableMultiFactorAuthentication)
{
<span>
<span class="col-sm-9" style="padding: 0;">
Two-factor authentication is currently enabled <i class="ms-Icon ms-Icon--CheckMark checkmark-icon" aria-hidden="true"></i>
</span>
<span class="col-sm-3">
<span class="col-sm-3" style="padding: 0;">
<button class="btn btn-danger btn-block" type="submit"
data-confirm="This action will disable 2FA, making your account less secure. Are you sure you want to disable this setting?">
Disable
Expand All @@ -81,10 +81,10 @@
}
else
{
<span>
<span class="col-sm-9" style="padding: 0;">
Two-factor authentication is currently disabled <i class="ms-Icon ms-Icon--Warning warning-icon" aria-hidden="true"></i>
</span>
<span class="col-sm-3">
<span class="col-sm-3" style="padding: 0;">
<button class="btn btn-default btn-block" type="submit">Enable</button>
</span>
}
Expand Down