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 {
|
.CardOnGraph .links {
|
||||||
position:relative;
|
position: relative;
|
||||||
border-bottom: 1px solid #BDBDBD;
|
border-bottom: 1px solid #BDBDBD;
|
||||||
border-top: 1px solid #BDBDBD;
|
border-top: 1px solid #BDBDBD;
|
||||||
background-color: #e0e0e0;
|
background-color: #e0e0e0;
|
||||||
}
|
|
||||||
|
|
||||||
.linkItem {
|
.linkItem {
|
||||||
float:left;
|
float:left;
|
||||||
height:46px;
|
height:46px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #424242;
|
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;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
line-height:14px;
|
||||||
|
height:12px;
|
||||||
|
padding:17px 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #424242;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.linkItem.mapCount {
|
.icon {
|
||||||
margin-left: 12px;
|
position:absolute;
|
||||||
width: 24px;
|
width:100%;
|
||||||
padding:17px 0 17px 36px;
|
z-index:1;
|
||||||
}
|
padding: 0;
|
||||||
.linkItem.mapCount .mapCountIcon {
|
height: 48px;
|
||||||
position: absolute;
|
left: -16px;
|
||||||
top: 8px;
|
}
|
||||||
left: 0;
|
|
||||||
width: 32px;
|
.contributor {
|
||||||
height: 32px;
|
margin-left: 24px;
|
||||||
background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
|
bottom: 7px;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: 0 0;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.linkItem.mapCount:hover .mapCountIcon {
|
|
||||||
background-position: 0 -32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.linkItem.mapCount:hover .hoverTip {
|
.contributorIcon {
|
||||||
display: block;
|
display: inline-block;
|
||||||
}
|
vertical-align: middle;
|
||||||
.CardOnGraph .mapCount .tip, .CardonGraph .mapCount .hoverTip {
|
border-radius: 14px;
|
||||||
top: 44px;
|
margin: 5px;
|
||||||
left: 0px;
|
}
|
||||||
font-size: 12px !important;
|
span {
|
||||||
}
|
font-family: 'din-regular', sans-serif;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
.hoverTip {
|
.contributorIcon {
|
||||||
white-space: nowrap;
|
position: absolute;
|
||||||
font-family: 'din-regular';
|
top: 8px;
|
||||||
top: 44px;
|
left: 0;
|
||||||
left: 0px;
|
border-radius: 16px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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 {
|
&:hover .contributorName {
|
||||||
content: '';
|
display: block;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CardOnGraph .mapCount .tip li {
|
.mapCount {
|
||||||
list-style-type: none;
|
margin-left: 48px;
|
||||||
white-space: nowrap;
|
width: 24px;
|
||||||
overflow: hidden;
|
padding:17px 0 17px 36px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.CardOnGraph .mapCount li.hideExtra {
|
.mapCountIcon {
|
||||||
display: none;
|
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 {
|
.showMore {
|
||||||
|
|
@ -309,66 +401,6 @@
|
||||||
color: #4FC059;
|
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 {
|
.mapPerm {
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
|
|
||||||
|
|
@ -326,17 +326,20 @@ class ReactTopicCard extends Component {
|
||||||
const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
|
const { linkEdit, embedlyLinkLoaded, embedlyLinkStarted, embedlyLinkError } = this.state
|
||||||
const values = funcs.buildObject(topic, ActiveMapper)
|
const values = funcs.buildObject(topic, ActiveMapper)
|
||||||
var authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
|
var authorizedToEdit = topic.authorizeToEdit(ActiveMapper)
|
||||||
|
|
||||||
let classname = 'permission'
|
let classname = 'permission'
|
||||||
if (authorizedToEdit) classname += ' canEdit'
|
if (authorizedToEdit) {
|
||||||
else classname += ' cannotEdit'
|
classname += ' canEdit'
|
||||||
|
} else {
|
||||||
|
classname += ' cannotEdit'
|
||||||
|
}
|
||||||
|
|
||||||
if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
|
if (topic.authorizePermissionChange(ActiveMapper)) classname += ' yourTopic'
|
||||||
const hasAttachment = topic.get('link') && topic.get('link') !== ''
|
const hasAttachment = topic.get('link') && topic.get('link') !== ''
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classname}>
|
<div className={classname}>
|
||||||
<div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${values.id}`}>
|
<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">
|
<span className="title">
|
||||||
<div className="titleWrapper" id="titleActivator">
|
<div className="titleWrapper" id="titleActivator">
|
||||||
<span className="best_in_place best_in_place_name">
|
<span className="best_in_place best_in_place_name">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue