Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#13 2012-03-22 10:45:13

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

Bloke wrote:

Regarding the align="left" on the headings, that’s from the tdcs() (td colspan) function so it’ll affect every tag and plugin that uses the function. I’ll check what the fallout is.

<td> table cells should default to left alignment if no attribute or CSS is set on them, so should be OK – but needs checking yes.

Last edited by philwareham (2012-03-22 10:45:31)

Offline

#14 2012-03-22 11:44:01

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

Not strictly inline styling issues – but while we are on a roll with the admin side, a few more improvements if I may. The pophelp links are positioned inconsistently at the moment, so…

Users page

Can we move the pophelp links on ‘Add New Author’?

Ideally the one that is currently after the submit button should go after the email label like so:

<tr class="email">
  <td class="noline cell-label"><label for="email">E-mail </label> <a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></td>
  <td class="noline"><input type="text" value="" name="email" class="edit" /></td>
</tr>

And move the pophelp on the privileges one like so:

<tr class="privs">
  <td class="noline cell-label"><label for="privs">Privileges </label> <a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></td>
  <td>
    <select name="privs" class="list">
      <option value="1">Publisher</option>
      <option value="2">Managing Editor</option>
      <option value="3">Copy Editor</option>
      <option value="4">Staff Writer</option>
      <option value="5">Freelancer</option>
      <option value="6">Designer</option>
      <option value="0" selected="selected">None</option>
    </select>
  </td>
 </tr>

Sections page

Move all the pophelps to the label cells, for example:

<tr class="option on-frontpage">
  <td class="noline cell-label">On front page <a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></td>
  <td class="noline">
    <input type="radio" id="about-on_frontpage-0" name="on_frontpage" value="0" class="radio active" checked="checked" /><label for="about-on_frontpage-0">No</label>
    <input type="radio" id="about-on_frontpage-1" name="on_frontpage" value="1" class="radio" /><label for="about-on_frontpage-1">Yes</label>
 </td>
</tr>

Diagnostics page

Move the pophelp on preflight check so it’s part of the <h2> like so:

<h2>Pre-flight check <a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></h2>

Preferences pages

Current structure is:

<tr id='prefs-sitename' class='publish-prefs odd'>
  <td class="pref-label cell-label"><label for="sitename">Site name</label></td>
  <td class="pref-value"><input type="text" value="My Site" name="sitename" size="20" class="edit" id="sitename" /></td>
  <td class="list-item"><a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></td>
</tr>

Would be much better as:

<tr id='prefs-sitename' class='publish-prefs odd'>
  <td class="pref-label cell-label"><label for="sitename">Site name</label> <a target="_blank" href="#" onclick="popWin(this.href); return false;" class="pophelp">?</a></td>
  <td class="pref-value"><input type="text" value="My Site" name="sitename" size="20" class="edit" id="sitename" /></td>
</tr>

That removes the need for the illogical third cell as well.

Offline

#15 2012-03-22 12:26:13

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Inline style eradication programme

philwareham wrote:

Not strictly inline styling issues – but while we are on a roll with the admin side, a few more improvements if I may. The pophelp links are positioned inconsistently at the moment, so…

Users page

Can we move the pophelp links on ‘Add New Author’?

Ideally the one that is currently after the submit button should go after the email label like so:

That one sounds good.

And move the pophelp on the privileges one like so:

Sections page

wouldn’t that feel rather cluttered ?

Diagnostics page

Move the pophelp on preflight check so it’s part of the <h2> like so:

the problem is that there are ‘?’ for each line that flags an error. On my set up I see at least 2 ‘?’ (files modified + development files on live server warning).

Preferences pages

Same as above for Sections page.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#16 2012-03-22 12:59:12

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

phiw13 wrote:

wouldn’t that feel rather cluttered?

No.

the problem is that there are ‘?’ for each line that flags an error. On my set up I see at least 2 ‘?’ (files modified + development files on live server…

Ah, I thought there was just one pophelp instance here – happy to leave that as is.

Last edited by philwareham (2012-03-22 13:00:49)

Offline

#17 2012-03-22 13:09:09

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Inline style eradication programme

philwareham wrote: (about the diagnostics page)

Ah, I thought there was just one pophelp instance here – happy to leave that as is.

We still could move the help-link to be next to the introductory text (‘the following files have bla bla bla’) – or is that introductory text not always available ? Perhaps not (‘set up still exists’ doesn’t seem to have more than that)

We’ll have to agree to disagree on the other moves, though.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#18 2012-03-22 13:33:17

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

phiw13 wrote:

We’ll have to agree to disagree on the other moves, though.

I can see your point, but having the help links next to the label is no more (or less) cluttered than having them after the input fields – and it would then be following the structure used elsewhere on the admin area…

<label><help>
<input>

…which I think is more logical UX-wise (user sees label, doesn’t understand label, clicks help link next to it). It also makes it easier to build a responsive page in the future. The less table cells we have now the better.

Last edited by philwareham (2012-03-22 13:33:41)

Offline

#19 2012-03-23 07:12:53

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Inline style eradication programme

philwareham wrote:

<label><help>
<input>

There is the difference: I see a linear unit in this case, whereas you include a line-break. Displaying this horizontally or vertically (one on top of the other) is a presentation question, a few lines of CSS. This is independent of text-writing mode (T to B, L to R, R to L).

<label> <input> <help>

Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#20 2012-03-23 07:16:55

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Inline style eradication programme

Slightly OT for this thread, but as we are talking about clean up in the presentation of the admin side. Is the class .dlink still used anywhere ? It is still referred to in classic/textpattern.css (a.dlink), but i haven’t found it being used. I might have missed something, though.

Last edited by phiw13 (2012-03-23 07:17:21)


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#21 2012-03-23 07:53:07

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

phiw13 wrote:

<label> <input> <help>

OK, but the W3C don’t agree with you.

The line break is irrelevant, I’m just talking about the help link in this case. I also think there is a good case for wrapping the help link inside the label tag as they do in the W3C example.

Last edited by philwareham (2012-03-23 07:53:20)

Offline

#22 2012-03-23 08:28:06

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 3,058
Website

Re: Inline style eradication programme

philwareham wrote:

OK, but the W3C don’t agree with you.

good for you, then.
I disagree on that point.


Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern

Offline

#23 2012-03-28 16:00:32

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,564
Website GitHub Mastodon

Re: Inline style eradication programme

Hi Stef,

There’s still plenty of inline styling in the setup pages (textpattern -> setup -> index.php), I can take a look over it sometime in the next couple of days and provide some code changes. I know it’s not 100% essential since it won’t affect theme authors at all, but we might as well keep things consistent and tidy throughout.

Also, as you are eradicating the tabindex attributes, there are some left in the setup page, which I’ll highlight.

PS. any chance we can get the <p id="list_banned_ips"><a href="#">List banned IPs</a></p> reinstated?

Last edited by philwareham (2012-03-28 16:03:31)

Offline

Board footer

Powered by FluxBB