Advertisement:

Author Topic: [WIP] Making SMF Responsive  (Read 47711 times)

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #40 on: March 17, 2013, 01:28:31 AM »
Since the responsive theme im working on is 'custom', yes, some if not all mods may be applied manually. I dont see SM making a responsive default theme in the near future...but hey, what do i know. Another solution is, forking SM and make the default theme responsive and create mods for it. But quite frankly, i'm not interested in forking or creating mods for it at the moment. Besides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol

Its not bad looking http://www.idesign360.com/dev/smf-r/index.php and that's just the board index only and at the end, it may not look like that. It may end up with the boards in one line as original.

Offline Trekkie101

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 8,157
  • Gender: Male
  • Ad Astra!
    • https://www.facebook.com/DLRPRoundup on Facebook
    • @dlrproundup on Twitter
    • DLRP Roundup
Re: [WIP] Making SMF Responsive
« Reply #41 on: March 17, 2013, 05:25:20 AM »
It's looking quite nice, even the colour scheme is alright, bootstrappers often have a tendency to use too many strong blue's but this goes back to the start of SMF with the subdued grey, although we had purple too. :P

Offline 青山 素子

  • Server Team
  • SMF Super Hero
  • *
  • Posts: 17,068
  • 戦場ヶ原、蕩れ!
    • srvrguy on GitHub
    • @motokochan on Twitter
    • Nekomusume Moe
Re: [WIP] Making SMF Responsive
« Reply #42 on: March 17, 2013, 01:48:45 PM »
Great selection of mods with SM, but to have to install/update them all manually to be able to use a responsive theme, seems like a nightmare. Shucks!

You can still attempt to install the modification and only manually edit the items that failed install. It's not perfect, but it's still better than fully manual installation.
Motoko-chan
Director, Simple Machines

Note: Unless otherwise stated, my posts are not representative of any official position or opinion of Simple Machines.


Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #43 on: March 17, 2013, 02:41:03 PM »
I have 2 versions...

http://idesign360.com/dev/index.php

http://www.idesign360.com/dev/smf-r/index.php


If we're going with today's trend in responsiveness, this is the one http://idesign360.com/dev/index.php (boardindex has no css atm)

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #44 on: March 17, 2013, 04:18:07 PM »
Besides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol
It is. Get rid of the tables. Seriously. Yes, you can try hiding stuff in them, but honestly it's better to ditch them. Gives you a lot more options.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #45 on: March 17, 2013, 04:50:42 PM »
Besides, it's a lot of work making SM responsive,..we're talking about a handful of templates, re-do the css, etc. Sure, welcome to the 21st century but man! it's too much. lol
It is. Get rid of the tables. Seriously. Yes, you can try hiding stuff in them, but honestly it's better to ditch them. Gives you a lot more options.
2 templates I don't have to mess with, help and registration agreement bahahaha

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #46 on: March 17, 2013, 04:54:41 PM »
I wrote a mobile-friendly theme for the 1.1.x site I run. Had to completely rebuild over 25 templates. Fun and games. :D

BTW: if you want to do 2.0.x admin it's actually not that hard, for most of it. I did it for some of the 2.1 alpha stuff.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #47 on: March 17, 2013, 06:30:57 PM »
Looking at it from my iPhone the board index doesn't look bad. What really needs work is the display template.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #48 on: March 17, 2013, 08:52:18 PM »
Lotta scrolling for not much information. :) I ditched topic and post counts. I also just have the member name rather than the link, mainly to keep enough finger space between links.

But yeah, Display is one of the worst. Profile templates are a mess on a phone too.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #49 on: March 17, 2013, 09:26:16 PM »
Good idea. I see you removed the board description.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #50 on: March 17, 2013, 09:33:20 PM »
Yup. Not really needed on a phone, IMO. The name is enough for rmost people to get the right idea.

That theme isn't really "responsive" as such. It's sorta half responsive and the rest "adaptable". This is mainly to allow people to select some of their preferred options rather than just being force fed one option. This was good in some ways, because it allowed me to use PHP conditionals instead of just relying on display: none; etc in the CSS. This means less crap actually loaded on mobile and more options for how it's arranged.

The code's not optimised yet. I basically got it to the stage where people weren't grumbling, then took a break (it was a f#$kload of work). I'll optimise it soon when I get a bit more time.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #51 on: March 17, 2013, 10:10:07 PM »
Yup. Not really needed on a phone, IMO. The name is enough for rmost people to get the right idea.

That theme isn't really "responsive" as such. It's sorta half responsive and the rest "adaptable". This is mainly to allow people to select some of their preferred options rather than just being force fed one option. This was good in some ways, because it allowed me to use PHP conditionals instead of just relying on display: none; etc in the CSS. This means less crap actually loaded on mobile and more options for how it's arranged.

The code's not optimised yet. I basically got it to the stage where people weren't grumbling, then took a break (it was a f#$kload of work). I'll optimise it soon when I get a bit more time.

So thats a mobile theme correct? ...and you took those parts out?

Im going to to use display: none; on media queries. I doubt it makes a difference.

   @media only screen and (max-width: 479px) {

      .posting_icons {
         display: none;
      }
      .lastpost {
         display: none;
      }
}
« Last Edit: March 17, 2013, 10:29:32 PM by Mick. »

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #52 on: March 17, 2013, 11:30:07 PM »
It's the site default theme, and is coded to handle everything from 240px wide up to whatever. So yes, it's a mobile theme, but also a tablet and desktop theme. Sort of a "One theme to rule them all". :D

Only catch with display: none; and media queries is that you're still loading all that markup and css even if you don't see it. Same with any images called in those elements. They get downloaded regardless. IOW, it'll work, but phones get fed a lot of stuff that's no use to them, so in some ways it's not so good. Phones are getting pretty capable these days though, so it probably wont kill the experience for most people.

ETA: Code for the board description and name works like this:

Code: [Select]
<div class="info">
<h4><a href="', $board['href'], '" id="b', $board['id'], '"'; /*name="b', $board['id'], '"*/ echo ' title="', $board['posts'], ' ', $txt[21], ' ' .'in '. '', $board['topics'], ' ', $txt[330], '">', $board['name'], '</a></h4>';
if (($settings['theme_layout'] !== 'Mobile'))
{
echo '
<p>', $board['description'], '</p>';

// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="smalltext"><i>', count($board['moderators']) == 1 ? $txt[298] : $txt[299], ': ', implode(', ', $board['link_moderators']), '</i></p>';
}
else
{
echo '
<p class="board_description"><span>Latest by ', $board['last_post']['member']['name'], '</span>', $board['last_post']['link'],'</p>';
}

echo '
</div>';

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #53 on: March 17, 2013, 11:47:49 PM »
What I learned lately, you have to create your own divs and wrap the code to hide things on mobile.

For instance, the message index uses some classes that are also used on the board index in which I don't want to hide both.  All in all, it's a lot of work but at least it's a matter of using display: none and viola.

I've learned a lot using this responsiveness setup so hopefully I can have something usable. The problem I now foresee is mod installation. That's going to be burden to some.

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #54 on: March 18, 2013, 01:42:31 AM »
That's "voila". A viola is a large violin. :D

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 58,430
  • Gender: Male
    • Kindred-999 on GitHub
Re: [WIP] Making SMF Responsive
« Reply #55 on: March 18, 2013, 09:34:20 AM »
Mick,

so, mod installation - where the mod actually edits template firles directly, is going to be an issue...
However, as more mods start using the hooks, you're going to encounter another issue
-- Although those mods will install cleanly (because there are no direct code edits) those mods have their own templates, css and javascript which may not be "repsonsive"
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #56 on: March 18, 2013, 09:49:23 AM »
Mick,

so, mod installation - where the mod actually edits template firles directly, is going to be an issue...
However, as more mods start using the hooks, you're going to encounter another issue
-- Although those mods will install cleanly (because there are no direct code edits) those mods have their own templates, css and javascript which may not be "repsonsive"


Exactly. Popular mods like Gallery, Portals will be an issue.  The idea sounds good keeping up with todays trend but im feeling that this may end up in a dead end.

It feels like im reconstructing SM from the ground up.  An alternative would be forking SMF and create themes and mods.   Bah.

Online Mick.

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 4,993
  • Gender: Male
    • idesignSMF on Facebook
    • @idesign360 on Twitter
    • idesignSMF.com
Re: [WIP] Making SMF Responsive
« Reply #57 on: March 18, 2013, 09:49:38 AM »
That's "voila". A viola is a large violin. :D

smartass lol

Offline Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,471
  • Master of BBC Abuse
Re: [WIP] Making SMF Responsive
« Reply #58 on: March 18, 2013, 01:48:14 PM »
Exactly. Popular mods like Gallery, Portals will be an issue.  The idea sounds good keeping up with todays trend but im feeling that this may end up in a dead end.

Depends what you're aiming for. If you want something that will automatically deal with any and every mod, and still work on a phone, then it's probably a dead end. If you just want something that works on a phone, and mods are a seperate issue that people have to deal with themselves, then no problem.

If it's any consolation, portal templates are usually fairly easy to fix. I can't imagine a gallery being that difficult either. Still, if you're writing the thing it's your choice as to what you support and what you don't support. Traditionally, mod authors have been responsible for helping users figure out how to get their mods working on custom themes. ;)


Quote
It feels like im reconstructing SM from the ground up.

Yup. Basically that's what you need to do. That's why I decided to write myself one lot of templates and css that handles all resolutions. It's less work for me in the long run, and gives a consistent look on all devices.

Once I have it, I can then do separate themes on top of it without a lot more work. IOW, I basically wrote a new default theme.
« Last Edit: March 18, 2013, 01:59:56 PM by Antechinus »

Offline emanuele

  • SMF Super Hero
  • *******
  • Posts: 14,156
  • Gender: Male
  • THERE'S JUST ME
Re: [WIP] Making SMF Responsive
« Reply #59 on: March 18, 2013, 02:02:26 PM »
An alternative would be forking SMF and create themes and mods.   Bah.
Or just push things to the open repository so that something may end up in a future version of SMF...


Take a peek at what I'm doing! ;D



Hai bisogno di supporto in Italiano?

Aiutateci ad aiutarvi: spiegate bene il vostro problema: no, "non funziona" non è una spiegazione!!
1) Cosa fai,
2) cosa ti aspetti,
3) cosa ottieni.