Advertisement:

Author Topic: Responsive Curve  (Read 125628 times)

Offline SMF Customization Team

  • Customizer
  • Semi-Newbie
  • *
  • Posts: 69
    • SMF Customization Site
Responsive Curve
« on: April 20, 2015, 06:33:49 AM »
Link to Mod

Responsive Curve 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.0 - March 21 2016
! Padding of select and imput boxes enlarged to avoid bad UX.
! Admin menu changes to improve its responsiveness.
! fix for main_menu weird background creation on tap/hover.
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 :P )

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
« Last Edit: June 11, 2015, 08:00:14 AM by Antes »

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,916
  • Gender: Male
    • Kindred-999 on GitHub
Re: Responsive Curve
« Reply #1 on: April 20, 2015, 08:22:43 AM »
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.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline vbgamer45

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,245
    • smfhacks on Facebook
    • VBGAMER45 on GitHub
    • @createaforum on Twitter
    • SMF For Free
Re: Responsive Curve
« Reply #2 on: April 20, 2015, 09:02:45 AM »
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.
Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Responsive Curve
« Reply #3 on: April 20, 2015, 09:11:52 AM »
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;
}
« Last Edit: April 20, 2015, 09:26:11 AM by Antes »
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline vbgamer45

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,245
    • smfhacks on Facebook
    • VBGAMER45 on GitHub
    • @createaforum on Twitter
    • SMF For Free
Re: Responsive Curve
« Reply #4 on: April 20, 2015, 09:25:30 AM »
Ok what about for custom menu additions will I have to do something similiar for each one?
Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,916
  • Gender: Male
    • Kindred-999 on GitHub
Re: Responsive Curve
« Reply #5 on: April 20, 2015, 09:52:32 AM »
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.
« Last Edit: April 20, 2015, 11:45:09 AM by Kindred »
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Responsive Curve
« Reply #6 on: April 20, 2015, 09:55:31 AM »
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;
}
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline SaltedWeb

  • Full Member
  • ***
  • Posts: 549
  • Web Systems Since 1995 SMF Since 2005
Re: Responsive Curve
« Reply #7 on: April 20, 2015, 11:07:19 AM »
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
You have a choice in life, run it yourself. Or abandon freedom and let others do it for you.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,916
  • Gender: Male
    • Kindred-999 on GitHub
Re: Responsive Curve
« Reply #8 on: April 20, 2015, 11:48:14 AM »
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.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline Antes

  • Evil Black Cat
  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,643
  • Gender: Male
  • Black cat rulz!
    • Antes on GitHub
    • merta on LinkedIn
    • @antesistan on Twitter
    • Lunarfall
Re: Responsive Curve
« Reply #9 on: April 20, 2015, 11:49:04 AM »
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.
Active Project(s): [ SimpleDesk ] # [ Lunarfall ] # [ CoreStore ]

Past Project(s): [ ezPortal ]

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 54,916
  • Gender: Male
    • Kindred-999 on GitHub
Re: Responsive Curve
« Reply #10 on: April 20, 2015, 11:56:05 AM »
thanks Antes, good explanation
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline SaltedWeb

  • Full Member
  • ***
  • Posts: 549
  • Web Systems Since 1995 SMF Since 2005
Re: Responsive Curve
« Reply #11 on: April 20, 2015, 12:09:31 PM »
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.
You have a choice in life, run it yourself. Or abandon freedom and let others do it for you.

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,008
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: Responsive Curve
« Reply #12 on: April 20, 2015, 04:37:56 PM »
as the mod doesnt alter doctype then people will get validation errors breaking the approval guidelines :P

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 47,680
Re: Responsive Curve
« Reply #13 on: April 20, 2015, 04:53:12 PM »
if they do change the doc type it will cause even more validation issues, especially with the language strings that have <br /> in them.

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,762
  • Gender: Male
Re: Responsive Curve
« Reply #14 on: April 20, 2015, 04:53:38 PM »
Nop. I did perform a validation in W3C and it passed with flying colors ;)

We are not *THAT* idiots ;D
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,008
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: Responsive Curve
« Reply #15 on: April 20, 2015, 05:37:26 PM »
thats weird as I just tested with a fresh install and it failed :P

Offline Illori

  • Project Manager
  • SMF Master
  • *
  • Posts: 47,680
Re: Responsive Curve
« Reply #16 on: April 20, 2015, 05:47:26 PM »
the only fail i see, is on the viewport meta tag line...

Quote
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 ">".

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,762
  • Gender: Male
Re: Responsive Curve
« Reply #17 on: April 20, 2015, 05:48:43 PM »
Indeed. I fixed that error (which has nothing to do with the DOCTYPE :P ) but it seems that the wrong package was uploaded :(
Fixing it right now.

Thank you for bringing it up.
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair

Offline BryanD

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 22,008
  • Gender: Male
    • BryanRunicDeakin on Facebook
    • @bryandeakin on Twitter
    • Bryan Deakin dot Com
Re: Responsive Curve
« Reply #18 on: April 20, 2015, 05:55:48 PM »
i get that one then when you change to html5 it says wrong doctype (but validates besides for that)

Offline margarett

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 19,762
  • Gender: Male
Re: Responsive Curve
« Reply #19 on: April 20, 2015, 05:58:40 PM »
Yeah because HTML5 doesn't demand self-closing tags as XHTML does. Thus the error.
(but you know this better then me :P )
Se forem conduzir, não bebam. Se forem beber... CHAMEM-ME!!!! :D

Quote
Over 90% of all computer problems can be traced back to the interface between the keyboard and the chair