you are viewing a single comment's thread.

view the rest of the comments →

[–][deleted] 7 insightful - 3 fun7 insightful - 2 fun8 insightful - 3 fun -  (16 children)

Update cc /u/enefi /u/theameliamay

I can't color the bulb, that's too much art for me. But I was able to get svg icons in place. They look about equally blurry compared to the png versions, but in theory they could be better. Maybe they need less detail to focus on a rendering target of 25px wide.

As for the voted and unvoted states, right now there's not a lot of contrast. Some ideas:

  • Alter the existing CSS background colors of div.arrow. unfortunately this covers both the button and the score that displays beneath it for post/link voting buttons
  • svgs with colored backgrounds depending on vote state, the old saidit approach*
  • voted and unvoted svgs edit: like enefi's new lit up bulb: https://gitlab.com/enefi/pyramidion/-/raw/cfb05348d569b791dd9cff46839829b4767b21b0/src/assets/bulb.svg
  • adding another div or span to hold just the vote icon, to more cleanly style it with CSS. I opt out of this, it's at least an 8 hour project requiring javascript changes. but I can guide anyone interested in going this far
  • Stop here and reflect amicably at how far we've come with these voting icons, in just 3 years!

[–]enefi 5 insightful - 4 fun5 insightful - 3 fun6 insightful - 4 fun -  (4 children)

They [svgs] look about equally blurry compared to the png versions

If you have a system (scaling in OS/DE) and a browser set in a way, that it renders 1:1 (pixel size of the rendered image is same as virtual pixel size of a page in browser), then they should look pretty much same. But I think QHD, 4k and other higher resolutions on desktop are becoming more common; on mobile icons and graphical elements are usually bigger naturally. Maybe I could increase stroke width slightly (rays of a bulb look a bit thin/dark)?

  • Alter the existing CSS background colors of div.arrow. unfortunately this covers both the button and the score that displays beneath it for post/link voting buttons
  • svgs with colored backgrounds depending on vote state, the old saidit approach*
  • voted and unvoted svgs

I think combining those approaches would work fairly well - a voting "box" (including score) changing background color and different on/off svg pictures.

adding another div or span to hold just the vote icon, to more cleanly style it with CSS. I opt out of this, it's at least an 8 hour project requiring javascript changes. but I can guide anyone interested in going this far

It's cleaner (personally I would use just img tag), but in itself it doesn't bring much value. Unless those svg files are inline (svg tag with all its data inside), I believe insides cannot be styled, meaning it cannot be animated (only inline svgs can be; either inserted directly to HTML by backend, or later by frontend).

I am willing to donate more free time. I think making those static (non-animated) svgs shouldn't take too long, I'd guess 1-2 hours?

I could try setting up local instance of saidit and try to integrate the animated icons, but a result is not guaranteed (I am not proficient in back-end stuff and never done anything in that templating thing which is used). That would most likely take much longer (because of the setup, I don't think the modification of styles and templates would take longer than 2-4h, I should be able to reuse a lot from the browser extension). But as I wrote earlier, I am not sure if admins/devs/users actually want those animations.

I can't say when I could get to it, at soonest Thursday afternoon (CET), but more likely on the weekend.

I would like to avoid an awkward situation of making something which in the end wouldn't get used. Can I get an official word on how should I proceed? (To be honest, I am not entirely sure who calls the shots, m7?)

[–][deleted] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (0 children)

Good call enefi, the svgs look great on my phone with the higher ppi or whatever.

The animated icons sound like they might be more trouble than they're worth. Getting an img tag added or any html change is a huge burden.

Thanks for getting us this far. Yep, magnora7 is the shot caller.

[–][deleted] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (1 child)

Also if you want to go an extra mile, the yellow of the lit bulb doesn't seem to match the yellow of the smiley face very well. A little more orangey for the bulb maybe. Maybe I'm wrong or drunk.

[–]JasonCarswell 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (0 children)

Fantastic work everyone! I knew you'd get there. Yesterday was dim, but today's looking bright.

I've been hesitant to chime in too much, but now seeing that not only have the icons been improved and actually applied and whatever bugs were there have been figured out, I'm willing and keen to pitch my own improvements on the improvements for people to consider supporting, or not. I'd like to work from the current 4 or 8 SVGs if possible, and thanks!

cc /u/enefi

[–][deleted] 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (0 children)

Would you mind making a greyscale version of lol.svg if it's easy? I tried using an online convertor, but it changed the source code for the svg dramatically. Right now when you vote funny with fresh browser cache, you can see the icon jumping around.

[–]Chipit 5 insightful - 3 fun5 insightful - 2 fun6 insightful - 3 fun -  (8 children)

It's just, really really hard to tell if the button has been pressed or not. It's such a light shade difference between on and off.

[–][deleted] 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (7 children)

Agreed it's a big fail at the moment

[–]magnora7 2 insightful - 3 fun2 insightful - 2 fun3 insightful - 3 fun -  (6 children)

You probably already noticed this, but currently the comment voting buttons are different from the post voting buttons. The comment buttons are always showing the activated button images and don't change when clicked (except the CSS border). I guess that's the only other thing that needs updating besides the activated bulb having yellow in it

[–][deleted] 3 insightful - 4 fun3 insightful - 3 fun4 insightful - 4 fun -  (5 children)

The posts look like that too, for me.

[–]magnora7 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (4 children)

Oh they changed just recently again I guess, d3rr is updating them as we converse

[–][deleted] 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 3 fun -  (2 children)

No, I think it's your cache. I haven't touched anything since last night. I'll make try to improve things in a couple of hours. If you have preferences about this stuff I'm all ears. I think I will add background to the SVG icons to match what we used to have, or just change the existing bg color that changes when voted.

[–]magnora7 3 insightful - 3 fun3 insightful - 2 fun4 insightful - 3 fun -  (0 children)

Yeah must've been my cache.

I like the background of the button darkening, that's a nice improvement. If you had that, plus the images that change when you click them (including the lightbulb turning yellow when activated) I think it'd be perfect. I liked the gray images for unactivated, and yellow-containing images for activated buttons. This, plus the button background darkening like you have it, would be ideal to me.

Not sure how doable that is, I know it's a ridiculously fickle system to configure, but that would be my preference

[–]magnora7 3 insightful - 2 fun3 insightful - 1 fun4 insightful - 2 fun -  (0 children)

The current version looks fantastic. Well done.

[–][deleted] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (0 children)

Yeah

[–]magnora7 4 insightful - 3 fun4 insightful - 2 fun5 insightful - 3 fun -  (0 children)

Nice work, I know these buttons are an absolute bitch to get right, I remember having a lot of difficulties with them when we changed them the first time

[–][deleted] 2 insightful - 2 fun2 insightful - 1 fun3 insightful - 2 fun -  (0 children)

Thx!