Simple Machines Community Forum

SMF Support => SMF 2.1.x Support => Topic started by: Sir Osis of Liver on July 02, 2019, 12:05:24 AM

Title: Curve2
Post by: Sir Osis of Liver on July 02, 2019, 12:05:24 AM
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.
Title: Re: Curve2
Post by: Antechinus on July 15, 2019, 07:24:52 PM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 16, 2019, 12:25:26 AM
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.
Title: Re: Curve2
Post by: Antechinus on July 16, 2019, 12:31:26 AM
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
Title: Re: Curve2
Post by: Sir Osis of Liver on July 16, 2019, 06:10:04 PM
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.
Title: Re: Curve2
Post by: Antechinus on July 16, 2019, 10:30:17 PM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 17, 2019, 12:19:23 PM
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.
Title: Re: Curve2
Post by: Kindred on July 17, 2019, 12:40:39 PM
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.
Title: Re: Curve2
Post by: Antechinus on July 17, 2019, 07:48:28 PM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 17, 2019, 09:18:03 PM
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/)?
Title: Re: Curve2
Post by: Antechinus on July 17, 2019, 09:24:06 PM
Yeah that. Ok, where did they hide the setting? I looked everywhere and couldn't find it. :D
Title: Re: Curve2
Post by: 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.
Title: Re: Curve2
Post by: Irisado on July 23, 2019, 01:15:52 PM
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.
Title: Re: Curve2
Post by: Arantor on July 23, 2019, 03:10:31 PM
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?
Title: Re: Curve2
Post by: Sir Osis of Liver on July 23, 2019, 04:14:13 PM
Haven't looked at alerts feature yet, so I left it in userinfo block.

Title: Re: Curve2
Post by: Arantor on July 23, 2019, 05:31:43 PM
Unfortunately you lose the best part of it, that you have to click on it and go to another page to see its content.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 23, 2019, 05:41:04 PM
Well, no, it drops the jquery box, just like the button.
Title: Re: Curve2
Post by: Arantor on July 23, 2019, 05:50:27 PM
I have to ask, what was so terrible about having the profile + messages menus that did the same kind of thing to be consistent?
Title: Re: Curve2
Post by: Sir Osis of Liver on July 23, 2019, 06:10:46 PM
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.
Title: Re: Curve2
Post by: Arantor on July 23, 2019, 06:19:35 PM
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.
Title: Re: Curve2
Post by: Antechinus on July 23, 2019, 06:29:25 PM
Yes, although both FB and Twitter are notorious for annoying users. :D
Title: Re: Curve2
Post by: Arantor on July 23, 2019, 06:31:35 PM
Not for that, though, and those have been hugely consistent for years about their structure and placement...
Title: Re: Curve2
Post by: Antechinus on July 23, 2019, 06:37:33 PM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 23, 2019, 06:51:35 PM
If we're down to emulating garabage like FB or Twitter, then things are worse than I thought. :P
Title: Re: Curve2
Post by: Arantor on July 24, 2019, 02:25:00 AM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 24, 2019, 12:44:33 PM
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.



Title: Re: Curve2
Post by: 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.
Title: Re: Curve2
Post by: Kindred on July 24, 2019, 12:49:44 PM
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
Title: Re: Curve2
Post by: Antechinus on July 24, 2019, 07:14:12 PM
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.
Title: Re: Curve2
Post by: Sir Osis of Liver on July 24, 2019, 11:02:09 PM
Still think the guiding principle should be to have everything out front and easy to use, regardless of what anyone else is doing.
Title: Re: Curve2
Post by: Kindred on July 24, 2019, 11:53:26 PM
I tend to disagree with your contentions about UI, Sir Osis..  :P
Title: Re: Curve2
Post by: Sir Osis of Liver on July 24, 2019, 11:59:51 PM
Then we'll once again agree to disagree.  Someone else decides which way to go, not me, and I'm good with that.

Title: Re: Curve2
Post by: Arantor on July 25, 2019, 01:00:03 AM
I'm merely outlining why I did what I did. I stand by the decisions I made, too.
Title: Re: Curve2
Post by: Antechinus on August 12, 2019, 08:42:38 PM
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. :)

Title: Re: Curve2
Post by: Antechinus on August 12, 2019, 09:03:50 PM
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.
Title: Re: Curve2
Post by: Antechinus on August 12, 2019, 11:03:47 PM
Ok, edits for the javascript stuffz.

default/scripts/theme.js
Code (Find) Select
$(function() {
$('ul.dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});


Code (Replace) Select
$(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
Code (Find) Select
<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>';


Code (Replace) Select
<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.
Title: Re: Curve2
Post by: Sir Osis of Liver on August 12, 2019, 11:14:01 PM
(http://www.thekrashsite.com/pics/eek.gif)  Will give it a try soon as I get a chance.
Title: Re: Curve2
Post by: Biology Forums on August 12, 2019, 11:28:06 PM
People always talk about javascript being disabled. When does that ever happen?!?!
Title: Re: Curve2
Post by: Antechinus on August 12, 2019, 11:47:20 PM
In this instance I was just sorting out the presentation without having to worry about the js getting in the way.
Title: Re: Curve2
Post by: Dave J 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  :)
Title: Re: Curve2
Post by: Biology Forums on August 15, 2019, 08:32:59 AM
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.
Title: Re: Curve2
Post by: Kindred on August 15, 2019, 11:22:41 AM
... 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...
Title: Re: Curve2
Post by: Antechinus on August 15, 2019, 07:13:09 PM
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.
Title: Re: Curve2
Post by: Arantor on August 15, 2019, 07:18:13 PM
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)
Title: Re: Curve2
Post by: Antechinus on August 15, 2019, 07:23:18 PM
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.
Title: Re: Curve2
Post by: Dave J on August 16, 2019, 04:59:40 AM
My apologies to one and all, it seems I sent the thread off topic :-[