Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Icons for individual distros #1415

Closed
lkocman opened this issue Jun 29, 2024 · 9 comments · Fixed by #1550
Closed

Icons for individual distros #1415

lkocman opened this issue Jun 29, 2024 · 9 comments · Fixed by #1550
Assignees
@lkocman

Comments

@lkocman
Copy link
Contributor

lkocman commented Jun 29, 2024

it would be nice to have product/distribution icons in the product selection screen.
I'd like to work on this one.
@lkocman lkocman self-assigned this Jun 29, 2024
@imobachgs
Copy link
Contributor

Hi Lubos,

Yes, it would be nice to have the logos on the selection screen, and it is great that you want to work on that. In order to help you to move this forward, do you have any plan for the implementation?

Thanks!

@kobliha

This comment was marked as off-topic.

Sign in to view
@kobliha

This comment was marked as off-topic.

Sign in to view
@dgdavid

This comment was marked as off-topic.

Sign in to view
@dgdavid
Copy link
Contributor

dgdavid commented Jul 3, 2024

Hi Lubos,

Yes, it would be nice to have the logos on the selection screen,

In fact, looks like it was in our minds from long ago, see #200

and it is great that you want to work on that. In order to help you to move this forward, do you have any plan for the implementation?

Sure, we can help with that. Thanks in advance, @lkocman

@dgdavid dgdavid mentioned this issue Jul 3, 2024
Closed
@lkocman
Copy link
Contributor Author

lkocman commented Aug 21, 2024 •
edited
Loading

My early experiments

This example is using Brand element from patternfly
And would be useful if you'd have larger logos including the product text and e.g. Beta label too, which can look really nice. Benefit is that people do not try to click the icon and we can continue using radio buttons. This approach would require buch of scrolling in openqa at 1024x768 ...

image

The other one is simply with img element
Using left float, and vertical and horizontal aligh, heigh set to 100% and width to auto

I like it better, but we'd have to not use radio, and make the entire card clickable, as otherwise it will confuse users as they'll try to click the icon. I think it would be nice if the entire card would turn e.g. gray or similar on mouse over.
image

@lkocman
Copy link
Contributor Author

lkocman commented Aug 21, 2024

I'll supply some wider logos to show the potential on the first example, before fully eleminating that option.

@lkocman
Copy link
Contributor Author

lkocman commented Aug 21, 2024

It was quite painful to get this working but I'm quite happy with the result

image

lkocman added a commit to lkocman/agama that referenced this issue Aug 21, 2024
@lkocman
Decorated product selection without radio btn
77f979f 
* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon
@lkocman lkocman mentioned this issue Aug 21, 2024
Merged
lkocman added a commit to lkocman/agama that referenced this issue Aug 21, 2024
@lkocman
Decorated product selection without radio btn
0e2e9c1 
* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon
lkocman added a commit to lkocman/agama that referenced this issue Aug 21, 2024
@lkocman
Decorated product selection without radio btn
8256199 
* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon
lkocman added a commit to lkocman/agama that referenced this issue Aug 21, 2024
@lkocman
Decorated product selection without radio btn
1888f36 
* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon
lkocman added a commit to lkocman/agama that referenced this issue Aug 21, 2024
@lkocman
Decorated product selection without radio btn
d43bcc2 
* Resolves Issue agama-project#1415

* Entire card is clickable, selection of card
  is still marked by blue boarder

* Add icon to structures, pass it to dbus, etc
  (please do not mix product icon with pattern icon)
  fallback to default.svg in case that no icon is set

* Rework button layout to clickable layout

* We might need to use table or similar in case that
  description is longer than the

* Supply icon for all products including default icon
@dgdavid
Copy link
Contributor

dgdavid commented Aug 30, 2024

This approach would require buch of scrolling in openqa at 1024x768 ...

I have said this a couple of time in team meetings and reviews. We should embrace the scroll instead of fight against it. It's how the web works and we do not have control about neither, users screen size nor the zoom level users are using.

So, don't worry about it. The scroll could appear with another compact layout too because a bunch of reasons: the amount of products, the screen size, the window size, the zoom level, etc)

imobachgs added a commit that referenced this issue Sep 5, 2024
@imobachgs
feature(web): make the product selection more appealing and accessible (
fde927e 
#1550)

* Fixes #1415
* Supply icon for all products and copy them to _dist/assets/logos_ in
final web build.
* Add icon to structures, pass it to dbus, etc (please do not mix
product icon with pattern icon) fallback to default.svg in case that no
icon is set

|Before | After|
|-|-|
|![Screenshot of the previous product selection
page](https://github.com/user-attachments/assets/7f2903c5-cbda-471b-bda1-f2b6c3be1f56)|![Screenshot
of the new product selection
page](https://github.com/user-attachments/assets/a5204d21-640f-4777-8808-373ecb955937)|

---

For more details please read
#1550 (review)
(and maybe
#1550 (review))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@lkocman lkocman

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feature(web): make the product selection more appealing and accessible lkocman/agama
4 participants
@imobachgs @kobliha @lkocman @dgdavid