View Issue Detail

ID	Project	Category	Submitted / Last Updated
01351	UserSpice	Plugins	2021-10-15 19:12:51 / 2021-11-20 10:20:10
Reported	James Erikson	Assigned To	Unassigned
Priority	none	Reported	5.3.5
Status	addon	Resolution Version and Commit
Summary	Google Login Button is Huge
Description	I noticed when turning on Google Login, the button is huge and overlaps the container on mobile with no way to resize... I found the button code in: usersc/plugins/google_login/assets/ File is called: google_oauth_login.php file I was able to finally edit the size by adding this inside the <img> tag: width="whatever numerical amount you want here" x I noticed when turning on Google Login, the button is huge and overlaps the container on mobile with no way to resize... I found the button code in: usersc/plugins/google_login/assets/ File is called: google_oauth_login.php file I was able to finally edit the size by adding this inside the <img> tag: width="whatever numerical amount you want here"

November 2021
Width="#here" is put inside the img tag, it got cut out lol
xxxxxxxxxx

Width="#here" is put inside the img tag, it got cut out lol
November 2021
:) I'll take a look at this. Legacy plugin.
xxxxxxxxxx

:) I'll take a look at this. Legacy plugin.

I replaced usersc/plugins/google_login/assets/google_oauth_login.php with this, and it looks OK: -

<?php
if(isset($authUrl)) { ?>
  <style>
    .login-with-google-btn {
      transition: background-color .3s, box-shadow .3s;
      padding: 12px 16px 12px 42px;
      border: none;
      border-radius: 3px;
      box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
      color: #757575;
      font-size: 14px;
      font-weight: 500;
      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);
      background-color: white;
      background-repeat: no-repeat;
      background-position: 12px 11px;
    }

    .login-with-google-btn:hover {
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);
    }

    .login-with-google-btn:active {
        background-color: #eeeeee;
    }

    .login-with-google-btn:focus {
        outline: none;
        box-shadow:
          0 -1px 0 rgba(0, 0, 0, .04),
          0 2px 4px rgba(0, 0, 0, .25),
          0 0 0 3px #c8dafc;
    }

    login-with-google-btn:disabled {
        filter: grayscale(100%);
        background-color: #ebebeb;
        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);
        cursor: not-allowed;
    }
  </style>
  <a class="float-right p-2" href="<?=$authUrl?>">
    <button type="button" class="login-with-google-btn" >Sign in with Google </button>
    <!--<img class='img-responsive float-right p-2' src="<?=$us_url_root?>usersc/plugins/google_login/assets/btn_google_signin_dark_normal_web.png" alt=""/>-->
  </a>
<?php } ?>

Only issue is the hook seems different in login and join.... looks much better in "join", but on "login" creates it's own row and doesn't look great.

xxxxxxxxxx
 
I replaced usersc/plugins/google_login/assets/google_oauth_login.php with this, and it looks OK: -​<?phpif(isset($authUrl)) { ?>  <style>    .login-with-google-btn {      transition: background-color .3s, box-shadow .3s;      padding: 12px 16px 12px 42px;      border: none;      border-radius: 3px;      box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);      color: #757575;      font-size: 14px;      font-weight: 500;      font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;      background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=);      background-color: white;      background-repeat: no-repeat;      background-position: 12px 11px;    }​    .login-with-google-btn:hover {        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .25);    }​    .login-with-google-btn:active {        background-color: #eeeeee;    }​    .login-with-google-btn:focus {        outline: none;        box-shadow:          0 -1px 0 rgba(0, 0, 0, .04),          0 2px 4px rgba(0, 0, 0, .25),          0 0 0 3px #c8dafc;    }​    login-with-google-btn:disabled {        filter: grayscale(100%);        background-color: #ebebeb;        box-shadow: 0 -1px 0 rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .25);        cursor: not-allowed;    }  </style>  <a class="float-right p-2" href="<?=$authUrl?>">    <button type="button" class="login-with-google-btn" >Sign in with Google </button>    <!--<img class='img-responsive float-right p-2' src="<?=$us_url_root?>usersc/plugins/google_login/assets/btn_google_signin_dark_normal_web.png" alt=""/>-->  </a><?php } ?>​Only issue is the hook seems different in login and join.... looks much better in "join", but on "login" creates it's own row and doesn't look great.

December 2021
FYI that code modified slightly from: https://codepen.io/mupkoo/pen/YgddgB
xxxxxxxxxx

FYI that code modified slightly from: https://codepen.io/mupkoo/pen/YgddgB
December 2021
Yeah tbh I gave up on userspice. I know it's a great asset for lotssss of people, but things were too controlling and hard to override for my usage case. But thanks for the update!
xxxxxxxxxx

Yeah tbh I gave up on userspice. I know it's a great asset for lotssss of people, but things were too controlling and hard to override for my usage case. But thanks for the update!