[WIP/Public beta] Apocalypse theme

[Antechinus]

I should probably add an admin setting to disable the theme's call for jQuery if the admin thinks there is a conflict with a mod already loading it. I had thought of doing that. Mods should check for this stuff, but they often don't.

They also often load outdated versions of jQuery. Mongrels.

Added another thing to the to-do list:

13/ YAY! BUGZ! Add admin settings for jQuery calls,
   with options of local source, Google CDN, jQuery CDN,
   or disable theme's call completely.

And another thing:

14/ Add a CSS tweak to make the page index styling play nicely
   with the Page Dropdown mod (should be a piece of cake).

ETA: Ok, 13/ is crossed off the list. The next version of the theme will have the option to choose from three sources for jQuery (Google CDN, jQuery CDN and local copy) with a fourth debugging option to disable the theme's call for jQuery, in case of conflicts with mods.

Code for all this is already running live on local, without errors.

[busterone]

I have an odd error in the error log. Each time a topic is accessed, this error appears in the log for that user and url

Code Select Expand

  http://www.thedemonsden.com/index.php?topic=12235.0
2: Illegal string offset 'group'
File: /homepages/xxx/xxxxxxx/htdocs/forum/Themes/Apocalypse_TK1/Display.template.php
Line: 247

This is from the Apocalypse file

Code Select Expand

244    // Show the member's primary group (like 'Administrator') if they have one.
245 if (!empty($message['member']['group']))
246 echo '
247 <li class="membergroup group_', $message['member']['id']['group'], '">', $message['member']['group'], '</li>';

this is SMF default theme display.template.php's corresponding code

Code Select Expand

// Show the member's primary group (like 'Administrator') if they have one.
if (!empty($message['member']['group']))
echo '
<li class="membergroup">', $message['member']['group'], '</li>';

I am taking a wild guess that this is what is freaking it out-  "membergroup group_',    ?

[Antechinus]

That's funny, because it's been running without errors on local. All that code does is get the group ID number for non-postcount groups (so it spits out class="membergroup group_1" for admins, etc).

Never throws a wobbly on local, which doesn't have any Display.php edits that would affect this. It has a couple of minor edits, but they're just for testing my page index mod.

ETA: The group_ thing is just a CSS class, so wouldn't have anything to do with the error log.

[busterone]

Yep, my skillz are limited on php, but I should have seen that was just css class.  /headslap

If it helps any, I am running the site on php 5.5.20

[Antechinus]

Shouldn't matter, AFAIK, since it's just an internal SMF thing. Might have to point Arantor at it and see what he thinks.

ETA: My local is on 5.3.1. Should probably update it.

[Chalky]

Morning!  I've only had one cup of coffee but weird things are happening.

D'oh. Got the mushed menu figured out. Dopey bugger. I made a mistake in the media queries.

About Line 4550ish find this

Code Select Expand

#main_menu .menulevel2 {
top: 10%;
left: 85%;
}

Replace with this:

Code Select Expand

#main_menu .menulevel2 {
top: 10%;
}
#main_menu .listlevel1:hover>.menulevel2 {
left: 85%;
}

That should fix it.

Excellent!  Now the menu shows as it should in portrait, but the submenu items neither show nor appear in portrait or landscape (they weren't showing in landscape either as I realised late last night).

Ok, I grabbed a copy of the Fancybox mod and that's calling jQ 1.8.1 from a local source. This is going to cause problems with any jQ stuff when running Apocalypse.

1.8.1 is out of date now anyway, and with any luck Fancybox should work just fine with later versions of jQ. Suggestion is to open Subs-FancyBox.php and comment out the call for jQ there, on Line 31.

Note that you have to do a slight syntax change as well as the basic // by moving the ' after = to Line 32.

Code (Find) Select Expand

$context['insert_after_template'] .= '
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

Code (Replace) Select Expand

$context['insert_after_template'] .=
//<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.min.js"></script>
'<script type="text/javascript" src="' . $settings['default_theme_url'] . '/scripts/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>

ETA: Oh and once you've done that, you should be able to uncomment the Superclick menu on Line 122 and it should work.

Now the menu works perfectly in landscape: touching expands the submenu items enabling them to be selected BUT the menu button now doesn't respond at all in portrait.  Recommenting line 122 makes no difference.

[Antechinus]

Excellent!  Now the menu shows as it should in portrait, but the submenu items neither show nor appear in portrait or landscape (they weren't showing in landscape either as I realised late last night).

If you had js disabled then the menus may not work on touchscreen, because there is no hover.

Now the menu works perfectly in landscape: touching expands the submenu items enabling them to be selected BUT the menu button now doesn't respond at all in portrait.  Recommenting line 122 makes no difference.

Yup. With the click menus enabled the top level button, if it has a droppy, has the preventDefault on the href, so clicking opens the droppy rather than sending you off to a new page. If that's what it's doing, that is how it should be.

[Antechinus]

I've just been playing with the buddy list page. Jade was making a noise about it somewhere the other day, so just for some light relief I took a look at it. Piece of cake. Just threw in some of the same markup as the memberlist, so buddy list flies on the same CSS, and it's all good.

Didn't bother styling up the ignore list. Who wants to look at avatars of people who annoy them anyway? Just left that one as a table.

[Antechinus]

Hey Chalky, my post was very late last night after several late nights, and I think I may have been misinterpreting what you said. Not sure. Given my late nights and your lack of early morning coffee, and that I have zero access to the device in question, could you please make bug reports as idiot-proof as possible. Use small words and big letters.

[Chalky]

LOL I've been a bit like that all day today    What I meant was that after doing everything you said the "Menu" button in portrait (see pic) does nothing.  It's broken, no menu items show at all.  It might as well be a picture of a sock 

[Chalky]

More fun for you!  I've just looked in my error log 


http://chalkcat.com/index.php?action=profile;u=1
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Profile.template.php
Line: 65


http://chalkcat.com/index.php?topic=3114.msg71192
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Display.template.php
Line: 247


http://chalkcat.com/index.php?action=who
8: Undefined index: online
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Who.template.php
Line: 72


http://chalkcat.com/index.php?action=mlist
8: Undefined index: joined
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 154


http://chalkcat.com/index.php?action=mlist
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 135


http://chalkcat.com/index.php?action=pm
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/PersonalMessage.template.php
Line: 186

20 pages of them 

[Antechinus]

Well it's not really adequate as a picture of a sock, since there's no obvious resemblance. I can give you a nice sock icon if it will help.

That's a javascript problem. The media query hauls the menu switch buttons up out of the darkness and into the light via CSS changes (coz you don't want them on big screens) then the jQuery switches the display of the buttons according to which one is required at the time. Your shot shows both buttons at once, overlapping (ergo the dual direction arrow, while the text is the same so appears as one).

IOW, jQuery is broken. Give me a minute to grab a coffee and I'll check out the page source at yours.

[Antechinus]

More fun for you!  I've just looked in my error log 


http://chalkcat.com/index.php?action=profile;u=1
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Profile.template.php
Line: 65


http://chalkcat.com/index.php?topic=3114.msg71192
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Display.template.php
Line: 247


http://chalkcat.com/index.php?action=who
8: Undefined index: online
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Who.template.php
Line: 72


http://chalkcat.com/index.php?action=mlist
8: Undefined index: joined
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 154


http://chalkcat.com/index.php?action=mlist
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/Memberlist.template.php
Line: 135


http://chalkcat.com/index.php?action=pm
2: Illegal string offset 'group'
File: /home/chalkcat/public_html/Themes/Apocalypse_TK1/PersonalMessage.template.php
Line: 186

20 pages of them 

Ok, I know what one of those is. I have some more work to do on the memberlist. I'd forgotten that this theme was pulling some stuff from my memberlist mod, which I'd installed on my test site. The memberlist is basically borked without the mod. I'll fix it so it's ok by itself.

I can't replicate the other template errors though. Busterone got that one too, but at the moment I have NFI why. It's a perfectly normal call that spits put the group id number, and runs flawlessly on my local.

[Antechinus]

Ok checked out the source. The first point is not related to the javascript problem but is funny anyway. Somehow while commenting <head> you've ended up with an extra call to index.css. Doesn't matter, apart from a trivial performance hit, but should be sorted anyway.

Code Select Expand

<title>ChalkCat&nbsp;-&nbsp;Index</title>
<link rel="icon" type="image/png" href="http://127.0.0.1/SMF_20x/favicon.png" />
<style type="text/css">.wrapper, #inner_section {width: 90%;}</style>
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/Apocalypse_TK1/css/index.css?fin20" />
<link rel="stylesheet" type="text/css" href="http://chalkcat.com/Themes/Apocalypse_TK1/css/index.css?fin20" />

Ok, javascript. It has to be a conflict with one of your mods, most likely Fancybox. Since the library is only being called once now that's ok, so it's something else.

Declaring jQuery function init twice on the same page shouldn't be a problem, although I should look into that just in case. There are some errors coming from Fancybox although I'm not sure if they're relevant.

There's also a warning on my use of preventDefault, so I'll update my js to sort that. That still works, but since it's officially deprecated I'll change it.

[Antechinus]

Oh yeah and the dumb pagination mod is forcing it's own CSS on this theme's page index presentation. You should be able to get around that by creating a blank file named pagination.css and chucking it in Apocalypse/css.

Come to think of it, as a temp fix for another minor glitch you could have this in the file, which would put the pages dots back in the right place, and should also block the css from the mod.

Code Select Expand

/* Next is to play nicely with default Subs.php output */
.pagelinks span {
margin: 4px 0;
padding: 2px 12px 4px 12px;
float: left;
font-size: 0.857em;
text-transform: capitalize;
white-space: nowrap;
border: 1px solid #000;
border-top: 1px solid #333;
background-image: linear-gradient(to bottom, #292929 0%, #111 80%);
}
.pagelinks span._expanded .navPages {
margin: 0;
}
.pagelinks span._expanded {
padding: 0;
}

[Chalky]

Thanks, I'd figured it was the pagination mod looking silly down there

As for which mod is breaking the javascript I think it might be this one  http://custom.simplemachines.org/mods/index.php?mod=3860

Edit: pagination sorted - that's better!    I'll fix the tooltip css at some point as well.

[Antechinus]

Ok, I'll look into the code for that one.

BTW, if you add this to pagination.css it should help the dropdown alignment. Oh bugger, it's already inheriting that. NVM. Will figure it out later.

Code Select Expand

.pagelinks select {vertical-align: bottom;}

You could also try this, before all the other stuff, and it might, just might, sort out the current page a bit better (haven't tested it yet).

Code Select Expand

.pagelinks * {float: left;}

If it makes things worse, ditch it.

[Antechinus]

Oh yeah and adding this to ThemeStrings.english.php will fix the undefined on the memberlist.

Code Select Expand

// Custom string for join date on memberlist.
$txt['joined'] = 'Joined';

[Antechinus]

Ok, thanks to onepiece I have an answer on the illegal string template errors. Bug fix zip attached. Will also fix the undefined on the Memberlist, and update the Help.template.php and languages folder to use the separate languages file I'm now running (just saves a bit of performance on most pages) as well as giving you the nifty new buddy list.

Just "Extract here" on desktop, then upload the folder into Themes.

Will be ready for TK2 soon

Redundant attachments removed.

[Antechinus]

Thanks, I'd figured it was the pagination mod looking silly down there

As for which mod is breaking the javascript I think it might be this one  http://custom.simplemachines.org/mods/index.php?mod=3860

Edit: pagination sorted - that's better!    I'll fix the tooltip css at some point as well.

Ok, more tweaks to pagination.css. Just overwrite the lot with this. Should work.

Code Select Expand

/* Next is to play nicely with default Subs.php output */
.pagelinks span, .pagelinks strong {
margin: 4px 0;
padding: 2px 12px 4px 12px;
float: left;
font-size: 0.857em;
text-transform: capitalize;
white-space: nowrap;
border: 1px solid #000;
border-top: 1px solid #333;
background-image: linear-gradient(to bottom, #292929 0%, #111 80%);
}
.pagelinks span._expanded .navPages, .pagelinks span._expanded strong {
margin: 0;
}
.pagelinks span._expanded {
padding: 0;
}
.pagelinks select {
margin: 4px 0 -4px 0;
}