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

Add tab if alternate login present #16832

Merged
merged 12 commits into from
Sep 11, 2019
Merged

Add tab if alternate login present #16832

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
068f1d2
Move alternative login above standard login, optimize alignment
ochorocho Aug 26, 2019
dc30ffc
Add more space to buttonsy
ochorocho Sep 2, 2019
e710976
Add more space between form and alternate login
ochorocho Sep 3, 2019
a9b942c
Add default style for alternative login
ochorocho Sep 4, 2019
c6b6600
Move "Log in with" label to "sociallogin" app
ochorocho Sep 5, 2019
a1c83c1
Prevent undefined for $login['style']
ochorocho Sep 5, 2019
ba8acfe
Optimize responsiveness, remove primary class
ochorocho Sep 6, 2019
dff16b6
Hide only icons for buttons
ochorocho Sep 7, 2019
d38f8dc
Add aria label
ochorocho Sep 9, 2019
493a756
Add null coalesce for label and style attribute
ochorocho Sep 9, 2019
e0ee53a
Added name as fallback, in case label is not set
ochorocho Sep 9, 2019
e2df446
Remove aria label
ochorocho Sep 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 53 additions & 5 deletions core/css/guest.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,21 +95,21 @@ body {
max-width: 100%;
max-height: 200px;
}

.wrapper {
width: 300px;
max-width: 100%;
Copy link
Member

Choose a reason for hiding this comment

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

This could lead to issues in other layouts, but we'll have a look later I guess, since we're at the start of 18!

margin-top: 10vh;
}

/* Default FORM */
form {
position: relative;
width: 280px;
margin: auto;
padding: 0;
}
form fieldset {
margin-bottom: 20px;
text-align: left;
width: 260px;
margin: auto auto 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
Expand Down Expand Up @@ -143,14 +143,58 @@ form #datadirField legend {

/* Buttons and input */
#submit-wrapper,
#reset-password-wrapper {
#reset-password-wrapper,
#alternative-logins {
display: flex;
align-items: center;
justify-content: center;
position: relative; /* Make the wrapper the containing block of its
absolutely positioned descendant icons */
}

#alternative-logins {
margin: 30px 15px 20px;
display: block;
min-width: 260px;
max-width: 400px;
overflow: hidden;
}

#alternative-logins a {
margin: 10px 5px;
display: block;
font-size: 15px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

#alternative-logins a.button::before {
content: "";
background-repeat: no-repeat;
background-size: contain;
width: 0;
margin-right: 0;
height: 18px;
display: inline-block;
vertical-align: bottom;
}

#alternative-logins .button {
color: #0082c9;
padding: 12px 20px;
}

@media only screen and (max-width: 1024px) {
.wrapper {
margin-top: 0;
}
#alternative-logins {
margin: 30px 15px 10px;
}
}


#submit-wrapper .submit-icon,
#reset-password-wrapper .submit-icon {
position: absolute;
Expand All @@ -163,6 +207,10 @@ form #datadirField legend {
applied to the button instead. */
}

#submit-wrapper {
margin: 0 auto;
}

#submit-wrapper input.login:hover ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:focus ~ .submit-icon.icon-confirm-white,
#submit-wrapper input.login:active ~ .submit-icon.icon-confirm-white {
Expand Down
19 changes: 9 additions & 10 deletions core/templates/login.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@
?>

<div id="login"></div>

<?php if (!empty($_['alt_login'])) { ?>
<form id="alternative-logins">
<fieldset>
<ul>
<?php foreach($_['alt_login'] as $login): ?>
<li><a class="button" href="<?php print_unescaped($login['href']); ?>" ><?php p($login['name']); ?></a></li>
<?php endforeach; ?>
</ul>
</fieldset>
</form>
<?php }
<div id="alternative-logins">
<?php foreach($_['alt_login'] as $login): ?>
<a class="button <?php p($login['style'] ?? ''); ?>" aria-label="<?php p($login['label'] ?? $login['name']); ?>" href="<?php print_unescaped($login['href']); ?>" >
<?php p($login['name']); ?>
</a>
<?php endforeach; ?>
</div>
<?php } ?>