page works for phones w/o 3d transform support
also fixed an issue where android phones would submit the form when you clicked the "forgot password" button Change-Id: Ic738faf6fed003363f547b179f3d859a76e607df Reviewed-on: https://gerrit.instructure.com/15584 Reviewed-by: Jon Jensen <jon@instructure.com> Tested-by: Jenkins <jenkins@instructure.com>
This commit is contained in:
Ryan Florence
parent
eb49be7f17
commit
b3de8f0562
|
|
@ -7,6 +7,7 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<%= javascript_include_tag "#{js_base_url}/vendor/modernizr.js" %>
|
||||
<style>
|
||||
* {
|
||||
margin: 0px;
|
||||
|
|
@ -51,32 +52,54 @@
|
|||
background-repeat: no-repeat;
|
||||
background-size: 270px 48px;
|
||||
}
|
||||
.face.back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#f1_card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.csstransforms3d #f1_card {
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-webkit-transition: all 0.5s linear;
|
||||
}
|
||||
#f1_container.flipped #f1_card {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.csstransforms3d .face {
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.face.back {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flipped .face.back {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flipped .face.front {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.csstransforms3d .flipped .face.front {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.csstransforms3d .face.back {
|
||||
display: block;
|
||||
-webkit-transform: rotateY(180deg);
|
||||
-webkit-box-sizing: border-box;
|
||||
}
|
||||
|
||||
.csstransforms3d #f1_container.flipped #f1_card {
|
||||
-webkit-transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
input, button, .btn{
|
||||
display: block;
|
||||
border: none;
|
||||
|
|
@ -113,9 +136,9 @@
|
|||
border-width: 1px;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.4);
|
||||
margin-bottom: 0;
|
||||
width: 240px;
|
||||
}
|
||||
.forgot-password {
|
||||
box-sizing: border-box;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -136,14 +159,14 @@
|
|||
<% if url = params[:canvas_login].blank? && @domain_root_account.try(:forgot_password_external_url) %>
|
||||
<%= link_to t('dont_know_password', "I don't know my password"), url, :class => 'btn forgot-password' %>
|
||||
<% else %>
|
||||
<button class="flip-to-back"><%= t('dont_know_password', "I don't know my password") %></button>
|
||||
<a class="btn flip-to-back"><%= t('dont_know_password', "I don't know my password") %></a>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% form_for :pseudonym_session, :url => forgot_password_path, :html => {:id => "forgot_password_form", :class => 'back face'} do |f| %>
|
||||
<label for="pseudonym_session_unique_id_forgot"><%= t('login_handle', "Enter your %{login_handle_name} and we'll send you a link to change your password.", :login_handle_name => @login_handle_name) %></label>
|
||||
<input <%= 'type=email' if @login_handle_is_email %> name="pseudonym_session[unique_id_forgot]" value="<%= @unauthorized_user.try :email %>" placeholder="<%= @login_handle_name %>" id="pseudonym_session_unique_id_forgot" />
|
||||
<button type="submit" data-text-while-loading="<%= t :sending, "Sending..." %>" class="request-password-button"><%= t('buttons.request_password', 'Request Password') %></button>
|
||||
<button class="flip-to-front"><%= t('back_to_login', "Back to Login") %></button>
|
||||
<a class="btn flip-to-front"><%= t('back_to_login', "Back to Login") %></a>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,326 @@
|
|||
/* Modernizr 2.6.2 (Custom Build) | MIT & BSD
|
||||
* Build: http://modernizr.com/download/#-csstransforms3d-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes
|
||||
*/
|
||||
;
|
||||
|
||||
|
||||
|
||||
window.Modernizr = (function( window, document, undefined ) {
|
||||
|
||||
var version = '2.6.2',
|
||||
|
||||
Modernizr = {},
|
||||
|
||||
enableClasses = true,
|
||||
|
||||
docElement = document.documentElement,
|
||||
|
||||
mod = 'modernizr',
|
||||
modElem = document.createElement(mod),
|
||||
mStyle = modElem.style,
|
||||
|
||||
inputElem ,
|
||||
|
||||
|
||||
toString = {}.toString,
|
||||
|
||||
prefixes = ' -webkit- -moz- -o- -ms- '.split(' '),
|
||||
|
||||
|
||||
|
||||
omPrefixes = 'Webkit Moz O ms',
|
||||
|
||||
cssomPrefixes = omPrefixes.split(' '),
|
||||
|
||||
domPrefixes = omPrefixes.toLowerCase().split(' '),
|
||||
|
||||
|
||||
tests = {},
|
||||
inputs = {},
|
||||
attrs = {},
|
||||
|
||||
classes = [],
|
||||
|
||||
slice = classes.slice,
|
||||
|
||||
featureName,
|
||||
|
||||
|
||||
injectElementWithStyles = function( rule, callback, nodes, testnames ) {
|
||||
|
||||
var style, ret, node, docOverflow,
|
||||
div = document.createElement('div'),
|
||||
body = document.body,
|
||||
fakeBody = body || document.createElement('body');
|
||||
|
||||
if ( parseInt(nodes, 10) ) {
|
||||
while ( nodes-- ) {
|
||||
node = document.createElement('div');
|
||||
node.id = testnames ? testnames[nodes] : mod + (nodes + 1);
|
||||
div.appendChild(node);
|
||||
}
|
||||
}
|
||||
|
||||
style = ['­','<style id="s', mod, '">', rule, '</style>'].join('');
|
||||
div.id = mod;
|
||||
(body ? div : fakeBody).innerHTML += style;
|
||||
fakeBody.appendChild(div);
|
||||
if ( !body ) {
|
||||
fakeBody.style.background = '';
|
||||
fakeBody.style.overflow = 'hidden';
|
||||
docOverflow = docElement.style.overflow;
|
||||
docElement.style.overflow = 'hidden';
|
||||
docElement.appendChild(fakeBody);
|
||||
}
|
||||
|
||||
ret = callback(div, rule);
|
||||
if ( !body ) {
|
||||
fakeBody.parentNode.removeChild(fakeBody);
|
||||
docElement.style.overflow = docOverflow;
|
||||
} else {
|
||||
div.parentNode.removeChild(div);
|
||||
}
|
||||
|
||||
return !!ret;
|
||||
|
||||
},
|
||||
|
||||
|
||||
|
||||
isEventSupported = (function() {
|
||||
|
||||
var TAGNAMES = {
|
||||
'select': 'input', 'change': 'input',
|
||||
'submit': 'form', 'reset': 'form',
|
||||
'error': 'img', 'load': 'img', 'abort': 'img'
|
||||
};
|
||||
|
||||
function isEventSupported( eventName, element ) {
|
||||
|
||||
element = element || document.createElement(TAGNAMES[eventName] || 'div');
|
||||
eventName = 'on' + eventName;
|
||||
|
||||
var isSupported = eventName in element;
|
||||
|
||||
if ( !isSupported ) {
|
||||
if ( !element.setAttribute ) {
|
||||
element = document.createElement('div');
|
||||
}
|
||||
if ( element.setAttribute && element.removeAttribute ) {
|
||||
element.setAttribute(eventName, '');
|
||||
isSupported = is(element[eventName], 'function');
|
||||
|
||||
if ( !is(element[eventName], 'undefined') ) {
|
||||
element[eventName] = undefined;
|
||||
}
|
||||
element.removeAttribute(eventName);
|
||||
}
|
||||
}
|
||||
|
||||
element = null;
|
||||
return isSupported;
|
||||
}
|
||||
return isEventSupported;
|
||||
})(),
|
||||
|
||||
|
||||
_hasOwnProperty = ({}).hasOwnProperty, hasOwnProp;
|
||||
|
||||
if ( !is(_hasOwnProperty, 'undefined') && !is(_hasOwnProperty.call, 'undefined') ) {
|
||||
hasOwnProp = function (object, property) {
|
||||
return _hasOwnProperty.call(object, property);
|
||||
};
|
||||
}
|
||||
else {
|
||||
hasOwnProp = function (object, property) {
|
||||
return ((property in object) && is(object.constructor.prototype[property], 'undefined'));
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
if (!Function.prototype.bind) {
|
||||
Function.prototype.bind = function bind(that) {
|
||||
|
||||
var target = this;
|
||||
|
||||
if (typeof target != "function") {
|
||||
throw new TypeError();
|
||||
}
|
||||
|
||||
var args = slice.call(arguments, 1),
|
||||
bound = function () {
|
||||
|
||||
if (this instanceof bound) {
|
||||
|
||||
var F = function(){};
|
||||
F.prototype = target.prototype;
|
||||
var self = new F();
|
||||
|
||||
var result = target.apply(
|
||||
self,
|
||||
args.concat(slice.call(arguments))
|
||||
);
|
||||
if (Object(result) === result) {
|
||||
return result;
|
||||
}
|
||||
return self;
|
||||
|
||||
} else {
|
||||
|
||||
return target.apply(
|
||||
that,
|
||||
args.concat(slice.call(arguments))
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return bound;
|
||||
};
|
||||
}
|
||||
|
||||
function setCss( str ) {
|
||||
mStyle.cssText = str;
|
||||
}
|
||||
|
||||
function setCssAll( str1, str2 ) {
|
||||
return setCss(prefixes.join(str1 + ';') + ( str2 || '' ));
|
||||
}
|
||||
|
||||
function is( obj, type ) {
|
||||
return typeof obj === type;
|
||||
}
|
||||
|
||||
function contains( str, substr ) {
|
||||
return !!~('' + str).indexOf(substr);
|
||||
}
|
||||
|
||||
function testProps( props, prefixed ) {
|
||||
for ( var i in props ) {
|
||||
var prop = props[i];
|
||||
if ( !contains(prop, "-") && mStyle[prop] !== undefined ) {
|
||||
return prefixed == 'pfx' ? prop : true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function testDOMProps( props, obj, elem ) {
|
||||
for ( var i in props ) {
|
||||
var item = obj[props[i]];
|
||||
if ( item !== undefined) {
|
||||
|
||||
if (elem === false) return props[i];
|
||||
|
||||
if (is(item, 'function')){
|
||||
return item.bind(elem || obj);
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function testPropsAll( prop, prefixed, elem ) {
|
||||
|
||||
var ucProp = prop.charAt(0).toUpperCase() + prop.slice(1),
|
||||
props = (prop + ' ' + cssomPrefixes.join(ucProp + ' ') + ucProp).split(' ');
|
||||
|
||||
if(is(prefixed, "string") || is(prefixed, "undefined")) {
|
||||
return testProps(props, prefixed);
|
||||
|
||||
} else {
|
||||
props = (prop + ' ' + (domPrefixes).join(ucProp + ' ') + ucProp).split(' ');
|
||||
return testDOMProps(props, prefixed, elem);
|
||||
}
|
||||
} tests['csstransforms3d'] = function() {
|
||||
|
||||
var ret = !!testPropsAll('perspective');
|
||||
|
||||
if ( ret && 'webkitPerspective' in docElement.style ) {
|
||||
|
||||
injectElementWithStyles('@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}', function( node, rule ) {
|
||||
ret = node.offsetLeft === 9 && node.offsetHeight === 3;
|
||||
});
|
||||
}
|
||||
return ret;
|
||||
};
|
||||
for ( var feature in tests ) {
|
||||
if ( hasOwnProp(tests, feature) ) {
|
||||
featureName = feature.toLowerCase();
|
||||
Modernizr[featureName] = tests[feature]();
|
||||
|
||||
classes.push((Modernizr[featureName] ? '' : 'no-') + featureName);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Modernizr.addTest = function ( feature, test ) {
|
||||
if ( typeof feature == 'object' ) {
|
||||
for ( var key in feature ) {
|
||||
if ( hasOwnProp( feature, key ) ) {
|
||||
Modernizr.addTest( key, feature[ key ] );
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
feature = feature.toLowerCase();
|
||||
|
||||
if ( Modernizr[feature] !== undefined ) {
|
||||
return Modernizr;
|
||||
}
|
||||
|
||||
test = typeof test == 'function' ? test() : test;
|
||||
|
||||
if (typeof enableClasses !== "undefined" && enableClasses) {
|
||||
docElement.className += ' ' + (test ? '' : 'no-') + feature;
|
||||
}
|
||||
Modernizr[feature] = test;
|
||||
|
||||
}
|
||||
|
||||
return Modernizr;
|
||||
};
|
||||
|
||||
|
||||
setCss('');
|
||||
modElem = inputElem = null;
|
||||
|
||||
|
||||
Modernizr._version = version;
|
||||
|
||||
Modernizr._prefixes = prefixes;
|
||||
Modernizr._domPrefixes = domPrefixes;
|
||||
Modernizr._cssomPrefixes = cssomPrefixes;
|
||||
|
||||
|
||||
Modernizr.hasEvent = isEventSupported;
|
||||
|
||||
Modernizr.testProp = function(prop){
|
||||
return testProps([prop]);
|
||||
};
|
||||
|
||||
Modernizr.testAllProps = testPropsAll;
|
||||
|
||||
|
||||
Modernizr.testStyles = injectElementWithStyles;
|
||||
Modernizr.prefixed = function(prop, obj, elem){
|
||||
if(!obj) {
|
||||
return testPropsAll(prop, 'pfx');
|
||||
} else {
|
||||
return testPropsAll(prop, obj, elem);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1$2') +
|
||||
|
||||
(enableClasses ? ' js ' + classes.join(' ') : '');
|
||||
|
||||
return Modernizr;
|
||||
|
||||
})(this, this.document);
|
||||
;
|
||||
Loading…
Reference in New Issue