Skip to main content
Responsive design shiz. Started by Antechinus · · Read 28620 times 0 Members and 1 Guest are viewing this topic. previous topic - next topic

Re: Responsive design shiz.

Reply #30

Quote from: emanuele – And BTW: how many people are actually using a phone to type a post in a forum?
I don't post too ofter with the phone, but I do,  and  I do use it a lot to keep up to date and do any moderation things that need to be done. I use the smf4mobile theme, although I use my own mobile detection stuffz for auto switching to the mobile theme (profile option as well).  And I get the jquery mobile stuff from cdn as well, lots of sites are using that so it usually cached away.

Re: Responsive design shiz.

Reply #31

Quote from: emanuele –
Quote from: TestMonkey – >> Do we need to redesign the web every time Apple releases a new device?
(comment somewhere on iPhone and Retina displays)
QFTW!

And BTW: how many people are actually using a phone to type a post in a forum?

http://www.spudsdesign.com/dialogo/index.php?topic=49.msg334#msg334
 O:-)
The best moment for testing your PR is right after you merge it. Can't miss with that one.

Re: Responsive design shiz.

Reply #32

It was just an ebook reader... O:-)
Bugs creator.
Features destroyer.
Template killer.

Re: Responsive design shiz.

Reply #33

Quote from: Spuds –
Quote from: emanuele – And BTW: how many people are actually using a phone to type a post in a forum?
I don't post too ofter with the phone, but I do, and I do use it a lot to keep up to date and do any moderation things that need to be done. I use the smf4mobile theme, although I use my own mobile detection stuffz for auto switching to the mobile theme (profile option as well). And I get the jquery mobile stuff from cdn as well, lots of sites are using that so it usually cached away.
I was going to disable admin on mobile simply because wireless network sare so insceure.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive design shiz.

Reply #34

BTW, this is how far I've got with my non-jQuery 1.1.x guinea pig. Works everywhere except for some of the more obscure pages. All the usual thread and PM stuff fits and works. It just uses a ['browser']['is_touchscreen'] detector thingy to switch chunks of markup, along with some css tweaks n stuff.

Oh yeah, it runs full Tiny Portal shiz too. The nutters wanted it all, so that's what they got.
Last Edit: December 23, 2012, 01:52:44 am by Antechinus
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive design shiz.

Reply #35

Looks interesting! Much better than the current experience to browse this site on Opera Mini. :D
The best moment for testing your PR is right after you merge it. Can't miss with that one.

Re: Responsive design shiz.

Reply #36

Yeah I thought I'd it without any jQuery, just because I was only using jQ for some fancy stuff for desktop anyway, so it was easy to do without for little buggers. Might still make some things more compact, but that will depend on who grumbles about what.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive design shiz.

Reply #37

To be honest that looks better than any other I've used, including tapatalk nonsense.

Re: Responsive design shiz.

Reply #38

Dumb *** at Android have gone and made their use of selects impossible. Can have them working perfectly on desktop but they'll be borked in Android. Beats me why the idiots don't make click on a select option work just like click on a normal link. FFS. This is back to IE6 days.

ETA: Have decided that I'm just going to load jQuery for everyone, and use it to convert the hover drops to click drops on touchscreen. Less code for me to write. Same markup as hover, very little extra css. If anyone doesn't like it, they can complain to Android. :P
Last Edit: June 11, 2013, 04:05:22 pm by TestMonkey
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive design shiz.

Reply #39

Hey looky: this is what I did after I stopped grumbling about Android. ;D
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Responsive design shiz.

Reply #40

BTW, this thing has been streamlined a bit more over the past month or so. I ended up using a rather nifty trick on it. Being 1.1.x, it uses the same variant changing code that most 1.1.x themes use.

I've never bothered to try and figure out why, but these codes always seem to use something that has both $settings['theme_layout'] and $options['theme_layout'] instead of just one or the other. $options['theme_layout'] is, of course, the one stored in the member's profile. $settings['theme_layout'] is just used in some places in the templates, but $options['theme_layout'] is used a lot in the templates too.

What I've done is replace most instances of $options['theme_layout'] in the templates with $settings['theme_layout']. What this does is allow calling the mobile stylesheet and markup on the basis of $settings['theme_layout'] without altering the $options['theme_layout'] that is set in profile.

This means that I can use the one theme for all, and still have auto detection of mobile (with appropriate content and presentation fed to it) while still keeping the member's preferred layout option when they log in from their regular pooter.

Works like this:

Code: [Select]
	// Any layout set by user?
if (isset($options['theme_layout']))
{
($context['browser']['is_mobile']) ? ($settings['theme_layout'] = 'Mobile') : ($settings['theme_layout'] = $options['theme_layout']);
}

// If not set, or if not allowed to set
if(!isset($options['theme_layout']) || (isset($settings['allow_layout_change']) && $settings['allow_layout_change'] == 'no'))
{
// Defaults.
($context['browser']['is_mobile']) ? ($options['theme_layout'] = 'Mobile') : ($options['theme_layout'] = isset($settings['theme_layout']) ? $settings['theme_layout'] : 'Standard');
$settings['theme_layout'] = $options['theme_layout'];
}

I'm quite chuffed with it. It's more versatile than the 2.0.x/2.1/whatever theme variant system, and actually requires less code to run it, because there's bugger all in Sources apart from the mobile detection in the browser array. All I'm doing is calling the mobile stylesheet instead of the others, and using a few php ($context['browser']['is_mobile']) ? conditionals to drop unnecessary markup/js/etc on mobile, in large chunks with minimal checking.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P