Map Card changes (#769)
* map card rewrite underway * star count * css fix
This commit is contained in:
Connor Turland
GitHub
parent
4f6dae304c
commit
332bb2ec08
|
|
@ -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 */
|
||||
|
|
|
|||
144
app/assets/stylesheets/mapcard.scss.erb
Normal file
144
app/assets/stylesheets/mapcard.scss.erb
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<span className="title" title={ map.get('name') }>
|
||||
{ truncatedName }
|
||||
</span>
|
||||
<div className="mapScreenshot">
|
||||
<img src={ map.get('screenshot_url') } />
|
||||
</div>
|
||||
<div className="scroll">
|
||||
<div className="desc">
|
||||
{ truncatedDesc }
|
||||
<div className="clearfloat"></div>
|
||||
<div className='mapCard'>
|
||||
<div className='mainContent'>
|
||||
<div className='mapScreenshot'>
|
||||
<img src={ map.get('screenshot_url') } />
|
||||
</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">
|
||||
<span className="cCountColor">
|
||||
{ map.get('contributor_count') }
|
||||
</span>
|
||||
{ map.get('contributor_count') === 1 ? ' contributor' : ' contributors' }
|
||||
<div className="metadataSection numContributors">
|
||||
{ map.get('contributor_count') }<br/>
|
||||
{ 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 className="metadataSection numTopics">
|
||||
{ map.get('topic_count') }<br/>
|
||||
{ map.get('topic_count') === 1 ? 'topic' : 'topics' }
|
||||
</div>
|
||||
<div className="metadataSection">
|
||||
<span className="sCountColor">
|
||||
{ map.get('synapse_count') }
|
||||
</span>
|
||||
{ map.get('synapse_count') === 1 ? ' synapse' : ' synapses' }
|
||||
<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="desc">
|
||||
{ truncatedDesc }
|
||||
<div className="clearfloat"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue