From 7ee631e2dea99f25557f03a4a41fcfa05c1b0ac3 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 13:54:11 +0530 Subject: [PATCH 01/11] Load modernizr on page load Signed-off-by: Kaustav Das Modak --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 48b7cf4..2f8c790 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,8 @@ + + From 1530c6fed238b53072300a3f5c671447f9883c47 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 13:54:30 +0530 Subject: [PATCH 02/11] First pass at supporting legacy flexbox and fix topnav Signed-off-by: Kaustav Das Modak --- css/app.css | 32 ++++++++++++++++++++++++++++++-- 1 file changed, 30 insertions(+), 2 deletions(-) diff --git a/css/app.css b/css/app.css index 7a37146..eaebce7 100644 --- a/css/app.css +++ b/css/app.css @@ -111,9 +111,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 +141,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,6 +152,7 @@ nav button:hover, nav button:focus { } nav #resetbtn { + -moz-box-flex: 1; flex-grow: 1; } @@ -166,11 +172,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: 80%; + float: left; +} + #topnav input[type="text"] { - width: 100%; border: none; outline: none; padding: 0; @@ -185,6 +196,10 @@ nav #resetbtn { color: #ffffff; } +.no-flexbox #topnav button { + width: 20%; +} + #topnav button:focus { animation: pulsate-grey 1.5s 0s 1 ease-in-out; } @@ -210,7 +225,9 @@ nav #resetbtn { * Content area */ article { + display: -moz-box; display: flex; + -moz-box-orient: vertical; flex-flow: column nowrap; width: 100vw; height: 100vh; @@ -243,6 +260,7 @@ article { } section { + -moz-box-flex: 1; flex: 1 0 0%; width: 100%; overflow-x: hidden; @@ -279,12 +297,16 @@ section { * Search results */ #searchresults { + display: -moz-box; display: flex; + -moz-box-orient: vertical; flex-direction: column; } .searchresult-item { + display: -moz-box; display: flex; + -moz-box-orient: horizontal; flex-direction: row; justify-content: space-between; align-items: stretch; @@ -298,6 +320,7 @@ section { } .searchresult-item h3 { + -moz-box-flex: 1; flex-grow: 1; word-wrap: break-word; } @@ -309,8 +332,11 @@ section { } .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; @@ -322,11 +348,13 @@ section { } .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; } From bde64b7e31fbaa83af6878120218d9a000cdcac5 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 14:29:56 +0530 Subject: [PATCH 03/11] Fix width for 100vw on article Signed-off-by: Kaustav Das Modak --- css/app.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/app.css b/css/app.css index eaebce7..53a680a 100644 --- a/css/app.css +++ b/css/app.css @@ -243,6 +243,10 @@ article { transition: transform 0.5s, opacity 0.25s linear; } +.no-flexbox article { + width: 100%; +} + .has-topnav article { top: 3rem; height: calc(100vh - 3rem); From 589ee197c72aecf8a5068036efa008e8ffa26c81 Mon Sep 17 00:00:00 2001 From: Jaipradeesh Date: Sat, 20 Dec 2014 17:30:54 +0530 Subject: [PATCH 04/11] Fix rendering in seachresults, searchresult-item and list -if no-flexbox --- css/app.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/css/app.css b/css/app.css index 53a680a..ea304a7 100644 --- a/css/app.css +++ b/css/app.css @@ -156,6 +156,10 @@ nav #resetbtn { flex-grow: 1; } +.no-flexbox #resetbtn { + width: 80%; +} + #topnav { top: 0; border-top: 0.2rem solid #2ecc71; @@ -252,6 +256,7 @@ article { height: calc(100vh - 3rem); } + .has-bottomnav article { bottom: 3rem; height: calc(100vh - 3rem); @@ -307,6 +312,10 @@ section { flex-direction: column; } +.no-flexbox #searchresults { + width: 100%; +} + .searchresult-item { display: -moz-box; display: flex; @@ -335,6 +344,10 @@ section { flex-basis: 2rem; } +.no-flexbox .searchresult-item button { + width: 100%; +} + .button-strip { display: -moz-box; display: flex; @@ -346,6 +359,10 @@ section { align-content: center; } +.no-flexbox .button-strip { + width: 100%; +} + .button-strip button { padding: 1rem; font-size: 1.25rem; @@ -363,6 +380,10 @@ section { border: 1px solid #cccccc; } +.no-flexbox .list { + width: 100%; +} + .list > li { width: 100%; margin: 0; From ef6239dfd4d947088459b06f0eb224a02fcab7d2 Mon Sep 17 00:00:00 2001 From: Jaipradeesh Date: Sat, 20 Dec 2014 17:41:58 +0530 Subject: [PATCH 05/11] Add vendor prefix for opacity property --- css/app.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css/app.css b/css/app.css index ea304a7..c9de5bb 100644 --- a/css/app.css +++ b/css/app.css @@ -16,7 +16,7 @@ html { } :disabled { - opacity: 0.75; + -moz-opacity: 0.75; color: #d3d3d3; } @@ -241,7 +241,7 @@ article { top: 0; left: 0; background: #ffffff; - opacity: 0; + -moz-opacity: 0; z-index: 0; transform: translate3d(105%, 0, 0); transition: transform 0.5s, opacity 0.25s linear; @@ -298,7 +298,7 @@ section { .active-view { transform: translate3d(0, 0, 0); - opacity: 1; + -moz-opacity: 1; z-index: 1; } From 5ae4a0248c76a2c8bde0a1c4b46b28e40e4461f1 Mon Sep 17 00:00:00 2001 From: Jaipradeesh Date: Sat, 20 Dec 2014 17:48:14 +0530 Subject: [PATCH 06/11] Add standard opacity property along with vendor prefixed ones --- css/app.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/css/app.css b/css/app.css index c9de5bb..f2e8826 100644 --- a/css/app.css +++ b/css/app.css @@ -17,6 +17,7 @@ html { :disabled { -moz-opacity: 0.75; + opacity: 0.75; color: #d3d3d3; } @@ -242,6 +243,7 @@ article { 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; @@ -299,6 +301,7 @@ section { .active-view { transform: translate3d(0, 0, 0); -moz-opacity: 1; + opacity: 1; z-index: 1; } From 7d15eb9d8783bc7fd070ba4711aec2aca53559a6 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 18:06:49 +0530 Subject: [PATCH 07/11] Use calc to calculate width of topnav elements Signed-off-by: Kaustav Das Modak --- css/app.css | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/css/app.css b/css/app.css index f2e8826..eee7d09 100644 --- a/css/app.css +++ b/css/app.css @@ -182,7 +182,7 @@ nav #resetbtn { } .no-flexbox #topnav > h1, .no-flexbox #topnav > form, .no-flexbox #topnav > input[type="text"] { - width: 80%; + width: calc(100% - 4rem); float: left; } @@ -201,10 +201,6 @@ nav #resetbtn { color: #ffffff; } -.no-flexbox #topnav button { - width: 20%; -} - #topnav button:focus { animation: pulsate-grey 1.5s 0s 1 ease-in-out; } From e2badf8e147186e046708e01377dbbf0411ac5d8 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 18:08:06 +0530 Subject: [PATCH 08/11] Missed the dot! Signed-off-by: Kaustav Das Modak --- index.html | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2f8c790..8586ce1 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,9 @@

What it doesn't?

Rate us in the - Firefox Marketplace + + Firefox Marketplace + .

From f46434e518bfc99ad453bafb57d68c9199d5ee9a Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 18:21:43 +0530 Subject: [PATCH 09/11] Remove extra line break Signed-off-by: Kaustav Das Modak --- css/app.css | 1 - 1 file changed, 1 deletion(-) diff --git a/css/app.css b/css/app.css index eee7d09..338003d 100644 --- a/css/app.css +++ b/css/app.css @@ -254,7 +254,6 @@ article { height: calc(100vh - 3rem); } - .has-bottomnav article { bottom: 3rem; height: calc(100vh - 3rem); From 6f765dfa9e27a942e14f332b3737a9592a0e5ce3 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 18:31:25 +0530 Subject: [PATCH 10/11] Change transition to animate only transform Signed-off-by: Kaustav Das Modak --- css/app.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/app.css b/css/app.css index 338003d..1060a96 100644 --- a/css/app.css +++ b/css/app.css @@ -242,7 +242,7 @@ article { 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 { From 3773ac8bd6024a77758010c97d39a70e168a2b58 Mon Sep 17 00:00:00 2001 From: Kaustav Das Modak Date: Sat, 20 Dec 2014 18:37:08 +0530 Subject: [PATCH 11/11] Hide template elements to prevent 1.1 from rendering them Signed-off-by: Kaustav Das Modak --- css/app.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/css/app.css b/css/app.css index 1060a96..ae610fc 100644 --- a/css/app.css +++ b/css/app.css @@ -426,3 +426,10 @@ section { .has-padding { padding: 1rem; } + +/** + * Weird fixes + */ +template { + display: none; +} \ No newline at end of file