Closed hchiam closed 4 years ago
@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
to do:
border-top
on children elements (nah)em
or %
? (nah)@alan-mj-lin test it out - should be ready to merge now. added a commit to address previous comment:
@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
@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.
@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.
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.
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.
#announcements
element. |
characterYeah 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?
|
in a <span>
to make it a lighter colourWhen 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.
@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.
@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
^ 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.
@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.
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.
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.
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
you are officially my favourite front-end guy lol
@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
Turns out I got it to work with
display: grid
instead ofdisplay: flex
.