New TD forum looks

[JvdL]

Nice work with the make over applied to the forums.. Though I ran into two slight problems;

1/ Images posted within a post have an alpha applied to it as well. Not too fond of this in all honesty.

2/ Browsing the forum on a smartphone became rather problematic. I'm unable to do anything with the forum on Android (did not have this problem with the previous version of the forum).

[mcm2boys]

Thanks John,

I use an android smart phone aand it seems to work on that - mine runs ice cream sandwich. What isn't working about it?

I'll look at changing the opacity for posted images. The change is a work in progress so we will tweak it as we go along.

[JvdL]

Using the latest Android on a HTC One here with the Chrome browser installed on it. As soon as you start zooming stuff starts disappearing. Posts being cut off in the middle, and unable to reach the end of the page where you could switch to another page within the post.

Jamie experienced the same issue on his Android phone.

Sent you two screenshots trough mail, if I still have your correct address.

[DirtTwister]

It has to be something in the CSS that Android Chrome doesn't like.  It works fine on my iPhone 5s, but I get the same results as John is describing on my LG G2.

It is theme related.  I was curious if it was SMF 2.0.8 related, but it isn't.  The default theme and the old TD theme work on the LG G2. 

Some of the problems seem to be related to the zooming.  The text isn't zooming at the same rate so the area starts to get clipped.  The main issue is there are multiple redraws and some things just don't get redrawn.  Moving the page slightly will cause them to get drawn and some things will never get drawn.

[JvdL]

Guess the theme just isn't set up properly for mobile or tablet at all. At least when I build websites I always add multiple screen width ranges in the CSS which change the settings for key objects per frame width. This can easily be tested by re-sizing the browser window on your PC. Doing this for the current theme that is being ran on here, it does not look pretty.

Old theme worked perfectly fine.

PS. Working with %'s instead of solid numbers also does wonders.

[DirtTwister]

For the most part this SMF theme and the previous SMF theme are identical except for the color changes.  The other changes are inherited from the style sheet used for the header.

I have disabled the opacity when we are using the forum.  There is still a problem with opacity on Android Chrome on the other parts of the site.

Laurie,  I created a new theme called TDDefault3 and an associated CSS file that we can use to experiment with going forward.  I would like to get to where we can use one CSS file.

John, I would like to avoid all those small screen exceptions myself.  I think the going trend is to start adding exceptions for larger displays.  The other site didn't deal with smaller than 1024 screens.  This is probably 900 pixels or so with SMF.

I plan to relook at adding Tapatalk.  I had a problem doing an upgrade before and had to remove it.  When I upgraded to SMF 2.0.8, I did a new install and added only the changes needed, so Tapatalk should install fine now.

[JvdL]

Just trying to help by giving a few tips on how you could easily sort device display issues the correct way. It's pretty common these days that CSS files are armed with CSS information for specific device types. I mean, we live in 2014 after all and pretty much all households have a mobile phone or a tablet (that might even get used more often than a PC). Personally have applied this to all my client websites of the last 2 years.

Code Select Expand

@media
only screen and (min-width: 769px) and (max-width: 1024px) {

YOUR CSS HERE

}

This is just a example.. Can go as far as even defining pixel ratio and DPI, all to ensure proper (retina ready) display for your website when viewed on various devices.

[DirtTwister]

I'm just not sure there is a correct way. 

These last set of changes works for everything that I use (safari on my Macs, Chrome on my Macs and PC, iPad, and iPhone).  I tend not to use my Android stuff much.  I'm actually shocked at how poorly Chrome does on Android with the opacity setting.  We look to the forums to help us identify things that need to be tweaked for things that we don't use. 

All though this is a couple of years old I still think this is the best way to approach it currently.

http://marcdrummond.com/responsive-web-design/2011/12/29/default-breakpoints-are-dead

Now we just need time or people to test along those guidelines.

[mcm2boys]

My guess would be that the side text 'TwistedD.I.R.T.' which is rotated 90deg is causing the problem, i can replace that with an image and hopefully the rest should work ok, unless you are thinking that the opacity is the problem. But like i say it works on my android devices, but i'm not using chrome so i'll take a look using that and see what comes up.

Like Bruce said the smf theme is just a few color changes. The header is totally different but quite simple so there is not much to go wrong. Is it just the forums or the home page that jams up?

[DirtTwister]

My guess would be that the side text 'TwistedD.I.R.T.' which is rotated 90deg is causing the problem, i can replace that with an image and hopefully the rest should work ok, unless you are thinking that the opacity is the problem. But like i say it works on my android devices, but i'm not using chrome so i'll take a look using that and see what comes up.

I also suspected the rotation as causing the frequent redraws and incomplete redraws, but my LG G2 completely stops freaking out when I remove the opacity line from the CSS.  It might be a combo.

It is every page that uses the opactity that is messed up using Android Chrome.  SMF is worse, probably because there is more to redraw and more to lose when the redraw is incomplete.

I have enabled tapatalk again, so that is another way to look at the forum on Android.

[JvdL]

This is from by phone browser. Everything seems ok now apart from the quick reply box width. For the rest I don't see any issues on chrome for android.

[mcm2boys]

Just tried it with Chrome and even with the opacity disabled if i scroll fast there are blocks that don't get drawn properly sometimes. Never did like chrome. 

Seems like it is just slow at drawing..

Also i don't see the TwistedD.I.R.T. text along the left side in chrome on my phone but i do in the regular android internet browser.

[DirtTwister]

Also the more you zoom in the worse it gets.

[JvdL]

Just tried it with Chrome and even with the opacity disabled if i scroll fast there are blocks that don't get drawn properly sometimes. Never did like chrome. 

Seems like it is just slow at drawing..

Also i don't see the TwistedD.I.R.T. text along the left side in chrome on my phone but i do in the regular android internet browser.

Never had this issue, and I don't exerpience it currently.

Can zoom all I want, and move as fast I want, it's all there within the blink of an eye.

So looks like it's fixed, at least for my end. Thanks! Now i'll have something to do again when I'm using public transport

[DirtTwister]

The quick reply box is messed up in SMF.  I'm not sure why they haven't fixed it yet.  It comes with a column width of 600 which puts the right edge way off to the right.  I changed it to 150 and that is probably a little too wide for some phones.

I probably should set up a 100% clean SMF to see if it comes that way now or it is some mod that I put on that changes it.

[DirtTwister]

Just trying to help by giving a few tips on how you could easily sort device display issues the correct way. It's pretty common these days that CSS files are armed with CSS information for specific device types. I mean, we live in 2014 after all and pretty much all households have a mobile phone or a tablet (that might even get used more often than a PC). Personally have applied this to all my client websites of the last 2 years.

Code Select Expand

@media
only screen and (min-width: 769px) and (max-width: 1024px) {

YOUR CSS HERE

}

This is just a example.. Can go as far as even defining pixel ratio and DPI, all to ensure proper (retina ready) display for your website when viewed on various devices.

I know we need to tweak the CSS so that it adjusts itself to flow on the smaller devices.  SMF has some hard coded stuff that would fight that some.  I prefer to do it without screen size thresholds as much as we can.  We also really need to make some tweaks that are browser dependent.  Do you know of any clean way within CSS to make decisions like that.  The only way I know is to build a check with javascript and then load different CSS files based on the results of those checks.

To support ease of upgrading in the future I prefer to limit mods to the SMF templates to CSS and some minimal mods to the template. So far we are only injecting the site header and a couple of fixes where necessary.

[JvdL]

Sorry, haven't had an eye on the forum for a bit.. Only just caught your question.

What type/how big of adjustments are we talking about that would be needed per browser?

[BPh]

I'm maybe off-topic, but it looks there are some troubles with Chrome on Android.
It's uninstalled on my Android, so I can't test it again, but when I check the latest comments on the PlayStore :
https://play.google.com/store/apps/details?id=com.android.chrome&hl=en
it looks like the latest updates are "wrong", no ?

BTW, good work with the new theme.

[DirtTwister]

Sorry, haven't had an eye on the forum for a bit.. Only just caught your question.

What type/how big of adjustments are we talking about that would be needed per browser?

It would be good to adjust things if you are on Chrome on Android.  I only know how to adjust in CSS based on a few device capabilities which says nothing about whether it's a mobile device or if it's Chrome on Android.  To do anything device specific the only way I know how to do it is with Javascript and use that to load different CSS.