WordPress.org

Make WordPress Core

Opened 17 months ago

Closed 17 months ago

Last modified 17 months 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: 5.1
Component: Privacy Keywords: gdpr fixed-major dev-feedback commit
Focuses: ui Cc:
PR Number:

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 17 months ago.
44046.diff (394 bytes) - added by desrosj 17 months ago.
Screen Shot 2018-05-14 at 12.56.41.png (178.4 KB) - added by iandunn 17 months ago.
Positioning with 44046.diff and extra text via login_head
44046.2.diff (627 bytes) - added by iandunn 17 months ago.
Replace position: absolute with margins

Download all attachments as: .zip

Change History (21)

@imath
17 months ago

#1 @iandunn
17 months 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
17 months 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
17 months 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
17 months 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
17 months 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
17 months 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
17 months ago

#7 @desrosj
17 months 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
17 months ago

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

#9 @desrosj
17 months ago

  • Keywords commit added

Tested this again and still looks good.

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


17 months ago

@iandunn
17 months ago

Positioning with 44046.diff and extra text via login_head

@iandunn
17 months ago

Replace position: absolute with margins

#11 @iandunn
17 months 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
17 months 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
17 months 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
17 months 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
17 months 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
17 months 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
17 months ago

  • Component changed from Login and Registration to Privacy

Moving to the new Privacy component.

Note: See TracTickets for help on using tickets.