Merge branch '1.1-compatibility'. Fix #6

applait · Dec 20, 2014 · f80b679 · f80b679
2 parents 5bfa2a4 + 3773ac8
commit f80b679
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/css/app.css b/css/app.css
@@ -16,6 +16,7 @@ html {
 }
 
 :disabled {
+  -moz-opacity: 0.75;
   opacity: 0.75;
   color: #d3d3d3;
 }
@@ -111,9 +112,13 @@ a, a:visited {
  * Nav elements
  */
 nav {
+  display: -moz-box;
   display: flex;
+  -moz-box-orient: horizontal;
   flex-flow: row nowrap;
+  -moz-box-align: center;
   justify-content: space-between;
+  -moz-box-pack: center;
   align-items: center;
   align-content: center;
   overflow: hidden;
@@ -137,6 +142,7 @@ nav h1 {
   margin: 0;
   padding: 0;
   font-size: 1.25rem;
+  -moz-box-flex: 1;
   flex-grow: 1;
   text-indent: 1rem;
   line-height: 3rem;
@@ -147,9 +153,14 @@ nav button:hover, nav button:focus {
 }
 
 nav #resetbtn {
+  -moz-box-flex: 1;
   flex-grow: 1;
 }
 
+.no-flexbox #resetbtn {
+  width: 80%;
+}
+
 #topnav {
   top: 0;
   border-top: 0.2rem solid #2ecc71;
@@ -166,11 +177,16 @@ nav #resetbtn {
 
 #topnav > h1, #topnav > form, #topnav > input[type="text"] {
   width: 100%;
+  -moz-box-flex: 1;
   flex-grow: 1;
 }
 
+.no-flexbox #topnav > h1, .no-flexbox #topnav > form, .no-flexbox #topnav > input[type="text"] {
+  width: calc(100% - 4rem);
+  float: left;
+}
+
 #topnav input[type="text"] {
-  width: 100%;
   border: none;
   outline: none;
   padding: 0;
@@ -210,7 +226,9 @@ nav #resetbtn {
  * Content area
  */
 article {
+  display: -moz-box;
   display: flex;
+  -moz-box-orient: vertical;
   flex-flow: column nowrap;
   width: 100vw;
   height: 100vh;
@@ -220,10 +238,15 @@ article {
   top: 0;
   left: 0;
   background: #ffffff;
+  -moz-opacity: 0;
   opacity: 0;
   z-index: 0;
   transform: translate3d(105%, 0, 0);
-  transition: transform 0.5s, opacity 0.25s linear;
+  transition: transform 0.5s ease-out;
+}
+
+.no-flexbox article {
+  width: 100%;
 }
 
 .has-topnav article {
@@ -243,6 +266,7 @@ article {
 }
 
 section {
+  -moz-box-flex: 1;
   flex: 1 0 0%;
   width: 100%;
   overflow-x: hidden;
@@ -271,6 +295,7 @@ section {
 
 .active-view {
   transform: translate3d(0, 0, 0);
+  -moz-opacity: 1;
   opacity: 1;
   z-index: 1;
 }
@@ -279,12 +304,20 @@ section {
  * Search results
  */
 #searchresults {
+  display: -moz-box;
   display: flex;
+  -moz-box-orient: vertical;
   flex-direction: column;
 }
 
+.no-flexbox #searchresults {
+  width: 100%;
+}
+
 .searchresult-item {
+  display: -moz-box;
   display: flex;
+  -moz-box-orient: horizontal;
   flex-direction: row;
   justify-content: space-between;
   align-items: stretch;
@@ -298,6 +331,7 @@ section {
 }
 
 .searchresult-item h3 {
+  -moz-box-flex: 1;
   flex-grow: 1;
   word-wrap: break-word;
 }
@@ -308,29 +342,46 @@ section {
   flex-basis: 2rem;
 }
 
+.no-flexbox .searchresult-item button {
+  width: 100%;
+}
+
 .button-strip {
+  display: -moz-box;
   display: flex;
+  -moz-box-orient: horizontal;
   flex-flow: row wrap;
+  -moz-box-pack: center;
   justify-content: center;
   align-items: stretch;
   align-content: center;
 }
 
+.no-flexbox .button-strip {
+  width: 100%;
+}
+
 .button-strip button {
   padding: 1rem;
   font-size: 1.25rem;
 }
 
 .list {
+  display: -moz-box;
+  display: flex;
   list-style-type: none;
   list-style-image: none;
   margin: 1rem 0;
   padding: 0;
-  display: flex;
+  -moz-box-orient: vertical;
   flex-direction: column;
   border: 1px solid #cccccc;
 }
 
+.no-flexbox .list {
+  width: 100%;
+}
+
 .list > li {
   width: 100%;
   margin: 0;
@@ -375,3 +426,10 @@ section {
 .has-padding {
   padding: 1rem;
 }
+
+/**
+ * Weird fixes
+ */
+template {
+  display: none;
+}
diff --git a/index.html b/index.html
@@ -7,6 +7,8 @@
 
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
+        <script type="text/javascript" src="js/libs/modernizr.js"></script>
+
         <link rel="stylesheet" type="text/css" href="css/fontello/css/animation.css">
         <link rel="stylesheet" type="text/css" href="css/fontello/css/iconpack.css">
         <link rel="stylesheet" type="text/css" href="css/app.css">
@@ -43,7 +45,9 @@ <h3>What it doesn't?</h3>
                 </p>
 
                 <p>Rate us in the
-                    <a href="https://marketplace.firefox.com/app/finder/ratings/add" target="_blank">Firefox Marketplace</a>
+                    <a href="https://marketplace.firefox.com/app/finder/ratings/add" target="_blank">
+                        Firefox Marketplace
+                    </a>.
                 </p>
 
             </section>