added user image stack for map search results and associated tooltip

This commit is contained in:
Bashar Jabbour 2014-11-22 19:35:03 -05:00
parent e9a39f9838
commit 23510f2f87
3 changed files with 78 additions and 4 deletions

View file

@ -220,10 +220,23 @@
top: 40px !important; top: 40px !important;
background: #F5F5F5; background: #F5F5F5;
width: 472px; width: 472px;
overflow-y: auto; overflow-y: visible;
overflow-x: hidden; overflow-x: visible;
box-shadow: 0 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); box-shadow: 0 1px 1.5px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24);
} }
.autoOptions #mapContribs {
width: 15px;
height: 15px;
border: 1px solid #424242;
margin-top: 4px;
margin-left: 4px;
}
.mapContributorsIcon span {
margin-left: 5px;
}
.searchHeader { .searchHeader {
height: 42px; height: 42px;
width: 100%; width: 100%;
@ -468,6 +481,11 @@
.sidebarSearch .topicOriginatorIcon img { .sidebarSearch .topicOriginatorIcon img {
border-radius: 9px; border-radius: 9px;
} }
.sidebarSearch .topicOriginatorIcon .tip {
margin-right: -147px;
top: 1px;
}
.sidebarSearch .tip { .sidebarSearch .tip {
position: absolute; position: absolute;
background: #424242; background: #424242;
@ -486,6 +504,47 @@
.sidebarSearch .hoverForTip:hover .tip { .sidebarSearch .hoverForTip:hover .tip {
display: block; display: block;
} }
.sidebarSearch .mapContributorsIcon .tip {
margin-right: -144px;
top: -11px;
padding-top: 3px;
}
.sidebarSearch .hoverForTip .tip li {
padding-left: 28px;
padding-top: 4px;
}
.tipUserImage {
position: absolute;
top: 4px;
left: 7px;
border-radius: 14px;
}
.sidebarSearch .hoverForTip .tip:before {
content: '';
position: absolute;
width: 0;
height: 0;
border-right: 4px solid #424242;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.sidebarSearch .mapContributorsIcon .tip:before {
top: 71px;
left: -4px;
margin-top: -53px;
}
.sidebarSearch .topicOriginatorIcon .tip:before {
top: 58px;
left: -4px;
margin-top: -53px;
}
.sidebarSearch .mapContributorsIcon .mapContributors { .sidebarSearch .mapContributorsIcon .mapContributors {
top: auto; top: auto;
right: 0; right: 0;

View file

@ -13,6 +13,7 @@ module MapsHelper
map['topicCount'] = m.topics.count map['topicCount'] = m.topics.count
map['synapseCount'] = m.synapses.count map['synapseCount'] = m.synapses.count
map['contributorCount'] = m.contributors.count map['contributorCount'] = m.contributors.count
map[''] = m.contributors[0].image.url(:square)
map['rtype'] = "map" map['rtype'] = "map"
contributorList = m.user.name + ' created this map. ' contributorList = m.user.name + ' created this map. '
@ -28,6 +29,15 @@ module MapsHelper
end end
map['contributorList'] = contributorList map['contributorList'] = contributorList
contributorTip = ''
if m.contributors.count > 0
m.contributors.each_with_index do |c, index|
userImage = c.image.url(:square)
name = c.name
contributorTip += '<li> <img class="rtUserImage" width="25" height="25" src=' + userImage + ' />' + name + '</li>'
end
end
map['contributorTip'] = contributorTip
temp.push map temp.push map
end end
return temp return temp

View file

@ -121,8 +121,13 @@
{{synapseCount}} {{synapseCount}}
</div> </div>
<div class="mapContributorsIcon hoverForTip"> <div class="mapContributorsIcon hoverForTip">
<span class="tip mapContributors">{{contributorList}}</span> <img id="mapContribs" width="25" height="25" src="{{mapContributorImage}}" />
{{contributorCount}} <div class="tip">
<ul>
{{{contributorTip}}}
</ul>
</div>
<span>{{contributorCount}}</span>
</div> </div>
<div class="mapPermission {{permission}}"> <div class="mapPermission {{permission}}">
</div> </div>