Quote from: Antechinus on September 15, 2015, 01:41:18 AM
It'd actually be easy to reinstate the sidebar menu option. I may code it for a custom theme and/or mod at some point.
Has anyone tried this? Would be interested to know where to start.
Oh that. Yep, piece of cake if you really want to do it. How? I'd have to refresh my memory as it's been a while since I dug into SMF coding, but in short there are several basic approaches.
1/ Simply restyle the existing menu CSS so that it becomes a sidebar instead of a line of drop menus. Easiest to do, but obviously doesn't allow both as options.
2/ Combine 1/ with the theme variant system, with one variant having CSS for the drop menus and the other variant having CSS for the sidebar. This is not much more difficult, since you already have the CSS for the drops.
3/ If you really want to have the menu alternatives selectable as profile>look and layout options you can do that too, but it's much of a muchness in terms of functionality. You have to go to a profile page anyway, and it makes little difference which one it is.
The other thing is that it's easy to include a variant switcher (session-dependent or permanent) anywhere on index.template.php, which is probably the ultimate in convenience if anyone wants that (ie: if they prefer different menus on different devices, or whatever).
4/ Try to reinstate the whole kaboodle from 2.0, which is also possible but (IIRC) a bit more frigging around.
If I was going to do sidebars I'd them with this functionality: Topic: Advanced sidebar menus (https://www.simplemachines.org/community/index.php?topic=480865.0)
That's basically just restyling the existing drop menu functionality to fit it to a sidebar.
Quote from: Antechinus on July 15, 2019, 07:24:52 PM
Yep, piece of cake if you really want to do it.
Easy for you to say. ??? But thanks for the info, I'll get around to looking at this sooner or later.
Lol. What I meant was if you are keen to do this I wouldn't mind dragging out some files and taking a look. :D
Yeah, if you have some time to kill, it would be a big help. Been doing some tinkering with 2.1 to fix some things I don't like, but this is a bit ambitious for me, moreso to keep it responsive. Whenever you can get around to it.
The responsive thing would have to come down to hiding the sidebar on narrow screens, with click activation to bring it into view as an overlay. Not much else you could do. I assume (can't actually remember) this is why they decided to kill it. Should be easy to do with jQuery. It can even be done with mutant varieties of CSS, although that tends to annoy the semantics types, but it's fun to annoy them sometimes.
How serious do you want to get with this? Out of the list of four options in my first reply, which comes closest to what you were thinking of?
ETA: Just updated my local to RC2 (was still on Beta 4) and took a look. Umm. The menu handling on small screens works, but is a tad gruesome. The basic container is ok, but the contents are very jumpity and WTF-ish. I can see why you're not keen on it. It'd drive me bonkers. Does it even work on touchscreen yet? (Do not have touchscreen handy, so can't check).
Anyway, it should be easy enough to just hijack that since it's really only a sidebar overlay anyway, albeit a particularly evil little variant of such. But that's just presentation. Not a biggy.
Basically I'm just trying to create a 2.1 variant that's more to my liking so I can offer it in good conscience to forums I support who are intent on upgrading when 2.1 goes final. A toggle for sidebars as in 2.0 would be nice, but I can go with just replacing dropdowns with sidebars. The clunky navigation in mobile view is not a major concern, that's a theme issue, I'm sure there will be a good selection of responsive themes when final is released.
working on porting my modifications to Bloc's Studio003 theme for 2.0.x to 2.1
got this much done just modifying the CSS
https://test2.turtleshellprod.com/
still got some work to do, especially to introduce the theme color variant chooser... but this was actually remarkably simple so far.
Quote from: Sir Osis of Liver on July 17, 2019, 12:19:23 PMBasically I'm just trying to create a 2.1 variant that's more to my liking so I can offer it in good conscience to forums I support who are intent on upgrading when 2.1 goes final. A toggle for sidebars as in 2.0 would be nice, but I can go with just replacing dropdowns with sidebars.
It's not a big deal to get a toggle. It's just an extra setting, on Profile.template.php IIRC (haven't checked for 2.1 equivalent yet). I'll have a think about the best way to tackle the markup. 2.0 replaced the lot according to the profile setting, which is probably overkill but could save on descendants in the CSS.
QuoteThe clunky navigation in mobile view is not a major concern, that's a theme issue, I'm sure there will be a good selection of responsive themes when final is released.
In theory, yes, but OTOH it would be nice to have it not clunky by default. Menus really are not difficult things. I haven't tested how it behaves on a touchscreen but in a narrow window on desktop the menu is close to unusable. Arguably that's not the intended use case, but it's still quite a handy thing to have sorted if you're working in multiple windows on desktop.
Come to think of it, I'd be inclined to have click or hover activation as options too. I'm not that keen on hover-activated drop menus.
Must say I'm missing the quick login bar from 2.0. It's annoying having to click through an extra link just to log in to the site. I'd be looking at modding that too if I was using 2.1 regularly.
Quote from: Antechinus on July 17, 2019, 07:48:28 PM
Must say I'm missing the quick login bar from 2.0. It's annoying having to click through an extra link just to log in to the site. I'd be looking at modding that too if I was using 2.1 regularly.
You mean like this (http://www.thekrashsite.com/smf21/)?
Yeah that. Ok, where did they hide the setting? I looked everywhere and couldn't find it. :D
Pasted it in from 2.0. Also got rid of the jquery user menu, moved Profile and Messages back into main menu. I don't like having multiple menus of different types all over the page, makes it difficult to find things. Check your pms, I've set up an account for you. Made another (obvious) change in the post/pm editors.
Topic split as suggested during the discussion and is now over here (https://www.simplemachines.org/community/index.php?topic=568827.0). Let's leave this topic to discuss the actual issue only.
Quote from: Sir Osis of Liver on July 17, 2019, 09:56:01 PM
Pasted it in from 2.0. Also got rid of the jquery user menu, moved Profile and Messages back into main menu. I don't like having multiple menus of different types all over the page, makes it difficult to find things. Check your pms, I've set up an account for you. Made another (obvious) change in the post/pm editors.
So what did you do with the alerts? Did you jam that into the main menu as well?
Haven't looked at alerts feature yet, so I left it in userinfo block.
Unfortunately you lose the best part of it, that you have to click on it and go to another page to see its content.
Well, no, it drops the jquery box, just like the button.
I have to ask, what was so terrible about having the profile + messages menus that did the same kind of thing to be consistent?
I didn't change it because it was terrible, I removed it because it split up basic navigation among different menus of different types. You have the dropmenu from username, two different buttons next to it, the main menu above board index, and the Unread/Updated text links below that floated right. Navigation is all over the place. You know where everything is because you built it, but the typical user who's never seen it before and is only interested in content, not learning new forum tricks, will have an annoying time using it, and difficulty finding links they don't use regularly. Makes things a lot simpler to use if it's all out front in one place (like sidebar menus), you don't have to hunt around looking for things. It's not as elegant from a coding standpoint, but you're not building it for coders, it needs to be dumbed down for the vast majority of users who don't know or care what's under the hood.
There's this amazing new website called Facebook where they put the user profile, messages and notifications at the top of the screen, away from the content. I think that little startup Twitter does it too.
I'd argue it's more familiar to users than not at this point. And it emphasises the site content, of which a user profile is not really related to... that's about you, not the site content.
It wasn't just because I thought it was trendy or edgy that I moved it, it was because this is how user interfaces have been built for the last decade.
Yes, although both FB and Twitter are notorious for annoying users. :D
Not for that, though, and those have been hugely consistent for years about their structure and placement...
True. Personally I don't really mind either layout. As long as things are relatively sane (ie: not Discourse) I can pretty much work with anything. Stuff is at the top of the page, which is where you look first. No worries. I think a lot of people are also fairly flexible, simply due to the number of different interfaces they will use in their daily perambulations. It really comes down to what look you prefer.
If we're down to emulating garabage like FB or Twitter, then things are worse than I thought. :P
We're not emulating anything, we're following what has become standard user expectation of putting user centric stuff at the top, and site content underneath.
I believe there's still some value in original design, but I suppose I'm in the minority of forum users who've never been to FB or Twitter, and don't expect all websites to look the same.
But surely, original design is incompatible with providing an experience that is familiar to the user?
But going beyond FB/Twitter, it's really not hard to find sites that follow the exact same logic for the exact same reason: put the user stuff at the top, out the way, so there's more room to focus on content.
yup... pretty much this.
We just revised the UI (as in a complete rewrite) of my company's software.
original design is ok. but, unless you are a singular source of information or function -- familiar layout is more critical to a smooth user experience
Quote from: Arantor on July 24, 2019, 12:47:36 PM
But surely, original design is incompatible with providing an experience that is familiar to the user?
But going beyond FB/Twitter, it's really not hard to find sites that follow the exact same logic for the exact same reason: put the user stuff at the top, out the way, so there's more room to focus on content.
I realise it's a convention now, but this reasoning isn't really solid. Content has always been below the menu and breadcrumbs, and on most pages content will overflow the screen height anyway. This means that "leaving more room to focus on content" is not actually a relevant consideration. It's just a knee-jerk rationalisation for worshipping of the Great God Content, which is trendy at the moment.
Still think the guiding principle should be to have everything out front and easy to use, regardless of what anyone else is doing.
I tend to disagree with your contentions about UI, Sir Osis.. :P
Then we'll once again agree to disagree. Someone else decides which way to go, not me, and I'm good with that.
I'm merely outlining why I did what I did. I stand by the decisions I made, too.
Ok, have got the thing working as a sidebar when js is disabled. It's basically just a case of setting the second level ul to display: block; instead of display: none;
Incidentally, display: none; is the mostest awesomest way ever of making sure people on screen readers can't use your menu content. Cannot remember how may times this has been mentioned in the past. Probably somewhere between 5 million and infinity. Hey ho.
Which is why the ARIA roles were added to the main menu coding way back when in alpha. They have now disappeared. Has anyone tested the menus for a11y on a screen reader? Just wondering, since SMF is traditionally supposed to take account of a11y and AFAICT the menus aint so good for a11y the way they are now.
Anyway, leaving a11y aside, if you just want a basic demo of a sidebar with javascript disabled, throw this on the end of index.css:
/* Custom sidebar testing. */
#admin_content {
margin: 0 0 0 17.5em;
}
#genericmenu {
float: left;
}
#genericmenu .dropmenu>li {
display: block;
margin: 0;
padding: 0;
}
/* Levels 2 and 3 submenu wrapper. */
#genericmenu .dropmenu>.subsections>ul {
z-index: 0;
position: static;
display: block;
min-width: 18.2em;
padding: 0.5em;
font-weight: normal;
border: none;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
border-radius: 0;
box-shadow: none;
background: #fff;
}
/* Levels 2 and 3 submenu wrapper. */
#genericmenu .dropmenu>.subsections:last-child>ul {
border-bottom: 1px solid #ccc;
}
#genericmenu .dropmenu>li>a {
background: #557ea0;
border-bottom: 1px solid #777;
padding: 0 6px;
color: #fff;
font-size: 1.111em;
font-weight: 700;
border-radius: 0;
box-shadow: 0 16px 20px rgba(255, 255, 255, 0.15) inset;
}
#genericmenu .dropmenu>.subsections:first-child>a {
border-radius: 6px 6px 0 0;
}
#genericmenu .dropmenu>li>a.active {
background: orange;
font-weight: bold;
border: 1px solid #f49a3a;
box-shadow: 0 5px 5px rgba(255, 255, 255, 0.2) inset;
}
Which is just "wallop it with a hammer" code and has not really been cleaned up yet. I realise javascript will have to be enabled for general use, and it is possible to have sidebars that work with Superfish enabled, but at the moment I can't recall how I did them. Elk has them, so I'll go pig around in Elk code and figure it out again. :)
Bugger me, the edit time for posts is incredibly short in this here board. :P
Anyway have refreshed my memory. The targeting for Superfish hides in default/scripts/theme.js so it's just a matter of editing that to be more specific. Which is easy if you just want to make everyone use the sidebar. If you want people to have the option of sidebar or mass of droppies, that will require some markup changes (otherwise the js won't know what to target when someone changes their menu display). Markup changes aren't a big deal though.
Ok, edits for the javascript stuffz.
default/scripts/theme.js
$(function() {
$('ul.dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});
$(function() {
$('#main_menu ul.dropmenu, ul.subsections_dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});
default/GenericMenu.template.php
<li ', !empty($section['areas']) ? 'class="subsections"' : '', '><a class="', !empty($section['selected']) ? 'active ' : '', '" href="', $section['url'], $menu_context['extra_parameters'], '">', $section['title'], !empty($section['amt']) ? ' <span class="amt">' . $section['amt'] . '</span>' : '', '</a>
<ul>';
<li ', !empty($section['areas']) ? 'class="subsections"' : '', '><a class="', !empty($section['selected']) ? 'active ' : '', '" href="', $section['url'], $menu_context['extra_parameters'], '">', $section['title'], !empty($section['amt']) ? ' <span class="amt">' . $section['amt'] . '</span>' : '', '</a>
<ul class="subsections_dropmenu">';
That works. If that's basically what you're after, can sort the responsive and rtl shiz to match. If you want more bells and whistles, figure out which ones you want and I'll butcher some extra code.
(http://www.thekrashsite.com/pics/eek.gif) Will give it a try soon as I get a chance.
People always talk about javascript being disabled. When does that ever happen?!?!
In this instance I was just sorting out the presentation without having to worry about the js getting in the way.
Quote from: Sir Osis of Liver on July 24, 2019, 12:44:33 PM
but I suppose I'm in the minority of forum users who've never been to FB or Twitter, and don't expect all websites to look the same.
That's now a minority of two as I don't have an accounts of either of them :)
Quote from: davejo on August 15, 2019, 05:24:32 AM
Quote from: Sir Osis of Liver on July 24, 2019, 12:44:33 PM
but I suppose I'm in the minority of forum users who've never been to FB or Twitter, and don't expect all websites to look the same.
That's now a minority of two as I don't have an accounts of either of them :)
You're a very small minority. In 2017, Facebook enjoyed 2.01 billion monthly active users.
... and it's not that all websites need to LOOK the same -- however, if there is a decent (or more importantly, widely used) interface design -- then it only makes sense to leverage that design, thus making more sites understandable to someone who started with facebook...
Quote from: Study Force on August 15, 2019, 08:32:59 AMYou're a very small minority. In 2017, Facebook enjoyed 2.01 billion monthly active users.
IIRC the world's population is somewhat larger than 2.01 billion, so you're talking about a "very small minority" of approximately 4 billion people. Which, by some people's idiosyncratic standards, might be looking disturbingly like a large majority.
And a large number of those people don't have computers and will have no use for Facebook anyway.
Lies, damn lies and statistics - and you can spin that any way you like. Like how 52% of those who voted, voted for Brexit but that was only something like 37% of all the people who could vote, which is also somewhat less than the number of people who are directly affected (like EU citizens here in the UK couldn't vote on their future)
Don't get me started on Brexit. :D
I know not everyone has a computer, but smartphones are surprisingly widespread. I don't use FB or Twitter myself either, although I sometimes visit them if someone has put up something interesting. https://twitter.com/BorderIrish is always good for a laugh.
My apologies to one and all, it seems I sent the thread off topic :-[