Map Card changes (#769)

* map card rewrite underway

* star count

* css fix
This commit is contained in:
Connor Turland 2016-10-16 23:46:55 -04:00 committed by GitHub
parent 4f6dae304c
commit 332bb2ec08
4 changed files with 185 additions and 184 deletions

View file

@ -17,7 +17,6 @@
} }
#center-container { #center-container {
position:relative; position:relative;
height:100%; height:100%;
@ -592,10 +591,10 @@ background-color: #E0E0E0;
position: relative; position: relative;
} }
.CardOnGraph .hoverForTip:hover .tip, .mapCard .hoverForTip:hover .tip, #mapContribs:hover .tip { .CardOnGraph .hoverForTip:hover .tip, #mapContribs:hover .tip {
display:block; display:block;
} }
.CardOnGraph .tip, .mapCard .tip { .CardOnGraph .tip {
display:none; display:none;
position: absolute; position: absolute;
background: black; background: black;
@ -952,154 +951,7 @@ font-family: 'din-regular', helvetica, sans-serif;
background-position: 0 -24px; 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 */ /* mapper card */

View file

@ -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;
}
}

View file

@ -19,10 +19,10 @@ class Map < ApplicationRecord
# This method associates the attribute ":image" with a file attachment # This method associates the attribute ":image" with a file attachment
has_attached_file :screenshot, has_attached_file :screenshot,
styles: { styles: {
thumb: ['188x126#', :png] thumb: ['220x220#', :png]
#:full => ['940x630#', :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 :name, presence: true
validates :arranged, inclusion: { in: [true, false] } validates :arranged, inclusion: { in: [true, false] }
@ -59,13 +59,17 @@ class Map < ApplicationRecord
delegate :name, to: :user, prefix: true delegate :name, to: :user, prefix: true
def user_image def user_image
user.image.url user.image.url(:thirtytwo)
end end
def contributor_count def contributor_count
contributors.length contributors.length
end end
def star_count
stars.length
end
def collaborator_ids def collaborator_ids
collaborators.map(&:id) collaborators.map(&:id)
end end
@ -87,7 +91,7 @@ class Map < ApplicationRecord
end end
def as_json(_options = {}) 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[:created_at_clean] = created_at_str
json[:updated_at_clean] = updated_at_str json[:updated_at_clean] = updated_at_str
json json

View file

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