[Implemented] Forum Stats Look

@Ange Tuteur

The forum stats (topics, posts, views) are kind of elevated.

I know this is picky but this works on my forum and I modified it to work here on FMDesign.

Code:

$(function() {
  var e = $('.forum-block .forum-block-inner > div'), s, h;
  if ( e.html() != undefined ) {
    s = window.getComputedStyle(e.filter('.forum-lastpost')[0]);
    h = s.getPropertyValue('height');
    e.filter('.forum-stats').css('height', h);
    e.filter('.forum-stats').find('.number').css('line-height', ( h.replace('px', '') / (3 / 2) ) + 'px');
  }
});

Edit: Hey AT <3

—

—

—

—

—

—

Ah yeah, I know about that, it's the same on phpbb3 too. It doesn't bother me, but I'm sure your script will be useful to people who don't like it either. Personally, I don't like making style modifications via JS, but in some instances it's necessary like in this case. Still, I wonder if we can reach the same result with CSS. I have a few ideas, but they're kind of hackish -- especially the position related ones.. perhaps calc might be useful ..? hm.. this is something to think about..

Oh true. Vertical align doesn't really work and I don't like using position unless the container is really small.

Mind sharing your ideas?

I was thinking calc might come in handy, but at the moment I'm drawing a blank.

It's like a journy for the holy grail, finding a solution that doesn't require javascript. I always used to do it back in the day. I'll probably look over it more later unless you beat me to the grail.

Oh WHAT I didn't think normal CSS could pass functions as the property values

I guess it's time to put this to use

@Ange Tuteur Guess I won lol

Code:

.forum-stats { height: 40px; }

.forum-stats > div {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Oh damn, that seems to be spot on ! Nice

Ace 1 wrote:Oh WHAT I didn't think normal CSS could pass functions as the property values

There's a lot of experimental tech. Did you check out the CSS variables ? It's sorta like SASS.
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

Oh snap, is this how you did ForumActif Edge?

Nah, since the tech isn't a standard yet I just used a class name for the majority of colors. They are :

- .color-primary (69C)
- .color-secondary (345)
- .color-tertiary (FFF)

First two were used the most if I recall correctly.

I read the browser compatibility and it works on everything but Explorer ._.

And everything I read about is "experimental" and "hasn't been released yet" smh. W3C needs to stop keeping all this good stuff from us.

@Ange Tuteur When you gonna implement this babe

Forgot How's it now ?

LES GOO

I'm important