Action buttons: positioning
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

godboko71

  • Fence accomplished!
  • Hello
  • Posts: 361
Re: Action buttons: positioning
« Reply #15, on May 5th, 2012, 06:06 AM »
Quote from live627 on May 5th, 2012, 05:31 AM
Quote
You know, I think it might be better if the like button were actually a button in the style of the other buttons
Too many borders and lines. I like it more minimalistic like how it is now.
I agree. It fits in better minimalist, though I like the text color (blueish) of unlike better then the color of Like and Quote & More.
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 #16, on May 5th, 2012, 06:58 AM »
btw, I voted to put the buttons on Mars because I could. Where''s the red space dust? :P
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 #17, on May 5th, 2012, 11:22 AM »
Quote from godboko71 on May 5th, 2012, 06:06 AM
Quote from live627 on May 5th, 2012, 05:31 AM
Quote
You know, I think it might be better if the like button were actually a button in the style of the other buttons
Too many borders and lines. I like it more minimalistic like how it is now.
I agree. It fits in better minimalist, though I like the text color (blueish) of unlike better then the color of Like and Quote & More.
Well the color was due to the fact I forgot to apply the same css to .unlike_button, which is done now... Sorry :)
The reason why the buttons don't share the same link color is only due to the fact that I was trying to set an opacity on the icons, and the button text is inside the same stuff so basically they also inherit the opacity, so I had to decrease their brightness to keep them readable. Which OTOH makes them very dark once you hover them... There isn't a "good" solution to fix these, I just like the opacity play too much to get rid of it... :-/

MultiformeIngegno

  • Posts: 1,337

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #19, on May 5th, 2012, 12:07 PM »
So...

- I turned the two notice classes, 'note' and 'warn', into three classes: note (orange -- neutral, like New posts), notewarn (red -- requires immediate attention), and notenice (green -- neutral but as in 'good'). I'm not sure about the name/purpose of notenice, but I wanted to make your own likes clearly stand out in a positive way. I also used that in the main menu where new PMs are concerned, but I'm not sure whether it's best to use a warning or 'nice' note for PMs -- I use warnings for admin errors, and neutral for new media items, and I still haven't made a decision for new PMs.

- If you can't like a post and it hasn't received any likes, you won't see anything.
- If you can't like a post and it has received likes, you'll see the Thumbs Up icon, and a neutral (orange) notice with the number of likes.
- If you can like a post and it hasn't received any likes, you'll see the Thumbs Up icon and a "Like" link.
- If you can like a post and it has received likes, you'll see the Thumbs Up icon, a neutral notice with the number of likes, and a "Like" link.
- If you can like a post and you likes it, you'll see the Thumbs Down icon[1], a 'positive' (green) notice with the number of likes, and an "Unlike" link.

I'm working on having the whole area show who liked the posts on hover, but I don't know what's best: a minimenu where clicking that popup will then load the full list of likes, or a non-clickable popup with just the main names, or a non-clickable popup with the full list of likes (loaded through Ajax, obviously.)

Some of the new style was unconsciously, although I realized quite early in the process but that's okay, quite inspired by Facebook's compact way of showing likes.

Fishing for opinions now :)
 1. Which is totally illogical at this point... I'm thinking of getting rid of it?
Re: Action buttons: positioning
« Reply #20, on May 5th, 2012, 03:59 PM »
Sometimes, just asking for opinions isn't enough :P

Well, I guess I'll follow my instinct and go for a minimenu then... Where I'll be able to show the main voters, a link to show them all, Unlike icon (in case you already liked the post, I think it's best to hide the Unlike text away from view...), and perhaps things like 'silently like' which could mean 'say I like this, but anonymously'... Dunno.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #21, on May 5th, 2012, 05:35 PM »
The 'silently like' option will require a schema and query change.

A lot of this stuff is going to be based on how it looks when we actually try it, you know. As long as the like button can just be clicked without having to hover or wait or anything, it'll probably work out OK to have unliking be less prominent.

Bump for attachment broken issue.
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 #22, on May 5th, 2012, 05:51 PM »
Quote from Arantor on May 5th, 2012, 05:35 PM
The 'silently like' option will require a schema and query change.
Schema change yes -- adding a new field where you store whether the user wants to remain anonymous, but that's all..?
(We could also simply add a single field with a serialized array of options, like in the members table...)

I think it might be an interesting thing to do, though. I never discussed it before, but see it this way: let's say you want to Like a NSFW picture and your boss is on the same forum as you are... You won't "like" it because you'll be afraid he finds out you liked it. So, hiding your name from the Like list seems okay to me...

Apart from that -- well, we could also have an option to Like something without showing it in your user news stream (or wall, or whatever), and that's a one-time function so it doesn't need a database entry.
Quote
A lot of this stuff is going to be based on how it looks when we actually try it, you know. As long as the like button can just be clicked without having to hover or wait or anything, it'll probably work out OK to have unliking be less prominent.
Yup.
I'm still not 100% sure about whether or not I'll keep the note classes with likes number etc... But at least it's a solution that would be perfect on mobile. (Perhaps I should just show the 'You like this' text next to it, and then hide it entirely on a media query test.)
Quote
Bump for attachment broken issue.
Very oddly -- it seems like your file is done like this: it's missing the first 30893 bytes of the original file, then you get the rest of the file, then at the end, it adds another 30893 bytes which seem to be repeated from offset 52078 of the original file (i.e. it adds them again)... Make what you want of it, but I'm at a loss myself.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #23, on May 5th, 2012, 06:13 PM »
Quote
I think it might be an interesting thing to do, though. I never discussed it before, but see it this way: let's say you want to Like a NSFW picture and your boss is on the same forum as you are... You won't "like" it because you'll be afraid he finds out you liked it. So, hiding your name from the Like list seems okay to me...
I think this is a fairly unlikely situation to actually want in the core, personally. I could see it being a plugin though.
Quote
Schema change yes -- adding a new field where you store whether the user wants to remain anonymous, but that's all..?
It would have to be a change to the query/processing to hide it from others that aren't you, whilst including you in it but the schema change is simply the extra column.

I'm not sure, there is such a thing as having too much stuff.
Quote
I'm still not 100% sure about whether or not I'll keep the note classes with likes number etc... But at least it's a solution that would be perfect on mobile. (Perhaps I should just show the 'You like this' text next to it, and then hide it entirely on a media query test.)
Try it :)
Quote
Very oddly -- it seems like your file is done like this: it's missing the first 30893 bytes of the original file, then you get the rest of the file, then at the end, it adds another 30893 bytes which seem to be repeated from offset 52078 of the original file (i.e. it adds them again)... Make what you want of it, but I'm at a loss myself.
I uploaded it, saw it was corrupt, removed it, reuploaded it and still corrupt (the same way). Very weird. But I didn't find any of the normal PNG block indicators, I couldn't find the IHDR sector end when downloading the file again...

godboko71

  • Fence accomplished!
  • Hello
  • Posts: 361

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #25, on May 6th, 2012, 12:15 AM »
The thing is, it's going to make it much slower and heavier to store, for something that is essentially a minor feature. If someone wants it for a plugin, fine, but I think doing anything more than what we have is a bit much... (though I'm not disputing that we need a few things, like being able to turn it off, being able to get a list of likes)

godboko71

  • Fence accomplished!
  • Hello
  • Posts: 361

Re: Action buttons: positioning
« Reply #27, on May 6th, 2012, 01:28 AM »
I would suggest a "Silent Like" in a way that this action doesn't make a page reload. For example, an user can hit the Like button (or link) but it won't refresh the entire page till a "manual" refresh, in simple terms, don't refresh automatically when hit the like button.

Could be a good idea, similar to the thought behavior.

Arantor

  • As powerful as possible, as complex as necessary.
  • Posts: 14,278
Re: Action buttons: positioning
« Reply #28, on May 6th, 2012, 01:37 AM »
Implementing it without requiring a reload is something I meant to do just didn't get time to write the JS for it.

Note that all suggestions of 'silent like' are completely different to what you're suggesting.

Nao

  • Dadman with a boy
  • Posts: 16,082
Re: Action buttons: positioning
« Reply #29, on May 10th, 2012, 06:08 PM »
(Still working a lot on Wedge, it's just that I'm so overwhelmed by the amount of changes to commit, that I'm postponing my next commit every time...)
Quote from Arantor on May 5th, 2012, 06:13 PM
I'm not sure, there is such a thing as having too much stuff.
Alright...
Quote
Quote
I'm still not 100% sure about whether or not I'll keep the note classes with likes number etc... But at least it's a solution that would be perfect on mobile. (Perhaps I should just show the 'You like this' text next to it, and then hide it entirely on a media query test.)
Try it :)
I'm not sold on either solution, actually... :-/
Quote
I uploaded it, saw it was corrupt, removed it, reuploaded it and still corrupt (the same way). Very weird. But I didn't find any of the normal PNG block indicators, I couldn't find the IHDR sector end when downloading the file again...
Did you look into this bug in the meantime...?

Back on topic -- I rewrote the minimenu CSS/JS code to fix a detail that bothered me at low-res (iPhone etc) -- if a minimenu overlaps another minimenu's parent entry (like the Actions button overlapping the following post's author name), the parent entry has priority z-index so it shows up on top of the menu. This is because of a complex implementation to ensure the parent entry wouldn't be 'hidden' by the menu showing up behind it.
I tried to fix it by doing a reverse walkthrough of all umme/acme tags, like this:

Code: [Select]
(function () {
var zindex = 1;
$.fn.reverse = [].reverse;
$('.acme, .umme').reverse().each(function () { $(this).css('z-index', zindex++); });
})();

(Isn't this some cool JavaScript? :P)
I would then create the minimenus dynamically to use the parent item's z-index minus 1. Worked perfectly, but I noticed it didn't look great on my iPod -- most notably the menus tended to disappear and then reappear as they were animated. Possibly due to the great amount of processing power this requires... (Yay for mobile devices.)

So I threw away that solution, and instead decided to .clone() the parent into the minimenu and position it on top of the parent. Fixing all z-index issues immediately, meaning I didn't have to specify them any longer (which makes it easier to style stuff, too.)
And again -- it works nicely. Well, it didn't at first, but then I got rid of the padding animation implied by .show() (by replacing it with a longer .animate() call[1], but thanks to gzipping it's actually much shorter than the original code). Except for my iPod, again.....!!!
Now, the animations work correctly, but I can't seem to get the font sizes right. I can fix it by setting paddings and sizes manually in the index.iphone.css file, but it also means that some other devices are bound to show issues with this...

So, two possible fixes:
- Finding a 'correct' way to clone the parent entry perfectly. (This would *probably* imply setting the minimenu to be a child of the parent, rather than a child of the body. I'll try this next but it's like that it's going to create other issues.)
- Getting rid of the current minimenu style. Instead, implement them to look just like the 'normal' menus, i.e. an arrow below the item, and nothing surrounding it. Basically, doing what John did in the first place when he suggested re-using our menu style but I wanted to look into more animation styles.

I need opinions.
 1. I should also point out that because of the lack of padding animation, it doesn't 'feel' as nice an animation as it used it, but at least it's clean. This can probably be fixed by animating the list items at the same time as the parent ul... But I'm lazy for now.