Andras/BoundlessFlowCampus2K
3
6
Fork 0
Code Issues 143 Pull requests 14 Projects Releases Packages Wiki Activity Actions 2

Temperature month and year button styling #895

Merged
a24julot merged 12 commits from #442-temp-month-and-year-styling into team_1_week_5 2026-05-13 07:45:47 +00:00
Conversation 8 Commits 12 Files changed 4 +183 -52
b24hugst commented 2026-05-11 13:21:01 +00:00
Collaborator
Copy link

  • Made changes to the styling of the buttons when changing date in TemperatureMonthView and TemperatureYearView.

  • Created a new .css file to make it more readable and avoid a lot of redundancy.

Issue: #442

image
image

- Made changes to the styling of the buttons when changing date in **TemperatureMonthView and TemperatureYearView**. - Created a new .css file to make it more readable and avoid a lot of redundancy. Issue: #442 ![image](/attachments/fc81dc02-cdd3-4300-a873-0b332bb2e914) ![image](/attachments/16313483-d340-4ef4-a27a-0e916a93bb70)
image.png
36 KiB
image.png
36 KiB 
Had a lot of redundant styling so I made a separate .css file
Style update for temperature month view
styling update for temperature year view
Implemented more into .css file which removed a lot of redundant code
b24hugst changed title from Temperature month and year styling to Temperature month and year button styling 2026-05-11 13:21:14 +00:00
a24julot commented 2026-05-12 07:39:37 +00:00
Collaborator
Copy link

Is it possible to make the buttons something like this?

Is it possible to make the buttons something like this?
image.png
17 KiB
image.png 
Made buttons larger and placed them at the edges instead of in the center
Switched to a better looking chevron style and rounded buttons.
b24hugst commented 2026-05-12 12:08:57 +00:00
Author
Collaborator
Copy link

Bigger and rounder buttons that are not placed at the sides instead of center. Also a better looking chevron symbol.
image

Bigger and rounder buttons that are not placed at the sides instead of center. Also a better looking chevron symbol. ![image](/attachments/50c82c48-ff29-4050-b58f-0347bb2e1577)
image.png
60 KiB
a24julot commented 2026-05-12 12:16:28 +00:00
Collaborator
Copy link

Good job, but I noticed that the buttons does not scale very well when the card is 1x1. Also, we think that maybe the border is to strong/sharp. Could it be changed to be a little "softer"?

Good job, but I noticed that the buttons does not scale very well when the card is 1x1. Also, we think that maybe the border is to strong/sharp. Could it be changed to be a little "softer"?
image.png
27 KiB
image.png
b24hugst commented 2026-05-12 12:21:06 +00:00
Author
Collaborator
Copy link

Oops forgot to zoom in and check the scaling. I'll fix it and also make the border softer.

Oops forgot to zoom in and check the scaling. I'll fix it and also make the border softer.
b24hugst commented 2026-05-12 13:08:52 +00:00
Author
Collaborator
Copy link

Was a bit tricky with the scaling but now it keeps the same structure at least and instead allows the user to scroll:

Although I now noticed that there's a scroll wheel even when there's nothing to scroll to, so I will fix that now.

image

Was a bit tricky with the scaling but now it keeps the same structure at least and instead allows the user to scroll: Although I now noticed that there's a scroll wheel even when there's nothing to scroll to, so I will fix that now. ![image](/attachments/14668790-251d-4019-84d0-6374dad299a3)
image.png
66 KiB
a24julot commented 2026-05-12 13:11:59 +00:00
Collaborator
Copy link

Good job, I will assign someone to review it, but visually it looks great!

Good job, I will assign someone to review it, but visually it looks great!
Removes the unnecessary scroll-wheels on cards
Updated this since I noticed the other views have one each
b24erika approved these changes 2026-05-13 07:41:17 +00:00
b24erika left a comment
Collaborator
Copy link

Review on #442.

Whats done:

Inspected all changed files, tested functionality using npm start.

Tested on Windows using Firefox.

  • App starts.
    • Change month and year for tempmonth/year works on regular desktop, uncertain if data fetch works since there is no data other then current year/month.
    • Changing year/month in "mobile mode" in Firefox takes multiple clicks before it registers the event, this has been an issue when closing views in "mobile mode" aswell but have been fixed.

Inspected following files:

TemperatureYearView.js, TemperatureYearView.module.css, TemperatureMonthView.js and TemperatureYearView.module.css.

  • All files:
    • Checked following things.
    • Indentation/code styling.
      • Indentation is ok.
    • CSS standard:
      • Files follows the CSS code standards properly.
    • Naming convention:
      • Is followed.
    • General code quality:
      • Quality is good.

What needs to be done:

Need to fix the issue that it takes multiple "clicks" before it swaps month/year in "mobile mode", this could be done after merge since the functionality works as intended, just a minor issue.

The arrows used in buttons as icon gives warning "This line has an ambiguous unicode character", this is perhaps nothing to worry about since it is just an icon and not a variable name.

Conclusion:

It is ready for merge since the functionality works but the multiple "click" in "mobile mode" should be fixed afterwards.

Perhaps look in to the warning with the button icon but what I found is that it should not be an issue as long it is not used as "code".

# Review on #442. ## Whats done: Inspected all changed files, tested functionality using npm start. ### Tested on Windows using Firefox. + App starts. + Change month and year for tempmonth/year works on regular desktop, uncertain if data fetch works since there is no data other then current year/month. + Changing year/month in "mobile mode" in Firefox takes multiple clicks before it registers the event, this has been an issue when closing views in "mobile mode" aswell but have been fixed. ### Inspected following files: TemperatureYearView.js, TemperatureYearView.module.css, TemperatureMonthView.js and TemperatureYearView.module.css. + All files: + Checked following things. + Indentation/code styling. + Indentation is ok. + CSS standard: + Files follows the CSS code standards properly. + Naming convention: + Is followed. + General code quality: + Quality is good. ## What needs to be done: Need to fix the issue that it takes multiple "clicks" before it swaps month/year in "mobile mode", this could be done after merge since the functionality works as intended, just a minor issue. The arrows used in buttons as icon gives warning "This line has an ambiguous unicode character", this is perhaps nothing to worry about since it is just an icon and not a variable name. ## Conclusion: It is ready for merge since the functionality works but the multiple "click" in "mobile mode" should be fixed afterwards. Perhaps look in to the warning with the button icon but what I found is that it should not be an issue as long it is not used as "code".
bild.png
5.3 KiB
bild.png
a24julot commented 2026-05-13 07:45:34 +00:00
Collaborator
Copy link

This will be merged since the weekly merge is around the corner, but an issue is made for mobile view: #938

This will be merged since the weekly merge is around the corner, but an issue is made for mobile view: https://git.webug.se/Andras/BoundlessFlowCampus2K/issues/938
a24julot merged commit b363608196 into team_1_week_5 2026-05-13 07:45:47 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
b24erika
Labels
Clear labels   
_CRITICAL_

Only use this label for critical tasks that are project-scope,and must be addressed ASAP.

  
API

   
app

   
backEnd

   
Blocked-waiting-for-further-changes

   
bug

Something is not working

  
bug-only-on-server-for-mobile-not-webpage

   
Bug-Report-After-Merge

   
cleanup

Issues to cleanup the codebase (restructure folders, remove deprecated or smelly code)

  
close

Issue to close

  
design

   
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
feature request

   
frontEnd

   
further-changes-needed

   
future-problem-not-fixint-this-period

   
help wanted

Need some help

  
invalid

Something is wrong

  
last-week-issue-to-fix

   
library

   
low-priority

   
needs input

Issue needs input from product owner or customer

  
needs review

issue is in need of review

  
not-implemented.

   
project documentation

   
question

More information is needed

  
research

   
reviewed

This Issue has been reviewed

  
Script

   
security

use this for security-related issues

  
SQL

  
style

   
Team 1

Team 1 is responsible for this issue

  
Team 2

Team 2 is responsible for this issue

  
team leaders

   
test-creation

   
testing

   
topLevel

Reserved for top-level, project-wide issues.

  
unassigned

   
Under-review

   
wontfix

This won't be fixed

No labels
_CRITICAL_
API
app
backEnd
Blocked-waiting-for-further-changes
bug
bug-only-on-server-for-mobile-not-webpage
Bug-Report-After-Merge
cleanup
close
design
duplicate
enhancement
feature request
frontEnd
further-changes-needed
future-problem-not-fixint-this-period
help wanted
invalid
last-week-issue-to-fix
library
low-priority
needs input
needs review
not-implemented.
project documentation
question
research
reviewed
Script
security
SQL
style
Team 1
Team 2
team leaders
test-creation
testing
topLevel
unassigned
Under-review
wontfix
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
Andras/BoundlessFlowCampus2K!895
No description provided.