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.

Sign up for GitHub

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

Jump to bottom

Sign in with GitHub Button #33

Closed
5 tasks done
nelsonic opened this issue Dec 17, 2019 · 8 comments
Closed
5 tasks done

Sign in with GitHub Button #33

nelsonic opened this issue Dec 17, 2019 · 8 comments
Assignees
@nelsonic
Labels
enhancement starter T25m technical
Projects
Nelson's List

Comments

@nelsonic
Copy link
Member

nelsonic commented Dec 17, 2019 •
edited

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

When any of the (three teal) Login buttons on the page is clicked the user is redirected to GitHub auth:
library

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
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
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

  • Create a button using CSS and SVG that is responsive
    • conforms to the Google (yes, Google) button spec so we have consistency:
      image
      • uses Roboto font (to be consistent with Google button)
  • Background Color #24292e (the super-dark grey of GitHub navbar)
  • Font color #fff (white)

The GitHub Logo optimised SVG is:

<svg height="32" viewBox="0 0 16 16" width="32">
  <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>

The work done for this issue will be re-useable for dwyl/elixir-auth-google#25 ♻️
@nelsonic nelsonic mentioned this issue Dec 17, 2019
Closed
5 tasks
@nelsonic nelsonic added this to To do in Nelson's List via automation Dec 18, 2019
@nelsonic nelsonic mentioned this issue Dec 18, 2019
Closed
7 tasks
@nelsonic nelsonic moved this from To do to In progress in Nelson's List Dec 18, 2019
@nelsonic nelsonic self-assigned this Dec 19, 2019
@nelsonic
Copy link
Member Author

The Google Spec (above) for the "Sign in with Google" button specifies dimensions/widths in dp.

What's dp (density independent pixels) units with CSS?
https://stackoverflow.com/questions/16390762/whats-dp-density-independent-pixels-units-with-css

"When writing CSS, use px wherever dp or sp is stated. Dp only needs to be used in developing for Android."

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 elm-ui but we need auth to be 100% server-side rendered for the foreseeable future (until we build a "native" app) and we don't want to impose the use of Tachyons on people consuming this Elixir package.

@nelsonic
Copy link
Member Author

image

It's basically done, right? 😉

@nelsonic
Copy link
Member Author

Apparently, display:flex has good browser support: https://caniuse.com/#feat=flexbox

image

So ... read this: https://css-tricks.com/snippets/css/a-guide-to-flexbox

@nelsonic
Copy link
Member Author

This is what I wanted:
image

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 1kb:
byte-size-of-github-button

That is an 87.5% bandwidth saving on the 8kb of the .png button.
And what's more it reduces the number of HTTP requests which means the page loads even faster.

This is what I expect everyone @dwyl to be doing.
Save everyone bandwidth (and time) by putting a little extra effort to optimise the little things.

@nelsonic
Copy link
Member Author

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:
image

Gotta love doing layout manually ... 🤦‍♂

Obvs this is PEBKAC ... and I fixed it immediately.
And after much pixel shifting, arrived at the desired result: (class="debug")
image

Consistent buttons compliant with Google Spec:
image

@nelsonic
Copy link
Member Author

nelsonic commented Dec 20, 2019 •
edited

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>

image

image

image

image

I'm no CSS/Flexbox layout "expert" so I encourage you to dissect and improve this!

@nelsonic nelsonic moved this from In progress to Done in Nelson's List Dec 20, 2019
@nelsonic nelsonic mentioned this issue Feb 1, 2020
Merged
7 tasks
@nelsonic
Copy link
Member Author

nelsonic commented Feb 2, 2020

img-vs-svg-button

nelsonic added a commit to dwyl/elixir-auth-github-demo that referenced this issue Feb 2, 2020
@nelsonic
use SVG+CSS button for signin see: dwyl/elixir-auth-github#33
bdabb5e
nelsonic added a commit that referenced this issue Feb 2, 2020
@nelsonic
add section on SVG+CSS button #33 better for i18n & accessibility!
ff8967a
nelsonic added a commit that referenced this issue Feb 2, 2020
@nelsonic
tidy up SVG+CSS button section. fixes #33
6366ff5
@nelsonic
Copy link
Member Author

nelsonic commented Feb 2, 2020

Implemented in #34 :shipit:

@nelsonic nelsonic closed this as completed Feb 2, 2020
@nelsonic nelsonic mentioned this issue Apr 1, 2020
Closed
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@nelsonic nelsonic

Labels
enhancement starter T25m technical
Projects
No open projects
Nelson's List
  
Done
Milestone
No milestone
Development

No branches or pull requests
2 participants
@nelsonic @SimonLab