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

Exported card image should be shifted 2-3 pixels left (html, css) #18

Closed
amitguptagwl opened this Issue Jun 12, 2018 · 22 comments

Comments

Projects
None yet
3 participants
@amitguptagwl
Member

amitguptagwl commented Jun 12, 2018

Generate cards > Download > check images

Generated images are transparent from left side and cut from right side.

@amitguptagwl amitguptagwl changed the title from Exported card image shold be shifted 2-3 pixels left (html, css) to Exported card image should be shifted 2-3 pixels left (html, css) Jul 23, 2018

@ashishpatelcs

This comment has been minimized.

Contributor

ashishpatelcs commented Sep 24, 2018

I'm interested. Can you please point me to source code? Thanks

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Sep 25, 2018

Sorry! I didn't get you. This project itself is the source code. Do you mean the code which is responsible for this functionality? review.tag.html

@ashishpatelcs

This comment has been minimized.

Contributor

ashishpatelcs commented Sep 25, 2018

I am not able to find any place where I can go to Generate cards > Download > check images

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Sep 26, 2018

Check the video on homepage to see how to generate cards.

@ashishpatelcs

This comment has been minimized.

Contributor

ashishpatelcs commented Sep 26, 2018

I checked the video. But I think there is an issue here. check the screenshot.
Design

I also see no console errors. It seems the size is not getting converted properly somewhere. Not sure.

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Sep 26, 2018

I believe you're accessing it on Safari. I didn't fix that last time as I'm not having mac.

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 4, 2018

Hello, can I try to fix this issue?

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 4, 2018

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 14, 2018

@asenchekov any update?

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 14, 2018

@amitguptagwl haven't looked for it sorry. Just cloned it and trying to see what's going on.
I'll get back to you.

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 14, 2018

Sure thanks

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 14, 2018

@amitguptagwl Just looked at it. The symbols you move around to place them yourself, you can put out of bounds.
Whenever you do that they are saved in the image outside of the cards bounds. But still getting cut left and bottom. I think padding is a problem there.

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 14, 2018

@amitguptagwl Made the container a grid and used grid-gap for space between. Saves perfectly the cards just need to make the grid to wrap because goes out of the container.

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 14, 2018

👍 can you please share the image of the generated card in your PR or here? once you are done

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 14, 2018

@amitguptagwl I think I've done it. Changed it to a grid here is some images.
card_7
card_1
card_2
card_3
card_4
card_5
card_6

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 14, 2018

@amitguptagwl Only when cards are bigger like the size I've posted in my last post. In order for them to wrap they overlap a bit. I don't know If I can use the value from the card size for that wrap factor.
untitled

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 15, 2018

@asenchekov I believe you must be setting this style in review.tag.html. You can set it dynamically as well on mount event using jquery.

However, as we're using bootstrap, can't we use bootstrap defined classes to achieve this?

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 15, 2018

@amitguptagwl I'll try with bootstrap next time. I can see that it's supported and should be much easier.

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 16, 2018

Yes, otherwise we'll be adding duplicate CSS which will make the development a bit difficult.

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 16, 2018

@amitguptagwl
I've checked bootstrap but for the grid, they use flex-box which is making the same trouble.
I've added jQuery in the same file with this.
untitled
Is it Okay like that?
I just had to remove the padding and margin from the .cardframe rule.
Should I do it with jQuery again?

@amitguptagwl

This comment has been minimized.

Member

amitguptagwl commented Oct 16, 2018

It looks fine to me. I hope the end result on the page and exported card images is as per our expectations.

@asenchekov

This comment has been minimized.

Contributor

asenchekov commented Oct 16, 2018

@amitguptagwl Yes I've committed the last edit this is some cards
card_7
card_1
card_2
card_3
card_4
card_5
card_6

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment