Actually Better Canvas (ABC)

NOTE: some css bugs may be present, I don’t have time to test this on many machines
This was a CSS battle, but I managed to make this course compatible and look nice.
The todolist is broken here and there is a slight css bug, but I am out of energy and flavortown is ending soon :(
This will be my final devlog and ship here.
I enjoyed this program so much and I will come back in stardance.
during the downtime I will set up the chrome web store page because sadly I don’t have the time for it to be approved.
plz upvote so I can get factorio space age and enjoy reading this long journey to make education free and open source!

I think I cooked on the sidebar. for now it only shows on the dashboard but I really like how it looks compared to the old one.
Now I can also work on other things like widgets and shortcuts

I wish I could have recorded the 1 hour I spent learning figma plz vote higher so I can get that back.
I am no graphic designer, but I am kind of rushing release.
I need more time, so I started the sidebar. I am deleting the old sidebar in favor of my own when it’s toggled on.
I made a layout before I realized this only works on the dashboard for some reason, so I tried to fix that and failed.
there are so many edge cases so I will leave this as a future feature

I made the hide recent feedback work.
while I was overriding some of the old UI settings, I found out most of them never did something.
The UI breaks every other change.
I integrated the old 24h format and added the separate scrollbar.
for now I am scrapping scheduled reminders because I no longer think that is a good feature and it’s really hard to add and I’m also postponing assignment preview because that is also a pain (as I learned from my module sharer).
I will now make logos and finalize for web store

I made everything theme compatible and learned how bad the prebuilt themes are so I will redo them.
I also had to redo the way the darkmode css is applied because the person who made this decide it would be a great idea to hard code 20kb of css into 1 line.
I legit don’t know how to deal with that since auto format failed so I had gemini make me a script.
After that whole thing I added the “see more” to not show far future assignments and made the popup compatible with it reactivly.
Now to make the popup UI for it’s settings and remove some old redundencies

After digging through the API and getting the CSS to work, I made a “mark as complete/incomplete” button that also refreshes the page. Now I only have to make this theme compatible and maybe add some more animations

here is also a demo of the announcement badge from last devlog

My English teacher just put out a new announcement which was a great time to make and test the announcement badge. I also added that transition to make the unselected ones transparent

I finally added filters.
I even made an indicator that changes depending on the category.
I am so close to finishing this part, but I still need to fix the headers for the other categories, marking as complete/not, and some theme compatibility.

making the labels was so hard because I challenged myself to make it in an efficient way. I did if statements at first, then a really complicated key label system which caused issues with the label names, then realized I can just loop through an array to pick the label and since the element is passed back from a function I don’t need to worry about ID

I rewrote parts of this to make filters work but it’s proving to be hard due to the amount of variables and type.
Idk who decided to put announcements in the tasks API.
It is so hard to differentiate between submitted, marked as complete, and more

• some more styling like truncation of assignment names that are too long

CSS is hard but I am getting there. I am trying to clone the original extension (seen on the right) and I am getting there.

I had a better todo list feature planned but recently the suckers at betterCampus privated the source code for their tasks for canvas and made an update to alert others they are absorbing it into their terrible app so now I am prioritizing this feature.
Ok I thought I would finish this a lot faster, but this is harder than I thought.
I started working on a better todo list and got the assignments to show up but the styling is pretty bad and card colors are not working.
whoever wrote this decided it was a good idea to make custom_cards_1, custom_cards_2, custom_cards_3, store colors at custom_cards_3, and none of those work

I started my UI revamp by remaking the cards tab to look a lot better and not take as much space by having it be a submenu thing. It was kind of annoying to code with vanilla js but I managed to do it anyway.
unfortunately I didn’t finish the revamp because I was very busy these past 2 days and the extension deadline thing is feb 15

I made the custom backgrounds theme compatible, fixed some css issues, and added blur to the dashboard bar.
I also reorganized the feature todo list.
I really like how this looks now

so I added custom backgrounds, but it works too well. I like how this looks but too many things are transparent. the todolist will be remade but the big dashboard rectangle and transparent cards will be annoying to correct

I learned how to add stuff to the themes.
I could have had a sub array or whatever but nobody really reads these and it doesn’t save on data and loops.
importing kind of just worked itself out I didn’t touch that

I added more styles like, width and height.
I also tried to add a proper toggle for on-off styles but the css was weird about it so I downgraded to a checkbox.
I also fixed some of the styles to at least keep the style looking somewhat vanilla.
Next I plan to make this theme compatible so people can export extra styled themes

Woops forgot to devlog.
I thought it was a good idea to make the reminders show up at 1 time but that didn’t work so I will come back to that.
I then spied on the actual bettercanvas and made a list of the features they have (including payed features).
My first feature I added from that list is card settings (almost done).
you can change card border radius, spacing, and image size.
I still want to add card width, height, and rotation

I added GPA presets and made reminders by scheduled time (untested).
most of the code is pretty well made but the reminder code is messy