More sidebar complications...

Nao

  • Dadman with a boy
  • Posts: 16,079
More sidebar complications...
« on June 26th, 2013, 10:04 PM »
So, I was requesting the other day, whether I could do some tests in here... I'm afraid it's not ready for testing yet, though.

Here's what I'm, hmm, trying to do...

See the Google+ or Facebook apps on mobile? They both have (and aren't the only ones) the 'navigation drawer' feature, which is something Google standardized for Android apps, where you swipe the screen to show a sidebar, and swipe it again to hide it.

Thing is, this is something that makes sense on mobile, and it reminded me that the original sidebar for Wedge was very similar to that... If you'll remember, if you didn't have enough room on the screen, it moved your sidebar to the extreme left, only showing a small portion of it, and when hovering that portion, it would bring it into view (position: absolute), with a nice animation and all.

Honestly, I can't for the life of me remember why I gave up on it, but here we are.

The main advantage of the current responsive sidebar, is that you can easily see its contents by just scrolling your mouse wheel, so it doesn't require much action on your part; that is its advantage, and really, its only one...

I've been doing LOTS of tests trying to get it right, started with a few lines of CSS, then added a few lines of JS, then expanded it even more, added more goodies, etc, the usual stuff, and now my current code is, like, 200 gzipped bytes added to the script file... Hmm. It's a lot to me, but I know I shouldn't be too worried about this kind of increase, especially since we still have 7.5KB for the entire script file, and it can easily go up to 10KB without me getting too worried, so... Whatever.

Here's what it's been doing until today... Hovering the left portion of the screen (about 30px wide) would bring the sidebar into view, position: fixed, with a scrollbar if too long, and a subtle but nice animation effect (basically, on mobile you get the bare animation, but on desktop you also get a parallax scroll effect on the whole page, which is nice really.)

There are two points where I'm currently stuck.

1/ The convenience. Of course, none of the sidebar information is vital, but still... it's a bit annoying, having to hover something so far on the left... Would like opinions on whether this is important, or not...

2/ The main menu. Up until today, I didn't touch it, but then I suddenly decided that it would be nice, at least on mobile, to automatically move the main menu to the sidebar. I got it working, but it's really hard.

(a) All items are developed, as intended, but I realized that as an admin, I have way too many entries, and it forces me to scroll wayyyy down just to be able to view the actual sidebar content...

(b) It's probably best to collapse them, then, but it suddenly implies an extra tap for mobile users. Swipe left to open sidebar, tap the menu item you want, then tap the option you want. The only advantage, I guess, is that since we're in the sidebar, I can easily control the menu item sizes, and thus you'll never have to zoom in to ensure you're tapping the right item, I guess... Opinions..?

(c) It also occurred to me that I could open *two* sidebars, eh... For instance, have the sidebar show up on the left, but at the same time, have the main menu unfold in a new sidebar on the right. This implies, however, that the sidebar can never fill more than half (or 60%) of the screen, otherwise you can only have one, or the other. I like the idea, though...

(d) Any .note classes will be hidden from view, obviously, if the menu is hidden by default... I mean, you won't get to see the number of admin errors, or PM number, or unseen media number. I could shove these up somewhere in the visible UI, but it doesn't make a lot of sense, or it might be more work than deserved, I don't know...

Okay, I'll end this long post here, given how my previous long post asking for feedback scared the hell out of everyone, I suppose it's for the best, eheh... :P

I'll post screenshots once I'm satisfied with the layout, but it certainly won't be today, and perhaps not tomorrow either, that's how much I'm NOT happy with it, but you know how much of a perfectionist I can be, so...

PS: in case you missed these, there are two uncommitted features that made their way into wedge.org last week: (1) infinite scroll now works on mobile, (2) previewing a notification will now mark it as read automatically, yay.

spoogs

  • Posts: 417
Re: More sidebar complications...
« Reply #1, on June 27th, 2013, 04:31 AM »
So I find myself surfing around more on my phone of late. In portrait mode I'd have to scroll all the way to the bottom to see the sidebar anyway so I'd be fine with it hidden to the left and shown on tap or swipe.

As for the menu in the sidebar, I'd probably have to see a screenie or see it in use case to form a real opinion there. For now I cant say I like it, not because of the extra taps or swipes but simply the menu seems fine as it is now to me.

The idea of 2 sidebars is also something I'd probably have to see or use to get a feel for it and then give some real feedback. My current take on it is it will make an already small screen even smaller. On second thought I'm assuming the double sidebar would only be visible when interacting with the menu so it probably wouldnt matter as far as screen size goes.
Stick a fork in it SMF

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: More sidebar complications...
« Reply #2, on June 27th, 2013, 05:41 PM »
I finally decided against doing the sidebar menu on non-mobile devices, I added the rules to the screen density media query, rather than the screen width media query. The latter applies to any device with a small screen, including a resized desktop browser window, while the former only applies to devices with a screen that has more pixels than visible, i.e. not a regular monitor. (Mac & iPads have a high density, too, but I can't test these...)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
When we unite against a common enemy that attacks our ethos, it nurtures group solidarity. Trolls are sensational, yes, but we keep everyone honest. | Game Memorial

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: More sidebar complications...
« Reply #4, on June 27th, 2013, 06:57 PM »
Well, I guess you'll get to see it when I upload at some point...
Basically, ensuring that the menu stays in the header, and isn't moved to the sidebar.
Re: More sidebar complications...
« Reply #5, on June 28th, 2013, 07:36 PM »
I'm still not satisfied with the friggin' sidebar...

I fixed most of my problems, but for performance reasons, I decided to give up the parallax scrolling thing, and it suddenly makes the whole thing very dull, hmmm....

It's still better, on mobile, than whatever is currently available in Wedge, but when it comes to desktop, it's really no good. If I tried to implement some kind of trick to make it as easy to open the sidebar (i.e. an emulated swipe with the right button clicked, or something), I might interfere with mouse gestures, which isn't good...

I'll probably upload *everything* I have in store for now, i.e. all the notification stuff and this sidebar, for a couple of days, so you guys can tell me whether you like them or not, although I might go ahead and commit the notification stuff, already.
Re: More sidebar complications...
« Reply #6, on June 28th, 2013, 09:14 PM »
Fixed sidebar to actually show up... (I was focusing on my notification work, sorry.)

So, guys..? What do you think..?
It's not as sexy as I'd have liked to upload, but at least it should be okay, performance wise.

I don't know how to "point out" the sidebar to people when it's hidden, though... I added a diamond shape as a made-up arrow, but it needs some love, because it's only correctly positioned in Chrome, ah ah... (And only Desktop...)

live627

  • Should five per cent appear too small / Be thankful I don't take it all / 'Cause I'm the taxman, yeah I'm the taxman
  • Posts: 1,670
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Nao

  • Dadman with a boy
  • Posts: 16,079

Dragooon

  • I can code! Really!
  • polygon.com has to be one of the best sites I've seen recently.
  • Posts: 1,841
Re: More sidebar complications...
« Reply #9, on June 29th, 2013, 11:56 AM »
Why not add a physical button as well instead of solely relying on a swipe gesture (I'm thinking jQuery mobile's panels here, they can help you with this)? Otherwise the menu's font is too big but the idea is pretty cool!
The way it's meant to be

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: More sidebar complications...
« Reply #10, on June 29th, 2013, 04:09 PM »
Quote from Dragooon on June 29th, 2013, 11:56 AM
Why not add a physical button as well instead of solely relying on a swipe gesture (I'm thinking jQuery mobile's panels here, they can help you with this)?
This was in my plans before uploading, actually, but I never could seem to find a proper place to put that button in, so I decided to go for a drop shadow on the left side, that would 'hint' at the ability to swipe... But if you have a (visually) good solution, please share...!
Quote
Otherwise the menu's font is too big but the idea is pretty cool!
Also, I tested the setup on my iPod earlier, and was stunned by the awful menu size, eh... It's actually, like, twice bigger than what I have on my regular test setup, i.e. my Android-based S3 device, meaning I'll have to fix this, of course.
I take it you tested on iOS, right..?

Also, the iOS version is WAY too eager to open the panel, as a very, very small swipe (even an accidental slow swipe) triggers it, while on my S3, you have to do a conscious swipe, hmm... This, I guess, also needs a quick fix...

Oh, and I finally found a nice way to make it work on desktops...! I can't believe it!

- The problem was that the drop zone for the mouse was too small (about 30 pixels wide, 100% height), and I couldn't decide between a 100ms or 200ms delay before triggering the popup.
- All of this means, you need to make a proper effort to take your mouse to the extreme left of the window (which, at this point, is almost guaranteed NOT to be stuck to the left side of the screen, meaning you need to correctly position it), and then wait for a tenth of a second, then move the mouse... Really, really painful, compared to moving the wheel to the bottom of the page, and then reading there...

Then I thought... Wheel..? Mouse wheel....? Can't I hook something into that..?!
And it occurred to me, clear as ever: even though I never did it, I can certainly hook into the friggin' wheel *button*...!
So, I did JUST THAT. I added a mousedown event, and if e.which is 2, trigger the panel, to open it or close it.
You can try it now... :)

What do you think..? Is it good material, or is there any good reason why I shouldn't cancel the usual wheel button, which in 99% of all cases would simply trigger a mode that allows you to scroll the window with a mouse move, something I'm pretty sure most people would never do consciously, thus meaning a waste of time, having to re-click the button to untrigger this mode..?
Posted: June 29th, 2013, 04:06 PM

Note I also ensured that a middle-click on a link wouldn't trigger the panel, because usually you'd do that to open the link in a new tab, of course...

spoogs

  • Posts: 417
Re: More sidebar complications...
« Reply #11, on June 29th, 2013, 04:14 PM »
I like it ad well

Just want to point out on windows phone 8 IE 10, while viewing a topic if I try to access the sidebar it does not stay in view it slides away on its own. If I'm viewing the homepage wedge.org The sidebar slides out and stays out until i decided to swipe it away.

Nao

  • Dadman with a boy
  • Posts: 16,079
Re: More sidebar complications...
« Reply #12, on June 29th, 2013, 04:27 PM »
Swipe manual:

- Swipe from left to right
  - Opens sidebar
    - Swipe from right to left
      - Closes sidebar
    - Swipe in any other direction
      - Does nothing, except the default (scrolls sidebar or screen)
- Swipe in any other direction
  - Does nothing, except the default (scrolls screen)

There are limitations, though... Scrolling the sidebar will work, and when you reach the end, it'll start scrolling the rest of the screen, instead. It's the default behavior, and also occurs in select boxes, for instance. I tried to 'block' that, but it didn't work, and to ensure it'd work, I'd probably have to add more code, which I'm reluctant to do at this point, as it's already heavy enough, and melikes short code better, as it's easier to maintain, of course...

spoogs

  • Posts: 417
Re: More sidebar complications...
« Reply #13, on June 29th, 2013, 04:33 PM »
Actually clearing the cache fixed it, should have thought of that sooner. Works as intended everywhere. Nice job.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: More sidebar complications...
« Reply #14, on June 29th, 2013, 06:34 PM »
Well, the icon is not obvious enough (but I think we already knew that), the swipe works nicely on iPad but the text is a bit big on iPad 3.

Interesting direction, I like it... though I thought you were going to keep the menu in the top of the page rather than the sidebar?