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.

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

SVG / PNG icons #158

Open
niryariv opened this issue Dec 9, 2020 · 9 comments
Open

SVG / PNG icons #158

niryariv opened this issue Dec 9, 2020 · 9 comments

Comments

@niryariv
Copy link

niryariv commented Dec 9, 2020

The new design requires group icons to have a different color in the homepage and internal pages.

Possible solutions:

  1. Find some color that'll work with both (likely require changing the homepage design)

  2. Have two sets of PNG icons, one for each color

  3. Use SVG icons so we change color via the CSS, eg a class for each case

Seems like 3 is the best option as it will offer us more versatility and will be easier to use when site maintainers add new icons. @OriHoch please take a look and see how much work is needed to implement.

(GH doesn't allow attaching SVG to an issue. For testing you can get svg/png files of our Religion icon here)

@OriHoch
Copy link
Contributor

OriHoch commented Dec 9, 2020

  1. this is how the SVG icon looks on group pages: 1 2 - is this OK?
  2. how should we handle the possibility that a site admin will set a PNG image for a group?

@OriHoch OriHoch assigned niryariv and unassigned OriHoch Dec 9, 2020
@niryariv
Copy link
Author

niryariv commented Dec 9, 2020

  1. looks fine to me though I'd prefer the previous color

  2. We'll tell them to use an SVG file

@OriHoch
Copy link
Contributor

OriHoch commented Dec 9, 2020

ok, please provide all the group image SVGs

@OriHoch OriHoch removed their assignment Dec 9, 2020
@OriHoch
Copy link
Contributor

OriHoch commented Dec 9, 2020

this is more complex then I thought, let's discuss next meeting if it's worth to invest the time for this

@niryariv niryariv assigned OriHoch and unassigned niryariv Jan 10, 2021
@niryariv
Copy link
Author

We keep getting negative feedback on the icon colors. As we discussed, the new design has a light blue background on the homepage and a white bg on internal pages. This makes it very hard to find an icon color that will work on both.

We discussed changing the color programmatically via CSS according to the context. Turns out this doesn't work when the SVG is an external file.

Since this keeps coming up I looked into it again, seems like there's a hack that might work for us. Can you take a look?

@OriHoch
Copy link
Contributor

OriHoch commented Jan 11, 2021

I couldn't get it to work, the example in the link you sent doesn't work for me. It seems that this feature is partially supported in most browsers, and also depends on how the SVG file is structured.

@OriHoch OriHoch assigned niryariv and unassigned OriHoch Jan 11, 2021
@niryariv
Copy link
Author

Could it be a CORS issue? It seems CORS applies to SVG, and when I try it locally I get a CORS error
Screen Shot 2021-01-11 at 10 21 34

@niryariv niryariv assigned OriHoch and unassigned niryariv Jan 11, 2021
@niryariv
Copy link
Author

Moving to TODO for now.

@niryariv
Copy link
Author

@OriHoch OriHoch removed their assignment Oct 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants