Skip to content
This repository has been archived by the owner on Aug 30, 2021. It is now read-only.

Commit

Permalink
fix(ui): update social login design
Browse files Browse the repository at this point in the history
* Update social login design 

- Responsive images
- Mobile layout as well

* changes according to hyperreality advices
  • Loading branch information
lirantal authored Aug 26, 2016
1 parent 23fd205 commit 2f394ec
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 10 deletions.
11 changes: 11 additions & 0 deletions modules/users/client/css/users.css
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,14 @@
width: 300px;
height: 300px;
}

.social {
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
transition-duration: 0.4s;
}

.social:hover {
opacity: 0.65;
}
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<section class="row">
<h3 class="col-md-12 text-center">Sign in using your social accounts</h3>
<div class="col-md-12 text-center">
<img ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png">
<img ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png">
<img ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png">
<img ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png">
<img ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png">
<img ng-click="vm.callOauthProvider('/api/auth/paypal')" ng-src="/modules/users/client/img/buttons/paypal.png">
<h3 class="col-xs-12 text-center">Sign in using your social accounts</h3>
<div class="row col-xs-12 col-md-6 text-center">
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/facebook')" ng-src="/modules/users/client/img/buttons/facebook.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/twitter')" ng-src="/modules/users/client/img/buttons/twitter.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/google')" ng-src="/modules/users/client/img/buttons/google.png"></a></div>
</div>
<div class="row col-xs-12 col-md-6 text-center">
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/linkedin')" ng-src="/modules/users/client/img/buttons/linkedin.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/github')" ng-src="/modules/users/client/img/buttons/github.png"></a></div>
<div class="col-xs-4 social"><a class="btn"><img class="img-responsive" ng-click="vm.callOauthProvider('/api/auth/paypal')" ng-src="/modules/users/client/img/buttons/paypal.png"></a></div>
</div>
<div ui-view></div>
</section>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<h3 class="col-md-12 text-center">Or with your account</h3>
<h3 class="col-xs-12 text-center">Or with your account</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
<form name="vm.userForm" ng-submit="vm.signin(vm.userForm.$valid)" class="signin" novalidate autocomplete="off">
<fieldset>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div>
<h3 class="col-md-12 text-center">Or sign up using your email</h3>
<h3 class="col-xs-12 text-center">Or sign up using your email</h3>
<div class="col-xs-offset-2 col-xs-8 col-md-offset-4 col-md-4">
<form name="vm.userForm" ng-submit="vm.signup(vm.userForm.$valid)" class="signin" novalidate autocomplete="off">
<fieldset>
Expand Down

9 comments on commit 2f394ec

@hyperreality
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it just my device or are the buttons slightly off-center? Changing lines 2 and 8 from col-xs-12 to col-sm-12 fixes it.

@lirantal
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hyperreality haven't tested it but if you see that a fix is in order can you submit a PR?

@hyperreality
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lirantal Sure, I'll take a look at it. Thanks for all your fantastic work on the project this weekend, really inspires me to contribute.

@lirantal
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes me happy! Thanks :)

BTW, almost done with handlebars merge to replace swig. Was just a couple of hours work to make sure everything plays nicely. Almost done and will probably submit a PR on Monday:

image

@hyperreality
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, I'll be ready to test it as soon as you send the PR.

@mleanos
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we add these responsive images styles to the Manage Social Accounts view as well?

And GREAT WORK on the Handlebars implementation @lirantal :)

@lirantal
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Michael :)
@hyperreality FYI comment above

@hyperreality
Copy link
Contributor

@hyperreality hyperreality commented on 2f394ec Aug 30, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lirantal I'll take a look at it soon.

And yes, handlebars is running really smoothly!

@lirantal
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool :)

Please sign in to comment.