glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

cross browser flexbox support

Browse source
This commit is contained in:
Connor Turland 2014-02-26 15:52:54 -08:00
parent 428462abf5
commit 5dd03ab4f7
4 changed files with 89 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/application.css
View file

@ -99,6 +99,12 @@ body,
margin-right: 15px !important; margin-right: 15px !important;
} }
/* forgot password fix */
.forgotPassword input[type="submit"] {
padding: 0 5px;
width: auto;
}
html { html {
} }

90
app/assets/stylesheets/base.css
View file

@ -51,14 +51,28 @@
height:100%; height:100%;
color:#000; color:#000;
z-index: 25; z-index: 25;
display:flex; 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; flex-direction: column;
} }
.CardOnGraph .scroll { .CardOnGraph .scroll {
display:block; display:block;
padding:5px 0 0 10px; 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 { .CardOnGraph .type {
@ -78,7 +92,11 @@
padding:5px; padding:5px;
font-weight: bold; font-weight: bold;
text-align: center; 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 { .best_in_place_name {
@ -142,7 +160,11 @@ font-family: 'LatoLight';
position:relative; position:relative;
border-bottom: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;
border-top: 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 { .linkItem {
@ -342,8 +364,22 @@ float:left;
.CardOnGraph .link { .CardOnGraph .link {
flex:1; -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
display:flex; -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; flex-direction: row;
border-top: 1px solid #AAAAAA; border-top: 1px solid #AAAAAA;
width:100%; width:100%;
@ -353,7 +389,11 @@ float:left;
} }
.CardOnGraph .best_in_place_link { .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; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -382,7 +422,11 @@ font-family: 'LatoLight';
height: 34px; height: 34px;
background: url(MMCCicon_go.png) no-repeat center center; background: url(MMCCicon_go.png) no-repeat center center;
background-size: 20px 20px; 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; margin-right:12px;
} }
@ -469,7 +513,17 @@ font-family: 'LatoLight';
} }
.mapCard { .mapCard {
display:flex; 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; flex-direction: column;
position:relative; position:relative;
width:100%; width:100%;
@ -491,7 +545,11 @@ background-repeat: no-repeat;
.mapCard .scroll { .mapCard .scroll {
display:block; 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; overflow:hidden;
padding:5px 0 5px 10px; padding:5px 0 5px 10px;
} }
@ -516,14 +574,22 @@ background-repeat: no-repeat;
padding:5px; padding:5px;
font-weight: bold; font-weight: bold;
text-align: center; 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 { .mapCard .links {
position:relative; position:relative;
border-bottom: 1px solid #AAAAAA; border-bottom: 1px solid #AAAAAA;
border-top: 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 { .mapCard .icon {

2
app/views/maps/_mapinfobox.html.erb
View file

@ -36,7 +36,7 @@
<% end %> <% end %>
<div class="mapInfoMeta"> <div class="mapInfoMeta">
<p>Created by <%= @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p> <p>Created by <%= @map.user == user ? "you" : @map.user.name %> on <%= @map.created_at.strftime("%m/%d/%Y") %></p>
<p>Last edited <%= @map.updated_at.strftime("%m/%d/%Y") %></p> <p>Last edited <%= @map.updated_at.strftime("%m/%d/%Y") %></p>
</div> </div>

2
app/views/users/passwords/new.html.erb
View file

@ -1,6 +1,6 @@
<h1 class="index">Password Reset</h1> <h1 class="index">Password Reset</h1>
<%= 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! %> <%= devise_error_messages! %>
<h3>Forgot your password?</h3> <h3>Forgot your password?</h3>