vbatts/quay
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Change positioning and sizing of external login buttons to be nicer looking, using flex box

Browse source 
Fixes https://jira.coreos.com/browse/QUAY-806
This commit is contained in:
Joseph Schorr 2018-01-31 11:05:42 -05:00
parent 5e82538fd5
commit 868a3df2d8
3 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
static/css/directives/ui/external-login-button.css
View file

@ -1,4 +1,11 @@
.external-login-button i.fa,
.external-login-button i.fa {
margin-right: 4px;
width: 24px;
font-size: 18px;
text-align: center;
vertical-align: middle;
}
.external-login-button img {
margin-right: 4px;
width: 24px;

25
static/css/directives/ui/signin-form.css
View file

@ -45,14 +45,18 @@
}
.signin-form-element .external-logins {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.signin-form-element .external-login-button {
display: inline-block;
text-align: center;
padding: 6px;
margin-left: 15px;
margin-right: 15px;
margin-bottom: 10px;
max-width: 50%;
}
.signin-form-element .external-login-button a {
@ -65,16 +69,13 @@
font-size: 14px;
}
.signin-form-element .external-logins.smaller .external-login-button .login-text .prefix {
display: none;
}
.signin-form-element .external-logins.larger .external-login-button .login-text .suffix {
font-weight: 700;
}
.signin-form-element .external-login-button i.fa {
font-size: 46px;
width: auto !important;
}
.signin-form-element .external-login-button img {
width: 50% !important;
max-width: 80px;
margin-bottom: 6px;
}

2
static/directives/signin-form.html
View file

@ -5,7 +5,7 @@
Login via service
</h4>
<div class="external-logins" quay-show="EXTERNAL_LOGINS.length" ng-class="EXTERNAL_LOGINS.length > 2 ? 'smaller': 'larger'">
<div class="external-logins" quay-show="EXTERNAL_LOGINS.length">
<div class="external-login-button" provider="provider" redirect-url="redirectUrl"
sign-in-started="markStarted()" ng-repeat="provider in EXTERNAL_LOGINS" is-link="true"></div>
</div>