auto column 2 works with css grid and items wrapper

[hchiam]

Turns out I got it to work with display: grid instead of display: flex.

[alan-mj-lin]

@hchiam I don't like that the horizontal division line per announcement is not there anymore, and when it does become two columns, it looks really shifted to the right

[hchiam]

to do:

• [x] horizontal division line per announcement: where did it go? (done)
• [x] horizontal division line per announcement: consider using border-top on children elements (nah)
• [x] adjust left padding inside each child element so 2 columns doesn't appear right-shifted (done)
• [x] adjust announcement text so it doesn't get squashed in 2 columns: try to scale font size relative to parent size: em or % ? (nah)

[hchiam]

@alan-mj-lin test it out - should be ready to merge now. added a commit to address previous comment:

• horizontal dividers showing again
• multi-column display looks less shifted to the right

[alan-mj-lin]

@hchiam not that we will ever have three columns of announcements, but when that happens the text gets really squished.. I dunno if that can be helped. Also is it possible to make the first announcement have a horizontal divider at the top as well? because when the columns start to pile up, its weird seeing all the announcements have horizontal lines at the top except the first one

[hchiam]

@alan-mj-lin I added the top divider. I'll leave it up to you whether you want to make 3 columns of announcements scale better. Looks like it might involve announcementsScale checking whether you have >8 items, and/or changing the width of the #announcements.ui.container from 85vw to 100%.

I personally think we can ignore that case and you can merge this branch for now.

[alan-mj-lin]

@hchiam ok yeah i think it looks great right now. Great work man. Before I merge tho, I'm gonna test this one live, and the one we currently have to compare. And then see what adjustments we need to make before we merge this one.

[alan-mj-lin]

So I tested live, and there are alot of issues just due to the fact that currently we put english and chinese side by side. So everything is just really squished its just really not readable. We need to think of a better way. Also, the text itself needs to be at 30px at 100% scale for it to be presentable.

[hchiam]

So I tested live, and there are alot of issues just due to the fact that currently we put english and chinese side by side. So everything is just really squished its just really not readable. We need to think of a better way. Also, the text itself needs to be at 30px at 100% scale for it to be presentable.

Aw man. Maybe the icons can be smaller, and the width of one of the parents can be wider.

[hchiam]

• I figured out a way to scale it based on a ratio of viewport versus #announcements element.
• I put the English and Chinese in separate columns. @alan-mj-lin What do you think? Maybe I can get rid of the | character
• [EDIT: The new column thing for > 4 items doesn't work now. Looking again at the ppt example, it seems we'll never have more than 4 items anyways.]

[alan-mj-lin]

Yeah man this is looking great. Awesome work man. I’ll test it out live and let you know. Although I’m curious - what happens when all four have a large amount of announcements?

[hchiam]

• [x] wider width despite transform scale (especially if a line of text is long)
• [x] wrap the | in a <span> to make it a lighter colour
• [x] add screenshot of large amount of announcements in all 4 ("squished"?)
• [x] import convenient announcement filler to .side file
• [x] clean up announcement filler steps in .side file
• [x] commit update to .side file

[hchiam]

When all four have a large amount of announcements, it gets pretty squished. I've been trying out a few ideas to make it look better, like making the JS change the CSS grid and width depending on the height.

[hchiam]

@alan-mj-lin I created a separate branch to investigate widening the width of the items when things get more squished: auto-column-flex-wider-width

and

I think it's best to have a separate PR for this.

[alan-mj-lin]

@hchiam so I have two requests:

• take out the feature where it alerts you when the number of lines for English and Chinese don't match because they may not match
• find a way to center the whole thing - right now it seems to be top-aligned Otherwise, everything looks alot better than before

[hchiam]

• take out the feature where it alerts you when the number of lines for English and Chinese don't match because they may not match

^ That's already fixed in both "Sporeas-1.1.0" and "Sporeas-1.1.0-Tor".

• find a way to center the whole thing - right now it seems to be top-aligned Otherwise, everything looks alot better than before

Two options: 🤔 1) auto-column-flex: Stable and simple. Just resize to fit 1 column on screen. 2) auto-column-flex-wider-width: Sometimes works, sometimes doesn't. It tries to also change the width of the children, but it has to fight against the transform on its parent. I'll keep working on this "wider-width" branch and maybe replace/merge it into this PR.

[hchiam]

@alan-mj-lin I just made some final fixes by merging auto-column-flex-wider-width into the auto-column-flex branch. I'll have to leave this branch and PR for you to take over. Hopefully looks better on the real thing now.

Using real announcements (auto-filled by Selenium IDE):

And then when I tried adding 2 more:

I also tested with many items in each of the 4:

Still a little buggy, but if you hit "Show Announcements" again, it adjusts itself.

I'll have to leave this branch and PR for you to take over.

[alan-mj-lin]

Nice. I think it’s coming along. I tested live without the wider width changes it looks presentable. One last thing I want to do is to be able to add sub points, because some of those announcements are sub points to a main announcement.

[hchiam]

Sub points? Easy. Since we're not auto-formatting bullet points anymore, the user can just type in points however they want. I'll just remove the lintAnnouncement code from form.js

[alan-mj-lin]

you are officially my favourite front-end guy lol

[hchiam]

[alan-mj-lin]

@hchiam ok m=based on the screenshots I'm just going merge for now, and then live test on friday and let you know how it goes