« Disable animation on mobile devices
Action buttons: positioning
Aeme features ideas. »
Poll

Where do you like your action buttons best?

At the top of my posts, like it used to be.
0 (0%)
Below my posts, like now.
16 (72.7%)
Either way is fine to me.
2 (9.1%)
Either way is awkward to me, at least for now.
1 (4.5%)
I think they should be located on planet Mars, where at least with a good telescope I might be able to notice them.
3 (13.6%)
Total Members Voted: 20

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #60, on May 13th, 2012, 10:37 PM »
Quote from Arantor on May 13th, 2012, 10:23 PM
I like the look, and the experience attached to the animation but it's gone over my head as far as figuring out how to fix it. I've always taken the view that I make it work, but don't necessarily make it pretty.
Yeah...
Well, right now the action menu doesn't really work, it's not even the same version as in my local test but it's worse there actually... So I'll leave it as is right now, don't worry I'll fix it.
Quote
Going back to the overall topic, I really like how the Like button works now, took a little while to get used to it.
You mean, the notice number? I don't know...
Quote
Making that work via AJAX shouldn't be too problematic (I don't think you did that already?)
I think you added support for that. There's definitely a placeholder for it in the template.
Quote
but I do find it a bit complicated as to how we would display a list of the people who like something,
Would have to be on a click. I'm envisioning my mini-menus as popups that can be put anywhere (and I'll definitely do it this way), so I'll add a mini-menu to the Like button as I said, with the names of the first likers etc, and then a link to view more, which'll open a popup or something with all names. (And dates? Do you store dates?)
Quote
not that I could ever figure out how the list should look when we do get it (as I'm not entirely sure we should use the popups as they stand, but I'm not entirely we shouldn't either)
You'll see, it'll work well.
Quote
Also, have you changed the font lately? Either that or my browser is rendering text weirdly.
Yeah, sorry, forgot to ask you if you didn't mind... The header font is Helvetica Narrow (which I'm downloading off somewhere, and it's totally a non-free font so it'll never be in Wedge or even on Wedge.org for guests or members), and the text font is Calibri. Since you're using Win7 like me, you should have the nice Calibri as well, and Helvetica is downloaded so it's okay.
Thing is, this setup is ONLY for admins (and you're one, now!), I'm thinking maybe I should add support for things like member IDs in the css suffixes, so that you don't have to cope with my design tests...

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #61, on May 13th, 2012, 10:42 PM »
Quote
You mean, the notice number? I don't know...
I like it, works pretty well.
Quote
I think you added support for that. There's definitely a placeholder for it in the template.
I did, yes, though I didn't get as far as actually writing the JS for it.
Quote
Would have to be on a click. I'm envisioning my mini-menus as popups that can be put anywhere (and I'll definitely do it this way), so I'll add a mini-menu to the Like button as I said, with the names of the first likers etc, and then a link to view more, which'll open a popup or something with all names. (And dates? Do you store dates?)
Yes, dates are stored, in the likes table. The only think about using minimenus there is that you'd be getting a menu with a single item, since I think I'd rather the main like button but a one click without menu interaction.
Quote
You'll see, it'll work well.
OK, then :)
Quote
Yeah, sorry, forgot to ask you if you didn't mind... The header font is Helvetica Narrow (which I'm downloading off somewhere, and it's totally a non-free font so it'll never be in Wedge or even on Wedge.org for guests or members), and the text font is Calibri. Since you're using Win7 like me, you should have the nice Calibri as well, and Helvetica is downloaded so it's okay.
Oh, I don't mind :) I was wanted to be sure I wasn't seeing things. Don't worry about member ids in the suffixes, I think that's complexity that isn't really needed in this case. (And I like the design experiments, it's nice to see someone experimenting with something cool)
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,082
Re: Action buttons: positioning
« Reply #62, on May 14th, 2012, 01:18 AM »
Quote from Arantor on May 13th, 2012, 10:42 PM
Quote
You mean, the notice number? I don't know...
I like it, works pretty well.
I'm thinking about moving the number to *after* the 'Like' text, though...
Quote
I did, yes, though I didn't get as far as actually writing the JS for it.
Shouldn't be too hard... If anything I can help :)
Quote
Yes, dates are stored, in the likes table. The only think about using minimenus there is that you'd be getting a menu with a single item, since I think I'd rather the main like button but a one click without menu interaction.
Oh there'd be more than one item...
- Who liked (if there's no like, show "Be the first to like this", the usual one...), with a link to the popup
- a separator
- a Like button, or Unlike button, depending on the status
- maybe things like "Last liked on May 12th..."

Anyway, it doesn't have to be a *menu*, it could very simply be a mega-menu type item, i.e. a regular div with some styling in it.
Quote
Oh, I don't mind :) I was wanted to be sure I wasn't seeing things. Don't worry about member ids in the suffixes, I think that's complexity that isn't really needed in this case. (And I like the design experiments, it's nice to see someone experimenting with something cool)
My experiments are often failed ones... Anything I commit is usually the results of quite some time of use on my side, resulting in a situation where I felt comfortable going for a commit ;)

BTW, I have yet to find the problem with the absolute positioning and stuff.
But it 'barely' works by simply removing the position:relative from .umme (.acme works fine with it and doesn't work without it), so I did that... I HATE doing a hack that I don't understand in the first place, but I have only so much time I can devote to a single problem at a time.
Please test on other browsers whether action & user menus work...

:edit: Wireless + Opera 11 = user menu still works, but isn't proper under the user name. Meh...

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #63, on May 14th, 2012, 01:25 AM »
Quote
I'm thinking about moving the number to *after* the 'Like' text, though...
I think that would work pretty well, actually.
Quote
Oh there'd be more than one item...
- Who liked (if there's no like, show "Be the first to like this", the usual one...), with a link to the popup
- a separator
- a Like button, or Unlike button, depending on the status
- maybe things like "Last liked on May 12th..."

Anyway, it doesn't have to be a *menu*, it could very simply be a mega-menu type item, i.e. a regular div with some styling in it.
Oh, some nice ideas there. We already get the list of who liked posts, so it's no stretch to also pull the timestamp of likes and figure out the last timestamp for a like on any given post.
Quote
My experiments are often failed ones... Anything I commit is usually the results of quite some time of use on my side, resulting in a situation where I felt comfortable going for a commit
I know what you mean.

Both menus work here currently (Chrome beta, desktop)

godboko71

  • Fence accomplished!
  • Hello
  • Posts: 361
Re: Action buttons: positioning
« Reply #64, on May 15th, 2012, 06:04 AM »
I don't like the underlines on the links in the username menu. It doesn't fit with the rest of the menus.
Thank you,
Boko

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
Re: Action buttons: positioning
« Reply #65, on May 15th, 2012, 09:20 AM »
Quote from godboko71 on May 15th, 2012, 06:04 AM
I don't like the underlines on the links in the username menu. It doesn't fit with the rest of the menus.
If we're going that way, how would they look sty,ed like the main menu dropdowns? I really dig that style, as I've mentioned before.
A confident man keeps quiet.whereas a frightened man keeps talking, hiding his fear.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #66, on May 15th, 2012, 10:20 AM »
@godboko> I developped the code in Opera 11, where there are no underlines.
Indeed, Chrome (if that's what you're using) seems to be showing underlines. This is probably because it applies the :hover element to all its children, so when you hover the user name, it gets underlined (as dictated by my CSS), and creates a mini-menu which is set as a child of it, now I have to determine which browser is doing things 'correctly', and how to fix it. And yes, I don't like having underlining either, at least not on a theme where underlining is shown only on hover. So, basically, I'll try to remember how I did it in the main menus, where the hover effect is a background color, and it seems to apply correctly everywhere (i.e. hover on the parent item, AND only on the currently hovered child.)

Of course, the alternative would be to do it like I used to do before the big commit: attach the mini menus to the body element instead, so they never inherit their parent's style. It also forces me to set their position absolutely, although it also fixes some other issues... But it just doesn't feel 'right', and I'd rather not resort to this hack again.

@John> Yep, I know :) And one of my goals is to harmonize these looks... But I love them both. I may even, I don't know, try to look into using my minimenu styling on main menus, although I probably won't keep that... Main menus need to be stylish and very neutral, because they're used a lot. Mini menus can be more daring, I'd say. Right now I love both, so it's going to be interesting trying to do something out of these.

@Pete> I guess I'm going to have to benchmark both the current solution (i.e. doing file_exists on all possible filenames and suffixes) and the glob solution (i.e. doing a single glob() call and getting all files from the generated list.) Come to think of it, I do so many file_exists permutations (because of the growing number of suffixes and the fact that even the default stylesheet already has at least 3 potential files or more, index, sections, custom...), if it wasn't cached already it would be quite slow to do on every page... Actually it's best that PHP doesn't cache it and the OS does it -- at least it can be cached over several sessions and page loads ;)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #67, on May 15th, 2012, 10:42 PM »
Therein lies the problem, getting it to purge the cache does also imply having it able to purge other things, like when folks use memcache or whatever, which the current cache doesn't deal with either.
Posted: May 15th, 2012, 10:34 PM

OK, just wanted to tackle something in this topic (back earlier on the original part of it)

I really think the whole 'number at the end of likes' structure would work better. As it stands you get the number before the Like wording and you get the extra space underlined when hovering because it's all part of the link.

Converting it to [icon] Like ( number ) means the thumb icon + wording can be the action itself with the number being the popup. The UI aspect gets covered, there's somewhere to put the popup invocation and it deals with the underlining that looks weird otherwise.

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
Re: Action buttons: positioning
« Reply #68, on May 16th, 2012, 01:02 AM »
Quote
@John> Yep, I know :) And one of my goals is to harmonize these looks... But I love them both. I may even, I don't know, try to look into using my minimenu styling on main menus, although I probably won't keep that... Main menus need to be stylish and very neutral, because they're used a lot. Mini menus can be more daring, I'd say. Right now I love both, so it's going to be interesting trying to do something out of these.
The main thing I don't like about the mini-menu is it's too crowded. The recent restyling helped on that front since the borders are gone. Some extra padding in between the links would help as well. The hover state would look better without the underline, and it might also look better if the background changed color, not the text.

Sorry for the nitpicking. Both my brother and my mother are graphic designers for our family book publishing company and I think it's rubbing off onto me.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #69, on May 16th, 2012, 11:01 AM »
Quote from Arantor on May 15th, 2012, 10:42 PM
Therein lies the problem, getting it to purge the cache does also imply having it able to purge other things, like when folks use memcache or whatever, which the current cache doesn't deal with either.
Do you mean the clear cache function doesn't clear non-file cache alternatives...?
Quote
I really think the whole 'number at the end of likes' structure would work better. As it stands you get the number before the Like wording and you get the extra space underlined when hovering because it's all part of the link.
I totally agree, and it was my plan to move it to after the word, actually... Because it looks like it's two icons side to side, so it's a bit unbalanced with the text coming to the right.

However, there's the minor problem of what the text should say. Which is why I haven't tackled it yet...

(like icon) (empty) Like
Pressing Like.
(unlike icon) (1) Unlike
It sort of implies, "1 person unlikes this"...
So, it should say:
(like icon) (1) Like/Likes whatever you want that is positive...
And on hover, have the mini-menu open with a "(unlike icon) Unlike" link among other things.
Quote
Converting it to [icon] Like ( number ) means the thumb icon + wording can be the action itself with the number being the popup. The UI aspect gets covered, there's somewhere to put the popup invocation and it deals with the underlining that looks weird otherwise.
I didn't think you'd care about such a little detail as the underlining... ;)
Actually, I did notice it and I hate that kind of thing -- it can be fixed very easily by simply duplicating the link and adding a space in between...
Quote from live627 on May 16th, 2012, 01:02 AM
The main thing I don't like about the mini-menu is it's too crowded. The recent restyling helped on that front since the borders are gone.
They're not gone, they're just no longer transparent ;)
Quote
Some extra padding in between the links would help as well.
I tried that, but wasn't happy with it.
Quote
The hover state would look better without the underline, and it might also look better if the background changed color, not the text.
Now, here's the thing...
Do you remember our blog style on wedge.org when I was using the Noisen codebase...?
If not, open an account (or use it if you already have one) at noisen.com, go to http://nao.noisen.com/ and check out the "Action" button on the upper right of any post... This is something of an innovation (SMF-wise) that I strived not to reproduce in Wedge, but the more I played with my layouts, the more I felt compelled to go there... And pretty much unaware, because I only recently realized that even the word 'Action' was from there. (It's how the More button is called in Mobile mode... And will probably even be renamed to Actions everywhere once I decide to go ahead and merge the Modify link and the Quick Edit button together into a Quick Edit button with a mini-menu to open a full edit version...)
Quote
Sorry for the nitpicking. Both my brother and my mother are graphic designers for our family book publishing company and I think it's rubbing off onto me.
I'm an amateur design. My designs suck. I'm always glad to hear suggestions on where I could improve Wedge's layouts.
Heck, Pete knows quite well that I'm constantly struggling with my bad taste -- he has to cope, along with me, with numerous style changes to Weaving that I'm applying to admins only (custom.admin.css, yay!), so right now we both have Calibri as our main font in Wedge and it'll probably change again before you know it... :P
Posted: May 16th, 2012, 10:29 AM

(And just to be clear: too many fonts in the kitchen!! I'm aware of that!!)
Posted: May 16th, 2012, 10:34 AM
Quote from Nao on May 16th, 2012, 10:34 AM
Quote
The hover state would look better without the underline, and it might also look better if the background changed color, not the text.
Now, here's the thing...
The thing is that it has a styling like you like ;)
(Forgot to be clear on this...)

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #70, on May 16th, 2012, 02:51 PM »
Quote
Do you mean the clear cache function doesn't clear non-file cache alternatives...?
Correct. I believe SMF has patched it as best possible given the nature of the caches though.
Quote
However, there's the minor problem of what the text should say. Which is why I haven't tackled it yet...

(like icon) (empty) Like
Pressing Like.
(unlike icon) (1) Unlike
It sort of implies, "1 person unlikes this"...
So, it should say:
(like icon) (1) Like/Likes whatever you want that is positive...
And on hover, have the mini-menu open with a "(unlike icon) Unlike" link among other things.
I get what you're saying but I don't think it's that big a deal to be honest. How about we try it and see how people react?
Quote
Actually, I did notice it and I hate that kind of thing -- it can be fixed very easily by simply duplicating the link and adding a space in between...
Heh, well if we do this, it will definitely be fixed. ;)

* Arantor has nothing to add to the rest of the post...

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #71, on May 17th, 2012, 10:34 AM »
Quote from Arantor on May 16th, 2012, 02:51 PM
Quote
Do you mean the clear cache function doesn't clear non-file cache alternatives...?
Correct. I believe SMF has patched it as best possible given the nature of the caches though.
After SMF 2.0 you mean?
What should I do? Because I liked the idea of caching this... (Or at least I should do some benchmarking.)
Quote
I get what you're saying but I don't think it's that big a deal to be honest. How about we try it and see how people react?
I'll try, when I'm done with what I'm working on (several things.)

Re: topic, I'm pissed. I just discovered that my iPod is having the hidden user menu bug AGAIN... I had it fixed yesterday. Then it didn't work correctly in Opera and Safari (wrong positioning.) So I rewrote the code to use the main menu technique, and it worked... Except I didn't test in my iPod. And it fails exactly the same way. >_<
Posted: May 17th, 2012, 10:22 AM

Ugliest hack ever... (thankfully, for iOS stylesheets only)

Code: [Select]
h4 .mime
position: absolute
Re: Action buttons: positioning
« Reply #72, on May 17th, 2012, 02:59 PM »
Quote from Arantor on May 17th, 2012, 12:57 PM
Quote
After SMF 2.0 you mean?
Yup, as far as I know it was patched in their Git repo, along with the fact that the cache level and type are now globals and not in $settings. (So that the settings table can actually be cached and read properly from cache, regardless of which cache we're talking about)
So, it's fixable right...?

Your posts make me feel like it's a bad idea to use the file cache for... pretty much anything?!

Re: topic, so I've made a working prototype that uses the parent's offset position to show the element, rather than relative+nested absolute positioning (which always had my preference).

Pros:
- it will work everywhere... hopefully...
- it's relatively easier to understand what it does
- no, or less, esoteric hacks that even I can barely understand

Cons:
- if you resize the window while the menu is open (e.g. in Opera if I press F4 to show or hide the sidebar that holds my tab list), it'll be repositioned somewhere else (usually not under the parent item!)
- if you modify the CSS layout or HTML structure while a menu is open, the same will happen...
- and it does the same even if the menu isn't open, unless you store the parent's coordinates on all mouseenter events (which is what I'm doing right now, it's probably a tad slower too...)
- it's not as cool.
- it takes a bit more JS code (~20 bytes...)
- did I say more code..?
- and more code, too.

I could apply this to the main menu, too... This would avoid similar issues with IE8, although I fixed them with an odd hack as mentioned in the other topic.

I'm not exactly sure at this point, which way I should follow...
Posted: May 17th, 2012, 02:48 PM

Oh... Also: absolute positioning makes it harder to work in non-JavaScript environments, unless I'm very careful. Basically, I'd need to add position:relative to the parent in CSS, and remove it through JS to allow for positioning relative to the document. Meh...!
Re: Action buttons: positioning
« Reply #73, on May 17th, 2012, 04:54 PM »
Menus, please :P
(Trying to keep this on-topic... Just that I don't want long posts about the cache stuff to kill the action button discussion ;))
Oh BTW, I'm trying to go back to relative positioning and figure out why exactly it fails in iOS etc...

Will answer your post once I'm done!
Re: Action buttons: positioning
« Reply #74, on May 17th, 2012, 05:00 PM »
Okay... I *think* it's because some browsers don't consider that 'left: auto' is the same as 'left: 0'... I don't know why, eh.
But it seems to work when I do it that way... Meh.
« Disable animation on mobile devices
Aeme features ideas. »