Issue 2844 - Create Microsoft Edge coming soon landing page

static/css/index.css

Index: static/css/index.css
===================================================================
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -69,7 +69,7 @@
   display: inline-block;
 }
 
-#video, #maxthon-instruction
+#video, #maxthon-instruction, #edge-teaser
 {
   background: #ffffff;
   padding: 10px;
@@ -80,7 +80,7 @@
 #maxthon-instruction,
 html[lang^="zh_"] #content.maxthon #video,
 #content.maxthon #feature-free,
-#feature-maxthon
+#feature-maxthon, #edge-subscription, #edge-teaser
 {
   display: none;
 }
@@ -96,6 +96,16 @@
   display: inline-block;
 }
 
+#content.edge #video
+{
+  display: none;
+}
+
+#content.edge #edge-subscription
+{
+  display: block;
+}
+
 #summary h1, #summary h2
 {
   font-weight: normal;
@@ -417,6 +427,16 @@
   background-position: -128px -109px;
 }
 
+#platform-edge
+{
+  background-position: -68px -171px;
+}
+
+#content.edge #platform-edge
+{
+  background-position: -68px -151px;
+}
+
 .warning-platform,
 .disclaimer,
 #maxthon-notification
@@ -609,7 +629,8 @@
 #more-container.internet-explorer #tab-internet-explorer,
 #more-container.safari #tab-safari,
 #more-container.yandex-browser #tab-yandex-browser,
-#more-container.maxthon #tab-maxthon
+#more-container.maxthon #tab-maxthon,
+#more-container.edge #tab-edge
 {
   display: inline-block;
 }
@@ -622,6 +643,86 @@
 #more-container.safari #more-safari,
 #more-container.yandex-browser #more-yandex-browser,
 #more-container.maxthon #more-maxthon
+#more-container.edge #more-edge
 {
   background-color: #dbd4c7;
 }
+#content h3.subscribe-header
+{
+  font-size: 18px;
+  margin-bottom: 0px;
+}
+
+#edge-subscription h3
+{
+  margin: 19px 0px 10px 0px;
+  color: #2d79c0;
+  font-weight: bold;
+  font-family: Arial;
+  font-size: 14px;
+}
+
+#edge-subscription
+{
+  margin: 0px 0px 10px 40px;

[saroyanm, 2015/09/23 12:44:21]

In general I'd be fan of not aligning this with the UL element indentation, but
now I see that in the mockup we are doing so, so in that case we should also
consider RTL direction. 
so please use html[dir="rtl"], to make it consistent with other RTL hacks in the
page.

+}
+
+#other-browsers
+{
+  display: none;
+}
+
+#subscribe-textbox
+{
+  border: solid 2px #a5a5a5;
+  margin-right: 0px;
+  padding-left: 10px;

[saroyanm, 2015/09/23 12:44:22]

Please use padding: 0px 10px; here to make it consistent with other similar
implementations.

+  padding-right: 10px;
+  font-size: 14px;
+  font-family: Arial;
+  line-height: 36px;
+  height: 36px; /* IE 8 */
+}
+
+#subscribe-textbox.placeholder
+{
+  color: #a5a5a5;
+}
+
+#subscribe-button
+{
+  border: solid 1px #357EBD;
+  border-radius: 3px;
+  background-color: #428BCA;
+  color: #FFFFFF;
+  font-size: 14px;
+  font-weight: bold;
+  min-width: 146px;

[saroyanm, 2015/09/23 12:44:21]

Please use width instead of min-width, so we will be sure that the button will
not exceed the limits for different translations.

+  height: 40px;
+  margin-left: 0px;
+}
+
+#subscribe-button span

[saroyanm, 2015/09/23 12:44:22]

Please remove this rule, we should also consider, longer text for translations,
also in Firefox the layout is broken, probably because of the font rendering
difference.
IMO in this case it's better for text to wrap.

+{
+  padding-left: 30px;
+  padding-right: 30px;
+}
+
+#subscribe-form .sucess-label, #subscribe-form .response-error,
+#subscribe-form .invalid-label, #subscribe-form.success input,
+#subscribe-form.success button

[saroyanm, 2015/09/23 12:44:21]

Probably can be merged with rule above (#other-browsers).

+{
+  display: none;
+}
+
+#subscribe-form .invalid-label
+{
+  margin-top: 15px;
+}
+
+#subscribe-form.success .sucess-label,
+#subscribe-form.invalid .invalid-label,
+#subscribe-form.error .response-error
+{
+  display: block;
+}