WordPress.org

Make WordPress Core

Opened 12 days ago

Closed 8 days ago

Last modified 7 days ago

#44046 closed defect (bug) (fixed)

GDPR Privacy Policy Link in wp-login.php page can overflow other links

Reported by: imath Owned by: iandunn
Milestone: 4.9.6 Priority: normal
Severity: normal Version: trunk
Component: Privacy Keywords: gdpr fixed-major dev-feedback commit
Focuses: ui Cc:

Description

I'd suggest to remove the position: absolute css rule of the Privacy Policy link, because for some screen resolutions, it can be a bit messy... See the screenshot below:

https://cldup.com/hhB9fQVFcC.png

Attachments (4)

44046.patch (335 bytes) - added by imath 12 days ago.
44046.diff (394 bytes) - added by desrosj 12 days ago.
Screen Shot 2018-05-14 at 12.56.41.png (178.4 KB) - added by iandunn 9 days ago.
Positioning with 44046.diff and extra text via login_head
44046.2.diff (627 bytes) - added by iandunn 9 days ago.
Replace position: absolute with margins

Download all attachments as: .zip

Change History (21)

@imath
12 days ago

#1 @iandunn
12 days ago

  • Focuses ui added
  • Keywords gdpr added
  • Milestone changed from Awaiting Review to 4.9.6
  • Owner set to iandunn
  • Status changed from new to accepted

cc @melchoyce in case you have any input

#2 @xkon
12 days ago

Strange I remember adding a responsive rule just for that to also tackle the lower height screens. Maybe it got lost somewhere along the backports? :D

#3 @melchoyce
12 days ago

I'm still seeing the responsive styles in trunk:

@media (max-height: 600px) {
    .login .privacy-policy-page-link {
        position: relative;
        margin: 60px 0 20px 0;
    }
}

And it seems to display as expected for me.

@imath, can you provide some more details about where you're seeing this?

#4 @desrosj
12 days ago

Related: #43721.

The original intention was to have this link separated from the links immediately below the login form because those links are geared towards helping people sign up or log in (see geared towards helping people sign up or log in).

I think we just change the height in the media query to allow more space in case a plugin is adding custom links below the login form.

@imath Do you have custom links there?

#5 @xkon
12 days ago

Ah thanks @desrosj ! I've found it.

My patch had 850px instead of 600px see https://core.trac.wordpress.org/attachment/ticket/43721/43721.6.diff

So the responsive was cutting of way before you reach the links. Maybe we could go back to that @desrosj ? ( I didn't even notice that rule change _ )

#6 @imath
12 days ago

@melchoyce @desrosj it happens when i log off without any plugins/tweaks of any kind (fresh WordPress install). I advise you to test every login action (recovering password, etc...) because some adds a new message before the login form.

@desrosj
12 days ago

#7 @desrosj
12 days ago

44046.diff updates the max-height of the media query to 850. I am unable to get the links to overlap with this applied. I even added 5 additional custom links below the WordPress core links, and it still was enough of a buffer.

Tested on the reset password, login, and confirmation screens.

#8 @imath
12 days ago

@desrosj I confirm with 44046.diff patch applied it fixes the issue for me.

#9 @desrosj
9 days ago

  • Keywords commit added

Tested this again and still looks good.

This ticket was mentioned in Slack in #core by desrosj. View the logs.


9 days ago

@iandunn
9 days ago

Positioning with 44046.diff and extra text via login_head

@iandunn
9 days ago

Replace position: absolute with margins

#11 @iandunn
9 days ago

  • Keywords needs-testing ui-feedback added; commit removed

I'm wondering if using position: absolute is going to be problematic no matter what, especially when we take into account all the various things that plugins can do to customize the login screen.

For instance, if someone adds some extra text via login_head, the link can be still positioned over top of other elements, even with 44046.diff applied (screenshot).

44046.2.diff replaces the absolute positioning with margins, to provide some visual separation between the "action" links and the policy link.

@melchoyce: do you think that would be an acceptable compromise to accomplish your design goals?

Does anyone else have any feedback on that?

#12 @desrosj
8 days ago

44046.2.diff works for me. Tests well and looks good with lots of text before the login form (like in Shot 2018-05-14 at 12.56.41.png).

#13 @melchoyce
8 days ago

I tried some alternate methods for making the footer sticky, but none of them really worked. Let's go with 44046.2.diff.

#14 @iandunn
8 days ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 43274:

Privacy: Reposition log in policy link to avoid overlapping elements.

Previously, the link used absolute positioning, in order to stick it at the bottom of the page. That was done in order to create visual separation between it and the "action" links, like "Lost Your Password?"

The absolute positioning can cause conflicts in some situations, though. For example, if extra text or error notices are added above the form, then the login link would be positioned on top of other elements.

Switching to relative positioning with extra margins avoids those issues, while maintaining the visual separation between the "action" links and the privacy policy link.

Props imath, melchoyce, desrosj, xkon, iandunn.
Fixes #44046.

#15 @iandunn
8 days ago

  • Keywords fixed-major dev-feedback commit added; has-patch needs-testing ui-feedback removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening to consider backport to 4.9 branch.

#16 @azaozz
8 days ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 43276:

Privacy: Reposition log in policy link to avoid overlapping elements.

Previously, the link used absolute positioning, in order to stick it at the bottom of the page. That was done in order to create visual separation between it and the "action" links, like "Lost Your Password?"

The absolute positioning can cause conflicts in some situations, though. For example, if extra text or error notices are added above the form, then the login link would be positioned on top of other elements.

Switching to relative positioning with extra margins avoids those issues, while maintaining the visual separation between the "action" links and the privacy policy link.

Props imath, melchoyce, desrosj, xkon, iandunn.
Merges [43274] to the 4.9 branch.
Fixes #44046.

#17 @desrosj
7 days ago

  • Component changed from Login and Registration to Privacy

Moving to the new Privacy component.

Note: See TracTickets for help on using tickets.