Saidit.net - Side-by-side vote buttons are here!

submitted by magnora7[A] from self.SaidIt

A lot of people have suggested this since we started saidit, and we're glad to finally be able to bring it to you. On every single link and comment on saidit, the vote buttons are now side-by-side instead of one above the other. It took quite a few coordinated CSS changes to make it work, but it's finally here, and should work on all screens regardless of resolution, or zoom, or browser.

This will be a great way to showcase saidit's unique voting system, and highlight that the votes are not just a replacement for the upvote/downvote system of reddit, but have an entirely new function with 2 types of upvotes that can be sorted separately.

Try it out! Let us know what you think

all 44 comments
sorted by:
top
newinsightfulfun

[–]magnora7[S] 6 insightful - 11 fun6 insightful - 10 fun7 insightful - 11 fun -  (1 child)

Here's a comment to test the votes on

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

They look pretty neat! I like it

[–]Jesus-Christ 4 insightful - 4 fun4 insightful - 3 fun5 insightful - 4 fun -  (0 children)

I love it!

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

it just broke our CSS on s/Ice_Poseidon2

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

Add this to your CSS to undo the vote button changes:

/* vote buttons from side-by-side back to vertical on top of one another like reddit */

.arrow .score { padding-left: 19px; margin-left: 8px; top: 5px; left: unset; }

.link .midcol { margin-left: unset; }

.comment { .midcol { width: 31px; height: unset; } }

.arrow {
width: 81%; margin-right: 15px; height: 24px; background-position-y: center; }

.message.was-comment .midcol { height: unset; }

[–][deleted] 4 insightful - 4 fun4 insightful - 3 fun5 insightful - 4 fun -  (1 child)

Perfect thank you will do now

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

No problem

[–][deleted] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (1 child)

Your code is scuffed it has a validation error for .comment { .midcol { width: 31px; height: unset; } }

Copy this code that has been fixed

/* vote buttons from side-by-side back to vertical on top of one another like reddit */

.arrow .score { padding-left: 19px; margin-left: 8px; top: 0px; left: unset; }

.link .midcol { margin-left: unset; }

.comment .midcol { width: 31px; height: unset; }

.arrow { width: 81%; margin-right: 15px; height: 24px; background-position-y: center; }

.message.was-comment .midcol { height: unset; }

[–]magnora7[S] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (0 children)

Thanks. I made a couple final changes to .comment .midcol, so here is the final updated code:

/* vote buttons from side-by-side back to vertical on top of one another like reddit */

.arrow .score { padding-left: 19px; margin-left: 8px; top: 0px; left: unset; }

.link .midcol { margin-left: unset; }

.comment .midcol { width: 31px; height: unset; border-radius: unset; margin-right: 8px;}

.arrow { width: 81%; margin-right: 15px; height: 24px; background-position-y: center; }

.message.was-comment .midcol { height: unset; }

[–]magnora7[S] 4 insightful - 2 fun4 insightful - 1 fun5 insightful - 2 fun -  (14 children)

Looks like you're mostly good, you've just got a couple alignment issues with .arrow .score

[–][deleted] 4 insightful - 1 fun4 insightful - 0 fun5 insightful - 1 fun -  (13 children)

Whatever update you just did completely broke our sidebar https://i.imgur.com/zMLGTbK.png

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

Okay I'm looking in to it right now

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

Thanks

edit: it seems to be fixed now.

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

Cool, good deal

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (9 children)

There, that should fix it. I just added .side{ position: unset; } to your css.

I had to make this change because comment widths are not correct below the sidebar in comment threads.

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

Appreciate it. While youre here this has been an issue for the past few days and only happens in the comments tab https://i.imgur.com/2WypHas.png

[–]magnora7[S] 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (6 children)

No problem. Here you go, I got the comment votes working. I changed and added these two things to fix it:

.linklisting .midcol .up .score { padding-top: 30px!important; position: relative; }

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

The alignment still looks to be off for me https://i.imgur.com/IZXJJED.png

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

There, that's as close as I can get it. Let me know if you guys need any more help

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

Much better! Much appreciated

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

You're welcome!

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (1 child)

If you want to adjust it, it's

.linklisting .midcol .up .score {

margin-left: -10px;

}

That -10px number is good for the comments section but -8px is better for the front page, so I don't know, you can pick. Hope that helps

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

Awesome thanks again for your help

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

Thanks you had me worried

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

NOICE

[–]FormosaOolong 5 insightful - 1 fun5 insightful - 0 fun6 insightful - 1 fun -  (1 child)

Maybe it's just a matter of getting used to it, but the side-by-side configuration makes the fun button seem so dominant. The insightful button is both smaller and more delicate/less opaque, so I keep finding myself sort of searching for it.

Is it just me or does the insightful button need a tweak?

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

the side-by-side configuration makes the fun button seem so dominant.

I had the same feeling at first, I think it's just something we have to get used to. There's really no other way to arrange them that makes sense, as the score on comments is displayed with insightful on the left and funny on the right.

I think we could probably have a bolder insightful button. I think both the buttons could use a tweak tbh, but I haven't been able to find any better images than the ones we have, despite my best efforts

[–]mikipika 4 insightful - 1 fun4 insightful - 0 fun5 insightful - 1 fun -  (1 child)

Great idea and execution.

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

Thank you, happy to hear it

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

This is great! Thank you for being so responsive to the fixes, too--do you ever sleep?

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

haha yes I make sure to get my 8 hours every day. Glad you like it!

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

Thanks!

[–]macadoum 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (1 child)

I like the new side by side feature but this broke the view on mobile : thumbnails are not anymore side by side with the link title : https://i.imgur.com/49ZCBs0.jpg

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

It's supposed to do that, to give the text more area. If you turn your phone sideways it probably won't do that. It only does that when the text gets too squeezed by a narrow viewport. Try it out, it might work better for reading

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

Well done.

[–]m68k 2 insightful - 1 fun2 insightful - 0 fun3 insightful - 1 fun -  (1 child)

I like it. :)

[–]magnora7[S] 1 insightful - 1 fun1 insightful - 0 fun2 insightful - 1 fun -  (0 children)

Sweet :)

[–]noseburp 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (4 children)

Looks shit.

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

What would be better? Honestly open for suggestions if you have any

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

Leave it how it was but replace the fun with a down arrow.

[–]magnora7[S] 3 insightful - 1 fun3 insightful - 0 fun4 insightful - 1 fun -  (1 child)

So you just want the old way. We might be making another website soon that has the old up and down vote arrows for people who are diehard fans of that system, we've been considering it

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

That would be cool.

[–]CelFon 1 insightful - 2 fun1 insightful - 1 fun2 insightful - 2 fun -  (0 children)

Internet diversity :-)