dotkom/gradestats-app

gradestats-app's Issues

Increase text-heading margins slightly

Is your feature request related to a problem? Please describe.
Most of the text is just a little too close to feel natural.

Describe the solution you'd like
Sectioning off different blocks of text is easier when there's a little more space between them.

Describe alternatives you've considered
I have a few suggestions. Keep in mind that I do not know the exact measurements of the different variables used, so I'm going with ems.

• Paragraph to heading below the chart should be 2em (is var(--spacing-4))
• Grid gap in info-box should be 2em (is var(--spacing-4)). The gaps in the internal text inside each div is fine, I think.
• The font size on each item (e.g Norsk) is a little too close in size to the heading above. Should be 1.25em (is var(--font-size-lg)).

Additional context
The info box should look like this (using the CSS from #71):

Make footer more fancy

Wanted to do some random lines generated with a paint worklet

Margin is missing between "Om oss" and "Logg inn" in Safari.

Margin is missing between "Om oss" and "Logg inn" in Safari.

Add an english language option

We already have most data in English, maybe it would be nice to have the page in English as well

Make site font fancy

Is your feature request related to a problem? Please describe.
This isn't exactly the most important issue, but I think the site could look a little fancier with some different fonts. Make it 🌟pop🌟. In the titles, especially. The general text looks fine, though, but I went ahead and found an alternative anyway.

Describe the solution you'd like
I think a serif font in the titles could look better, with a sans-serif in the text. Google Fonts has a bunch of different alternatives that can be loaded directly into the browser, so you can try a few different ones.

Describe alternatives you've considered
I tried a few, without overdoing it completely. Playfair Display is a generally lovely font for titles (in graphic design, for instance), but I was unsure how it would look in a browser. I think it looks fairly good compared to some others I tried, but it's not perfect (numbers should be equal size to letters for subject codes imo). I used Railway for the general text, which is pretty crisp and nice. I'm sure you can find better though, I didn't look to hard. Also, legibility is always prioritised!

Also, I wouldn't complain if you used the OWF font scheme! That one looks good :)

Additional context
Example (using the CSS from #71):

Improve fallback page

Courses have a fallback page which is just 'Loading...' without any design.

Could load a skeleton of the course page as the fallback?

Use segment design approach

Is your feature request related to a problem? Please describe.
The blue/gray background is a nice color choice, but it's used as a background on every component. This means that the design is very "border-and-margin" oriented, so the user relies on that for section separation. It can work in some instances, but it's often a little disorienting.

Describe the solution you'd like
Segmenting main components with a simple, contrasting color and border on the main components can help a lot!

Describe alternatives you've considered
I did some very rudimentary CSS changes in my browser, and ended up with a solution like in the image below. Keep in mind that I did little to no color consideration before adding it, so choose what you like best! I recommend something that isn't too contrasting either, as it may be a little clashing or busy. The CSS I used is border: 1px solid #666666; background: #111621; padding: 1em; . Also note that I changed the right-hand grid to match the height of charts with facts!

Additional context

Nice job on everything, it looks super smooth 🥰

Autofocus on input-field when loading the page.

Graph images when linking to a course (page metadata)

Dynamically generate an image of a graph with grades for the last few years which will de displayed when linking to a course.

This can be done by generating an SVG with the graph lib and convert it to a PNG in an API route I think

Allow users to create tags for courses

Tags are a nice way for people to add to out pages, it makes it a lot easier to search for courses.
An example is that the query 'algdat' only returns the course with that nickname because students added that tag.

On the other end of the spectrum we can no longer allow people to add just about any tag without any oversight, because people have used it to post hurtful comments.

Ideas:

• Allow FEIDE login so that users could be responsible for their own tags.
• Have some form of manual filter, where an admin accepts the tags that are added.

Easily select and see available semesters

Scrolling down on a touch screen when holding on a chart doesn't work

When on a touch screen you can't scroll when starting the swipe motion on a chart component

Allow reports

We have a report feature that does not work at all

Make it more clear which semester is selected

Perhaps a header on the graph, or a more visible color fill on the button, or both, or something else.

Improve pagination

Search result pagination is kinda bad

Infinite scrolling?
Load more button?
Just better page buttons and less reloading after clicking a new page?

Switch to React 17 new JSX transform

Admins should be able to manage tags

Favorite subjects

Some users want the ability to mark their favorite subjects so that they can be available without searching on subsequent visits.

Collate stats for last 5 years.

Nice to have feature.

Gray text on other gray background has too low contrast

Adding tags breaks with 500 server error if course already has a tag with that name

Replace entire style thingy

Because Bootstrap Bad

Filtering classes by department and other fields

Semester taught would be a good one. We could in time become a good search engine for finding classes you want to take in general, not just checking out a subject you're considering.

Make bar chart same height as the other charts

Is your feature request related to a problem? Please describe.
This may be a bug, but iunno. The bar chart doesn't have the same visual height as the other chart types.

Describe the solution you'd like
Make it heightier. That's not a word.

Describe alternatives you've considered
The lines themselves are what dictates perception of height of the component, so I guess the lines should be stretched to the same height as the others. I see that @aslakhol suggested in #72 that they should be removed, which is also a possible solution. If that is the case, the bars should be normalized so you always have one bar that uses the full height of the chart.

Alternatively, create lines on the left and right side of each bar, then stretch them to the top. It might be more visually consistent with the other charts.

Just for clarification, when I say visually consistent height I mean that the bottom line and top line should be in the same place for all charts, giving the perception that they are of the same size.

Additional context
Professional illustration (using the CSS from #71):

Queries to the back-end break with hashtags

Probably something wrong with url-encoding somewhere

example: https://grades.no/course?query=%231200siderpensum

Clearer numbers on how many got each grade.

Explain colors on Snitt graph

Display total students that took a course for a semester.

Provide FEIDE logo on login page

Should display the FEIDE logo, because logos are nice

Sorting classes by snitt

Replace passport and custom api with NextAuth

https://github.com/nextauthjs/next-auth

Site seems a bit "messy"

There are some comments that the site seems a bit messy, we could probably take a look at making information more accessible.

Theme toggle

There are some comments that the website is too bright, which I find strange because to my eyes, it's very dark. Luckily I'm a bright young lad and I know that we can display themes based on the theme of your browser.

If we have two different themes based on the browser, we should also have a manual toggle button.

Show name of other courses with the same tag when writing new tags

In the dialog for adding new tags we could dynamically list the courses with the same tag name while the user is writing

Making grades.no a feedback based class grading tool

One user suggests expanding grades to give the users the option to rate the course on some simple factors.

1-5 stars in things such as quality of lectures, amount of work, how much you learn could give us a really interesting tool to rate classes on things that aren't just the grades.

Semester order should go the other way

It is very unnatural to have a scrolling bar that can scroll towards the left imho.

Make everything Typescript

There are a few JS pages left, they should be converted to Typescript

Search result orderings

Base ordering on ranking from watson in some way

Better buttons for swapping between graphs

The small dots should probably be clickable at least

Allow searching from any page

The old pages allowed searching from any page, now it can only be done from the front page and the '/course' page

Years on the axis in the graphs

Remove vertical line up from the bars in the bar chart

They don't add anything but noise.

Axes do not line up with values

The values listed on the peaks of the stryk and snitt charts don't line up with the axes.

Admins should be able to manage users

Remove dotkom-build from github users

The percentages on the form make it look very messy.

I think we might not need the percentages when we get the axes lined up properly. We could have the percentages on a hover or a tap.