News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

Tsunami [theme]

Started by Bloc, August 28, 2019, 02:34:01 PM

Previous topic - Next topic

Diego Andrés

Quote from: Antechinus on September 02, 2019, 12:16:02 AM
It's one way of doing it. What has me stumped at the moment is that he has the variable mentioned in two places in index.template.php:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu($mobil = false)
{
global $context, $settings, $options, $scripturl, $txt;

if($mobil)


But, it's not mentioned anywhere else, so I can't see how it is defined so that it can be usable.

<nav id="mobilnav">
<input type="checkbox" id="mobilmeny" />
<label id="mobilmeny_label" for="mobilmeny" onclick><span class="icon-menu"></span></label>
' , template_menu(true) , '
</nav>


;D




Quote from: Study Force on September 01, 2019, 11:43:13 PM
Of topic, I too use an is_mobile variable throughout my responsive theme, although I try to minimize it as much as possible. Is that how the big players do it too when making a responsive theme?

Depends on what you want to do with the menu really as it could be just css, realistically those are the only 2 options I can think of doing it :-X

SMF Tricks - Free & Premium Responsive Themes for SMF.

Bloc

Diego spotted it. :) Its just a switch to render slightly different HTML for the mobile menu. The CSS does the work.

Antechius, *nodding* - I am going through errors and glitches now and tend to agree on the menu thing..at least for the admin menu it tends be awkward. I think I will go for the sidebar option + perhaps slidedown for submenus(on click) for the best mobile experience too. Having the menu at bottom for mobile is interesting but once its get too many items the real estate is too narrow there. Plus the non-solution of submenus as hovers..which I actually forgot lol.

quickbuttons under the post? Makes sense, I'll try that.

Wide layout option for large displays..kinda like using all available space, BUT I see now that the member-sidebar doesn't really do much other than ..member stuff. :) I might work that up to the top instead and go for just 2 column-layout instead of 3-columns.

..on another note, read an interesting article about the new toolset of flex/grid can actually makes media queries obsolete, by thinking "objects" instead of endlessly finding best possible scenario for any given layout. It requires all "objects" to care for themselves, that is , adapt to any given width and have a min-width. Objects then shift around depending on overall width. Sort of like "cards" in Pinterest but of course with more finesse.  This will not go into this theme :) but I might pursue it in another. 

Antechinus

Yes the large window presentation is going to be a personal preference thing. I tend to like things centred and balanced laterally. Some people don't. That's fine. As they say in the classics: if you want the bloody thing different, code it yourself. :D

Re the toggle variable: I get that you're using the checkbox trick to switch the menu markup. What stumps me is that your php variable is $mobil, but that's not mentioned in the code Diego quoted.

<nav id="mobilnav">
<input type="checkbox" id="mobilmeny" />
<label id="mobilmeny_label" for="mobilmeny" onclick><span class="icon-menu"></span></label>
' , template_menu(true) , '
</nav>


It says all sorts of stuff there, but it doesn't say $mobil. I thought PHP variables had to be defined with special voodoo like $context and $modSettings. Mind you I don't know much PHP. Are you saying that if I wrote markup like:

<fieldset id="my_old_mans_a_dustman"> etc

I could just throw in $my somewhere else and it would automatically do stuff?

Bloc

A PHP function can have a parameter that you supply in the call...but if you then call it without the parameter, it errors out. One solution is to define the parameter within the call..so I set $mobil to be defaulted as "false". Meaning when I call template_menu() without the parameter ($mobil exists only within the function) $mobil get set to "false". But if I call template_menu(true) that same local $mobil is set to TRUE. Simple. :D

Antechinus


Bloc

What have become painfully obvoius working with the mobile version of Tsunami is how much buttons/clutter/menus there really are in a theme..for now I'll sort out just the main obstacles, but in the longer run - perhaps another theme project - I like to hide all those choices, using all I can of fly-outs and clickmenus instead. Becuase there is one thing a mobile have no problem with(and what people are used to be doing)  - and that is to click on things. :D

Antechinus

Lol. Did you ever see the 1.1.x mobile theme I made yonks ago? That had click flyouts for Tiny Portal sidebars, and for memberlist sorting options, and for all the huge smiley collection that site had. Kept the kids amused. :D

(Yes, they did want all that stuff)

Biology Forums

#27
Actually that's what started it all for me. It was the first mobile theme I had ever made for my site, and I built it off the bones of your original mobile theme. I remember emailing you back in 2015 for the files -- what an interesting time

Bloc

- New version 1.1 with various tweaks and updates. Menus in admin/profile/moderation etc. have been transformed to sidebar with collapsable sub-items and they both open a slideout-by-hamburger-icon when in smaller resolutions.

Also new page for links,demo and downloadable zip, since Github does its zips with an extra folder: http://www.bhksite.info

Antechinus

Sounds nifty. Will have a look. :)

Hey I need to register to download. Is this a new site, or do I still have an old account there?

ETA: Nevermind. Grabbed it from ButtPlug and rezipped it myself. :D Now that I know what tricks it's up to, the workaround is a piece of cake.

Antechinus

First impression: looks pretty decent. :)

Suggestions:

1/ Obviously mobile-first thinking, so the lack of any hover styles on desktop is a bit confusing. Desktop users are used to having some indication of functionality apart from the cursor.

2/ Ditto for lack of focus styles when using keyboard navigation. For most links, etc the only way of knowing where you are up to is the status bar.

3/ Would suggest having a global avatar resize, instead of restricting it to the header. Less gremlins to chase that way. My local test site currently has a whopping big avatar just so I can test this. Walloping things once is more fun, IMO.

4/ I think another break point would be handy. The av in the header tends to get a bit lost on your first break point. IMO he'd be better staying at the left until you get down a bit more in screen size. Also, I don't think there's any need to shrink him so soon, given that the links he sits with are staying the same size all the way down.

5/ Oh yeah, we can haz linky avatar? All the cool kids expect to get to their profile by clicking their avs these days. :D

6/ Header banner gets x-axis tiling at about 670px wide (fine above that).

7/ Desktop main menu drops could do with a bit of transition to make them less twitchy.

8/ Would be inclined to put the +/- pseudos in the sidebar on the relevant anchors instead of their parent li. First instinct with lack of hover style is to click the icons, which of course doesn't work. Same amount of code on the anchor or the li, and a bigger target won't hurt anyway.

9/ No idea what those icons on the message index and Display.template.php are supposed to mean. Does it come with a Rosetta stone? :D

10/ I like the posts layout, although my preference would be avatar at the left (no biggy). Same deal as the one in the header. I think he could stay left a bit longer. Maybe do them at the same break point. I can see the sense in sending them to the right once screen size gets down some more.

11/ Attachments handling is nice. Ditto reportlinks, quick reply, etc. Very smooth and clean. :) Ditto for info centre. Much better than standard.

12/ Quick moderation options on message index look clean, but are a bit confusing at first. Probably ok once you're used to it though. Could maybe do with some labelling.

13/ It plays nicely with my page index mod. :) Even without any associated CSS it looks clean and tidy (and could obviously be sexed up a bit if anyone wanted to).

14/ Aha. Went back to the theme change page in profile, to switch back to mutant Curve for more testing, and noticed you have a float clearing problem with the theme thumbnails. Should be an easy one to fix. I do like the styling of that page though.

Bloc

Thanks for your suggestions, Antechinus :) Some thoughts on the pointers..

1-2) I don't agree its mobile-first..more "device agnostic" or thats the idea anyway:) There are dropmenus, but the sidebar switch was a conscious choice. Not too sure about the hiding,at least not on desktops. Will prob. change. About keyboards: will check.

3-6) Still in the WIP area these..I am leaning towards making the theme less dependant on media queries and more "looking out-for themselves" type of css, meaning a type of thinking where every item is an island, it will never go beyond a certain width etc. If it does it will rather push down or transform. Not sure if this is the theme that will happen though. But tweaks are necessary still.

7-8) agreed

9) what icons..the topic icons? :D

10-13) the challenge is to make these appear nice on both desktop and mobile, not always an easy task. But tweaking will happen for sure.

14) Ah, forgot that one. (and prob a million others, there just so many darn templates to juggle with lol)

Bloc

Quote from: Antechinus on September 11, 2019, 07:01:01 PM
Sounds nifty. Will have a look. :)

Hey I need to register to download. Is this a new site, or do I still have an old account there?

ETA: Nevermind. Grabbed it from ButtPlug and rezipped it myself. :D Now that I know what tricks it's up to, the workaround is a piece of cake.

Should work for guests now. I had forgot you have to tweak guest permissions on attachments when using reply-only permission profile.(that is, copy it and set it straight)

Antechinus

#33
Quote from: Bloc on September 12, 2019, 12:44:13 PM1-2) I don't agree its mobile-first..more "device agnostic" or thats the idea anyway:) There are dropmenus, but the sidebar switch was a conscious choice. Not too sure about the hiding,at least not on desktops. Will prob. change. About keyboards: will check.

Yup, I'm not so sure about hiding on desktop either. I think it makes sense as an automatic switch somewhere around 1024 screen width, because that's when standard SMF menus start to get a bit cramped for space. Above that I think you might as well use the available space.

Oh here's a thing I thought of last night: once the menus switch to hamburgers (on any theme) there's no visible notification of new PM's. That prompted me to add a link to PM's and an indicator as a text string up in the header, just below "Show new replies to your posts". It just says "My messages - ** new!" if there are new ones, and without the em tag and exclamation mark if there are no new ones. To save vertical space I put the current time string over to the right, just underneath the default search box.

The keyboard navigation shouldn't be a problem on Webkit (haven't tried Chrome yet) because IIRC Webkit forces their default outline styling on focus regardless of your CSS. Not sure about Android. It's definitely hard to tell where you're up to on Firefox or its derivatives.

Quote9) what icons..the topic icons? :D

The buttonlist functions. Cute icons. Look very stylish. No idea what they do though. :D

Quote14) Ah, forgot that one. (and prob a million others, there just so many darn templates to juggle with lol)

I've been getting rid of floats in as many places as I can, and using other tricks (inline-block, text-align, absolute, table-cell, a bit of flex here and there, etc). Floats can be very irritating. :P Good thing about inline-block (and table-cell and flex) is automatic RTL support.

By the way, here's a funny story for you. Remember me banging on about how I liked click menus a while back? I've been doing basic CSS tweaks to Curve's default drops, and have discovered that I quite like them once they have had a bit of obedience training. I opened up the old Apocalypse thing last night to check some of the code I used in that, and was finding the roll-down click menus annoyingly slow. :D

All I've done to Curve's ones is put a transition on hover ( transition: left .1s step-end; ) so they don't flash when scrolling past on the way to other things (wouldn't be relevant on touchscreen) and a delay on mouseout ( transition: left .25s step-end; ). This vastly improves the behaviour of the default menus. For example, when tracking between second and third level drops you can just mouse diagonally, straight to the link you want in the next level, without the menus twitching. The slight delay on opening (roughly equivalent to human reaction time anyway) means there's no problem with multiple drops opening on scrolling past links either. Basically they open as soon as you stop on a link, but stay closed if you're just going past.

Funny how trying different things alters your perspective. :)

Bloc

Ah yes, the buttonlist. :) The idea was, well, to get as many buttons on one line as possible, BUT, the symbols are kinda confusing for some I think(even me and I picked them lol)..so a better alternative might been just a big click-button that puts up a clickable menu. Of course it means a extra click/touch but at least you can get the labels in there. Gonna try some stuff with that on next version.

"transition"..thats a interesting one, only been using it once or twice since its quite new I think - or at least new to me - but it does a few tricks, have to check your suggested code because the menu thing is quite annoying if you have 2-3 sublevels. In my main menu I used fullwidth subitems to counter-act some of that annoyance, so you WILL hit the subitem even if you get outside the immediate subitem area. Its less practical on second and third level menus, unfortunately.

Antechinus

I think click could work quite well there, once the screen gets smallish. Often people don't use the buttonlist functions anyway. I think it's more common to use the quote function or the quick reply, and those are always visible, so if reply and the others needed a click I don't think it would bother anyone much.

Droplines are a bit awkward to use imo. A standard drop means you just trick straight down, whereas with droplines I find that the right angle turn then mouse to target is not as natural. Wouldn't be a problem on touchscreen or via keyboard, but is a bit funny with a mouse.

Third level drops can be awkward, but since I've managed to get them sitting nicely while I just mouse diagonally I'm finding them ok. One problem with third levels is they tend to run out of space on narrow screens and can overflow to the right. But then you can just use the second level for the sake on one more click, which is arguably not going to take any longer than tracking to the third level.

Antechinus

Had a thought about this. I may even use it myself.

With the buttonlist, I think "Reply" is the only one that gets much use. Obviously that's based on the way I use the thing, but I'm guessing I'm a fairly standard model human. If that guess is correct, then you could just have the Reply button showing and a hamburger (or whatever) next to it, with the rest of them stashed in that. With a text label on the hamburger, of course. Can be hidden for sighted users (text-indent: 100%; overflow: hidden;) or you could skip the hamburger and just have a text label like "More options" with a little pointy pseudo attached. Most people most of the time would probably find that just as convenient even on desktop, and it'd free up a lot of space on phones.

Bloc

Yes, it would make sense to go down this road, because you can make tiny buttons without labels for mobile but its a loosing game once mods add their own into this(which prob. won't even have defined icons on them).

Antechinus

I have heard quite a few grumble about icon menus. People tend to like being told what things do before they try clicking them all.

iMiKK


Advertisement: