524-Change-background-of-temperature-card #572

Merged
c24elipe merged 10 commits from 524-Change-background-of-temperature-card into team_2_week_3 2026-04-27 11:11:58 +00:00
Collaborator

To test diffrent pictures you can change const bgimg = getImageBg(temp); temp to a specific calue in SMHITempratureView.js

To test diffrent pictures you can change `const bgimg = getImageBg(temp);` temp to a specific calue in SMHITempratureView.js
Added a picture(cant be used later for legal resons)
added a function to choose picture based on temp, might be changed to use SMHI's weather codes for better match.
added to card to be able to accept background aswell.
Card.js: add parameter className witch adds recived css to the curently used style.card.
getImageBg.js: decides witch css to use in SMHITemperatureView.
module.css: removed inline and put it in css file.
View.js : removed inline for the img

Left: remove other inline styles,
add remaining temp pictures,
Make it more dynamic then just hot,cold & mild
Might have to think about how to display the text nicely, depending on user settings it can be hard to see. having the text color hardcoded is an option but can make it feel strange when other views change but not this one
Changes:
-have addded 3 jpg pictures in src\assests that can be used now.
- getImageBg is just a function that chose the img to use
- SMHITempratureView have removed all onld inline and changed to css and it sends with the css backround-image to be used by card.js
- and added a css file for the view
- samll change in Card.js to accept additional css for background-image mostly
@ -3,3 +4,4 @@
import { useSMHIObservations } from './useSMHIObservations';
import { getImageBg } from './getImageBg';
// THIS IS A DEMO FILE
Collaborator

REMOVE!!!!

REMOVE!!!!
c24elipe left a comment
Collaborator

Looks good at a first glance. Will now pull down and try it out.

Looks good at a first glance. Will now pull down and try it out.
added hexcodes insted of "white",
and removed some old comments
Collaborator

Comment spacing in card.js
Remove 0rem from the other CSS file
Rename bgimg to bgImg

Remove unused import in frontend/src/features/smhi/getImageBg.js

(Review done in person)

Comment spacing in card.js Remove 0rem from the other CSS file Rename bgimg to bgImg Remove unused import in frontend/src/features/smhi/getImageBg.js (Review done in person)
c24elipe left a comment
Collaborator

See comment for what to change

See comment for what to change
In person review, and fixes of the code.
Author
Collaborator

Chages implimented from review, ready for re-review for merge

Chages implimented from review, ready for re-review for merge
Collaborator

Good enough. Some cleanup needs to be done. (In a future PR/issue)

Good enough. Some cleanup needs to be done. (In a future PR/issue)
c24elipe merged commit 3397ed6b66 into team_2_week_3 2026-04-27 11:11:58 +00:00
c24elipe deleted branch 524-Change-background-of-temperature-card 2026-04-27 11:12:00 +00:00
Author
Collaborator

As its merged i will close this and open new issues

As its merged i will close this and open new issues
Sign in to join this conversation.
No reviewers
No milestone
No project
No assignees
2 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!572
No description provided.