search

devsoc-unsw / freerooms

A web application designed to aid UNSW students in finding vacant rooms.
https://freerooms.devsoc.app/
Other
19 stars 1 forks source link

498 circular display rating #525

Closed sobariu closed 1 month ago

sobariu commented 3 months ago

Inside BookingCalendar.tsx, I added a new component called CircularRating which creates the circular display of the overall rating of each category for that particular room. I added mock values for the ratings for now until backend is handled.

image

JessicaF commented 2 months ago

Thanks for making a start on this! Do you think it's possible to have the circle reflect the rating? So if it's 5/5 then it's a full circle but 2.5/5 then it's a half circle (should be the left half showing - start circle anticlockwise from the 12 position)

Also I think the black line may be a bit too thick - appears a bit too "strongly" compared to the rest of the page?

Would be good to have the rating number larger within the circles as well (larger label text too would be good for: "Cleanliness", "Quietness", etc)!

sobariu commented 2 months ago

image

I've updated CircularRating so that the border is reflective of the the rating, as well as changed the color of the border to match in theme with the rest of the application. I've also increased the size of the text.

sobariu commented 1 month ago

I created a new folder Rooms, which contains 2 new component files CircularRating.tsx and RoomRating.tsx. I moved the CircularRating component into CircularRating.tsx and called it inside RoomRating.tsx that has the box component from before. I also made the category font unbolded and aligned the row to the left :))

image