WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years ago

#18576 closed defect (bug) (fixed)

setup-config.php CSS issues

Reported by: SergeyBiryukov Owned by: azaozz
Milestone: 3.3 Priority: normal
Severity: minor Version: 3.3
Component: UI Keywords: has-patch ui-feedback
Focuses: Cc:

Description

See the screenshots.

Attachments (10)

18576.create-manually-before.png (58.2 KB) - added by SergeyBiryukov 3 years ago.
18576.create-manually-after.png (33.7 KB) - added by SergeyBiryukov 3 years ago.
18576.credentials-before.png (53.9 KB) - added by SergeyBiryukov 3 years ago.
18576.credentials-after.png (28.4 KB) - added by SergeyBiryukov 3 years ago.
18576.patch (964 bytes) - added by SergeyBiryukov 3 years ago.
18576.2.patch (516 bytes) - added by SergeyBiryukov 3 years ago.
18576.installed-before.png (61.1 KB) - added by SergeyBiryukov 3 years ago.
18576.installed-after.png (60.8 KB) - added by SergeyBiryukov 3 years ago.
18576.3.patch (999 bytes) - added by SergeyBiryukov 3 years ago.
18576.4.patch (7.3 KB) - added by chexee 2 years ago.

Download all attachments as: .zip

Change History (25)

SergeyBiryukov3 years ago

comment:2 ocean903 years ago

Related: #16112

comment:3 follow-up: dd323 years ago

That code styling is annoying, I'm all for dropping it. Out of curiosity, What browser is ignoring the CSS for the textarea? The CSS width declaration should override the cols attribute.

comment:4 ramiy3 years ago

And chenge the password text from "... and MYSQL password." -> "Your MYSQL password."

comment:5 in reply to: ↑ 3 SergeyBiryukov3 years ago

Replying to dd32:

Out of curiosity, What browser is ignoring the CSS for the textarea? The CSS width declaration should override the cols attribute.

I've checked in Firefox 7, Chrome 13, Opera 11, IE 8, and they all display the same.

Currently there's no width set for textarea:
http://core.trac.wordpress.org/browser/trunk/wp-admin/css/install.dev.css#L108

JJJ's patch in #16112 adds it, so this ticket is partially a duplicate of that one (though the screenshots here make the issue more obvious).

Replying to ramiy:

And chenge the password text from "... and MYSQL password." -> "Your MYSQL password."

Not sure about that change, current string seems fine to me.

comment:6 follow-up: dd323 years ago

I've checked in Firefox 7, Chrome 13, Opera 11, IE 8, and they all display the same.

Hm, Strange, Oddly enough 98 columns is a perfect width for Opera 12 (Alpha's) and I've never noticed that before.. I'd rather add a CSS width here instead of a column width just for that reason, it'll be a bit inconsistent between browsers/platforms/fonts loaded otherwise.

Not sure about that change, current string seems fine to me.

To someone who's first language isn't English, it might not read completely right, but translated versions translate it differently. The string in English is fine to me, It's a laid back "This is a quick 5 minute install, 'oh and we need this detail too...'" type of string, which works well.

comment:7 ocean903 years ago

+1 for CSS width like #16112.

Sergey can you change your patch, then you can close #16112 as a dup.

String change should be a new ticket. But I think the string is fine too. When there is problem you can translated it as Your MYSQL password..

SergeyBiryukov3 years ago

SergeyBiryukov3 years ago

comment:8 in reply to: ↑ 6 SergeyBiryukov3 years ago

Replying to dd32:

I'd rather add a CSS width here instead of a column width

Done in 18576.2.patch. I left out white-space: pre and overflow: scroll from JJJ's patch, since they only add inactive horizontal scrollbar in all of the four browsers I've tested this in.

As for <code>, it came to my attention that large font was probably meant for the final screen with username and password (see two more screenshots).

I've added 18576.3.patch in case we still want current font size there.

comment:9 SergeyBiryukov3 years ago

  • Keywords ui-feedback added

comment:10 follow-up: chexee2 years ago

I took a look at this and wrote a patch that:
1) modifies some of the style to better match the current UI
2) makes it more mobile/responsive friendly
3) Modified the code style.

Specifically, here's everything the patch does:

  • Changes 11px border-radius to 3px
  • Adds more vendor prefixes for CSS3 attributes
  • On error pages, updated old Lucida font stack to sans-serif and updated link styles to match core.
  • removed the #f3f3f3 background color on table rows, so the styles match our form styles better.
  • Added a "Privacy" label next to the "Allow my website to appear in search engines" checkbox for better alignment and flow to the form.
  • Added a "install-success" class to the form and styled that screen to show the password larger.
  • Removed the <code> from the username an the final screen. Its not a filename or a password.
  • Changed "MySQL password" to "your MySQL password."
  • Removed explicit width and added max-width:700px to body.
  • Changes default font-size from 12px to 14px. These pages are short and should be read quickly.

Aaand screenshots:

All the affected screens: http://cl.ly/3v1u3b0O2z3o2i1O1Z3J

5-minute install responsive: http://cl.ly/0R0I0m1r3n0x3V0Z1w1R

Database info responsive: http://cl.ly/081F0Z2h1J05192s3P2M

Last edited 2 years ago by chexee (previous) (diff)

chexee2 years ago

comment:11 ramiy2 years ago

looks good.

comment:12 SergeyBiryukov2 years ago

Related: #18866 (has a patch for the "no configuration file exists" screen)

Last edited 2 years ago by SergeyBiryukov (previous) (diff)

comment:13 azaozz2 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

In [19297]:

Fix styling for the installation screens, props chexee, fixes #18576

comment:14 in reply to: ↑ 10 azaozz2 years ago

Replying to chexee:

Looks real good. Just one thing: we've removed most vendor prefixes for border-radius in core. FF doesn't need them any more and khtml is.. no more. The only one still needed is the -webkit for some mobile versions.

comment:15 nacin2 years ago

[19297] added <p> tags into a translated string, when wp_die() already echoed <p> tags. This caused unnecessary nesting (and broke the string for translators). See #20511.

Note: See TracTickets for help on using tickets.