search

gitcoinco / web

Grow Open Source
https://gitcoin.co
Other
1.78k stars 773 forks source link

Extra height for header in 'New funded issues' email on mobile #5271

Closed sebastiantf closed 5 years ago

sebastiantf commented 5 years ago

Describe the bug The email template for 'New Funded Issues' email shows an extra margin on header in mobile displays.

In template.html, the #header div has a css with height:300px which causes the header to have an extra height on mobile displays. This looks a little awkward. But it looks good on larger displays.

This is seen both on the Gmail app and in browser.

But the previous emails looked good. This was found with the new design with the purple color.

To Reproduce Receive e-mail, read e-mail

Expected behavior Good layout for the email

Screenshots On Gmail App:

photo4929495259277273136

On Gmail in browser:

FireShot Capture 001 - ⚡️ 4 New Open Funded Issues worth $64 89 matching your profile - seba_ - mail google com

Desktop (please complete the following information):

Smartphone (please complete the following information):

owocki commented 5 years ago

thanks; what browser size is that? and what portion of it (in px) is the gitcoin email?

owocki commented 5 years ago

do u have any more recent emails? the ones we shipped a week ago had height: 300px but we've recently changed that to max-height: 300px as of monday of this week

sebastiantf commented 5 years ago

I was using Chrome on Android.

The most recent mail I received was 6 days ago on Saturday 21 Sept. I haven't received any more recent emails

owocki commented 5 years ago

should be better now; see todays email http://bits.owocki.com/9b60607c17c3/Screen%20Shot%202019-09-27%20at%2010.10.21%20AM.png

sebastiantf commented 5 years ago

The new email looks good on the Gmail app. I haven't checked the responsive look on Chrome Desktop. Should be fine, I guess. Will update after checking.

But another design flaw I found is while accessing Gmail in mobile mode via the actual mobile browser.

Screenshot_20190927-231130_Chrome

The banner image seems to overflow sidewards beyond the email container

owocki commented 5 years ago

bountying now; hopefully someone can figure out the responsive design issues on email. there are so many email clients!

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 0.5 ETH (88.97 USD @ $177.94/ETH) attached to it.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 2 years, 4 months ago. Please review their action plans below:

1) sebastiantf has been approved to start work.

I shall look into the styles applied to the image and see what causes it to overflow.

I shall prevent the image feom from overflow 2) iamonuwa has applied to start work _(Funders only: approve worker | reject worker)_.

Quick fix, expect a turn around on this immediately

Learn more on the Gitcoin Issue Details page.

sebastiantf commented 5 years ago

bountying now; hopefully someone can figure out the responsive design issues on email. there are so many email clients!

I myself have applied for the work. I shall look into the problem and fix it.

Edit: I have found the solution. Hoping/Waiting for approval

sebastiantf commented 5 years ago

Waiting for code review.

How can I generate a sample email using the updated CSS styles?

owocki commented 5 years ago

https://github.com/gitcoinco/web/blob/master/docs/ENVIRONMENT_VARIABLES.md#sendgrid then call this method https://github.com/gitcoinco/web/blob/master/app/marketing/mails.py#L634

sebastiantf commented 5 years ago

Thanks @owocki. I shall try this and post a screenshot if possible asap.

owocki commented 5 years ago

you have to get the docker container setup; you probably dont need every env var tho

On Tue, Oct 1, 2019 at 12:37 PM Sebastian T F notifications@github.com wrote:

@owocki https://github.com/owocki, Do I have to build the entire project locally by following the Setup Environment instructions in the documentation to test this?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/web/issues/5271?email_source=notifications&email_token=AAD5PCMHSMFQ2ZIVPTEUO6TQMODD7A5CNFSM4I25UE72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEACDGUQ#issuecomment-537146194, or mute the thread https://github.com/notifications/unsubscribe-auth/AAD5PCLXGZAK3MC2OKEOZRDQMODD7ANCNFSM4I25UE7Q .

--

@owocki http://www.twitter.com/owocki

check out what i'm building on github http://github.com/owocki

or what i'm shooting on photoshelter http://photography.owocki.com/

or find me on twitter http://www.twitter.com/owocki, facebook http://www.facebook.com/kevinowocki, instagram http://instagram.com/owocki, linkedin http://www.linkedin.com/in/owocki, and owocki.com http://www.owocki.com/?utm_source=emailsig.

see you around teh internets!

PS -- Come to the next Boulder Blockchain https://www.meetup.com/Boulder-Blockchain/ meetup. Be there or be ^ 2. PPS -- Have I mentioned that *G*itcoin is live? More @ https://gitcoin.co

sebastiantf commented 5 years ago

I was able to generate an email, but the images are not showing up

sebastiantf commented 5 years ago

I figure that the issue is particular to when accessing Gmail webmail through mobile.

owocki commented 5 years ago

u could poin tsettings.BASE_URL to gitcoin.co instead of your localhost to work around this..

On Tue, Oct 1, 2019 at 4:16 PM Sebastian T F notifications@github.com wrote:

I figure that the issue is particular to when accessing Gmail webmail through mobile.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/web/issues/5271?email_source=notifications&email_token=AAD5PCKHEAGYNRSXWAORXK3QMO42PA5CNFSM4I25UE72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEACYWEA#issuecomment-537234192, or mute the thread https://github.com/notifications/unsubscribe-auth/AAD5PCPPZNCWKKGUF72CALDQMO42PANCNFSM4I25UE7Q .

--

@owocki http://www.twitter.com/owocki

check out what i'm building on github http://github.com/owocki

or what i'm shooting on photoshelter http://photography.owocki.com/

or find me on twitter http://www.twitter.com/owocki, facebook http://www.facebook.com/kevinowocki, instagram http://instagram.com/owocki, linkedin http://www.linkedin.com/in/owocki, and owocki.com http://www.owocki.com/?utm_source=emailsig.

see you around teh internets!

PS -- Come to the next Boulder Blockchain https://www.meetup.com/Boulder-Blockchain/ meetup. Be there or be ^ 2. PPS -- Have I mentioned that *G*itcoin is live? More @ https://gitcoin.co

sebastiantf commented 5 years ago

Ok @owocki. I shall try that.

sebastiantf commented 5 years ago

Applying width:100% can solve the issue on Gmail mobile webmail. But it looks bad on the Gmail web app.

Gmail mobile webmail has poor support for media queries: https://www.campaignmonitor.com/css/email-client/gmail-mobile-webmail/

So applying styles for the #logo img for mobile displays is not having effects

sebastiantf commented 5 years ago

I have been able to produce the following results. Hope this solves the issue.

GMail Web App:

solved1gmail

GMail Mobile Webmail:

photo4952191219384035379

owocki commented 5 years ago

awesome!!

On Fri, Oct 4, 2019 at 4:01 AM Sebastian T F notifications@github.com wrote:

I have been able to produce the following results. Hope this solves the issue.

GMail Web App:

[image: solved1gmail] https://user-images.githubusercontent.com/36922376/66155829-1cf9bb00-e63e-11e9-99cb-e1d0db811371.png

GMail Mobile Webmail:

[image: photo4952191219384035379] https://user-images.githubusercontent.com/36922376/66155835-1f5c1500-e63e-11e9-960c-cc16f94bf67c.jpg

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/web/issues/5271?email_source=notifications&email_token=AAD5PCITELKBEEWPFHZJXW3QMY6QPA5CNFSM4I25UE72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAJHLXI#issuecomment-538080733, or mute the thread https://github.com/notifications/unsubscribe-auth/AAD5PCLVDQ3MGYMGNOECRWLQMY6QPANCNFSM4I25UE7Q .

--

@owocki http://www.twitter.com/owocki

check out what i'm building on github http://github.com/owocki

or what i'm shooting on photoshelter http://photography.owocki.com/

or find me on twitter http://www.twitter.com/owocki, facebook http://www.facebook.com/kevinowocki, instagram http://instagram.com/owocki, linkedin http://www.linkedin.com/in/owocki, and owocki.com http://www.owocki.com/?utm_source=emailsig.

see you around teh internets!

PS -- Come to the next Boulder Blockchain https://www.meetup.com/Boulder-Blockchain/ meetup. Be there or be ^ 2. PPS -- Have I mentioned that *G*itcoin is live? More @ https://gitcoin.co

sebastiantf commented 5 years ago

Does this qualify as a solution?

Shall I close the previous PR, commit this change and submit my work on Gitcoin?

gitcoinbot commented 5 years ago

@sebastiantf Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

sebastiantf commented 5 years ago

Yes I'm still working on it. I haven't been able to commit the new change that actually solves the issue and create a new PR. I shall do that asap.

sebastiantf commented 5 years ago

I have created the PR that actually solves this issue and produces the following results:

I shall submit the work on Gitcoin once this PR is approved and merged successfully.

Sorry to have been late to submit.

gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 0.5 ETH (91.39 USD @ $182.77/ETH) has been submitted by:

  1. @sebastiantf

@owocki please take a look at the submitted work:

gitcoinbot commented 5 years ago
Eye For Detail ⚡️ A *Eye For Detail* Kudos has been sent to @sebastiantf for this issue from @owocki. ⚡️ Nice work @sebastiantf! Your Kudos has automatically been sent in the ETH address we have on file.
gitcoinbot commented 5 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 0.5 ETH (93.15 USD @ $186.3/ETH) attached to this issue has been approved & issued to @sebastiantf.

sebastiantf commented 5 years ago

Thanks @owocki for the merge. Payment received.

Thank you for the kudos too. Great working with you. Hoping to get more involved with the gitcoin community

owocki commented 5 years ago

thanks! if u see any open issues you want to do tag me on them and maybe ill add a bounty

On Tue, Oct 15, 2019 at 8:59 AM Sebastian T F notifications@github.com wrote:

Thanks @owocki https://github.com/owocki for the merge. Payment received.

Thank you for the kudos too. Great working with you. Hoping to get more involved with the gitcoin code

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/gitcoinco/web/issues/5271?email_source=notifications&email_token=AAD5PCOF5G7ENLHO3CQYFPTQOXLGDA5CNFSM4I25UE72YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEBJCZ3A#issuecomment-542256364, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAD5PCL4YP3REX3ICIDTBQLQOXLGDANCNFSM4I25UE7Q .

--

@owocki http://www.twitter.com/owocki

check out what i'm building on github http://github.com/owocki

or what i'm shooting on photoshelter http://photography.owocki.com/

or find me on twitter http://www.twitter.com/owocki, facebook http://www.facebook.com/kevinowocki, instagram http://instagram.com/owocki, linkedin http://www.linkedin.com/in/owocki, and owocki.com http://www.owocki.com/?utm_source=emailsig.

see you around teh internets!

PS -- Come to the next Boulder Blockchain https://www.meetup.com/Boulder-Blockchain/ meetup. Be there or be ^ 2. PPS -- Have I mentioned that *G*itcoin is live? More @ https://gitcoin.co

sebastiantf commented 5 years ago

Great! Of course I will. Would really love to improve this great platform.