Clean up css in openid [#1663140]

Sub-issue of #1190252: [573] Use csslint as a weapon to beat the crappy CSS out of Drupal core

Inline with the CSS cleanup efforts of the HTML5 initiative, using CSSLint at http://csslint.net provides a quick way to code-sniff our css and tweak styles.

Copy and paste the the stylesheet(s) below into the css lint tool at http://csslint.net and test.
Fix any warnings or errors the tool finds.
Patch Drupal 8 locally and make sure the css changes have not broken anything visually.
Create patch and upload for the testbot.

Files: modules/openid/openid.css (and openid-rtl.css)

Comment	File	Size	Author
#10	drupal-csslint-openid-1663140-10.patch	1.17 KB	barraponto
#5	openid-csslint-1663140-5.patch	2.67 KB	atu
#1	openid-idstoclasses-1663140-1.patch	3.79 KB	iflista

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

iflista CreditAttribution: iflista commented 1 July 2012 at 23:05

File	Size
openid-idstoclasses-1663140-1.patch	3.79 KB

Changed ids into classes and in .css .js files.
And there is still problem with duplicate background image.

Comment #2

tlattimore CreditAttribution: tlattimore commented 2 July 2012 at 16:30

Status:

Active

» Needs review

The javascript does not need to be altered in relation to this issue at all. Also, the html related to the selectors that has to been changed need to have the new classes added. The patch only updated the css.

Comment #3

tlattimore CreditAttribution: tlattimore commented 2 July 2012 at 16:32

Status:

Needs review

» Needs work

re-tagging. Meant to to select needs work in #2.

Comment #4

iflista CreditAttribution: iflista commented 3 July 2012 at 13:50

tlattimore, I grepped all code for ids and they were found only in css and js files of a module.
How to find html related to css ids if grep found only this:

Igors-Mac-Pro:drupal iflista$ grep -r '#edit-openid-identifier' *
core/modules/openid/openid-rtl.css:#edit-openid-identifier {
core/modules/openid/openid.css:#edit-openid-identifier {
core/modules/openid/openid.js:      var $edit_openid_identifier = $('#edit-openid-identifier');
core/modules/openid/openid.js:        $('#edit-openid-identifier')[0].focus();
core/modules/openid/openid.js:        $('#edit-openid-identifier').val('').removeClass('error');

Thanks.

Comment #5

atu CreditAttribution: atu commented 28 July 2012 at 19:49

Status:

Needs work

» Needs review

File	Size
openid-csslint-1663140-5.patch	2.67 KB

I try css way to do this clean up.

Comment #6

c960657 CreditAttribution: c960657 commented 30 September 2012 at 17:54

Issue tags:

-html5

#5: openid-csslint-1663140-5.patch queued for re-testing.

Comment #7

30 September 2012 at 17:56

Status:	Needs review	» Needs work
Issue tags:		+html5

The last submitted patch, openid-csslint-1663140-5.patch, failed testing.

Comment #8

atu CreditAttribution: atu commented 15 October 2012 at 22:24

Why this patch doesn't pass the testing ?

Comment #9

c960657 CreditAttribution: c960657 commented 21 October 2012 at 15:25

The patch is old, and a lot has happened in core since then. You (or somebody else) need to create a fresh version of the patch.

Comment #10

barraponto CreditAttribution: barraponto commented 30 October 2012 at 13:26

Status:

Needs work

» Needs review

File	Size
drupal-csslint-openid-1663140-10.patch	1.17 KB

I've written the patch all over again, making the item list openid-link more reusable and cleaning up everything else but the double declaration of background-image. but as I see it, they're two completely different widgets, with no sprite usage (or need). So I think this is enough.

Comment #11

c960657 CreditAttribution: c960657 commented 27 November 2012 at 16:40

-#block-user-login #openid-login-form {
+.user-login-form + .openid-login-form {

This seems a bit fragile, e.g. if some theme wraps form elements in divs. What do you think of .block-user .openid-login-form { instead?

Comment #12

barraponto CreditAttribution: barraponto commented 30 November 2012 at 20:11

@c960657 it's better, although it ties openid-login-form to user module blocks :/

Comment #13

c960657 CreditAttribution: c960657 commented 1 December 2012 at 12:36

No it doesn't. In fact, the form is also used on its own on user/login/openid. However, the mentioned rule is specific to the toggle mechanism used in the user block. If we want to untie this connection, we need to change the JavaScript and PHP code also, not just the CSS.