glenux-contrib/metamaps--metamaps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

metacode image working a bit better

Browse source
This commit is contained in:
Devin Howard 2017-01-24 17:55:01 -05:00
parent fa283ea484
commit 35f5a7a7c2
2 changed files with 40 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
app/assets/stylesheets/base.scss.erb
View file

@ -191,15 +191,12 @@
background-color: #e0e0e0; background-color: #e0e0e0;
.linkItem { .linkItem {
float:left; float: left;
height:46px;
z-index: 1; z-index: 1;
position: relative; position: relative;
color: #424242; color: #424242;
font-size: 14px; font-size: 14px;
line-height:14px; line-height: 14px;
height:12px;
padding:17px 0;
a { a {
color: #424242; color: #424242;
@ -207,36 +204,37 @@
} }
.icon { .icon {
position:absolute; position: absolute;
width:100%; z-index: 1;
z-index:1;
padding: 0; padding: 0;
height: 48px; height: 48px;
width: 100%;
.metacodeImage {
position: relative;
left: -16px; left: -16px;
} }
}
.contributor { .contributor {
margin-left: 24px;
bottom: 7px; bottom: 7px;
margin-left: 20px;
.contributorIcon { .contributorIcon {
display: inline-block; position: relative;
vertical-align: middle; vertical-align: middle;
border-radius: 14px; border-radius: 16px;
margin: 5px; margin: 5px;
}
span {
font-family: 'din-regular', sans-serif;
font-size: 14px;
}
.contributorIcon {
position: absolute;
top: 8px; top: 8px;
left: 0; left: 0;
border-radius: 16px; border-radius: 16px;
} }
span {
font-family: 'din-regular', sans-serif;
font-size: 14px;
}
.contributorName { .contributorName {
display: none; display: none;
position: absolute; position: absolute;
@ -249,8 +247,20 @@
font-size: 12px; font-size: 12px;
padding: 3px 5px 2px; padding: 3px 5px 2px;
white-space: nowrap; white-space: nowrap;
margin-top: 36px; margin-top: 8px;
margin-left: -32px;
&:before {
content: '';
position: absolute;
top: 26px;
left: 10px;
margin-top: -30px;
width: 0;
height: 0;
border-bottom: 4px solid #000000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
}
} }
&:hover .contributorName { &:hover .contributorName {
@ -259,8 +269,6 @@
} }
.mapCount { .mapCount {
margin-left: 48px;
width: 24px;
padding:17px 0 17px 36px; padding:17px 0 17px 36px;
.mapCountIcon { .mapCountIcon {

16
frontend/src/components/TopicCard.js
View file

@ -49,9 +49,8 @@ var funcs = {
nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown) nodeValues.desc_html = Util.mdToHTML(nodeValues.desc_markdown)
return nodeValues return nodeValues
}, },
bindShowCardListeners: function(topic) { bindShowCardListeners: function(topic, ActiveMapper) {
var self = TopicCard var authorized = topic.authorizeToEdit(ActiveMapper)
var selectingMetacode = false var selectingMetacode = false
// attach the listener that shows the metacode title when you hover over the image // attach the listener that shows the metacode title when you hover over the image
$('.showcard .metacodeImage').mouseenter(function() { $('.showcard .metacodeImage').mouseenter(function() {
@ -133,7 +132,7 @@ var funcs = {
}) })
$('.metacodeSelect li li').click(metacodeLiClick) $('.metacodeSelect li li').click(metacodeLiClick)
var bipName = $(showCard).find('.best_in_place_name') var bipName = $('.showcard').find('.best_in_place_name')
bipName.bind('best_in_place:activate', function() { bipName.bind('best_in_place:activate', function() {
var $el = bipName.find('textarea') var $el = bipName.find('textarea')
var el = $el[0] var el = $el[0]
@ -165,7 +164,7 @@ var funcs = {
}) })
// this is for all subsequent renders after in-place editing the desc field // this is for all subsequent renders after in-place editing the desc field
const bipDesc = $(showCard).find('.best_in_place_desc') const bipDesc = $('.showcard').find('.best_in_place_desc')
bipDesc.bind('ajax:success', function() { bipDesc.bind('ajax:success', function() {
var desc = $(this).html() === $(this).data('bip-nil') var desc = $(this).html() === $(this).data('bip-nil')
? '' ? ''
@ -218,7 +217,7 @@ var funcs = {
} }
// ability to change permission // ability to change permission
var selectingPermission = false var selectingPermission = false
if (topic.authorizePermissionChange(Active.Mapper)) { if (topic.authorizePermissionChange(ActiveMapper)) {
$('.showcard .yourTopic .mapPerm').click(openPermissionSelect) $('.showcard .yourTopic .mapPerm').click(openPermissionSelect)
$('.showcard').click(hidePermissionSelect) $('.showcard').click(hidePermissionSelect)
} }
@ -260,9 +259,10 @@ class ReactTopicCard extends Component {
} }
componentDidMount = () => { componentDidMount = () => {
const { topic } = this.props const { topic, ActiveMapper } = this.props
embedly('on', 'card.rendered', this.embedlyCardRendered) embedly('on', 'card.rendered', this.embedlyCardRendered)
topic.get('link') && topic.get('link') !== '' && this.loadLink() topic.get('link') && topic.get('link') !== '' && this.loadLink()
funcs.bindShowCardListeners(topic, ActiveMapper)
} }
componentWillUnmount = () => { componentWillUnmount = () => {
@ -363,7 +363,7 @@ class ReactTopicCard extends Component {
<div className="linkItem mapCount"> <div className="linkItem mapCount">
<div className="mapCountIcon"></div> <div className="mapCountIcon"></div>
{values.map_count} {values.map_count}
<div className ="hoverTip">Click to see which maps topic appears on</div> <div className="hoverTip">Click to see which maps topic appears on</div>
<div className="tip"><ul>{values.inmaps}</ul></div> <div className="tip"><ul>{values.inmaps}</ul></div>
</div> </div>
<a href={`/topics/${values.id}`} target="_blank" className="linkItem synapseCount"> <a href={`/topics/${values.id}`} target="_blank" className="linkItem synapseCount">