gratipay / gratipay-everywhere

The official Gratipay extension for the chrome browser, we enable Gratipay tipping icons on many of your favorite sites.
15 stars 11 forks source link

style is gone in GitHub #34

Closed chadwhitacre closed 9 years ago

chadwhitacre commented 10 years ago

screen shot 2014-10-17 at 11 03 16 am

chadwhitacre commented 9 years ago

Still bad in 0.13:

screen shot 2014-11-19 at 2 10 02 pm

rummik commented 9 years ago

Seems vertical-align wasn't overridden during testing, but is now. A !important should fix it

rohitpaulk commented 9 years ago

Oops, here's how it looks now:

screenshot from 2015-03-20 21 58 14

I've checked my console for errors - none.

kzisme commented 9 years ago

gratieverywhere

Current state of the button on Github - currently reading into some possible fixes. Using the !important tag might be a possible easy fix - currently looking into that option.

Also are there any other websites where we would want to place a Gratipay button?

Lastly, I'm trying to figure out a simple way to test/debug chrome extensions.

kzisme commented 9 years ago

Currently wondering if the style is also broken on Bitbucket/Twitter. I'm still trying to find a decent way to look into the debugging of extensions - since I'm not finding much aside from Chrome Dev Tools - (which I've already been using)

kzisme commented 9 years ago

I currently don't see (or I'm just over-looking it) the gratipay button (or icon) within BitBucket or Twitter either. Still poking around though...

kzisme commented 9 years ago

Alright so it appears that using the !important tag is a ~last resort~ sort of deal.

So the issue is with CSS Specificity (I think)

What's happening is the id selector for the BitBucket button is taking precedence over the Github selector.

The specificity hierarchy from what I understand is as follows:

ID > Class > Element

The only issue I'm running into now is...is there a way to change the selector type without messing up a lot of things, or do we even need the BitBucket information in there currently.

The only difference between the two methods(?) is the size of the button, so I'm curious if they are needed.

Going to look into #29 now until I get some input

clone1018 commented 9 years ago

We should only be loading bitbucket css on bitbucket and GitHub css on GitHub, we use the important to enforce our styles on a website we don't control. It's probably broken because GitHub changed their root styles.

kzisme commented 9 years ago

@clone1018 So, we just need to change it to match their new root styles, or how would that work?

(sorry I'm new to chrome extensions and such)

clone1018 commented 9 years ago

It's pretty simple, we're allowed to run custom js and css on the GitHub website via it, we add HTML here to look like a GitHub button https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/websites/github/github.js#L22 (their default style) and then customize it here: https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/button/button.css#L2

kzisme commented 9 years ago

So, on the initial link (their Github Buttons) changed? - and that's why it broke?

clone1018 commented 9 years ago

Sorry I meant to link this line: https://github.com/gratipay/gratipay-everywhere/blob/master/chrome/websites/github/github.js#L19

It looks like they changed the class to: btn btn-sm

kzisme commented 9 years ago

@clone1018 Wow....I was looking in Google Dev Tools this morning and was literally staring at their styling name btn....

Also is there a simple way for me to test if the proposed changes would work while building a Chrome Extension?

clone1018 commented 9 years ago

All you have to do is zip the chrome folder and "Load Unpacked Extension" on chrome://extensions/ and select the zip.

kzisme commented 9 years ago

Awesome! I'll check it out and see what I come up with thanks for the guidance @clone1018 :+1:

rohitpaulk commented 9 years ago

!m @kzisme

kzisme commented 9 years ago

Alright I tested and committed the changes to fix this issue.

@clone1018 was exactly right (thanks for the help)

I'll take a look at the next issue tomorrow :)

Current status: capture

!m @clone1018

clone1018 commented 9 years ago

@kzisme Do you want me to release it?

kzisme commented 9 years ago

If you would like to - I feel like it would be a good idea since it fixes that functionality. Although - I don't know how important/difficult it is to push changes to a chrome extension.

chadwhitacre commented 9 years ago

Yay team! :dancer:

!m @kzisme @clone1018

Reopening until we've deployed the fix. I'm still seeing 0.13 (November 18, 2014) at https://chrome.google.com/webstore/detail/gratipay-everywhere/ffbkkncpfcobpjaolefljnpmianmflig.

clone1018 commented 9 years ago

Good because I forgot :D! "Your item is in the process of being published and may take up to 60 minutes to appear in the Chrome Web Store. "

kzisme commented 9 years ago

@clone1018 @whit537 Just checked and it seems as though it has been updated in the Chrome Webstore :) I'm going to close this issue, but feel free to reopen/comment as needed.

chadwhitacre commented 9 years ago

Huzzah! :dancer:

screen shot 2015-07-09 at 7 14 03 pm

chadwhitacre commented 9 years ago

@kzisme Looks like you committed directly to master in https://github.com/gratipay/gratipay-everywhere/commit/1efcc21aef9c2465aa0a6d6380ea27f7dcb56368, ya? Let's observe our usual pull request workflow for code changes (note that changes to markdown docs can go directly on master).

chadwhitacre commented 9 years ago

Sorry, here's the right link: http://inside.gratipay.com/howto/build-gratipay. :-)

kzisme commented 9 years ago

@whit537 I thought I committed to the css-data-uri branch. Is there a simple way to check based on my commit?

When I view this

At the top when I select "Tree" it doesn't have the master branch selected. I just did a quick edit in browser (since it was a small change) and I tested it locally.

Next time (as per the docs)

use a topic branch in the main repo

Is that right?

Sorry, still getting used to everything :)

chadwhitacre commented 9 years ago

Is there a simple way to check based on my commit?

I do see an indicator in the GitHub UI for https://github.com/gratipay/gratipay-everywhere/commit/1efcc21aef9c2465aa0a6d6380ea27f7dcb56368:

screen shot 2015-07-10 at 9 31 49 pm

At the top when I select "Tree" it doesn't have the master branch selected.

That's because, per the URL, you're browsing the tree at commit 1efcc21aef9c2465aa0a6d6380ea27f7dcb56368. Branches in Git are light-weight pointers to SHA-1 hashes. As you add commits to the master branch you are really adding a commit (changeset, diff) to Git history and updating the master branch/pointer to point to your new commit via it's SHA-1 hash. Note that css-data-uri is not selected either.

Is that right?

Yup! :-)

Sorry, still getting used to everything :)

!m @kzisme

Want to schedule a Google Hangout for Monday at 11am to go over PR workflow together?

kzisme commented 9 years ago

@whit537 I will be unable to do a call, but I will be available to chat via hangouts. Would that work for you?

chadwhitacre commented 9 years ago

@kzisme Sure thing. 11am still good?

kzisme commented 9 years ago

Yup, works for me!

kzisme commented 9 years ago

@whit537 Ready when you are