Commit c06657ef authored by Curtis Adam's avatar Curtis Adam

Merge branch '62-login-buttons-not-correctly-displayed-in-edge-browser' into 'staging'

Resolve "Login buttons not correctly displayed in Edge browser"

Closes #62

See merge request arsnova/cards!73
parents 05c07a6c 65d1f463
......@@ -14,4 +14,8 @@ export let NavigatorCheck = class CardVisuals {
static isSafari () {
return navigator.userAgent.indexOf("Safari") >= 0 && navigator.userAgent.indexOf("Chrome") === -1;
}
static isEdge () {
return navigator.userAgent.indexOf("Edge") >= 0;
}
};
......@@ -11,6 +11,7 @@ import ResizeSensor from "../../../client/thirdParty/resizeSensor/ResizeSensor";
import * as fakeInventory from '../../../public/fakeStatistics/inventory.json';
import {PomodoroTimer} from "../../api/pomodoroTimer";
import {CardVisuals} from "../../api/cardVisuals";
import {NavigatorCheck} from "../../api/navigatorCheck";
Meteor.subscribe("pomodoroLandingPage");
Meteor.subscribe("userData");
......@@ -33,6 +34,14 @@ function splitLargeNumbers(number) {
return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, separator);
}
function getLoginClass() {
if (NavigatorCheck.isEdge()) {
return "login-button-legacy-icon";
} else {
return "login-button-icon";
}
}
//------------------------ LOGIN EVENT
Template.welcome.events({
......@@ -100,16 +109,16 @@ Template.welcome.helpers({
getLoginButtons: function () {
let loginButtons = "<label class='loginLabel' for='loginButtonRow'>" + TAPi18n.__('login.label') + "</label><div id='loginButtonRow'>";
if (Meteor.settings.public.displayLoginButtons.displayCas) {
loginButtons += '<a id="cas" href=""><div class="login-button-icon"></div></a>';
loginButtons += '<a id="cas" href=""><div class="' + getLoginClass() + '"></div></a>';
}
if (Meteor.settings.public.displayLoginButtons.displayFacebook) {
loginButtons += '<a id="facebook" href=""><div class="login-button-icon"></div></a>';
loginButtons += '<a id="facebook" href=""><div class="' + getLoginClass() + '"></div></a>';
}
if (Meteor.settings.public.displayLoginButtons.displayTwitter) {
loginButtons += '<a id="twitter" href=""><div class="login-button-icon"></div></a>';
loginButtons += '<a id="twitter" href=""><div class="' + getLoginClass() + '"></div></a>';
}
if (Meteor.settings.public.displayLoginButtons.displayGoogle) {
loginButtons += '<a id="google" href=""><div class="login-button-icon"></div></a>';
loginButtons += '<a id="google" href=""><div class="' + getLoginClass() + '"></div></a>';
}
// Backdoor for login in acceptance tests
......@@ -123,7 +132,7 @@ Template.welcome.helpers({
let standard = TAPi18n.__("backdoor.standard");
let blocked = TAPi18n.__("backdoor.blocked");
let firstLogin = TAPi18n.__("backdoor.firstLogin");
loginButtons += '<a id="BackdoorLogin" href=""><div class="login-button-icon"></div></a>';
loginButtons += '<a id="BackdoorLogin" href=""><div class="' + getLoginClass() + '"></div></a>';
loginButtons += '<div class="btn-group backdoorLogin"><label id="backdoor-label">' + title + '</label><br><select class="btn btn-secondary btn-raised" id="TestingBackdoorUsername" aria-labelledby="backdoor-label">' +
'<option id="superAdminLogin" value="admin">' + superAdmin + '</option>' +
'<option id="adminLogin" value="editor">' + admin + '</option>' +
......
......@@ -91,30 +91,57 @@
mask-position: center;
}
#cas .login-button-legacy-icon {
background-image: url(/img/login/legacy/thm.png);
}
#cas .login-button-icon {
-webkit-mask-image: url(/img/login/thm.svg);
mask-image: url(/img/login/thm.svg);
}
#facebook .login-button-legacy-icon {
background-image: url(/img/login/legacy/facebook.png);
}
#facebook .login-button-icon {
-webkit-mask-image: url(/img/login/facebook.svg);
mask-image: url(/img/login/facebook.svg);
}
#twitter .login-button-legacy-icon {
background-image: url(/img/login/legacy/twitter.png);
}
#twitter .login-button-icon {
-webkit-mask-image: url(/img/login/twitter.svg);
mask-image: url(/img/login/twitter.svg);
}
#google .login-button-legacy-icon {
background-image: url(/img/login/legacy/google.png);
}
#google .login-button-icon {
-webkit-mask-image: url(/img/login/google.svg);
mask-image: url(/img/login/google.svg);
}
#BackdoorLogin .login-button-legacy-icon {
background-image: url(/img/login/legacy/backdoor.png);
}
#BackdoorLogin .login-button-icon {
-webkit-mask-image: url(/img/login/backdoor.svg);
mask-image: url(/img/login/backdoor.svg);
}
.login-button-legacy-icon {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: 99%;
}
}
.color-dot:before {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment