Two-column layout

[Olle Härstedt]

Dunno if it's a good idea, but it's one idea: to split the pros and cons arguments in two columns next to each other for better overview.

[Sergey]

I like this idea @olleharstedt, I've tried to it and it looked great, the only problem that I have with CSS is that on the mobile view, "yes" arguments are at the top and "no" arguments at the bottom.

I was looking for way to make it work so that on mobile we have them mixed up, but even Chat GPT wasn't been able to help. I'll think how you can do it, this was the original idea of @brendt to make it into 2 colums

[Olle Härstedt]

You're not using a CSS framework with columns?

[Sergey]

You're not using a CSS framework with columns?

I do, there is tailwindcss already in the project. If we want to split arguments into 2 colums, we'll need 2 grid columns, one for 'yes' votes and one for 'no' votes. On mobile, when we change 2 columns to 1, 'yes' votes will be stuck above 'no' votes

[Sergey]

It looks nice on desktop:

[Sergiu Daniel Vidican]

@SerhiiCho I think it's possible with grid and it should be quite easy, not really sure how to do this with tailwind though.
Basically with grid-column-start, you can control on which column certain arguments will be placed then on mobile you just remove the second column and let them render normally as they are in html.

[Sergey]

@vsergiu93 Yeah, I've tried this too. It leaves lots of empty space like this:

There has to be a way to get rid of empty space

[Sergey]

Here is another example of how it leaves a space:

[Sergey]

I have one idea, I'll make it work. Since grid splits everything in rows, there is no way to get rid of that empty space, so I'll split arguments into 2 collections, 'yes' and 'no', and put one 'yes' argument and one 'no' argument into a single grid row

[Sergiu Daniel Vidican]

@SerhiiCho You are right, sorry, I guess for this to work with css grid we would need this Masonry layout :).

[Sergey]

we would need this Masonry layout :).

Never heard of it, I'll check it out. Thanks 🙏

[Sergey]

I can do something like this:

I've tried to remove the vertical space, but none of my methods worked.

This is the blade view where I'm working in

[Olle Härstedt]

Nice! 😍

[Brent Roose]

Does this approach use grouping argument per vote type? I wonder how that would impact sorting on mobile?

[Sergey]

I wonder how that would impact sorting on mobile?

Yeah, it looks like this:

$yesArguments = $this->rfc
    ->arguments
    ->where('vote_type', VoteType::YES)
    ->where('user_id', '!=', $this->user?->id)
    ->values();

$noArguments = $this->rfc
    ->arguments
    ->where('vote_type', VoteType::NO)
    ->where('user_id', '!=', $this->user?->id)
    ->values();

On mobile, it will be like this:

v yes vote
x no vote
v yes vote
x no vote
v yes vote
... etc

I like the separation into 2 columns, but I don't know how I feel about vertical spaces. I've added dashed borders (like chains) to make it look not that bad, but still, I'm not sure.

[Sergey]

I wonder how that would impact sorting on mobile?

There won't be any problems with sorting, since we:

1. Search for arguments
2. Fetch them from DB
3. Split them into 2 groups
4. Display them

[Brent Roose]

Let's think out of the box for a moment. The reason we can't go with a simply 2-grid layout is because of mobile styling, right? If all yes arguments are in the left column, and all no arguments in the right, then all yes arguments will end on top as soon as we switch to a one column layout on mobile.

What if… we drop mobile support 😎

No, just kidding. What if we work with some kind of tab view on mobile, where you can switch between yes or no arguments, essentially keeping the 2 column layout, but simply having one invisible.

I know it's not ideal, but I don't think the gaps are ideal either.

Another approach: if we decide to keep the gaps, then I think it'd be better to fully embrace it, and not put a yes/no argument on the same line. I mean that we can add mr-[50%] to the yes cards, and ml-[50%] to the no cards (or 45% or 60%, whatever looks best). I actually think this might be a good approach now that I'm writing it. I do like the dotted line that fills the whitespace, would be cool if we could combine the two.

Anyway, I'm just brain-dumping, we can take a different approach if people don't like these ideas.

[Sergey]

What if… we drop mobile support 😎

Great idea 😄

I mean that we can add mr-[50%] to the yes cards, and ml-[50%] to the no cards (or 45% or 60%, whatever looks best)

You mean make it like a chess board?

| yes |
       | no |
| yes |
       | no |
| yes |   
       | no |

[Brent Roose]

You mean make it like a chess board?

Exactly, and fill the gaps with the dotted line you've proposed — if possible

[Sergey]

You think it looks better now?

[Brent Roose]

I'm not sure if it's better or not 🫥. What do you think? Maybe we could experiment with the block overlapping a bit?

====== 
   YES
======
   ======
      NO
   ======

[Sergey]

[Sergey]

Also a dotted version:

[Sergey]

I don't know, I'll think about something simpler

[Brent Roose]

I definitely think the dotted lines add value 💯

Personally, I like this last edition the most, but feel free to iterate on it some more :)

[Vytautas Smilingis]

Would it make sense in this case for NO arguments to put vote button on the right? It might interfere with the tripple dot menu, but it's just an idea to play around with. On mobile it would almost feel like swiping left/right.

[Brent Roose]

I actually did that in the very first draft. I'm open for it, but I'm no designer. I feel @SerhiiCho has a say in it as well, since he's been doing most of the frontend stuff.

[Sergey]

I have tried it, it looks odd to me when ellipsis on the top-left corner

[Sergey]

I'll try it again

[Sergey]

I'm unable to do that, the Livewire is getting in the way all the time, its performance is awful. If we were using something like Vue I would have no problems. With Livewire, I'm getting the memory issue when trying to split arguments into 2 separate collections.