FFCS Redesign

[therealsujitk]

This pull request contains the FFCS redesign.

---

• The Filter By Slots option has to be fixed.
• For some reason, the window doesn't scroll to the top before taking a screenshot. Screenshots may get cut because of this. (The scroll to the top looks like a hack, an alternative should be implemented).
• Dark theme is incomplete. (Will work on this once the current UI for light mode has been frozen). A new PR will be created for this.

Note: Unused resources might be found in this PR, I'm planning to clean that up in the next PR.

[vatz88]

Thanks @therealsujitk ! Looks great!

I'll review the code but can we make few changes:

1. Let hide the theme toggle button for now, we can enable it when we have dark mode added (may be in a separate PR)

2. I feel these two texts in pink is too bright. Can give it a more subtle? This isn't the main text on the site, it's just like a tip
   
   

3. This looks very cluttered, if you compare it with what we have currently. Need to improve on it, especially spacing
   

[therealsujitk]

Let hide the theme toggle button for now, we can enable it when we have dark mode added (may be in a separate PR)

Alright! Will do.

I feel these two texts in pink is too bright. Can give it a more subtle? This isn't the main text on the site, it's just like a tip

I thought it matched with the sites theme. I'll try some lighter colours and see.

This looks very cluttered, if you compare it with what we have currently. Need to improve on it, especially spacing

Alright, I'll make adjustments.

[vatz88]

I general, we should minimize writing custom CSS and let defaults of bootstrap be used

[therealsujitk]

I've used bootstrap as much as I could, the theme toggle (now hidden) wasn't a feature in bootstrap, so that was a custom addition. Apart from that I've only used CSS to make margin, padding adjustments or to override the default settings.

There are blockquotes in bootstrap, but they are just text with a bigger font size, and I didn't think that matched with the rest of the site.

[therealsujitk]

@vatz88 are the quick selection buttons alright now?

[therealsujitk]

@vatz88 how does lavender (#ddbbff) look?

---

We'll have to change the pink used in the slot tiles as well, doesn't go good with lavender. Also I think it'll look good if we give a black border to the course table.

[vatz88]

how does lavender (#ddbbff) look?

I'd say may be keep it same as the current one. It doesn't need any bright color. Maybe just white bg and grey text is good.

Also I think it'll look good if we give a black border to the course table

Yes! we need it as in the current design for it to look more tidy

[vatz88]

are the quick selection buttons alright now?

Yes, better with spacing now

[therealsujitk]

I'd say may be keep it same as the current one. It doesn't need any bright color. Maybe just white bg and grey text is good.

Oh, didn't think of that. Let me see.

[therealsujitk]

@vatz88 I made the background light grey to make it stand out a little, fixed the scroll to top issue that I mentioned in the first post & added a black border to the course table.

[vatz88]

Let's make timetable take the full width as it was with container-fluid.
Margin/padding on the sides is space wasted especially on smaller devices

[vatz88]

Can we give max-width to these course buttons? So that the one in the bottom doesn't feel odd

[therealsujitk]

Let's make timetable take the full width as it was with container-fluid.

I actually tried that at first, but it looked very odd, the only element with no margin. It felt like it was a bug. I was able to use it comfortably on my phone so I thought it should work, plus the small margin doesn't make much of a difference. Have you tried using it on a phone yet? If you feel that it should still be changed then I'll do it, but I feel the current one is best.

Can we give max-width to these course buttons? So that the one in the bottom doesn't feel odd

If we give it a max-width, that would cause empty gaps because flex-grow makes sure that everything in the row has the same width. It is similar to the current design that is implemented.

I do agree with you tho, this does look better (except for the extra spacing). I'll work on this and see if I can make it so the last row alone doesn't grow fully.

[therealsujitk]

@vatz88, I got what you asked for using grid instead of flex.

[therealsujitk]

@vatz88 before merging this PR, can you archive the current site, maybe at https://ffcsonthego-archive-2.vatz88.in/ or something similar. That way it can be added to the README.md.

[vatz88]

Hey @therealsujitk thanks for all the efforts! I'll try it out myself and go through the code (probably over weekend) and make any changes needed before merging.

I'll have to check how well is grid supported in browsers other than chrome, especially safari (for iphone users)

One more change needed is we need to add some border to the course search panel as in the current design. It's all open in white and not distinctive.

[therealsujitk]

I'll have to check how well is grid supported in browsers other than chrome, especially safari (for iphone users)

Alright! I'll start working on the clean up PR on top of this branch.

Edit: I'll work on the clean up PR after this one is merged (on top of master), otherwise git will include these changes in that PR and it'll be a lot harder to review.

One more change needed is we need to add some border to the course search panel as in the current design. It's all open in white and not distinctive.

Not sure if a border will look good, but I'll try and see if something looks good. I had mentioned before that bootstrap removed their panel, so that isn't an option anymore.

I've divided the site into 3 main sections #1 - Course Panel, #2 - Timetable (#2 includes the course list) & #3 - Comments (#3 will most likely never have to be changed) all separated by a hr tag. I did this so that the files can be separated into these 3 main sections as well (Ex: course-panel.js, timetable.js) and contributors will know exactly where to look to resolve an issue (I'll also add what files are connected to what section in the CONTRIBUTING.md).

[vatz88]

before merging this PR, can you archive the current site

We don't need that. I'll make a new release on this repo. I have the old site deployed on different domain because it used facebook comments and I didn't want the old comments/ discussions to be lost

[therealsujitk]

Oh ok, understood!

I'll make a new release on this repo.

After merging, can you wait a bit for the release. There are some small things I'd like to add in the clean up PR such as,

• Instead of changing the version in the index.html file, I thought it'll be a lot cleaner to add a release key in the package.json file and read that value using JS. That way you'd only need to change the version name in the package.json file for every release.
• Some code optimising. Ex: The time complexity for the slot filter is currently O(n²) as it iterates through all the buttons and all the the elements in the slot array. I believe I can bring this down to O(n).

Apart from this, the current timetable is not up-to-date (#169). So that will require another PR.

---

I'll start working on the clean up PR as soon as this one is merged (on top of master). Otherwise these changes will be included in the clean up PR and it'll be a lot harder to review.

[vatz88]

Deployments are continuous with netlify once the pr is merged to master. The release I'll make will be here https://github.com/vatz88/FFCSonTheGo/releases

Probably a major release with v11 after this PR is merged. Future minor fixes/changes can go as like v11.1 and so on