Wedge

Public area => The Pub => Features => Topic started by: Arantor on January 15th, 2013, 07:27 PM

Title: Pages: [1] 2 3 styling
Post by: Arantor on January 15th, 2013, 07:27 PM
I think we need to do something with this, especially now that places are increasingly ditching use of [1] etc.

I was debating trying to use the styling we have for the note/notewarn/notenice classes for it, but then I figured it'd look wrong unless all the numbers were also encapsulated.

In other news, this is still way too small for practical use on a mobile device. Even on an iPad 3 it's too small (mind you, on an iPad 3, not even the full width is used in landscape, even including sidebar), though I won't be opposed to making it bigger just in Wireless.

Thoughts?
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on January 16th, 2013, 12:22 AM
That's wireless only if you ask me.
Then again...
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on January 16th, 2013, 12:25 AM
Visually, maybe, but the items should be class driven - instead of manually making it <strong> and putting [] around it, make it a span with class active or something - then you can style it the same way (using before/after to put the brackets in should you want to), or style it any other way.

It also gives themers the option of styling it how they like.
Title: Re: Pages: [1] 2 3 styling
Post by: live627 on January 16th, 2013, 09:17 AM
This was brought up at SMF a while ago. They concluded to keep the strong tags, for screen readers. Themers could still style it.
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on January 16th, 2013, 09:21 AM
strong tags just suggest emphasis and can always be turned into something else through styling, so I'm opting to keep them, too.

As for brackets, well, yeah, I *guess* we can do without them and add them through pseudo-classes... i.e. strong:before { content: "[" }, strong:after { content: "]" }
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on January 16th, 2013, 01:51 PM
Screen readers do CSS too..
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on January 16th, 2013, 02:01 PM
Event pseudo-classes..?
Okay, unrelated :P
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on January 16th, 2013, 02:05 PM
Don't know about that, but probably not, not that [] would be that meaningful...
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 1st, 2013, 11:13 PM
/mewonders how much the gzipped content will increase as pretty much every page has two of these on it...
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on February 1st, 2013, 11:52 PM
Sorry?
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 2nd, 2013, 12:00 AM
Suppose it were implemented. It would replace [<strong>1</strong>] with <span class="active">1</span> or similar, and there's two per page on a *lot* of pages. This says to me if it were implemented, even for just wireless, it would increase bandwidth use.
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on February 2nd, 2013, 12:14 AM
Why not just use the strong tag and just this one?
It can be restyled all the same...
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 2nd, 2013, 12:21 AM
That won't get rid of the [] though...

But yeah, hadn't actually thought of that.
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on February 2nd, 2013, 12:38 AM
Pseudo class!

:before
    content: "["
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 2nd, 2013, 12:39 AM
That's not what I mean, will still have to go edit the source to remove that. Though personally I'd rather not have the [] anyway...
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on February 2nd, 2013, 09:51 PM
Quote from Arantor on February 2nd, 2013, 12:39 AM
That's not what I mean, will still have to go edit the source to remove that. Though personally I'd rather not have the [] anyway...
There's only Display.php (to indicate "All pages") and the index template (template_page_index) that do this, as far as I know...?
It's just a matter of searching for [<strong> and removing the [.
I quite like the [] myself, but I'm not fussed. I think the main point in [] is that it helps differentiate the current page from other pages when neither the color contrast and font weight (depending on the used font) are enough to spot the difference.

Code: [Select]
nav strong
    font-weight: 700 // can be changed or removed, obviously...
    :before
        content: "["
    :after
        content: "]"

And removing it for a sub-skin should be as easy as...

Code: [Select]
@remove nav strong:before
    content: "["
@remove nav strong:after
    content: "]"

I should implement a way to entirely remove something without having to specify the code to remove... (Originally, @remove didn't even accept an extra parameter with the specific selector to impact.)
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 2nd, 2013, 10:06 PM
Quote
There's only Display.php (to indicate "All pages") and the index template (template_page_index) that do this, as far as I know...?
Yup... but how many places is template_page_index used? It's everywhere... the message index can invoke it multiple times (for pagination between pages of topics and for pagination to jump to a given page in a multipage topic), the display can, anywhere that uses the generic list... the list goes on.

(And don't forget it's typically used twice on a page where it is used, top and bottom)
Quote
I quite like the [] myself, but I'm not fussed. I think the main point in [] is that it helps differentiate the current page from other pages when neither the color contrast and font weight (depending on the used font) are enough to spot the difference.
Sure... but remember that back in the day we also had [] for indicating things like the number of unread PMs. Now that we have a bubble look for those, I'm inclined to go for stylistic consistency by dropping the [] from the template-page-index and using something else.

Ultimately, if we move it to CSS rather than hardcoded into the template, that will fix my first objection - because then it's styleable from the theme (even down to the strong, though I'd prefer something more semantic personally in the markup)
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 10th, 2013, 03:07 AM
This is ultimately what I had in mind.

All I've done is modified the CSS, adding this to index.css's declaration of .pagesection nav

Code: [Select]
strong extends .notewarn
@if ie[-9]
background-color: #d97b33
@else
gradient: lighten(#d97b33, 10%), darken(#d97b33, 10%)
@endif

Then removed the [] from the template. I think it would be nice to apply the same type of styling to the rest of the links.

(The reason 'go down' is like it is, is because it was already defined as strong anyway)

#d97b33 by the way is the colour of the board link, yes, technically I could have used $board_col in the CSS but this is experimental :P
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 10th, 2013, 03:14 AM
Something like the following perhaps.

This is a bit more drastic a change, so here's the full .pagesection nav declaration.

Code: [Select]
nav
float: left
padding: .3em 0 .3em
a[data-href]
font-weight: 700
a extends .notewarn
@if ie[-9]
background-color: $post_bg2
@else
gradient: $post_bg2, $post_bg
@endif
color: #47a !important
nav > strong extends .notewarn
@if ie[-9]
background-color: #d97b33
@else
gradient: lighten(#d97b33, 10%), darken(#d97b33, 10%)
@endif

The link colour is intended to be the same as normal link colour but that's not actually a variable, might be worth making it one in common.css. I just reused post_bg/post_bg2 because it's convenient.

There is a subtle advantage to doing this - the extra spacing is more fat-finger-friendly on mobile.
Title: Re: Pages: [1] 2 3 styling
Post by: godboko71 on February 10th, 2013, 05:11 AM
I like both, second for the fat finger friendly spacing.
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 23rd, 2013, 12:33 AM
Anyone else have anything to add about the spacing? I would kind of like to commit it. ;)
Posted: February 16th, 2013, 09:44 PM

Bump for great justice. This is a surprisingly important topic for me.
Title: Re: Pages: [1] 2 3 styling
Post by: Nao on February 24th, 2013, 02:03 PM
Again, you should PM me or bump multiple times when you want to catch my attention. As I said before, there are too many topics and I try to focus on development rather than development discussion (since I haven't found the magic formula that allows me to do both and also deal with real life...), anyway.

I'm afraid I don't like these alternatives. The second one is better but overall its font is only supposed to remind you of 'new' posts, so a number in that style would represent a post number, not a page number... I know, it's only very technical, but I certainly don't get why the 'next' and 'go down' links should be using the same font, too...

I'd suggest doing the same styling, but only for the numbers area. Do you want me to make a mockup or something...?

@godboko> Fat fingers should use Chrome for Android. It actually detects fat fingers and does a 'pop-up zoom' of the area you clicked, so that you can do a proper choice... I love how intuitive that one is. And, of course, iOS and Android Stock Browser don't have it... -_-
Posted: February 24th, 2013, 07:58 AM

It could be argued that Likes also use the same styling for numbers, so I'll try to think of it that way.

I've done various tests, and found one that I like enough.
It's done on the basis that only the numbers are styles. But the 'trick', is that you get the current page to be shown either on a green, or red background. The difference..? Green = it's all done. Red = there's new stuff to be found on this page.
I think it works well, but then another problem occurs to me: is it worth keeping the 'new' indicator next to later pages..? Just a simple example: let's say you've read all 3 pages of a topic... Then you go back to page 1, but in the meantime, someone posted in page 3. In the current Wedge, you'll see a New indicator in the page list. In the proposed change, you'll just see a green page number, and that's all.
Title: Re: Pages: [1] 2 3 styling
Post by: Arantor on February 24th, 2013, 02:58 PM
Quote
Again, you should PM me or bump multiple times when you want to catch my attention.
I did bump it multiple times and I did PM you about this one, haha. ;)
Quote
I'm afraid I don't like these alternatives.
This is why I've held off on committing them, much as it's been a bit awkward ;) I've been living with it since I wrote it and I'm not entirely satisfied with it but I can't tell you why. Incidentally, it isn't the go up/go down part that bothers me, it is actually the (1) itself for some reason >_< The orange does look out of place and catches me every time I see it.

/meis not a designer, would happily admit it.
Quote
I'd suggest doing the same styling, but only for the numbers area. Do you want me to make a mockup or something...?
Sure, just be careful about how you style it. There are places where this is used that aren't inside the <nav> tag, which do need different styling (e.g. multipage topics get a small page index next to the topic title which isn't restyled this way.
Quote
In the proposed change, you'll just see a green page number, and that's all.
Hmmm. Not sure what to make of that. It is an interesting idea, I'm just not sure how well it work work 'in real use'. Certainly the style works nicely enough, it's just the specific use of it.