improved sign up error display, fixed styling for firefox, fixed page stuck on loading spinner bug

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -55,6 +55,16 @@ $(document).ready(function () {
         }
     }
 
+    // initialize the famous ui
+    var callFamous = function(){
+        if (Metamaps.Famous) {
+            Metamaps.Famous.build();
+        }
+        else {
+            setTimeout(callFamous, 100);
+        }
+    }
+    callFamous();
 });
 
 Metamaps.GlobalUI = {

app/assets/stylesheets/application.css

@@ -1887,45 +1887,35 @@ and it won't be important on password protected instances */
     margin:10px auto;
     background-position: 0 0;
 }
-.lightbox_links a:hover .lightboxAboutIcon {
-    background-position-y: -32px;
-}
 #lightbox_metamapps .lightboxAboutIcon {
-    background-position-x: 0;
-}
-#lightbox_community .lightboxAboutIcon {
-    background-position-x: -32px;
-}
-#lightbox_source .lightboxAboutIcon {
-    background-position-x: -64px;
-}
-#lightbox_blog .lightboxAboutIcon {
-    background-position-x: -96px;
-}
-#lightbox_term .lightboxAboutIcon {
-    background-position-x: -128px;
-}
-
-
-.permIcon .mapCrePermIcon  {
-    background-image: url(permissions64sprite.png);
-    background-repeat: no-repeat;
-    width:64px;
-    height:64px;
-    margin:10px auto;
     background-position: 0 0;
 }
-.mapCrePermIcon:hover {
+#lightbox_community .lightboxAboutIcon {
-    background-position-y: -64px;
+    background-position: -32px 0;
 }
-#map_CO {
+#lightbox_source .lightboxAboutIcon {
-    background-position-x: 0;
+    background-position: -64px 0;
 }
-#map_PU {
+#lightbox_blog .lightboxAboutIcon {
-    background-position-x: -64px;
+    background-position: -96px 0;
 }
-#map_PR {
+#lightbox_term .lightboxAboutIcon {
-    background-position-x: -128px;
+    background-position: -128px 0;
+}
+#lightbox_metamapps:hover .lightboxAboutIcon {
+    background-position: 0 -32px;
+}
+#lightbox_community:hover .lightboxAboutIcon {
+    background-position: -32px -32px;
+}
+#lightbox_source:hover .lightboxAboutIcon {
+    background-position: -64px -32px;
+}
+#lightbox_blog:hover .lightboxAboutIcon {
+    background-position: -96px -32px;
+}
+#lightbox_term:hover .lightboxAboutIcon {
+    background-position: -128px -32px;
 }
 
 /* jquery ui tabs */
@@ -2292,25 +2282,27 @@ and it won't be important on password protected instances */
     height:64px;
     margin:10px auto 0;
     background-position: 0 0;
-/*    width: 60px;
-    height: 60px;
-    background-size: 48px 48px;
-    background-position: center center;
-    background-repeat: no-repeat;
-    margin: 0 auto;
-    cursor: pointer;*/
 }
 .mapPermIcon:hover, .mapPermIcon.selected {
-    background-position-y: -64px;
+    background-position: -64px 0;
 }
 #newmap_co {
-    background-position-x: 0;
+    background-position: 0 0;
 }
 #newmap_pu {
-    background-position-x: -64px;
+    background-position: -64px 0;
 }
 #newmap_pr {
-    background-position-x: -128px;
+    background-position: -128px 0;
+}
+#newmap_co:hover, #newmap_co.selected {
+    background-position: 0 -64px;
+}
+#newmap_pu:hover, #newmap_co.selected {
+    background-position: -64px -64px;
+}
+#newmap_pr:hover, #newmap_pr.selected {
+    background-position: -128px -64px;
 }
 
 
@@ -2337,7 +2329,7 @@ and it won't be important on password protected instances */
     font-size: 14px;
 }
 .buttonWrapper {
-    width: 274px;
+    width: 286px;
     float:right;
     margin: 16px 0 0 0;
 }

app/assets/stylesheets/base.css

@@ -255,12 +255,12 @@ resize: none;
 
 .yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
   background-image: url(arrowperms_sprite.png);
-  background-position-x: -32px;
+  background-position: -32px 0;
   cursor:pointer;
 }
 .yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
  background-image: url(arrowperms_sprite.png) !important;
-background-position-x: 0px;
+background-position: 0 0;
 cursor: pointer;
 }
 .mapPerm .permissionSelect {
@@ -731,13 +731,13 @@ font-family: 'din-regular', helvetica, sans-serif;
   right: 56px; 
 }
 #edit_synapse_left.checked, #edit_synapse_right.checked {
-  background-position-y: -48px;
+  background-position: 0 -48px;
 }
 .canEdit #edit_synapse_left, .canEdit #edit_synapse_right {
   cursor: pointer;
 }
 .canEdit #edit_synapse_left:not(.checked):hover, .canEdit #edit_synapse_right:not(.checked):hover {
- background-position-y: -24px;
+ background-position: 0 -24px;
 }
 
 /* Map Cards */

app/assets/stylesheets/clean.css

@@ -277,10 +277,10 @@
     left: 410px;
 }
 .sidebarSearch .tt-dropdown-menu .minimizeResults {
-    background-position-x: 0;
+    background-position: 0 0;
 }
 .sidebarSearch .tt-dropdown-menu .maximizeResults {
-    background-position-x: -32px;
+    background-position: -32px 0;
 }
 .sidebarSearch .tt-suggestions {
     overflow: visible;
@@ -427,7 +427,7 @@
     height: 24px;
     background: url(topic16.png);
     background-repeat: no-repeat;
-    background-position-y: center;
+    background-position: 0 center;
     top: 0;
     left: 0;
     padding-left: 18px;
@@ -440,7 +440,7 @@
     height: 24px;
     background: url(metamap16.png);
     background-repeat: no-repeat;
-    background-position-y: center;
+    background-position: 0 center;
     left: 0;
     padding-left: 20px;
     font-size: 12px;
@@ -451,7 +451,7 @@
     height: 24px;
     background: url(synapse16.png);
     background-repeat: no-repeat;
-    background-position-y: center;
+    background-position: 0 center;
     top: 24px;
     left: 0;
     padding-left: 20px;
@@ -588,28 +588,38 @@
     background-repeat: no-repeat;
     cursor: pointer;
 }
-.upperRightIcon:hover {
+.sidebarCollaborateIcon {
-    background-position-y: -32px;
+    background-position: 0 0;
+    display: none;
 }
 .sidebarCollaborateIcon.blue {
-    background-position-x: -32px;
+    background-position: -32px 0;
 }
-.sidebarCollaborateIcon {
+.sidebarCollaborateIcon.blue:hover {
-    background-position-x: 0;
+    background-position: -32px -32px;
-    display: none;
 }
 /* only show the collaborate icon on commons */
 .commonsMap .sidebarCollaborateIcon {
     display: block;
 }
 .sidebarFilterIcon {
-    background-position-x: -64px;
+    background-position: -64px 0;
 }
 .sidebarForkIcon {
-    background-position-x: -96px;
+    background-position: -96px 0;
 }
 .addMap {
-    background-position-x: -128px;
+    background-position: -128px 0;
+    margin-right:10px;
+}
+.sidebarFilterIcon:hover {
+    background-position: -64px -32px;
+}
+.sidebarForkIcon:hover {
+    background-position: -96px -32px;
+}
+.addMap:hover {
+    background-position: -128px -32px;
     margin-right:10px;
 }
 
@@ -714,7 +724,7 @@
     background-repeat:no-repeat;
 }
 .openCheatsheet:hover {
-    background-position-y: -32px;
+    background-position: 0 -32px;
 }
 .mapInfoIcon {
 	position: relative;
@@ -723,7 +733,7 @@
     background-repeat:no-repeat;
 }
 .mapInfoIcon:hover {
-    background-position-y: -32px;
+    background-position: 0 -32px;
 }
 .mapPage .mapInfoIcon {
 	top: 0;
@@ -754,7 +764,7 @@
 	cursor:pointer;
 }
 .mapControl:hover {
-    background-position-x: -32px;
+    background-position: -32px 0;
 }
 .zoomExtents {
     margin-bottom:5px;
@@ -824,22 +834,21 @@
     position:absolute;
     top:5px;
     left:5px;
-    background-position-y: 0;
 }
 .exploreMapsCenter .myMaps .exploreMapsIcon {
     background-image: url(exploremaps_sprite.png);
-    background-position-x: 0;
+    background-position: 0 0;
 }
 .exploreMapsCenter .activeMaps .exploreMapsIcon {
     background-image: url(exploremaps_sprite.png);
-    background-position-x: -32px;
+    background-position: -32px 0;
 }
 .exploreMapsCenter .featuredMaps .exploreMapsIcon {
     background-image: url(exploremaps_sprite.png);
-    background-position-x: -64px;
+    background-position: -64px 0;
 }
 .exploreMapsButton:hover .exploreMapsIcon, .exploreMapsButton.active .exploreMapsIcon {
-    background-position-y: -32px;
+    background-position: -32px 0;
 }
 
 .mapsWrapper {

app/helpers/devise_helper.rb

@@ -0,0 +1,26 @@
+module DeviseHelper
+  def devise_error_messages!
+    
+    message = resource.errors.to_a[0]
+    #return "" if resource.errors.empty?
+
+    #messages = resource.errors.full_messages.map { |msg| content_tag(:li, msg) }.join
+    #sentence = I18n.t("errors.messages.not_saved",
+    #                  :count => resource.errors.count,
+    #                  :resource => resource.class.model_name.human.downcase)
+
+    #html = <<-HTML
+    #<div id="error_explanation">
+    #  <h2>#{sentence}</h2>
+    #  <ul>#{messages}</ul>
+    #</div>
+    #HTML
+
+    #html.html_safe
+  end
+
+  def devise_error_messages?
+    resource.errors.empty? ? false : true
+  end
+
+end

app/models/user.rb

@@ -28,6 +28,13 @@ class User < ActiveRecord::Base
   validates_uniqueness_of :name # done by devise
   validates_uniqueness_of :email # done by devise
 
+  if ActiveRecord::Base.connection.table_exists? 'users' 
+    codes =  ActiveRecord::Base.connection.execute("SELECT code FROM users").map {|user| user["code"] }
+  else 
+    codes = []
+  end
+  validates :joinedwithcode, :presence => true, :inclusion => { :in => codes, :message => "%{value} is not valid" }, :on => :create
+    
   # This method associates the attribute ":image" with a file attachment
   has_attached_file :image, :styles => {
    :thumb => ['100x100>', :png],
@@ -57,14 +64,6 @@ class User < ActiveRecord::Base
     }
   end
   
-  if ActiveRecord::Base.connection.table_exists? 'users' 
-    codes =  ActiveRecord::Base.connection.execute("SELECT code FROM users").map {|user| user["code"] }
-  else 
-    codes = []
-  end
-  
-  validates :joinedwithcode, :presence => true, :inclusion => { :in => codes, :message => "%{value} is not a valid code" }, :on => :create
-  
   def generate_code
     #generate a random 8 letter/digit code that they can use to invite people
 	  self.code = rand(36**8).to_s(36)

app/views/layouts/application.html.erb

@@ -34,8 +34,10 @@
 
 <body data-env="<%= Rails.env %>">
 
-    <% if notice %>
+    <% if devise_error_messages? %>
-    <p id="toast"><%= notice %></p>
+      <p id="toast"><%= devise_error_messages! %></p>
+    <% elsif notice %>
+      <p id="toast"><%= notice %></p>
     <% end %>
 
     <%= content_tag :div, class: authenticated? ? "main authenticated" : "main unauthenticated" do %>

app/views/users/passwords/edit.html.erb

@@ -2,7 +2,6 @@
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :put, :class => "forgotPassword centerGreyForm" }) do |f| %>
-  <%= devise_error_messages! %>
   <%= f.hidden_field :reset_password_token %>
   
   <h3>Change your password</h3>

app/views/users/passwords/new.html.erb

@@ -2,7 +2,6 @@
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => password_path(resource_name), :html => { :method => :post, :class => "forgotPassword centerGreyForm" }) do |f| %>
-  <%= devise_error_messages! %>
   
   <h3>FORGOT PASSWORD?</h3>
 

app/views/users/registrations/new.html.erb

@@ -2,7 +2,6 @@
 
 <div id="yield">
 <%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :post, :class => "new_user centerGreyForm" }) do |f| %>
-  <%= devise_error_messages! %>
   
   <h3>Sign Up</h3>
 

config/locales/en.yml

@@ -2,4 +2,7 @@
 # See https://github.com/svenfuchs/rails-i18n/tree/master/rails%2Flocale for starting points.
 
 en:
-  hello: "Hello world"
+  activerecord:
+    attributes:
+      user:
+        joinedwithcode: "Access code"

public/famous/main.js

@@ -1,4 +1,7 @@
 define(function(require, exports, module) {
+
+Metamaps.Famous = {};
+Metamaps.Famous.build = function () {
     // import dependencies
     var Engine = require('famous/core/Engine');
     var Modifier = require('famous/core/Modifier');
@@ -14,7 +17,6 @@ define(function(require, exports, module) {
     // create the main context
     var famous = document.getElementById('famousOverlay');
 
-    Metamaps.Famous = {};
     var f = Metamaps.Famous;
 
     f.mainContext = Engine.createContext(famous);
@@ -324,4 +326,6 @@ define(function(require, exports, module) {
     f.compasses = {};
 
     f.logo.show();
+
+}// build
 });