From 332bb2ec0898e16269817c5b6c9700d3bf8cc2a5 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Sun, 16 Oct 2016 23:46:55 -0400 Subject: [PATCH] Map Card changes (#769) * map card rewrite underway * star count * css fix --- app/assets/stylesheets/base.css.erb | 152 +----------------------- app/assets/stylesheets/mapcard.scss.erb | 144 ++++++++++++++++++++++ app/models/map.rb | 12 +- frontend/src/components/Maps/MapCard.js | 61 +++++----- 4 files changed, 185 insertions(+), 184 deletions(-) create mode 100644 app/assets/stylesheets/mapcard.scss.erb diff --git a/app/assets/stylesheets/base.css.erb b/app/assets/stylesheets/base.css.erb index 6cfb6b57..aa2c96db 100644 --- a/app/assets/stylesheets/base.css.erb +++ b/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 */ diff --git a/app/assets/stylesheets/mapcard.scss.erb b/app/assets/stylesheets/mapcard.scss.erb new file mode 100644 index 00000000..529257ed --- /dev/null +++ b/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; +} + +} + diff --git a/app/models/map.rb b/app/models/map.rb index cdd6b333..3f5a0a16 100644 --- a/app/models/map.rb +++ b/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 diff --git a/frontend/src/components/Maps/MapCard.js b/frontend/src/components/Maps/MapCard.js index e31ede18..3a1557ee 100644 --- a/frontend/src/components/Maps/MapCard.js +++ b/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 {
-
- - { truncatedName } - -
- -
-
-
- { truncatedDesc } -
+
+
+
+ +
+
+
{ truncatedName }
+
+
+ + { map.get('user_name') }
-
- - { map.get('contributor_count') } - - { map.get('contributor_count') === 1 ? ' contributor' : ' contributors' } +
+ { map.get('contributor_count') }
+ { map.get('contributor_count') === 1 ? 'contributor' : 'contributors' }
-
- - { map.get('topic_count') } - - { map.get('topic_count') === 1 ? ' topic' : ' topics' } -
-
- { map.get('permission') ? capitalize(map.get('permission')) : 'Commons' } +
+ { map.get('topic_count') }
+ { map.get('topic_count') === 1 ? 'topic' : 'topics' }
-
- - { map.get('synapse_count') } - - { map.get('synapse_count') === 1 ? ' synapse' : ' synapses' } +
+ { map.get('star_count') }
+ { map.get('star_count') === 1 ? 'star' : 'stars' } +
+
+ { map.get('synapse_count') }
+ { map.get('synapse_count') === 1 ? 'synapse' : 'synapses' }
+
+
+ { truncatedDesc } +
+
+