styleee (#620)

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

@@ -161,6 +161,7 @@ Metamaps.Map = {
     $.post('/maps/' + Metamaps.Active.Map.id + '/star')
     Metamaps.Stars.push({ user_id: Metamaps.Active.Mapper.id, map_id: Metamaps.Active.Map.id })
     Metamaps.Maps.Starred.add(Metamaps.Active.Map)
+    Metamaps.GlobalUI.notifyUser('Map is now starred')
     self.updateStar()
   },
   unstar: function () {

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

@@ -44,6 +44,7 @@
 
       // all this only for the logged in home page
       if (Metamaps.Active.Mapper) {
+        $('.homeButton a').attr('href', '/')
         Metamaps.GlobalUI.hideDiv('#yield')
 
         Metamaps.GlobalUI.showDiv('#explore')
@@ -89,6 +90,7 @@
         document.title = 'Explore My Maps | Metamaps'
       }
 
+      if (Metamaps.Active.Mapper) $('.homeButton a').attr('href', '/explore/' + section + (id ? '/' + id : ''))
       $('.wrapper').removeClass('homePage mapPage topicPage')
       $('.wrapper').addClass('explorePage')
 

app/assets/stylesheets/base.css.erb

@@ -947,15 +947,51 @@ font-family: 'din-regular', helvetica, sans-serif;
 .map {
     display:inline-block;
     width:220px;
-	  height:340px;
+    height:340px;
     font-size: 12px;
     text-align: left;
     overflow: visible;
-    background: #424242;
+    background: #e8e8e8;
     border-radius:2px;
     margin:16px 16px 16px 19px;
     box-shadow: 0px 3px 3px rgba(0,0,0,0.23), 0 3px 3px rgba(0,0,0,0.16);
 }
+.map:hover {
+  background: #dcdcdc;
+}
+.map.newMap {
+  float: left;
+  position: relative;
+}
+.map.newMap a {
+  height: 340px;
+  display: block;
+  position: relative;
+}
+.newMap .newMapImage {
+  display: block;
+  width: 72px;
+  height: 72px;
+  background-image: url("<%= asset_data_uri('newmap_sprite.png') %>");
+  background-repeat: no-repeat;
+  background-position: 0 0; 
+  position: absolute;
+  left: 50%;
+  margin-left: -36px;
+  top: 50%;
+  margin-top: -36px;
+}
+.map:hover .newMapImage {
+  background-position: 0 -72px;
+}
+.newMap span {
+    font-family: 'din-regular', sans-serif;
+    font-size: 18px;
+    line-height: 22px;
+    text-align: center;
+    display: block;
+    padding-top: 220px;
+}
 
 .mapCard {
   display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
@@ -974,7 +1010,7 @@ font-family: 'din-regular', helvetica, sans-serif;
   width:100%;
   height:308px;
   padding: 16px 0;
-  color:#F5F5F5;
+  color: #424242;
 }
 
 .mapCard .title {

app/assets/stylesheets/clean.css.erb

@@ -127,7 +127,7 @@
 }
 .homeButton a {
     display:block;
-    color: #9E9E9E;
+    color: #747474;
     font-family: "vinyl", sans-serif;
     font-style: italic;
     text-transform: uppercase;
@@ -135,6 +135,9 @@
     font-size: 30px;
     line-height: 38px;
 }
+.homeButton a:hover {
+  color: #616161;
+}
 
 /* end upperLeftUI */
 
@@ -377,13 +380,16 @@
 	top: 0;
 }
 .starMap {
-  background-image: url(<%= asset_data_uri('star.png') %>);
+  background-image: url(<%= asset_data_uri('starmap_sprite.png') %>);
   background-position: 0 0;
   background-repeat: no-repeat;
   width: 32px;
 }
-.starMap:hover, .starMap.starred {
-  background-position: 0 -32px;
+.starMap:hover {
+  background-position: 0 -32px !important;
+}
+ .starMap.starred {
+  background-position: 0 -64px;
 }
 .starMap.starred:hover {
   background-position: 0 0;
@@ -670,7 +676,7 @@
 	font-family: 'din-medium';
 	font-size: 14px;
 	height: 14px;
-	padding: 14px 16px 12px 40px;
+	padding: 14px 8px 12px 40px;
     border-bottom: 2px solid rgba(0,0,0,0);
 	display: inline-block;
     cursor: pointer;
@@ -709,38 +715,38 @@
 }
 .exploreMapsCenter .myMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
-    background-position: 0 0;
+    background-position: -32px 0;
 }
 .exploreMapsCenter .sharedMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
-    background-position: -96px 0;
+    background-position: -128px 0;
 }
 .exploreMapsCenter .activeMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
-    background-position: -32px 0;
+    background-position: 0 0;
 }
 .exploreMapsCenter .featuredMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
-    background-position: -64px 0;
+    background-position: -96px 0;
 }
 .exploreMapsCenter .starredMaps .exploreMapsIcon {
     background-image: url(<%= asset_data_uri 'exploremaps_sprite.png' %>);
-    background-position: -64px 0;
+    background-position: -96px 0;
 }
 .myMaps:hover .exploreMapsIcon, .myMaps.active .exploreMapsIcon {
-    background-position: 0 -32px;
-}
-.activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon {
     background-position: -32px -32px;
 }
+.activeMaps:hover .exploreMapsIcon, .activeMaps.active .exploreMapsIcon {
+    background-position: 0 -32px;
+}
 .featuredMaps:hover .exploreMapsIcon, .featuredMaps.active .exploreMapsIcon {
-    background-position: -64px -32px;
+    background-position: -96px -32px;
 }
 .starredMaps:hover .exploreMapsIcon, .starredMaps.active .exploreMapsIcon {
-    background-position: -64px -32px;
+    background-position: -96px -32px;
 }
 .sharedMaps:hover .exploreMapsIcon, .sharedMaps.active .exploreMapsIcon {
-    background-position: -96px -32px;
+    background-position: -128px -32px;
 }
 
 .mapsWrapper {

app/assets/stylesheets/mobile.scss.erb

@@ -73,6 +73,33 @@
   #exploreMaps > div {
     margin-top: 70px;
   }
+
+  .map.newMap {
+    a {
+      height: auto;
+    }
+
+    .newMapImage {
+      position: relative;
+      display: inline-block;
+      height: 40px;
+      width: 40px;
+      left: auto;
+      top: auto;
+      margin: 0 0 0 8px;
+      background-size: 40px 80px;
+      vertical-align: middle;
+    }
+
+    span {
+      vertical-align: middle;
+      padding: 16px;
+      display: inline-block; 
+    }
+  }
+  .map.newMap:hover .newMapImage {
+    background-position: 0 -40px;
+  }
 }
 
 /* Smartphones (portrait) ----------- */
@@ -151,4 +178,4 @@ li.mobileMenuUser {
   vertical-align: middle;
   margin-right: 10px;
   border-radius: 16px;
-}
+}

app/models/map.rb

@@ -19,7 +19,7 @@ class Map < ActiveRecord::Base
     thumb: ['188x126#', :png]
     #:full => ['940x630#', :png]
   },
-                                 default_url: 'https://s3.amazonaws.com/metamaps-assets/site/missing-map.png'
+  default_url: 'https://s3.amazonaws.com/metamaps-assets/site/missing-map-white.png'
 
   validates :name, presence: true
   validates :arranged, inclusion: { in: [true, false] }

app/views/layouts/_mobilemenu.html.erb

@@ -25,9 +25,12 @@
       <li>
         <%= link_to "Shared With Me", explore_shared_path, :data => { :router => 'true'} %>
       </li>
+      <li>
+        <%= link_to "Starred By Me", explore_starred_path, :data => { :router => 'true'} %>
+      </li>
     <% end %>
     <li>
-      <%= link_to "Recently Active", explore_active_path, :data => { :router => 'true'} %>
+      <%= link_to "Global Maps", explore_active_path, :data => { :router => 'true'} %>
     </li>
     <% if not current_user %>
       <li>
@@ -51,4 +54,4 @@
       </li>
     <% end %>
   </ul>
-</div>
+</div>

frontend/src/components/Header.js

@@ -58,7 +58,7 @@ class Header extends Component {
                 href={signedIn ? "/" : "/explore/active"}
                 linkClass={activeClass("active")}
                 data-router="true"
-                text="Recently Active"
+                text="Global"
               />
               <MapLink show={!signedIn && explore}
                 href="/explore/featured"

frontend/src/components/Maps.js

@@ -25,6 +25,7 @@ class Maps extends Component {
         <div id='exploreMaps'>
           <div>
             { user ? <MapperCard user={ user } /> : null }
+            { currentUser && !user ? <div className="map newMap"><a href="/maps/new"><div className="newMapImage"></div><span>Create new map...</span></a></div> : null }
             { mapElements }
             <div className='clearfloat'></div>
             { moreToLoad ?