scssify a bunch
This commit is contained in:
Devin Howard
parent
b9e95355e3
commit
fa283ea484
2 changed files with 203 additions and 168 deletions
|
|
@ -185,123 +185,215 @@
|
|||
}
|
||||
|
||||
.CardOnGraph .links {
|
||||
position:relative;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #BDBDBD;
|
||||
border-top: 1px solid #BDBDBD;
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.linkItem {
|
||||
float:left;
|
||||
height:46px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
color: #424242;
|
||||
font-size: 14px;
|
||||
line-height:14px;
|
||||
height:12px;
|
||||
padding:17px 0;
|
||||
}
|
||||
.linkItem a {
|
||||
color: #424242;
|
||||
}
|
||||
|
||||
.CardOnGraph .icon {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:1;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.contributor {
|
||||
.contributorIcon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
span {
|
||||
font-family: 'din-regular', sans-serif;
|
||||
.linkItem {
|
||||
float:left;
|
||||
height:46px;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
color: #424242;
|
||||
font-size: 14px;
|
||||
line-height:14px;
|
||||
height:12px;
|
||||
padding:17px 0;
|
||||
|
||||
a {
|
||||
color: #424242;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.linkItem.mapCount {
|
||||
margin-left: 12px;
|
||||
width: 24px;
|
||||
padding:17px 0 17px 36px;
|
||||
}
|
||||
.linkItem.mapCount .mapCountIcon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.linkItem.mapCount:hover .mapCountIcon {
|
||||
background-position: 0 -32px;
|
||||
}
|
||||
.icon {
|
||||
position:absolute;
|
||||
width:100%;
|
||||
z-index:1;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
left: -16px;
|
||||
}
|
||||
|
||||
.contributor {
|
||||
margin-left: 24px;
|
||||
bottom: 7px;
|
||||
|
||||
.linkItem.mapCount:hover .hoverTip {
|
||||
display: block;
|
||||
}
|
||||
.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
|
||||
top: 44px;
|
||||
left: 0px;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.contributorIcon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
border-radius: 14px;
|
||||
margin: 5px;
|
||||
}
|
||||
span {
|
||||
font-family: 'din-regular', sans-serif;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hoverTip {
|
||||
white-space: nowrap;
|
||||
font-family: 'din-regular';
|
||||
top: 44px;
|
||||
left: 0px;
|
||||
font-size: 12px !important;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
line-height: 17px;
|
||||
padding: 3px 5px 2px;
|
||||
z-index: 100;
|
||||
}
|
||||
.contributorIcon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.contributorName {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
text-align: center;
|
||||
color: white;
|
||||
border-radius: 2px;
|
||||
font-family: din-regular;
|
||||
line-height: 15px;
|
||||
font-size: 12px;
|
||||
padding: 3px 5px 2px;
|
||||
white-space: nowrap;
|
||||
margin-top: 36px;
|
||||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.CardOnGraph .mapCount .tip:before, .CardOnGraph .mapCount .hoverTip: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 {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.CardOnGraph .mapCount .tip li {
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 6px 10px;
|
||||
display: block;
|
||||
height: 14px;
|
||||
font-family: 'din-regular', helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
}
|
||||
.mapCount {
|
||||
margin-left: 48px;
|
||||
width: 24px;
|
||||
padding:17px 0 17px 36px;
|
||||
|
||||
.CardOnGraph .mapCount li.hideExtra {
|
||||
display: none;
|
||||
.mapCountIcon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover .mapCountIcon {
|
||||
background-position: 0 -32px;
|
||||
}
|
||||
|
||||
.tip, .hoverTip {
|
||||
top: 44px;
|
||||
left: 0px;
|
||||
font-size: 12px !important;
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
.hoverTip {
|
||||
white-space: nowrap;
|
||||
font-family: 'din-regular';
|
||||
top: 44px;
|
||||
left: 0px;
|
||||
font-size: 12px !important;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: black;
|
||||
color: white;
|
||||
border-radius: 4px;
|
||||
line-height: 17px;
|
||||
padding: 3px 5px 2px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:hover .hoverTip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tip a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tip a:hover {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.tip li {
|
||||
list-style-type: none;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding: 6px 10px;
|
||||
display: block;
|
||||
height: 14px;
|
||||
font-family: 'din-regular', helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li.hideExtra {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.synapseCount {
|
||||
margin-left: 2px;
|
||||
width: 24px;
|
||||
padding:17px 0 17px 32px;
|
||||
|
||||
.synapseCountIcon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
}
|
||||
hover .synapseCountIcon {
|
||||
background-position: 0 -32px;
|
||||
}
|
||||
.tip {
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: auto;
|
||||
top: 44px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
font-size: 12px !important;
|
||||
font-family: 'din-regular';
|
||||
line-height: 12px;
|
||||
padding: 4px 4px 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&:hover .tip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tip:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-top: -8px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 4px solid black;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.showMore {
|
||||
|
|
@ -309,66 +401,6 @@
|
|||
color: #4FC059;
|
||||
}
|
||||
|
||||
.mapCount .tip a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mapCount .tip a:hover {
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
|
||||
.linkItem.synapseCount {
|
||||
margin-left: 2px;
|
||||
width: 24px;
|
||||
padding:17px 0 17px 32px;
|
||||
}
|
||||
.linkItem.synapseCount .synapseCountIcon {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0;
|
||||
}
|
||||
.linkItem.synapseCount:hover .synapseCountIcon {
|
||||
background-position: 0 -32px;
|
||||
}
|
||||
|
||||
.CardOnGraph .synapseCount .tip {
|
||||
position: absolute;
|
||||
background: black;
|
||||
width: auto;
|
||||
top: 44px;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
border-radius: 2px;
|
||||
font-size: 12px !important;
|
||||
font-family: 'din-regular';
|
||||
line-height: 12px;
|
||||
padding: 4px 4px 4px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.CardOnGraph .synapseCount:hover .tip {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.CardOnGraph .synapseCount .tip:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
margin-top: -8px;
|
||||
margin-left: 6px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 4px solid black;
|
||||
border-left: 5px solid transparent;
|
||||
border-right: 5px solid transparent;
|
||||
}
|
||||
|
||||
|
||||
.mapPerm {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
|
|
@ -326,17 +326,20 @@ class ReactTopicCard extends Component {
|
|||
const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
|
||||
const values = funcs.buildObject(topic, ActiveMapper)
|
||||
var authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
|
||||
|
||||
let classname = 'permission'
|
||||
if (authorizedToEdit) classname += ' canEdit'
|
||||
else classname += ' cannotEdit'
|
||||
if (authorizedToEdit) {
|
||||
classname += ' canEdit'
|
||||
} else {
|
||||
classname += ' cannotEdit'
|
||||
}
|
||||
|
||||
if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
|
||||
const hasAttachment = topic.get('link') && topic.get('link') !== ''
|
||||
|
||||
return (
|
||||
<div className={classname}>
|
||||
<div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${values.id}`}>
|
||||
<div className="metacodeImage" style={{backgroundImage: `url(${values.imgsrc})`}}></div>
|
||||
<span className="metacodeName">{values.metacode}</span>
|
||||
<span className="title">
|
||||
<div className="titleWrapper" id="titleActivator">
|
||||
<span className="best_in_place best_in_place_name">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue