« Micro feature: escliteral type
Pages: [1] 2 3 styling
Reply to New Topic »

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Pages: [1] 2 3 styling
« Reply #15, 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.)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pages: [1] 2 3 styling
« Reply #16, 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)
Re: Pages: [1] 2 3 styling
« Reply #17, 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

📎 revamped_styling.png - 15.58 kB, 654x251, viewed 191 times.

Re: Pages: [1] 2 3 styling
« Reply #18, 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.

📎 revamped_styling_2.png - 17.02 kB, 731x244, viewed 189 times.

When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

godboko71

  • Fence accomplished!
  • Hello
  • Posts: 361
Re: Pages: [1] 2 3 styling
« Reply #19, on February 10th, 2013, 05:11 AM »
I like both, second for the fat finger friendly spacing.
Thank you,
Boko

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pages: [1] 2 3 styling
« Reply #20, 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.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Pages: [1] 2 3 styling
« Reply #21, 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.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Pages: [1] 2 3 styling
« Reply #22, 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.

* Arantor is 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.
« Micro feature: escliteral type
Reply to New Topic »