-
Notifications
You must be signed in to change notification settings - Fork 4
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
Sign in with GitHub Button #33
Comments
The Google Spec (above) for the "Sign in with Google" button specifies dimensions/widths in What's
Futher background reading:
Yes, I know there is a certain irony in me wasting time on pixel-perfect buttons in light of us switching to |
Apparently, So ... read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox |
Code that works in all "modern" browsers (and is backwards compatible to IE 10!): <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<a href="#"
style="display:inline-flex; align-items:center; min-height:40px;
background-color:#24292e; font-family:'Roboto',sans-serif;
font-size:14px; color:white; text-decoration:none;
padding:8px 12px 8px 0px;">
<svg height="18" viewBox="0 0 16 16" width="40px" style="fill:white;">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
1.08.58 1.23.82.72 1.21 1.87.87
2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0
.21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
Sign in with GitHub
</a> Using http://bytesizematters.com we see that our SVG+CSS button is only That is an 87.5% bandwidth saving on the This is what I |
Now I'm working on dwyl/elixir-auth-google#25 with the stated objective of keeping the buttons consistent. So while trying to match the GitHub Button to the Google one ... this happened: Gotta love doing layout manually ... 🤦♂ Obvs this is PEBKAC ... and I fixed it immediately. |
Final code for consistently pixel-perfect scalable sign in buttons: <div style="display:flex; flex-direction:column; width:180px; margin-left:20px">
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
<a href="#"
style="display:inline-flex; align-items:center; min-height:30px;
background-color:#24292e; font-family:'Roboto',sans-serif;
font-size:14px; color:white; text-decoration:none;">
<div style="margin: 1px; padding-top:5px; min-height:30px;">
<svg height="18" viewBox="0 0 16 16" width="32px" style="fill:white;">
<path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38
0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01
1.08.58 1.23.82.72 1.21 1.87.87
2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12
0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08
2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0
.21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
</div>
<div style="margin-left: 5px;">
Sign in with GitHub
</div>
</a>
<a href="#"
style="display:inline-flex; align-items:center; min-height:30px;
background-color:#4285F4; font-family:'Roboto',sans-serif;
font-size:14px; color:white; text-decoration:none;
margin-top: 12px">
<div style="background-color: white; margin:1px; padding-top:5px;
min-height:29px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 533.5 544.3"
width="30px" height="18" style="display:inline-flex; align-items:center;" >
<path d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z" fill="#4285f4"/>
<path d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z" fill="#34a853"/>
<path d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z" fill="#fbbc04"/>
<path d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z" fill="#ea4335"/>
</svg>
</div>
<div style="margin-left: 7px;">
Sign in with Google
</div>
</a>
<div> I'm no CSS/Flexbox layout "expert" so I encourage you to dissect and improve this! |
Implemented in #34 |
At present we do not have any recommendation for the look-and-feel of the Sign in with GitHub button which means it's left to the developer to implement their own ...
The @dwyl library app is using this Elixir package: https://dwyl-library.herokuapp.com
![image](https://user-images.githubusercontent.com/194400/71004800-5b9a0000-20da-11ea-9b59-557a812465e7.png)
When any of the (three teal) Login buttons on the page is clicked the user is redirected to GitHub auth:
![library](https://user-images.githubusercontent.com/194400/60160598-9a1ac600-97ed-11e9-9157-e4ec6a993b81.png)
There is no indication on the home page of the library app that Login is going to GitHub ...
Yes, if one hovers over one of the buttons in a Desktop browser, the URL will be visible:
![github-link-on-hover](https://user-images.githubusercontent.com/194400/71030194-e265d180-2108-11ea-89dc-d184d9e10533.png)
But that is not very mobile-first ... 🙄
This is the button we have used in the past: https://github.com/dwyl/hapi-auth-github
![github-auth-logo](https://cloud.githubusercontent.com/assets/194400/11214293/4e309bf2-8d38-11e5-8d46-b347b2bd242e.png)
But it's quite different from the Google button ... dwyl/app#249
If we want all our "Sign in with ..." buttons to have a consistent look-and-feel,
we need to make some effort to (re)create the button from first principals.
Todo
#24292e
(the super-dark grey of GitHub navbar)#fff
(white)The GitHub Logo optimised SVG is:
The text was updated successfully, but these errors were encountered: