Simple Machines Community Forum

SMF Support => SMF 2.1.x Support => Topic started by: RolandK on December 02, 2014, 06:40:44 PM

Title: Responsive Curve2 Theme
Post by: RolandK on December 02, 2014, 06:40:44 PM
* If this belongs to bug reports, feature requests, or any other category, feel free to move this topic.

Hello,

I am testing the Beta of SMF 2.1 and have noticed the page content jumping when the browser window is resized. This happens due to the responsive new theme, which is is a nice feature for mobile browsers.

2.1 is still in beta, so you may already be aware of this behaviour, but you may also be open for suggestions:

Looking forward for 2.1 stable. Keep up the good work!
Title: Re: Responsive Curve2 Theme
Post by: Antes on December 02, 2014, 07:36:40 PM
Hmm... Fixed width must die that's for sure :/ because to get maximum value for small screens we use 100% for wrapper.

You cannot enable/disable the responsive theme for mobile only... its a purely CSS work (you need to use checks to see if its mobile etc...), we choose the responsive because of not having that type of work on us. You can disable it completely by removing index.responsive.css. I'm not fan of adding yet another setting.
Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 02, 2014, 07:41:12 PM
QuoteAllow to enable the responsive theme feature for mobile browsers only

The entire point of 'responsive' is that it responds to what the user is using - one theme for everything.
Title: Re: Responsive Curve2 Theme
Post by: Kindred on December 02, 2014, 08:08:14 PM
A responsive theme should never ever have a fixed width.

And as Arantor says, responsive means that you use one theme and it properly resizes down when viewed on different devices/screen widths...   Making it mobile only would defeat the very purpose of making it responsive...   And mobile only themes are outdated and outmoded...   Responsive it the way forward.


And no...   Disabling the responsive design would essentially mean a different theme. If you want that, then use a different, fixed theme. The default theme will remain responsive by design.
Title: Re: Responsive Curve2 Theme
Post by: stmaxx on December 03, 2014, 07:24:44 AM
I like the Default theme the way it is! responsive, and I'm working on a darker theme to go with mine, and then maybe a responsive main menu, that will, go to the menu like narrow icon, for the drop down.

Give it time, and after SMF starts reviewing the MODs ) I guess when in the RC stages, someone may come up with a mobile detect mod and theme, I have seen them on other projects that work nicely. ( I'm not fan of these apps )

But, please keep in mine that..there are some issues with using mobile detect scripts and mods, that force people to get or buy and app, to view 3rd party content, that you may want on your site and keep your visitor there! One example is youtube, if your videos on some "How to" ( 3rd party networks ) subjects or news, they will only show a link in the window to view this content on youtube, thus taking your visitors away. ( not good). Some phones will take them to the source anyway and try force the app on you or them. (when do we get free information back to Net?)....just saying!

Now whenever, I view my site, ( responsive in the windowz phone) , it will show the video on my site, in the typical phone browser and it fits in the little phone perfectly! Tablets even better!

I have toyed with the responsive stuff for a few years now, and other ways as well.

I feel SMF is moving in the right direction, I'm liking it as stated before!

New app, How to pay for all this stuff you'll need?  lol :)

Below plz find the menu I'm working on, the screen shows it open or dropped own!


Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 03, 2014, 10:38:39 AM
Of course there are issues with mobile detection... which is PRECISELY WHY 2.1 DOESN'T.
Title: Re: Responsive Curve2 Theme
Post by: stmaxx on December 03, 2014, 10:41:02 AM
I'm agreeing! :) as I said I like it!

I was just speaking in general, I know you guys know! It's So the newer users know!
some that read this may not already know!

Title: Re: Responsive Curve2 Theme
Post by: RolandK on December 04, 2014, 04:00:33 PM
I didn't intend to deny the benefits of responsive themes. In my case, I prefer my forum to look like the remaining pages of my website, which are 950px in width. If the forum is still easily readable with screen resolutions below 950px, nicely done! But the forum should not expand beyond 950px, no matter how high the screen resolution may be.




Instead I wanted to encourage some more options that perhaps may be useful (or more convenient ;)), while the development still is in beta. For example defining the (min&max) width of the responsive theme, since there already exists a dedicated section for the layout in the administration center. Or point out the jumpy transition when resizing the browser window.
It is your choise to claim it just depends on the css files. Then again, if users have to edit these css files, some will give up at this point.





So, if anyone is interested in how to limit the maximum width of the responsive theme by editing the index.css file:

Replace:
/* These divisions wrap the forum sections when a forum width is set. */
#wrapper, .frame {
   margin: 0 auto;
   min-width: 760px;
}


With this:
/* These divisions wrap the forum sections when a forum width is set. */
#wrapper, .frame {
   margin: 0 auto;
   min-width: 760px;
   max-width: 950px;
}
Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 04, 2014, 04:12:36 PM
That would not be how I'd limit it since that would affect most tablets as well as desktops...
Title: Re: Responsive Curve2 Theme
Post by: Bloc on December 05, 2014, 01:19:27 PM
And not to mention high DPI phones. Every device should really be utilizing full width - except maybe for high resolution desktops. The problem is that pages are built primary for rather narrow widths, the page is aways much longer than wide(if it contains any content to speak of). If that content was presented utilizing also the width available on for example desktops, you would never need 960px fixed width...

I have tried to make themes that adress this somewhat by being 100% up to about 1200px - but if the device have higher dpi(meaning smaller actual surface) they get treated like the smaller desktop sizes.

I only wish img tag had support for multiple sources, that could be targeted by media queries...
Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 05, 2014, 01:21:15 PM
Actually, img does support multiple sources in HTML5, see the srcset attribute.
Title: Re: Responsive Curve2 Theme
Post by: Bloc on December 05, 2014, 01:37:18 PM
Yes, but its not supported widely yet, as seen on this page: http://caniuse.com/#feat=srcset

But it is exactly the thing thats needed though :) so heres hoping it will be supported by all major soon. It seems way better than the <picture> scheme.
Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 05, 2014, 01:48:15 PM
I know :(
Title: Re: Responsive Curve2 Theme
Post by: Bloc on December 05, 2014, 03:15:30 PM
In the meantime..I am trying right now a more hackish way of showing optimal images for "blog" posts, involving background-image,background-size and id's to set specific images using media queries. Using display:table/table-cell solves the problem of having to set a height that might or might not fit the text next to it. It doesn't grow any bigger than the text height though, which is a little better.

Still not so easy as it would be with srcset I would imagine, but sort of mimicking it. And of course theres no *image* in the sens of a dedicated image tag..but it does allow me to create optimal images to be used on different resolutions instead of a single image + a thumb of one-size-fits-all. 

This is not that crucial on (image)attachments in SMF, but very useful on illustrative images following the width at hand.
Title: Re: Responsive Curve2 Theme
Post by: Arantor on December 05, 2014, 03:17:13 PM
*nods* That's certainly a workable solution :)
Title: Re: Responsive Curve2 Theme
Post by: devalt on January 16, 2015, 03:53:27 PM
The top menu remains on the screen when viewed on a small device.  Attached is a screenshot from my phone showing the menu along with a more responsive design.  The menu should move to the "hamburger" icon in the top right hand corner of the screen.
Title: Re: Responsive Curve2 Theme
Post by: Antes on January 16, 2015, 04:07:11 PM
New version of SuperFish is compatible with all range of devices, one-tap to open the menu second tap to follow the link (tested on Galaxy S3/4 - Lumia 520 - iPhone 5/6).