Simple Machines Community Forum

SMF Support => SMF 2.1.x Support => Topic started by: Jade Elizabeth on January 02, 2015, 08:40:15 AM

Title: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 08:40:15 AM
How exactly is SMF becoming responsive?

More importantly, if I wanted to make my forum 3 column (which I am sure every portal ever is going to ask) or 2 column, how would I go about doing that without breaking the hell out of it.

What I plan on is having two columns on the outsides, much like my current site (http://www.creativeburrow.org/) (exactly like it ha ha). Some areas will ONLY have a left bar and I need to make them work too....so what is a safe plan? What steps should I take to make this work nice?
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 02, 2015, 09:03:57 AM
I faced that problem on my forum, though it only has two columns (one sidebar), in the end I just decided the sidebar wasn't important enough and removed it for smaller widths, it just doesn't fit without scrolling. There are people using my forum with even 240px wide phones. The one part which had important info I simply moved into the normal "main column" flow, but I imagine a expand/hide button could work too depending on what it is expected in content from your sidebars, or to leave them available. I'll probably do that later.

But besides those two I don't think there are that many options, you can remove it, make it expandable, or have a min-fixed width and be scrollable (kills the point of being friendly to phones though)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Kindred on January 02, 2015, 09:11:07 AM
well, if you define the column as a column to the CSS, it can be moved to above or below the main content when the screen size reaches a certain point, like any of the other blocks
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 02, 2015, 09:15:13 AM
Yeah, moving it under would be a good way as well (moving it above would require just more scrolling to get to actual content, unless you add a jump button, which you'd then need to press every time).
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 09:34:07 AM
Hmm thanks for that hint Kindred. The problem is for this section the sidebar is a menu and it is critical...so maybe I will add it to the bottom. How do I get it to add to the bottom if it's supposed to be on the left?
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 09:46:18 AM
You can always have it sliding in and out on narrow screens, like a normal flyout menu but as a slidey side panel on top of the other content. That's pretty common. Just toggle the bugger when you want it.

I did this for the old 1.1.x sidebar menus on a phone theme ages ago.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 02, 2015, 09:57:55 AM
Yup, that's what I meant with expandable :P Can be all CSS too :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 10:37:18 AM
But this is a HUGE menu... the sub items (blue/italic) are just there right now so I can see it, and all of them are just examples, the real thing could be bigger or smaller....either way it would be scrolled whether it pops out the side or not....is that possible?

Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 10:42:31 AM
Of course it's possible.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 11:08:23 AM
Do you have any tutorials or info I could read up on it? :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 02, 2015, 01:52:37 PM
Mine is even larger  ;D

Since it has many "categories" you could make a main button that would show more buttons to expand each "category" inside, with only one active at a time.

For css you can do this with inputs (basically the buttons would be checkboxes or radio buttons), for JS I imagine lots of tutorials will appear on google on any search you make about it :P

Just keep them as they are, then put a fixed position on them for when it goes down to mobile size.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 02, 2015, 03:41:59 PM
So Hero Kitty saves the day again? :P

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 05:06:54 PM
Quote from: Fortytwo on January 02, 2015, 01:52:37 PM
Mine is even larger  ;D

Oh here we go. That's what they all say. :D


QuoteSince it has many "categories" you could make a main button that would show more buttons to expand each "category" inside, with only one active at a time.

For css you can do this with inputs (basically the buttons would be checkboxes or radio buttons), for JS I imagine lots of tutorials will appear on google on any search you make about it :P

Just keep them as they are, then put a fixed position on them for when it goes down to mobile size.

Yup. She just needs a standard accordion/slideout menu. Obvious example: http://www.stunicholls.com/menu/stunicholls-sidebar.html
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 05:12:56 PM
Quote from: Antes on January 02, 2015, 03:41:59 PM
So Hero Kitty saves the day again? :P

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work :)

Funnily enough, last night I was playing around with my own idea for the sidebar. The plan is to use a media query and a bit of CSS3 to hide the menu below a certain screen width and turn it into a flyout overlay panel, with a js toggle to show/hide. Seems like an obvious thing to do with the existing sidebar in a 2.0.x theme.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 02, 2015, 05:55:59 PM
I actually never tried that inside SMF 2.1 :P smfcurve is Wiki theme project of ours.

/me finds that interesting...
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 06:48:14 PM
Just got it working nicely. The sidebar toggle (which is just a styled span*) is set to position: absolute; z-index: -9; by default, and the sidebar menu is in its normal position.

A media query the changes the sidebar to position: absolute; overflow: hidden; width: 0; opacity: 0; when the screen is 800 px or less in width, and also sets the sidebar toggle to position: static; and normal z-index (not applied to static anyway, so doesn't need to be re-declared).

The toggle thingy uses jQ addClass and removeClass to do a width/opacity transition on the sidebar, and switch the overflow to visible (so the second level flyouts I'm using still work). It's quite cool. Well, at the moment I think so anyway. :D


*I ditched the standard SMF menu toggle. That code is all commented out, and menu choice is by profile setting only.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Illori on January 02, 2015, 07:40:44 PM
Quote from: Antechinus on January 02, 2015, 06:48:14 PM
*I ditched the standard SMF menu toggle. That code is all commented out, and menu choice is by profile setting only.

it no longer exists in 2.1 anyway.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 07:47:43 PM
I know that. It does exist in 2.0.x (which is what I'm playing with) and it could easily be put into a custom 2.1 theme. Which is something I'm likely to do at some point, just not right now.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 09:50:40 PM
Quote from: Antechinus on January 02, 2015, 05:06:54 PM
Yup. She just needs a standard accordion/slideout menu. Obvious example: http://www.stunicholls.com/menu/stunicholls-sidebar.html

I thought the SMF menu would have that already? I will definitely look into that, thank you!

Quote from: Antes on January 02, 2015, 03:41:59 PM
So Hero Kitty saves the day again? :P

https://github.com/Antes/smfcurve/tree/2.0.0 < sidebar goes down & content stays up on small screens (only made for 480p at this point). But It'll give you the idea to make things work :)

I will give that a go, thanks :D. I wish SMF still had sidebars, it was so much quicker and easier for me to find stuff.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 10:10:42 PM
The difference between the sidebar menu and the drop menus is just a bit of CSS*. It's a fairly simple matter to switch one into the other. In basic terms, the old style sidebar was just a droppy system with the second level permanently displayed, and the first and second levels stacked down the page.

*Well, markup was slightly different in 2.0.x but it didn't need to be.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 10:23:31 PM
I'm developing for 2.1 though, and I don't understand that level of CSS yet ha ha.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 02, 2015, 10:51:35 PM
You've been coding longer than I have. :P

I suppose I could always write a Tips and Tricks thingy about how to turn default 2.1 menus into a responsive sidebar.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 02, 2015, 11:20:58 PM
That would be great!

I'm new to responsive and I can make vertical menus no problem but I never quite got into the cool little bits like making drops and stuff quite like you did Ant :D. <3

Still trying to wrap my head around % variables....My menu needs to be minimum 160px and max 200px but at 15% it's still 280px+ and on smaller things it's awful. It's got stuff floating around it too so it's a nightmare to figure this out :(.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 12:06:43 AM
Dropses is easy. You just set the buggers to absolute positioned (that makes them overlay other stuff) and shunted way off the left of the screen. Then on hover (or touch) you just reposition them back on screen under the button. It's as simple as changing left positioning. All the rest is just eye candy.

And if it needs to be between 160 and 200px why not just set it to 180px FFS? :D
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 03, 2015, 12:28:47 AM
Because then what the hell is the width of the float right column beside it?
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 12:45:53 AM
Auto? Like it would be anyway if you never bothered to float it. Which is exactly how the 2.0.x sidebar menu works anyway: by defining a width for the floated sidebar and letting the rest take care of itself. :D

If you have a block level element (div or whatever) and you sit it next to a floated element, the non floated one will just fill the available space.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 03, 2015, 12:51:01 AM
Oh, why didn't I think of that ha ha.

Thank you, been a long hot day here.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 12:53:54 AM
Melbourne? I saw the fires n ****** on the news last night. Doesn't look like fun at all.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 03, 2015, 03:20:11 AM
Quote from: Antechinus on January 02, 2015, 05:06:54 PM
Quote from: Fortytwo on January 02, 2015, 01:52:37 PM
Mine is even larger  ;D

Oh here we go. That's what they all say. :D
But it is ;) It has the default user info (which is by default on top), some css sliders, lists of recent topics, "partners", lists of tops and so on. Used to be a problem on the old forum with the admins wanting to put too many things in it and the awful layout which made it all spread out, its smaller now than it was before, but its still pretty big :P

Quote from: Jade Elizabeth on January 03, 2015, 12:51:01 AM
Thank you, been a long hot day here.
It was over 40C here yesterday :P

QuoteDropses is easy. You just set the buggers to absolute positioned (that makes them overlay other stuff) and shunted way off the left of the screen.
I find it easier to just switch the display instead when making dropmenus. In the end you're basically just hiding everything (doesn't matter much how), and displaying it on :hover.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 04:05:56 AM
Well it's an a11y thing. If you're using a pure CSS menus then display: none; is not so good for a11y since blind users have no way of knowing there's extra menu stuff there. You can get around that by giving them an indication in other ways, but most people don't bother (and don't even think about it). I figure it's just as easy to give them something they find more usable, since I can easily do droppies without display: none; anyway.

A11y is interesting stuff. I had to swot up on it a bit when I was on the dev team. 2.0.x default menus are pox for a11y. I did change them to use left positioning in the dev cycle but some sod (dunno who) reverted them to display: none; when I wasn't looking, so that's how 2.0.x went out the door. I only found out later when I checked the CSS again. Frigging said why I was changing it too, but apparently made no difference. :P

Anywayz, the WAI-ARIA roles n stuff are excellent for giving notice of hidey menus but most people have never heard of them. Easy as anything to use. Won't validate with HTML<5, but will still work and won't break anything. I'm going to chuck a few into my 2.0.x beastie theme just to annoy the Customize team. They grumble if things don't validate, but I'll give them a lecture about a11y stuffz and tell them I'm not going to rewrite all of 2.0.x to make it valid HTML5. :D.

ETA: Oh the other thing about left positioning is that it enables you to get visible droppy content via keyboard (Tab key access) even with javascript disabled. Not such a big deal these days since hardly anyone has js turned off, but still a handy fallback in the old days and might be useful to someone even now.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 03, 2015, 04:17:19 AM
I see.

I just don't like to hide content by moving it out of sight, so I always just use display:none.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 04:34:04 AM
I don't care, as long as it works and looks good. :) Hidden is still hidden anyway.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 04:49:36 AM
Oh here's a thing. That responsive sidebar I just whipped up uses a width/overflow/opacity transition to show and hide it (positioning never changes, in this case). This relies on the js working to toggle the classes, so if the js broke it would be awkward (although not impossible) to get back to profile>look and layout to switch to the drop menus. You couldn't use the broken sidebar as a sighted user because there would be no way of seeing it.

However, since it's only eye candy that is being switched, anyone who was blind and using a screen reader on mobile (yes, they do this) would have no problem. All the sidebar content would still be sitting there quite happily in the HTML, so they could read it just like normal. :)

And now that I've thought of it, I could use a noscript tag to show an "escape to look and layout" link if js goes down the dunny while someone is using the sidebar on a small screen. Then again, is it worth it? It'd be very much an edge case these days.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 03, 2015, 09:31:01 AM
You could use CSS to make the toggle as well :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 10:00:39 AM
Yes I know I could. Markup abuse is a wonderful thing. There are some things that can be done with CSS that really shouldn't be done with CSS. Let's face it: you'll be running javascript anyway unless you're nuts. How many sites are pure CSS these days?

To get the same result I'd have to set up a fieldset and two radio buttons, plus sundry other bits. None of which is going to be semantic, and will require more CSS to run it. As it is I have two spans and a few short lines of js. Hey ho.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 03, 2015, 10:08:49 AM
True, but unless js is the only one that can do something, there is no need to use it. There are many things done in js that should never need to be done in js out there.

And not really, you'd need one input and one label only. For the css it wouldn't be any longer than JS, just two selectors with a display or other position feature, same as the base for dropdowns. Also reutilizable so you only need two lines of css for any toggle you want to put anywhere. The rest is eye candy.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 03:41:22 PM
Hmm. Well I'm switching the the toggle text on click (changes from "Show sidebar" to "Hide sidebar") so that would at the least, require a pseudo element that could have the content switched. Offhand I can't see how it would be possible to switch the input label directly.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 03, 2015, 09:40:16 PM
HA! Like there are things you can do with CSS that you shouldn't ha ha ha :P.

/me runs for her life
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 03, 2015, 10:19:34 PM
:D Oh don't worry. I do some of them myself sometimes. It can get a bit bonkers though. You should see the CSS for the menu I've been working on. Not the toggle sidebar. That one was a piece of cake. No, the nifty eye candy I thought up for my drop menus. I've just got around to testing it when it breaks to two lines, and learned a few more things about menu coding in the process. Suffice to say that its gotten damned tricky. Rock solid stable now, and looks very swish IMO, but def would not be n00b-proof.

I can just see some average admin wanting the theme if I release it, then wanting to change some detail and blowing the whole thing apart. It's sorta Formula One CSS: highly tuned and almost impossible for beginners to play with*. I may need to make a family saloon version for general release. A bit less eye candy, but wouldn't make the average admin crash and burn. :D

*Come to think of it, and I have been, this doesn't just apply to the main menu.

ETA: Oh and speaking of the toggle sidebar, I'm not really against using semantix-buggering CSS for toggles. As long as they work and the users are happy it's all good. I'm just not sure they're a better solution in this case.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Gwenwyfar on January 04, 2015, 02:09:43 AM
The only problem in it for me are the IDs. Technically you can do it with an input only, but then it looks bad because well... inputs are like the css dinosaurs, you should know that well :(

Still thinking of going around testing to see if there isn't a good way to do with them only.


Ante likes to make us curious  ::)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 04, 2015, 03:16:05 AM
Well I had to re-think my toggle thingy anyway. Spans no good. Forgot about keyboard a11y, I did. :D So that means going to anchors, and they need a href for keyboard a11y (even if it's just "#"), and that makes teh page go jumpy when you clicken das anchoren, so that means teh js needs event.preventDefault(); as well, which I did know but had forgotten y'see.

Haz keyboard a11y now. :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 05, 2015, 01:30:46 PM
Hey regarding this extremely important responsive design thing, there's a factor that's going to be all sorts of fun. Portals. How the hell are people going to accommodate the possibilities of one or two portal sidebars, which can be shown on some pages and not others, and can be toggled on and off by the users, and can be set to custom width via admin settings, and will be shoved into the theme wrapper when enabled, and will therefore totally send your responsive design break points all the way to hell.

I have given this some thought, and it is possible to work around it. Options like additional body classes called on the fly by javascript, based on page loaded and toggle state or admin state of sidebars, etc. The caveat is that, in some ways, there is probably going to have to be less flexibility for admins than is traditionally offered. This is simply because setting up the required media queries is going to be a wheels-within-wheels nightmare, and the result is only likely to function within fairly narrow limits.

The traditional idea has been that it's good to get the n00bs doing everything with CSS coz CSS is easy and safe. I'm thinking those days are gone, and that really production CSS should be divided into "Stuff n00bs can play around with" (colours would be a good example) and "Stuff you absolutely should not touch unless you really know what you're doing" (which in some cases can even include a 1px change in border width).
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Arantor on January 05, 2015, 01:35:08 PM
I'd argue that none of that is the core dev's problem. SMF doesn't come with a portal out of the box, therefore SMF is required to do absolutely nothing to support it. Surely this would be up to the portal devs to make a decision about?
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 05, 2015, 01:54:39 PM
Oh sure. I agree with that. I can just see it being all sorts of fun to try and support. Although the division between "Stuff n00bs can play around with" and "Stuff you absolutely should not touch unless you really know what you're doing" is probably still going to apply to core CSS, just because of how complex CSS is getting these days.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Arantor on January 05, 2015, 01:57:29 PM
The 'stuff newbies can play around with' went down an order of magnitude with 2.1 :( I don't like touching it at this point.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 05, 2015, 02:10:22 PM
Yeah there are probably some things that could done to simplify that a bit. One example would be keeping all sprites as one horizontal row, which will make things a bit easier to deal with. I think they're more likely to do people's heads in if they're moving in two directions. It doesn't really matter from the software's point of view, since you won't save any bytes on the image and you wont save any CSS by making sprites into a patchwork quilt.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 08, 2015, 04:38:17 AM
Grr with the sidebar set to 200px and the other one set to auto the floated boxes in there go under the sidebar when they clear it. I wanted to avoid that without margins/padding.

And yes this topic is basically directly related to portals lol.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 08, 2015, 05:29:19 AM
Ok so you want to avoid using CSS to fix basic problems? No worries. :P

Put a wrapper div around your "other one". This will keep it all in shape if it gets deeper than the sidebar.

And if you want portals with responsive you're in for a whole lot of work, unless you place strict limits on what the portal does.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 08, 2015, 05:07:45 PM
One of the days i iz doin' evil stuff again...
Title: Re: Regarding Responsive Design (Extremely important)
Post by: vbgamer45 on January 08, 2015, 05:23:26 PM
I would like to see that code I like it!
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 08, 2015, 05:27:09 PM
Yeah that bit is easy. The fun starts when people want to toggle sidebars on and off, or change their width, or display them on some pages but not others, etc. This is all stuff they are used to doing with the old non-responsive sites, but which is going to be a lot of work for front end devs when trying to support full responsive. ;)

vbgamer: You just use floats or display: table-cell; for your portal, instead of the old tables. Then you just change the css via media query. You can even use absolute and relative positioning if you like. That can be good for turning sidebars into flyouts on phones (done that before).
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 08, 2015, 05:55:29 PM
Quote from: vbgamer45 on January 08, 2015, 05:23:26 PM
I would like to see that code I like it!

Since you asked nicely :P

Features
- integrate_default_action

(Some bits stolen from Suki ;D )
I don't want to cause any hesitations, I'm very unlikely to release this as modification, but I still want this to be used by other people and licensed it under MIT.

Edit: Its so interesting even 7 download nobody noticed that pack was just empty useless thingy (which i uploaded wrong one kinda).
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 08, 2015, 07:08:15 PM
Quote from: Arantor on January 05, 2015, 01:35:08 PM
I'd argue that none of that is the core dev's problem. SMF doesn't come with a portal out of the box, therefore SMF is required to do absolutely nothing to support it. Surely this would be up to the portal devs to make a decision about?

I know of One portal for 2.0.9 that has a mobile detect that will turn the side panels off, and is set in the portal settings. I really think allot ( Not all) of the side bar stuff is just over kill anyway, and to many links in phone may even get somewhat  annoying to the user/visitor, SMF has an info Center at the bottom. JMHO. I like the responsive direction, the SMF 2.1 is going for att. So I feel this is a Portal issue, also for the SMF 2.1 versions.

regards,
Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 08, 2015, 08:08:54 PM
And I know of people who demanded a portal sidebar even on their phones, which is why I came up with the idea of using CSS to turn portal sidebars into flyout overlay on phones via absolute positioning. It works very well. i also set a conditional that automatically changes the javascript on the sidebar toggle when browsing on a phone, so the sidebar will always collapse on page load if you are using a phone. This makes it accessible on a phone, without it getting in the way, while still leaving it as normal on desktop.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 08, 2015, 08:29:30 PM
Well that's sounds very interesting cool as well :)

regards,
maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 08, 2015, 08:40:01 PM
Quote from: Antes on January 08, 2015, 05:07:45 PM
One of the days i iz doin' evil stuff again...

This I also Like ! :)

regards,
Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Jade Elizabeth on January 11, 2015, 08:35:28 AM
Quote from: Antechinus on January 08, 2015, 05:29:19 AM
Ok so you want to avoid using CSS to fix basic problems? No worries. :P

Put a wrapper div around your "other one". This will keep it all in shape if it gets deeper than the sidebar.

And if you want portals with responsive you're in for a whole lot of work, unless you place strict limits on what the portal does.

I'm worried putting a margin of 200px will make it not be nice responsively.

Quote from: Antes on January 08, 2015, 05:07:45 PM
One of the days i iz doin' evil stuff again...

That looks great! :D
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 11, 2015, 01:24:19 PM
But you shouldn't need a margin. If the left column is floated and the central panel isn't, the latter should just sit next to the former. Do it the same way it's handled in 2.0.x for the sidebar menu.

That has the parent div #main_container wrapping all content (ie: sidebar plus central). This is set to position: relative; and the sidebar is just floated with a width set in px. The central panel is also set to position: relative; with both left and right positioning set to 0. This makes it all behave. Even if the sidebar is shorter than the central panel, the content of the latter won't wrap under the sidebar. The relative positioning of the central parent keeps it all in line - at 0 left and right relative to the top of the parent.

Example from the theme file I have open:

#main_container {
position: relative;
}
#main_admsection {
position: relative;
left: 0;
right: 0;
overflow: auto;
margin: 15px 0 0 0;
}

#left_admsection {
float: left;
margin: 0 10px 0 0;
width: 196px;
}


This means that if you suddenly collapse the sidebar, or change it to float: none; or change it to position: absolute; there are no corrections needed to the other panel, because there is no margin on it. It will simply expand to full width.

This is stable in all browsers I've ever tried, which is why I went for it as the solution back in 2.0.x dev. It exists. It works. It has worked for years, on forums you already have. Use it. :)
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 11, 2015, 07:17:45 PM
I hope I'm not out line here, but I did notice on the  2.1 with a portal installed, that if you adjust the width of the side panels, to certain widths, that the center of the forum will start to collapse inwards (Board.Index)., witch does nor bother me, because I know the default theme is responsive, but some may not like this ( don't know ) so the portal will be a big factor, in viewing with the normal monitors, and I do understand that the side panels can be set to move under each other or the content. So I would say this would be better left to the portal maker to deal with, although the ideas are great, the challenge may set things way back. This could be something to deal with for 3.0 and maybe using bootstrap or something similar.

Now this just my feelings, but I feel, that SMF could go in another direction after 2.1 and for simpler forum structure. lighter and toward the now internet trends. then the plug-ins or the module could be made to suite it better. or should I say expand the system.

I feel making it more complicated is the opposite direction to go, it should be going for a less complicated forum system... I said this many times, I like SMF and there is nothing like for me, but it time for change, and I am!

Please don't get upset it only my opinion nothing else!

regards,
Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 11, 2015, 07:30:41 PM
wha? U make no sense at all no?
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 11, 2015, 07:38:44 PM
Thank U and that's your opinion!

regards,
Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 11, 2015, 07:50:29 PM
No seriously, I can't integrate myself inside SMF 2.1, it cannot predict your mods and change responsive.css based on that... Hear yourself,

Quote2.1 with a portal installed
if you install something like that, you can't expect thing work 100% good. Our core css (responsive.css) does not designed for mods. Mod authors must do those changes to fit the screen. Yet you suggest things needs to change in 3.0 or 2.1... No sense at all...

I'm not trying to be rude here but hear yourself and make valid requests to core.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 11, 2015, 08:22:52 PM
Well the problem is that I work testing every thing I can find out there, and I am on the portal team that has made a portal to work with your forum SMF 2.1 Beta 1, with mobile detect, that in fact works a very well as with SMF 2.0.9 and lower. I test things to their limits, and I see, learn and pass these things on to others and try here at SMF, if it does make sense it maybe because you are not doing what I'm doing! So if it does not make sense  to you then, it only means you do not know everything... but I can see that I'm not wanted here so, I guess I'll just have go where people can understand each other , and communicate without insult... Now listen to yourself and your suppose to be in marketing, doing it with out diplomacy.

I know my English is not the best, and I don't use fancy words to make others feel bad or look down upon. Even in the Military those under my rank were always treated with total respect, and with this, I got respect this how it works in the real world!

The same in manufacturing and making the micro mini circuit boards and placing, the components in them that you use everyday. You see I'm a working man not much for talking, but I sure somebody out there understands my points and every site I work on, does the same, so if I'm not by the book on English and gamer. sorry it's not my field.
I got kidnapped at young age and sent to war!

I know "what's you point!"

regards,
Maxx

Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 11, 2015, 08:35:20 PM
I can say one thing clearly, you don't know code... SMF 2.1 (curve2) is already more flexible compared to Curve. You are asking me to fix things, suppose to be fixed by your portal team.

I already provided code for 3 column style portal, +how to make it responsive. Rest is up to your team not ours.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 11, 2015, 09:31:37 PM
Depends on what code you are speaking and I don't think your even read what I say, I never asked you once to fix anything period and that's exactly my point, this stuff, as stated in my post should be done by the portal makers, not SMF.

I feel if you read more and talk less, you may learn something in this world, this my big issue with this site, you all don't even understand each other it seems, let alone a nobody like me!

I don't mean this to be an insult just friendly advice, many here are afraid to speak out for fear of being insulted and or talked down to, Coders are Not Gods, and I  have no God to start with, you are only people like the rest, only good at what you do, and that's it. You are not a Politician ether, or are you? Most everyone is good at some or things, but now days, it seems not many are good at reading the written word for what  it is, not what you want to be.

The user can not win here on any level, and if they speak the truth, and or if you do not read and or understand, you lock thread that's the end of it!

If I'm asked to fix something and it's not clear, I don't talk down to the person, I just go to their site and fix it, or try talking them through, no hazel even in foreign languages if I can. Even if it's somethmg that seems stupid at the time =, they get respect, if miss read by me, I'll be the first to say it and continue on with the job on my own time, never any funds exchanges or expected just to keep SMF users happy and content with what they did with little push in the right direction, this is what we do out side bubble self righteousness.

regards,

Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 11, 2015, 09:50:33 PM
You are writing something to write something. I'm out here, totally cannot waste my time on you.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Arantor on January 11, 2015, 09:55:12 PM
Actually, he's really not.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 12, 2015, 02:20:46 AM
Quote from: Antes on January 11, 2015, 09:50:33 PM
You are writing something to write something. I'm out here, totally cannot waste my time on you.

Who asked you to waste your time or to even reply period? I just posted my opinion of what I felt and stated as such!

And you replied with:
Quotewha? U make no sense at all no?
That was totally out of line!

Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antechinus on January 12, 2015, 02:24:49 AM
Quote from: Antes on January 11, 2015, 08:35:20 PM
I can say one thing clearly, you don't know code... SMF 2.1 (curve2) is already more flexible compared to Curve. You are asking me to fix things, suppose to be fixed by your portal team.

No, he is saying don't bother trying to fix it for portals. Just do your core coding and let the portal teams worry about the portal stuff. Not your problem, and will just keep you away from core dev.


QuoteI already provided code for 3 column style portal, +how to make it responsive. Rest is up to your team not ours.

Yes, I understand it was fun to play with, and a bit of a change is good sometimes. What Maxx is saying is that you don't have to provide any damned thing for portals, and shouldn't let people suck you into trying to do stuff for portals. Not your problem.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 12, 2015, 03:11:10 AM
OH thanks you, I wish it was so easy for me to say. YOU guys are moving right along, and many are trying to ask for change to late in the game, that's slows down you progress.. out here we test and say if we like not and if there is a but this not place to put either. and BTW, I have 2 Customize core2 themes, almost completed, so I'm working also and sorry for the misunderstanding here!

again thanks,
Maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: Antes on January 12, 2015, 07:29:29 AM
There is a misunderstanding from my side about fixing the stuff I'm sorry about that. But my main point was against the user about "after 2.1 and for simpler forum structure. lighter", SMF is already simple & light forum software, also not even mentioning the "and toward the now internet trends", I can clearly say SMF is not "today's teenager, its not going to shape its features based on trending things but on demand & usability. I'm well aware trends generally also have high demand in user-side.
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 12, 2015, 07:30:10 AM
On the topic of, not interfering with the progress of the SMF 2.1 moving forward: and things that we can do to help!

among other things I'm working on a custom responsive menu, and things that can be done by us, and not to burden the Devs with more stuff! :)

Screen attracted,
it needs allot of work, but toying with in the themes and mods to be done outside the SMF hard work, they already have ahead! :)

This only the menu, the rest of theme need to be fixed to go with it!

EDIT: this dark one is a bit better responses with the theme!



maxx
Title: Re: Regarding Responsive Design (Extremely important)
Post by: stmaxx on January 12, 2015, 09:57:31 AM
Quote from: Antes on January 12, 2015, 07:29:29 AM
There is a misunderstanding from my side about fixing the stuff I'm sorry about that. But my main point was against the user about "after 2.1 and for simpler forum structure. lighter", SMF is already simple & light forum software, also not even mentioning the "and toward the now internet trends", I can clearly say SMF is not "today's teenager, its not going to shape its features based on trending things but on demand & usability. I'm well aware trends generally also have high demand in user-side.

Just for the record in respect to heavy and lighter, I was not directing this to the Devs, but those who keep asking more changes :)
I really do like what's going on with the 2.1 Beta, that's why I keep working with on my test site :)

regards,
Maxx