abacritt / angularx-social-login

Social login and authentication module for Angular 17
630 stars 388 forks source link

Making Google button responsive #710

Closed CatInDaBin closed 11 months ago

CatInDaBin commented 1 year ago

Hey there,

is there any way of making the google signin button responsive for the mobile devices?

I used one suggestion from previous issues and made my own directive:

`import { Directive, ElementRef } from '@angular/core'; import { take } from 'rxjs'; import { SocialAuthService } from '@abacritt/angularx-social-login';

declare var google;

@Directive({ selector: 'google-signin-button' }) export class GoogleSigninButtonDirective {

constructor( el: ElementRef, private socialAuthService: SocialAuthService ) { this.render(el) }

render(el) { this.socialAuthService.initState.pipe(take(1)).subscribe(() => { google.accounts.id.renderButton(el.nativeElement, { type: 'standard', size: 'large', width: '400', text: 'signin_with', logo_alignment: 'center', theme: 'outline' }); }) } }`

Only thing I would make out with this would be to define device with on init and sorting it trough like this, but it's still not good enough.

Thank you in advance