diff --git a/browserid/compress.sh b/browserid/compress.sh
index 3d5f75eb2e10e1f2426f7d77503fb4928ad872dc..9ee33236fb0d16057fbec0826c73f910a296ae22 100755
--- a/browserid/compress.sh
+++ b/browserid/compress.sh
@@ -12,7 +12,7 @@ if [ ! -x "$JAVA" ]; then
exit 1
fi
-YUI_LOCATION='../../static/steal/build/scripts/yui.jar'
+YUI_LOCATION=`pwd`'/static/steal/build/scripts/yui.jar'
echo ''
echo '****Compressing include.js****'
@@ -32,7 +32,11 @@ cd dialog
$UGLIFY < production.js > production.min.js
mv production.min.js production.js
-cd ../relay
+cd css
+cat popup.css m.css > production.css
+$JAVA -jar $YUI_LOCATION production.css -o production.min.css
+
+cd ../../relay
cat ../dialog/resources/jschannel.js relay.js > production.js
$UGLIFY < production.js > production.min.js
mv production.min.js production.js
@@ -48,5 +52,5 @@ cat jquery-1.6.2.min.js json2.js browserid.js ../dialog/resources/underscore-min
$UGLIFY < lib.js > lib.min.js
cd ../css
-cat style.css > browserid.css
+cat style.css m.css > browserid.css
$JAVA -jar $YUI_LOCATION browserid.css -o browserid.min.css
diff --git a/browserid/static/css/m.css b/browserid/static/css/m.css
index c2c90b4b2abdf760a4e62a09192b18e04e9346e7..413381245ce69c3b411459c17d4c6aa42dbe1d89 100644
--- a/browserid/static/css/m.css
+++ b/browserid/static/css/m.css
@@ -1,217 +1,219 @@
-body #wrapper {
- width: 320px;
-}
-
-body hr {
- width: 300px;
-}
-
-body #content {
- padding: 122px 0 84px;
- margin: 0 10px;
-}
-
-body #header {
- padding: 20px 30px;
-}
-
-body #header ul.nav {
- float: left;
- width: 260px;
- margin-top: 10px;
-}
-
-body #header ul.nav li {
- margin: 0 1px 0 0;
- text-align: center;
- width: 64px;
-}
-
-body #header ul.nav li:first-child {
- width: 102px;
-}
-
-body #header ul.nav li:nth-child(2) {
- width: 91px;
-}
-
-
-body #header ul.nav li a {
- padding: 3px 0;
- background-color: #549FDC;
- color: #fff;
- display: block;
-
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- -o-border-radius: 3px;
- border-radius: 3px;
-}
-
-body.authenticated #header ul.nav li.signOut,
-body #header ul.nav li {
- display: block;
-}
-
-body #header ul.nav li.signOut,
-body.authenticated #header ul.nav li.signIn {
- display: none;
-}
-
-body #header ul.nav li a {
- -webkit-border-radius: 0 3px 3px 0;
- -moz-border-radius: 0 3px 3px 0;
- -o-border-radius: 0 3px 3px 0;
- border-radius: 0 3px 3px 0;
-}
-
-body #header ul.nav li:first-child a {
-
- -webkit-border-radius: 3px 0 0 3px;
- -moz-border-radius: 3px 0 0 3px;
- -o-border-radius: 3px 0 0 3px;
- border-radius: 3px 0 0 3px;
-}
-
-body #header ul.nav li:nth-child(2) a {
- -webkit-border-radius: 0px;
- -moz-border-radius: 0px;
- -o-border-radius: 0px;
- border-radius: 0px;
-}
-
-body #header ul.nav li a.signIn {
- background-color: rgba(0,0,0,0.1);
- color: #222;
-}
-
-body #header ul.nav li a:hover {
- text-decoration: none;
-}
-
-body #signUp {
- width: 320px;
- padding: 0 10px;
- font-size: 16px;
- line-height: 21px;
- margin: 122px 0 122px;
-}
-
-body #signUp p {
- padding: 0 20px;
-}
-
-body #card {
- width: 260px;
- height: 80px;
- background-position: center top;
- background-size: 50%;
- position: relative;
- margin: 0 20px 20px;
- top: auto;
-
- -webkit-transition: none;
- -moz-transition: none;
- -o-transition: none;
- transition: none;
-}
-
-body button.create {
- font-size: 14px;
- height: 28px;
- padding: 0 12px;
-}
-
-body #card.insert {
- background-position: center top;
-}
-
-body #card img {
- display: none;
-}
-
-body #hint,
-body #status {
- display: none;
-}
-
-body #legal {
- padding: 20px;
- text-align: left;
-}
-
-body #legal li {
- list-style-position: inside;
-}
-
-body #about {
- padding: 0;
-}
-
-body #about .video,
-body #about .video img {
- width: 300px;
- height: auto;
-}
-
-body .row {
- padding: 20px 20px 0;
- margin: 0;
-}
-
-body .row div {
- width: auto;
- height: auto;
- vertical-align: inherit;
- display: block;
- padding: 20px 0;
-}
-
-body .row img {
- float: none;
- width: 260px;
- height: auto;
-}
-
-body .row p {
- float: none;
- display: block;
- width: 260px;
- text-indent: -33px;
- padding-left: 33px;
-}
-
-body #signUpFormWrap {
- margin: 122px 10px 122px;
-}
-
-body #manage {
- padding: 20px;
- text-align: left;
-}
-
-body #manage .edit {
- margin: 36px 0 14px;
-}
-
-body #manage #emails {
- margin: 0 0 36px;
-}
-
-body #emails .email,
-body #emails .activity {
- display: block;
- width: 260px;
-}
-
-body #emails .activity span {
- float: left;
-}
-
-body #disclaimer {
- text-align: left;
-}
-
-body #footer {
- padding: 20px 30px;
+@media screen and (max-width: 640px) {
+ #wrapper {
+ width: 320px;
+ }
+
+ hr {
+ width: 300px;
+ }
+
+ #content {
+ padding: 122px 0 84px;
+ margin: 0 10px;
+ }
+
+ #header {
+ padding: 20px 30px;
+ }
+
+ #header ul.nav {
+ float: left;
+ width: 260px;
+ margin-top: 10px;
+ }
+
+ #header ul.nav li {
+ margin: 0 1px 0 0;
+ text-align: center;
+ width: 64px;
+ }
+
+ #header ul.nav li:first-child {
+ width: 102px;
+ }
+
+ #header ul.nav li:nth-child(2) {
+ width: 91px;
+ }
+
+
+ #header ul.nav li a {
+ padding: 3px 0;
+ background-color: #549FDC;
+ color: #fff;
+ display: block;
+
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ -o-border-radius: 3px;
+ border-radius: 3px;
+ }
+
+ body.authenticated #header ul.nav li.signOut,
+ #header ul.nav li {
+ display: block;
+ }
+
+ #header ul.nav li.signOut,
+ body.authenticated #header ul.nav li.signIn {
+ display: none;
+ }
+
+ #header ul.nav li a {
+ -webkit-border-radius: 0 3px 3px 0;
+ -moz-border-radius: 0 3px 3px 0;
+ -o-border-radius: 0 3px 3px 0;
+ border-radius: 0 3px 3px 0;
+ }
+
+ #header ul.nav li:first-child a {
+
+ -webkit-border-radius: 3px 0 0 3px;
+ -moz-border-radius: 3px 0 0 3px;
+ -o-border-radius: 3px 0 0 3px;
+ border-radius: 3px 0 0 3px;
+ }
+
+ #header ul.nav li:nth-child(2) a {
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ -o-border-radius: 0px;
+ border-radius: 0px;
+ }
+
+ #header ul.nav li a.signIn {
+ background-color: rgba(0,0,0,0.1);
+ color: #222;
+ }
+
+ #header ul.nav li a:hover {
+ text-decoration: none;
+ }
+
+ #signUp {
+ width: 320px;
+ padding: 0 10px;
+ font-size: 16px;
+ line-height: 21px;
+ margin: 122px 0 122px;
+ }
+
+ #signUp p {
+ padding: 0 20px;
+ }
+
+ #card {
+ width: 260px;
+ height: 80px;
+ background-position: center top;
+ background-size: 50%;
+ position: relative;
+ margin: 0 20px 20px;
+ top: auto;
+
+ -webkit-transition: none;
+ -moz-transition: none;
+ -o-transition: none;
+ transition: none;
+ }
+
+ button.create {
+ font-size: 14px;
+ height: 28px;
+ padding: 0 12px;
+ }
+
+ #card.insert {
+ background-position: center top;
+ }
+
+ #card img {
+ display: none;
+ }
+
+ #hint,
+ #status {
+ display: none;
+ }
+
+ #legal {
+ padding: 20px;
+ text-align: left;
+ }
+
+ #legal li {
+ list-style-position: inside;
+ }
+
+ #about {
+ padding: 0;
+ }
+
+ #about .video,
+ #about .video img {
+ width: 300px;
+ height: auto;
+ }
+
+ .row {
+ padding: 20px 20px 0;
+ margin: 0;
+ }
+
+ .row div {
+ width: auto;
+ height: auto;
+ vertical-align: inherit;
+ display: block;
+ padding: 20px 0;
+ }
+
+ .row img {
+ float: none;
+ width: 260px;
+ height: auto;
+ }
+
+ .row p {
+ float: none;
+ display: block;
+ width: 260px;
+ text-indent: -33px;
+ padding-left: 33px;
+ }
+
+ #signUpFormWrap {
+ margin: 122px 10px 122px;
+ }
+
+ #manage {
+ padding: 20px;
+ text-align: left;
+ }
+
+ #manage .edit {
+ margin: 36px 0 14px;
+ }
+
+ #manage #emails {
+ margin: 0 0 36px;
+ }
+
+ #emails .email,
+ #emails .activity {
+ display: block;
+ width: 260px;
+ }
+
+ #emails .activity span {
+ float: left;
+ }
+
+ #disclaimer {
+ text-align: left;
+ }
+
+ #footer {
+ padding: 20px 30px;
+ }
}
diff --git a/browserid/static/css/style.css b/browserid/static/css/style.css
index 7439d6cad4b4d20c94253cf4a82d9fd641616ec9..0c8fbd1bdb1f581b594dd91f04f429c654c5b778 100644
--- a/browserid/static/css/style.css
+++ b/browserid/static/css/style.css
@@ -1,4 +1,3 @@
-@import url("m.css") screen and (max-width: 640px);
* {
margin: 0;
diff --git a/browserid/static/dialog/css/m.css b/browserid/static/dialog/css/m.css
index d81b075f785d1bb9ec3cc242de90c2fbe9aa51d6..486ef920599d9bad0f05d6375f13c111e46d13c2 100644
--- a/browserid/static/dialog/css/m.css
+++ b/browserid/static/dialog/css/m.css
@@ -1,103 +1,104 @@
-
-body #wrapper {
- min-width: 320px;
- width: 100%;
- margin: 0 auto;
-}
-
-body header, body footer {
- padding: 5px 20px;
-}
-
-body header ul li:nth-child(2) {
- display: none;
-}
-
-body button {
- height: 40px;
- font-size: 18px;
-}
-
-body input[type=email],
-body input[type=password] {
- font-size: 17px;
-}
-
-body .inputs > li > label {
- font-size: 18px;
-}
-
-body .vertical > strong {
- font-size: 20px;
-}
-
-body #signIn,
-body #favicon {
- display: block;
- width: 100%;
- position: relative;
- padding: 10px;
-}
-
-body #signIn {
- max-width: none;
- padding: 10px;
-}
-
-body #signIn .table {
- width: 100%;
- margin: 0;
-}
-
-body #signIn form {
- padding: 0;
+@media screen and (max-width: 640px) {
+
+ #wrapper {
+ min-width: 320px;
+ width: 100%;
+ margin: 0 auto;
+ }
+
+ header, footer {
+ padding: 5px 20px;
+ }
+
+ header ul li:nth-child(2) {
+ display: none;
+ }
+
+ button {
+ height: 40px;
+ font-size: 18px;
+ }
+
+ input[type=email],
+ input[type=password] {
+ font-size: 17px;
+ }
+
+ .inputs > li > label {
+ font-size: 18px;
+ }
+
+ .vertical > strong {
+ font-size: 20px;
+ }
+
+ #signIn,
+ #favicon {
+ display: block;
+ width: 100%;
+ position: relative;
+ padding: 10px;
+ }
+
+ #signIn {
+ max-width: none;
+ padding: 10px;
+ }
+
+ #signIn .table {
+ width: 100%;
+ margin: 0;
+ }
+
+ #signIn form {
+ padding: 0;
+ }
+
+ #favicon {
+ border-bottom: 1px solid rgba(0,0,0,0.05);
+ background-image: url('/i/bg.png');
+ text-align: center;
+ left: 0;
+ }
+
+ #favicon img {
+ width: 32px;
+ height: auto;
+ display: inline;
+ margin: 0;
+ vertical-align: middle;
+ }
+
+ #formWrap {
+ background-color: transparent;
+ }
+
+ #formWrap,
+ .vertical {
+ height: auto;
+ }
+
+ .arrow {
+ display: none;
+ }
+
+ #checkemail p {
+ height: 250px;
+ }
+
+ #footer {
+ padding: 10px;
+ }
+
+ #signIn .vertical {
+ padding-bottom: 0;
+ }
+
+ #signIn .vertical ul li {
+ margin-top: 20px;
+ }
+
+ #signIn .submit > p {
+ font-size: 14px;
+ }
}
-
-body #favicon {
- border-bottom: 1px solid rgba(0,0,0,0.05);
- background-image: url('/i/bg.png');
- text-align: center;
- left: 0;
-}
-
-body #favicon img {
- width: 32px;
- height: auto;
- display: inline;
- margin: 0;
- vertical-align: middle;
-}
-
-body #formWrap {
- background-color: transparent;
-}
-
-body #formWrap,
-body .vertical {
- height: auto;
-}
-
-body .arrow {
- display: none;
-}
-
-body #checkemail p {
- height: 250px;
-}
-
-body #footer {
- padding: 10px;
-}
-
-body #signIn .vertical {
- padding-bottom: 0;
-}
-
-body #signIn .vertical ul li {
- margin-top: 20px;
-}
-
-body #signIn .submit > p {
- font-size: 14px;
-}
-
diff --git a/browserid/static/dialog/css/popup.css b/browserid/static/dialog/css/popup.css
index 3338041956d391c954369f89d1d3756513332489..eddd3960f92d8fb25390298402b904e87d79b361 100644
--- a/browserid/static/dialog/css/popup.css
+++ b/browserid/static/dialog/css/popup.css
@@ -1,4 +1,3 @@
-@import url("m.css") screen and (max-width: 640px);
* {
margin: 0;
diff --git a/browserid/static/dialog/dialog.js b/browserid/static/dialog/dialog.js
index e0472fc73b652452e11f6beadb7bd5c27b52c72e..0284e86006de853eba596ea254bb3a1ca7a15607 100644
--- a/browserid/static/dialog/dialog.js
+++ b/browserid/static/dialog/dialog.js
@@ -45,8 +45,6 @@ steal.plugins(
'jquery/view/ejs', // client side templates
'jquery/controller/view') // lookup views with the controller's name
- .css("css/popup") // loads styles
-
.resources('jschannel',
'base64',
'underscore-min',
@@ -61,8 +59,6 @@ steal.plugins(
'browserid-errors',
'browserid-wait') // 3rd party script's (like jQueryUI), in resources folder
- .models() // loads files in models folder
-
.controllers('page',
'dialog',
'authenticate',
diff --git a/browserid/views/dialog.ejs b/browserid/views/dialog.ejs
index a8a693c196d6d610b8c03949faba7806acc99fef..35996046a9b0224c21fc18cd6e28d9e0b757ea6c 100644
--- a/browserid/views/dialog.ejs
+++ b/browserid/views/dialog.ejs
@@ -6,6 +6,12 @@
<!--[if lt IE 9]>
<script type="text/javascript" src="/js/html5shim.js"></script>
<![endif]-->
+ <% if (production) { %>
+ <link href="/dialog/css/production.min.css" rel="stylesheet" type="text/css">
+ <% } else { %>
+ <link href="/dialog/css/popup.css" rel="stylesheet" type="text/css">
+ <link href="/dialog/css/m.css" rel="stylesheet" type="text/css">
+ <% } %>
<link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,400italic,700,700italic" rel="stylesheet" type="text/css">
<title>Browser ID</title>
</head>
diff --git a/browserid/views/layout.ejs b/browserid/views/layout.ejs
index e173fcc52d2beda1382ebeb2a560a7de145f8e36..d3abf4d625e6381816eba13b64e88049878f5d4f 100644
--- a/browserid/views/layout.ejs
+++ b/browserid/views/layout.ejs
@@ -13,6 +13,7 @@
<script src="/js/lib.min.js" type="text/javascript"></script>
<% } else { %>
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen">
+ <link rel="stylesheet" href="/css/m.css" type="text/css" media="screen">
<script src="/js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="/js/json2.js" type="text/javascript"></script>