Map Card changes (#769)

* map card rewrite underway

* star count

* css fix

app/assets/stylesheets/base.css.erb

@@ -17,7 +17,6 @@
   
 }
 
-
 #center-container {
   position:relative;
 	height:100%;
@@ -592,10 +591,10 @@ background-color: #E0E0E0;
   position: relative;
 }
 
-.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip {
+.CardOnGraph .hoverForTip:hover .tip, #mapContribs:hover .tip {
   display:block;
 }
-.CardOnGraph .tip, .mapCard .tip {
+.CardOnGraph .tip {
  display:none;
  position: absolute;
  background: black;
@@ -952,154 +951,7 @@ font-family: 'din-regular', helvetica, sans-serif;
  background-position: 0 -24px;
 }
 
-/* Map Cards */
 
-.map {
-    display:inline-block;
-    width:220px;
-    height:340px;
-    font-size: 12px;
-    text-align: left;
-    overflow: visible;
-    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 */
-  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:308px;
-  padding: 16px 0;
-  color: #424242;
-}
-
-.mapCard .title {
-  word-wrap: break-word;
-  font-size:18px;
-  line-height:22px;
-  height: 44px;
-  display:block;
-  padding: 0 16px;
-  text-align: center;
-  -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+ */
-  font-family: 'din-regular', sans-serif;
-}
-
-.mapCard .mapScreenshot {
-  width: 188px;
-  height: 126px;
-  padding: 8px 16px;
-}
-.mapCard .mapScreenshot img {
-  width: 188px;
-  height: 126px;
-  border-radius: 2px;
-}
-
-.mapCard .scroll {
-   display:block;
-   -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+ */
-   padding:0 16px 8px;
-   font-family: helvetica, sans-serif;
-   font-style: italic;
-   font-size: 12px;
-   word-wrap: break-word;
-}
-.mCS_no_scrollbar {
-  padding-right: 5px;
-}
-
-.mapCard .mapMetadata {
-  font-family: 'din-regular', sans-serif;
-  font-size: 12px;
-  position:relative;
-  border-top: 1px solid #BDBDBD;
-  -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 .metadataSection {
-  padding: 8px 16px 0 16px;
-  width: 78px;
-  float: left;
-}
-
-.mapPermission {
-  font-family: 'din-medium', sans-serif;
-}
-.cCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #DB5D5D;
-}
-.tCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #4FC059;
-}
-.sCountColor {
-  font-family: 'din-medium', sans-serif;
-  color: #DAB539;
-}
 
 
 /* mapper card */

app/assets/stylesheets/mapcard.scss.erb

@@ -0,0 +1,144 @@
+/* Map Cards */
+
+.map {
+    display:inline-block;
+    width:220px;
+    height:340px;
+    font-size: 12px;
+    text-align: left;
+    overflow: visible;
+    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.newMap {
+  float: left;
+  position: relative;
+}
+.map.newMap:hover {
+  background: #dcdcdc;
+}
+.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 {
+  position:relative;
+  width:100%;
+  height:308px;
+  padding: 0 0 16px 0;
+  color: #424242;
+
+.mapScreenshot {
+  width: 100%;
+  height: 220px;
+}
+
+.mapScreenshot img {
+  width: 100%;
+}
+
+.title {
+  word-wrap: break-word;
+  font-size:18px;
+  line-height:22px;
+  height: 71px;
+  display:table;
+  padding: 0 16px;
+  font-family: 'din-regular', sans-serif;
+  margin: 0 auto;
+
+  .innerTitle {
+    display: table-cell;
+    vertical-align: middle;
+    text-align: center;
+  }
+}
+
+.creatorAndPerm {
+  padding: 8px;
+}
+
+.creatorImage {
+  display: inline-block;
+  border-radius: 16px;
+  vertical-align: middle;
+  width: 32px;
+  height: 32px;
+}
+
+span.creatorName {
+  margin-left: 8px;
+}
+
+
+.scroll {
+   display:block;
+   font-family: helvetica, sans-serif;
+   font-size: 12px;
+   word-wrap: break-word;
+   text-align: center;
+   margin-top: 16px;
+}
+
+&:hover .mainContent {
+  filter: blur(2px);
+}
+
+&:hover .mapMetadata {
+  display: block;
+}
+
+.mapMetadata {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 40px 20px 0;
+  height: 300px;
+  font-family: 'din-regular', sans-serif;
+  font-size: 12px;
+  color: #FFF;
+  background: -moz-linear-gradient(top,  rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.43) 81%, rgba(0,0,0,0) 100%);
+  background: -webkit-linear-gradient(top,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
+  background: linear-gradient(to bottom,  rgba(0,0,0,0.65) 0%,rgba(0,0,0,0.43) 81%,rgba(0,0,0,0) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
+}
+
+.metadataSection {
+  padding: 16px 0;
+  width: 90px;
+  float: left;
+  font-family: 'din-medium', sans-serif;
+  text-align: center;
+}
+
+}
+

app/models/map.rb

@@ -19,10 +19,10 @@ class Map < ApplicationRecord
   # This method associates the attribute ":image" with a file attachment
   has_attached_file :screenshot,
     styles: {
-      thumb: ['188x126#', :png]
+      thumb: ['220x220#', :png]
       #:full => ['940x630#', :png]
     },
-    default_url: 'https://s3.amazonaws.com/metamaps-assets/site/missing-map-white.png'
+    default_url: 'https://s3.amazonaws.com/metamaps-assets/site/missing-map-square.png'
 
   validates :name, presence: true
   validates :arranged, inclusion: { in: [true, false] }
@@ -59,13 +59,17 @@ class Map < ApplicationRecord
   delegate :name, to: :user, prefix: true
 
   def user_image
-    user.image.url
+    user.image.url(:thirtytwo)
   end
 
   def contributor_count
     contributors.length
   end
 
+  def star_count
+    stars.length
+  end
+
   def collaborator_ids
     collaborators.map(&:id)
   end
@@ -87,7 +91,7 @@ class Map < ApplicationRecord
   end
 
   def as_json(_options = {})
-    json = super(methods: [:user_name, :user_image, :topic_count, :synapse_count, :contributor_count, :collaborator_ids, :screenshot_url], except: [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at])
+    json = super(methods: [:user_name, :user_image, :star_count, :topic_count, :synapse_count, :contributor_count, :collaborator_ids, :screenshot_url], except: [:screenshot_content_type, :screenshot_file_size, :screenshot_file_name, :screenshot_updated_at])
     json[:created_at_clean] = created_at_str
     json[:updated_at_clean] = updated_at_str
     json

frontend/src/components/Maps/MapCard.js

@@ -12,7 +12,7 @@ class MapCard extends Component {
     const d = map.get('desc')
 
     const maxNameLength = 32
-    const maxDescLength = 118
+    const maxDescLength = 236
     const truncatedName = n ? (n.length > maxNameLength ? n.substring(0, maxNameLength) + '...' : n) : ''
     const truncatedDesc = d ? (d.length > maxDescLength ? d.substring(0, maxDescLength) + '...' : d) : ''
     const editPermission = map.authorizeToEdit(currentUser) ? 'canEdit' : 'cannotEdit'
@@ -21,42 +21,43 @@ class MapCard extends Component {
       <div className="map" id={ map.id }>
         <a href={ '/maps/' + map.id } data-router="true">
           <div className={ 'permission ' + editPermission }>
-            <div className="mapCard">
+            <div className='mapCard'>
-              <span className="title" title={ map.get('name') }>
+              <div className='mainContent'>
-                { truncatedName }
+                <div className='mapScreenshot'>
-              </span>
+                  <img src={ map.get('screenshot_url') } />
-              <div className="mapScreenshot">
+                </div>
-                <img src={ map.get('screenshot_url') } />
+                <div className='title' title={ map.get('name') }>
-              </div>
+                  <div className='innerTitle'>{ truncatedName }</div>
-              <div className="scroll">
+                </div>
-                <div className="desc">
+                <div className='creatorAndPerm'>
-                  { truncatedDesc }
+                  <img className='creatorImage' src={ map.get('user_image') } />  
-                  <div className="clearfloat"></div>
+                  <span className='creatorName'>{ map.get('user_name') }</span>
                 </div>
               </div>
               <div className="mapMetadata">
-                <div className="metadataSection">
+                <div className="metadataSection numContributors">
-                  <span className="cCountColor">
+                  { map.get('contributor_count') }<br/>
-                    { map.get('contributor_count') }
+                  { map.get('contributor_count') === 1 ? 'contributor' : 'contributors' }
-                  </span>
-                  { map.get('contributor_count') === 1 ? ' contributor' : ' contributors' }
                 </div>
-                <div className="metadataSection">
+                <div className="metadataSection numTopics">
-                  <span className="tCountColor">
+                  { map.get('topic_count') }<br/>
-                    { map.get('topic_count') }
+                  { map.get('topic_count') === 1 ? 'topic' : 'topics' }
-                  </span>
-                  { map.get('topic_count') === 1 ? ' topic' : ' topics' }
-                  </div>
-                <div className="metadataSection mapPermission">
-                  { map.get('permission') ? capitalize(map.get('permission')) : 'Commons' }
                 </div>
-                <div className="metadataSection">
+                <div className="metadataSection numStars">
-                  <span className="sCountColor">
+                  { map.get('star_count') }<br/>
-                    { map.get('synapse_count') }
+                  { map.get('star_count') === 1 ? 'star' : 'stars' }
-                  </span>
+                </div>
-                  { map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
+                <div className="metadataSection numSynapses">
+                  { map.get('synapse_count') }<br/>
+                  { map.get('synapse_count') === 1 ? 'synapse' : 'synapses' }
                 </div>
                 <div className="clearfloat"></div>
+                <div className="scroll">
+                  <div className="desc">
+                    { truncatedDesc }
+                    <div className="clearfloat"></div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>