Skip to content

[UI] Use cover art for the most recently played game #2750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

Conversation

redromnon
Copy link
Collaborator

@redromnon redromnon commented May 31, 2023

Although this is not part of the Figma design, I thought of using the cover art for the just recently played game. Kind of like how several game launchers do.

This PR introduces the justPlayed property for the Card interface that is set totrue for the first game under the Recently Played GamesList. If true, the GameCard' uses game's art_cover as the src.

The covert art box occupies two grids for correctly containing the art.

Screenshot from 2023-05-31 08-05-06


Use the following Checklist if you have changed something on the Backend or Frontend:

  • Tested the feature and it's working on a current and clean install.
  • Tested the main App features and they are still working on a current and clean install. (Login, Install, Play, Uninstall, Move games, etc.)
  • Created / Updated Tests (If necessary)
  • Created / Updated documentation (If necessary)

redromnon added 3 commits May 30, 2023 10:20
- Show cover art instead of box art for the first recently played game
@flavioislima flavioislima added pr:wip WIP, don't merge. pr:testing This PR is in testing, don't merge. labels May 31, 2023
@@ -106,6 +120,12 @@
padding: var(--space-xs-fixed);
}

.gameCard.justPlayed > .icons {
justify-content: space-between;
grid-template-columns: 0.15fr 0.15fr 0.15fr;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
grid-template-columns: 0.15fr 0.15fr 0.15fr;
grid-template-columns: 1fr 1fr 1fr;

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Screenshot from 2023-06-06 15-27-03

The suggested change will end up looking like this though. Do you prefer this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or we could discuss the ideal layout in Discord with the others' feedback.

- Use simple check for isJustPlayed
- Use grid-column span instead to occupy grids
@redromnon redromnon requested a review from arielj June 6, 2023 14:33
@flavioislima
Copy link
Member

I think it is too much space on the button.
For me, something like this is more consistent:
telegram-cloud-photo-size-1-4915798621455232963-y

But maybe @biliesilva can give more insights on that.

@redromnon
Copy link
Collaborator Author

redromnon commented Jun 13, 2023

For me, something like this is more consistent:

I had tried placing the buttons in that alignment too. Yes, it looks much better.

@redromnon redromnon added pr:ready-for-review Feature-complete, ready for the grind! :P and removed pr:wip WIP, don't merge. pr:testing This PR is in testing, don't merge. labels Jun 23, 2023
@redromnon
Copy link
Collaborator Author

I think it is too much space on the button. For me, something like this is more consistent: telegram-cloud-photo-size-1-4915798621455232963-y

But maybe @biliesilva can give more insights on that.

I've made the logo alignment look like the above screenshot.

@flavioislima
Copy link
Member

@redromnon can you make a version of it where you replace the play icons with a button with the text PLAY on it? Since we have more space now.

@redromnon
Copy link
Collaborator Author

Just replace the green play button with text while keeping the settings and update icons?

- Change the icons alignment by placing the update icon towards the left-end
@redromnon
Copy link
Collaborator Author

redromnon commented Jul 3, 2023

Here's how the new changes look:
Screenshot from 2023-07-03 20-03-23

Also decided to move the update icon towards the opposite end. I feel it makes it look the alignment look better.

@redromnon redromnon requested a review from flavioislima July 3, 2023 14:26
Copy link
Member

@flavioislima flavioislima left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍🏽

@flavioislima flavioislima merged commit c29e894 into Heroic-Games-Launcher:main Jul 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
pr:ready-for-review Feature-complete, ready for the grind! :P
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants