Topic: Responsive Curve

[SMF Customization Team]

Link to Mod

Responsive Curve (Beta) for SMF 2.0.x

License

Code: [Select]

Copyright (c) 2015, Simple Machines
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright
      notice, this list of conditions and the following disclaimer in the
      documentation and/or other materials provided with the distribution.
    * Neither the name of the <organization> nor the
      names of its contributors may be used to endorse or promote products
      derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Included images
Fugue Icons | © 2012 Yusuke Kamiyamane | These icons are licensed under a Creative Commons Attribution 3.0 License


Compatibility
SMF 2.0.x


Description
This MODification adds a basic responsive layout to SMF 2.0.x


Installation Information
The Package Manager should work in most cases, if you have problems installing please use the discussion topic as well as the Manual Installation of Mods wiki page.

New! You can read tips written for responsive mod here

Change Log

Version 1.0 Beta 5 - June 11 2015
! Resolution range decreased to 720px (it was 780px), this will fix iPad users' too much responsive problem.
! Resolution range decreased to 240px (it was 300px), this will allow much wider range of old devices to navigate forum without problem
! Small margin changes on main_menu (dropmenu) for small devices (240px-640px)
! index_common_stats now hidden due to template styling (for small devices)
! Improvements for iPhone 4 (+earlier) users (now they can see menu if they can't before)
! Keyinfo now back but not fully, posts now showing time_stamp (as requested)
! A dirty fix added for Simple Portal (don't get your hopes up, can be removed before stable release)
! Problem with size on wrapper element fixed (fingers crossed )

Version 1.0 Beta 4 - May 8 2015
! Stats page (action=stats) blank issue fixed and size increased
! Unread topic/posts issue fixed
! Profile stats now has bigger size
! Report to mod box width/height changed on small screen

Version 1.0 Beta 3 - April 23 2015
! Google test fail problem fixed
! Login button size issue fixed

Version 1.0 Beta 2 - April 20 2015
! Missing end tag creates XHTML validation error

Version 1.0 Beta 1 - April 16 2015
- Initial release

[Kindred]

do note, this initial release - while tested within the team, does need wider testing and may receive tweaks and updates based on reports submitted by folks who use it (YOU!)  So, please DO install this!

Nothing in this mod should "crash" your forum - it is MOSTLY CSS.

if you have questions or discover any issues, please post here and let us know.  This is an officially supported mod, so the SMF team will work to keep it up-to-date and clean.

[vbgamer45]

On one of the sites I have installed it on as guest makes the login button very wide http://www.smfarcade.com/forums/index.php viewing in google chrome.

[Antes]

You can resolve that issue with adding code after mobile_on class in responsive.css

Code: [Select]

.responsive_menu.login
{
min-width: 16px;
width: auto;
}

[vbgamer45]

Ok what about for custom menu additions will I have to do something similiar for each one?

[Kindred]

yes... probably so.

The main point is that this mod makes the DEFAULT (Curve) theme somewhat responsive.
We have already stated, outright, that this does NOT fix any mods and many mods may "break" the responsiveness.

[Antes]

Ok what about for custom menu additions will I have to do something similiar for each one?

Unlike SMF 2.1 there is no fallback (you know), you need to add

Code: [Select]

.responsive_menu.custom_action {
background: url(...) no-repeat;
}

[SaltedW]

Hi there,
I read your release posting and here, call me inexperienced in understanding but when you say,

"The main point is that this mod mades the DEFAULT (Curve) theme somewhat responsive."

What does that mean exactly as I am unsure what somewhat responsive converts too ?
Not really sure what the mod does , I am asking moreover because I use a curve variant and
wonder what this does , or is needed in my case.

Thanks

[Kindred]

I am not quite sure how else to explain it.
This mod makes the Curve theme somewhat responsive - enough to satisfy Google, as far as we can tell.

Like any other mod, it will ATTEMPT to install on alternate themes.... but we only BUILT it for Curve.
If you receive installation errors with any other theme, then you will have to take that up with the theme's author.

[Antes]

Hi there,
I read your release posting and here, call me inexperienced in understanding but when you say,

"The main point is that this mod mades the DEFAULT (Curve) theme somewhat responsive."

What does that mean exactly as I am unsure what somewhat responsive converts too ?
Not really sure what the mod does , I am asking moreover because I use a curve variant and
wonder what this does , or is needed in my case.

Thanks

Good question actually.

What is the meaning of "responsive"? it means your theme will adapt itself based on the resolution. It'll hide some parts of the forum or increase width to show as block (beside side by side).

How many changes you did on the theme ? If its a simple color changes (or converting images to CSS3) you are good with this, otherwise you may experience problems. Best part of this modification, you don't have to worry about stuff, because it doesn't do database or source changes so it just changes some templates and does most of the work with responsive.css file.

[Kindred]

thanks Antes, good explanation

[SaltedW]

Hi there,
I read your release posting and here, call me inexperienced in understanding but when you say,

"The main point is that this mod mades the DEFAULT (Curve) theme somewhat responsive."

What does that mean exactly as I am unsure what somewhat responsive converts too ?
Not really sure what the mod does , I am asking moreover because I use a curve variant and
wonder what this does , or is needed in my case.

Thanks

Good question actually.

What is the meaning of "responsive"? it means your theme will adapt itself based on the resolution. It'll hide some parts of the forum or increase width to show as block (beside side by side).

How many changes you did on the theme ? If its a simple color changes (or converting images to CSS3) you are good with this, otherwise you may experience problems. Best part of this modification, you don't have to worry about stuff, because it doesn't do database or source changes so it just changes some templates and does most of the work with responsive.css file.

OK Cool makes sense now.  Thank you for spelling it out like you did very helpful.

[Poύνικ]

as the mod doesnt alter doctype then people will get validation errors breaking the approval guidelines

[Illori]

if they do change the doc type it will cause even more validation issues, especially with the language strings that have <br /> in them.

[margarett]

Nop. I did perform a validation in W3C and it passed with flying colors

We are not *THAT* idiots

[Poύνικ]

thats weird as I just tested with a fresh install and it failed

[Illori]

the only fail i see, is on the viewport meta tag line...

Line 21, Column 70: end tag for "meta" omitted, but OMITTAG NO was specified

   <meta name="viewport" content="width=device-width, initial-scale=1">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

[margarett]

Indeed. I fixed that error (which has nothing to do with the DOCTYPE ) but it seems that the wrong package was uploaded
Fixing it right now.

Thank you for bringing it up.

[Poύνικ]

i get that one then when you change to html5 it says wrong doctype (but validates besides for that)

[margarett]

Yeah because HTML5 doesn't demand self-closing tags as XHTML does. Thus the error.
(but you know this better then me )