From 5dd03ab4f78274383cec8bdcf29df112d604b9c0 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 26 Feb 2014 15:52:54 -0800 Subject: [PATCH] cross browser flexbox support --- app/assets/stylesheets/application.css | 6 ++ app/assets/stylesheets/base.css | 96 ++++++++++++++++++++++---- app/views/maps/_mapinfobox.html.erb | 2 +- app/views/users/passwords/new.html.erb | 2 +- 4 files changed, 89 insertions(+), 17 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index a29db594..082c52a9 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -99,6 +99,12 @@ body, margin-right: 15px !important; } +/* forgot password fix */ +.forgotPassword input[type="submit"] { + padding: 0 5px; + width: auto; +} + html { } diff --git a/app/assets/stylesheets/base.css b/app/assets/stylesheets/base.css index 39344263..fa4b11b5 100644 --- a/app/assets/stylesheets/base.css +++ b/app/assets/stylesheets/base.css @@ -51,14 +51,28 @@ height:100%; color:#000; z-index: 25; - display:flex; - flex-direction:column; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-box-direction: normal; + -moz-box-direction: normal; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; } .CardOnGraph .scroll { display:block; padding:5px 0 0 10px; - flex:1; + -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: 1; /* OLD - Firefox 19- */ + -webkit-flex: 1; /* Chrome */ + -ms-flex: 1; /* IE 10 */ + flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .CardOnGraph .type { @@ -78,7 +92,11 @@ padding:5px; font-weight: bold; text-align: center; - flex:none; + -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: none; /* OLD - Firefox 19- */ + -webkit-flex: none; /* Chrome */ + -ms-flex: none; /* IE 10 */ + flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .best_in_place_name { @@ -142,7 +160,11 @@ font-family: 'LatoLight'; position:relative; border-bottom: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; - flex:none; + -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: none; /* OLD - Firefox 19- */ + -webkit-flex: none; /* Chrome */ + -ms-flex: none; /* IE 10 */ + flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .linkItem { @@ -342,9 +364,23 @@ float:left; .CardOnGraph .link { - flex:1; - display:flex; - flex-direction:row; + -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: 1; /* OLD - Firefox 19- */ + -webkit-flex: 1; /* Chrome */ + -ms-flex: 1; /* IE 10 */ + flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-orient: horizontal; + -moz-box-orient: horizontal; + -webkit-box-direction: normal; + -moz-box-direction: normal; + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; border-top: 1px solid #AAAAAA; width:100%; max-height:34px; @@ -353,7 +389,11 @@ float:left; } .CardOnGraph .best_in_place_link { - flex:1; + -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: 1; /* OLD - Firefox 19- */ + -webkit-flex: 1; /* Chrome */ + -ms-flex: 1; /* IE 10 */ + flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -382,7 +422,11 @@ font-family: 'LatoLight'; height: 34px; background: url(MMCCicon_go.png) no-repeat center center; background-size: 20px 20px; - flex:1; + -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: 1; /* OLD - Firefox 19- */ + -webkit-flex: 1; /* Chrome */ + -ms-flex: 1; /* IE 10 */ + flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ margin-right:12px; } @@ -469,8 +513,18 @@ font-family: 'LatoLight'; } .mapCard { - display:flex; - flex-direction:column; + display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ + display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* NEW - Chrome */ + display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ + -webkit-box-orient: vertical; + -moz-box-orient: vertical; + -webkit-box-direction: normal; + -moz-box-direction: normal; + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; position:relative; width:100%; height:320px; @@ -491,7 +545,11 @@ background-repeat: no-repeat; .mapCard .scroll { display:block; - flex:1; + -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: 1; /* OLD - Firefox 19- */ + -webkit-flex: 1; /* Chrome */ + -ms-flex: 1; /* IE 10 */ + flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */ overflow:hidden; padding:5px 0 5px 10px; } @@ -516,14 +574,22 @@ background-repeat: no-repeat; padding:5px; font-weight: bold; text-align: center; - flex:none; + -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: none; /* OLD - Firefox 19- */ + -webkit-flex: none; /* Chrome */ + -ms-flex: none; /* IE 10 */ + flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .mapCard .links { position:relative; border-bottom: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA; - flex:none; + -webkit-box-flex: none; /* OLD - iOS 6-, Safari 3.1-6 */ + -moz-box-flex: none; /* OLD - Firefox 19- */ + -webkit-flex: none; /* Chrome */ + -ms-flex: none; /* IE 10 */ + flex: none; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .mapCard .icon { diff --git a/app/views/maps/_mapinfobox.html.erb b/app/views/maps/_mapinfobox.html.erb index 2a5579e9..7ce7455d 100644 --- a/app/views/maps/_mapinfobox.html.erb +++ b/app/views/maps/_mapinfobox.html.erb @@ -36,7 +36,7 @@ <% end %>
-

Created by <%= @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %>

+

Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %>

Last edited <%= @map.updated_at.strftime("%m/%d/%Y") %>

diff --git a/app/views/users/passwords/new.html.erb b/app/views/users/passwords/new.html.erb index b4b3ee25..be292b4e 100644 --- a/app/views/users/passwords/new.html.erb +++ b/app/views/users/passwords/new.html.erb @@ -1,6 +1,6 @@

Password Reset

-<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post }) do |f| %> +<%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :class => "new_user forgotPassword" }) do |f| %> <%= devise_error_messages! %>

Forgot your password?