topic card design changes

app/assets/stylesheets/application.scss.erb

@@ -3150,8 +3150,15 @@ script.data-gratipay-username {
 }
 
 .topicFollow {
-    height: 48px;
+    height: 24px;
-    line-height: 48px;
+    line-height: 24px;
     cursor: pointer;
-    font-family: din-regular;
+    font-family: helvetica;
+    float: left;
+    width: 72px;
+    text-align: right;
+    padding: 12px 0;
+    color: #4fb5c0;
+    font-size: 13px;
+    font-weight: bold;
 }

app/assets/stylesheets/base.scss.erb

@@ -64,7 +64,6 @@
   display:block;
   position:relative;
   width:100%;
-  min-height:360px;
   z-index: 25;
 }
 .CardOnGraph.hasAttachment {
@@ -73,11 +72,10 @@
 
 .CardOnGraph .title {
   word-break: break-word;
-  font-size: 18px;
+  font-size: 20px;
-  line-height: 22px;
+  line-height: 24px;
   display: table;
-  padding: 8px 0 16px;
+  padding: 20px 0;
-  height: 80px;
   text-align: center;
   font-family: 'din-regular', sans-serif;
   width: 300px;
@@ -88,11 +86,6 @@
   display: table-cell;
   vertical-align: middle;
   padding: 0 16px;
-
-  &.riek-editing {
-    position: absolute;
-    top: 32px;
-  }
 }
 .canEdit #titleActivator:hover {
   background-image: url(<%= asset_data_uri('edit.png') %>);
@@ -104,9 +97,8 @@
 .showcard .title .riek-editing {
   font-family: 'din-regular', sans-serif;
   color: #424242;
-  font-size: 18px;
+  font-size: 20px;
-  line-height: 22px;
+  line-height: 24px;
-  height: 3em;
   padding: 5px 0;
   width: 100%;
   margin: 0;
@@ -120,11 +112,14 @@
 .CardOnGraph .scroll {
    display:block;
    padding: 8px 0 8px 16px;
-   height: 152px;
    font-size: 13px;
    line-height:15px;
    font-family: helvetica, sans-serif;
    overflow-y: auto;
+
+  p.emptyDesc {
+    color: rgba(66, 66, 66, 0.6);
+  }
 }
 .CardOnGraph.hasAttachment .scroll {
   height: auto;
@@ -180,7 +175,6 @@
   margin-top:2px;
   padding-right: 18px;
   margin-right: 8px;
-  min-height: 7em;
 }
 .canEdit .CardOnGraph .riek_desc:hover {
   background-image: url(<%= asset_data_uri('edit.png') %>);
@@ -195,6 +189,7 @@
 
 .CardOnGraph .links {
   position: relative;
+  z-index: 2;
 
   .linkItem {
     float: left;
@@ -212,32 +207,50 @@
   .icon {
     padding: 0;
     height: 48px;
+    margin-right: 10px;
 
     .metacodeImage {
       cursor: move;
       position: absolute;
-      left: -23px;
+      left: -18px;
-      top: 1px;
+      top: 6px;
-      width: 46px;
+      width: 36px;
-      height: 46px;
+      height: 36px;
-      background-size:46px 46px;
+      background-size:36px 36px;
       background-position:0 0;
       background-repeat:no-repeat;
     }
   }
+}
 
+.CardOnGraph .info {
+  position: relative;
+
+  .linkItem {
+    float: left;
+    z-index: 1;
+    position: relative;
+    color: rgba(66, 66, 66, 0.6);
+    font-size: 14px;
+    line-height: 14px;
+
+    a {
+      color: rgba(66, 66, 66, 0.6);
+    }
+  }
+ 
   .contributor {
     bottom: 7px;
-    margin-left: 40px;
+    margin-left: 16px;
 
     .contributorIcon {
       position: relative;
+      display: inline-block;
       vertical-align: middle;
       border-radius: 16px;
-      margin: 5px;
+      margin: 5px 5px 5px 0;
-      top: 8px;
+      top: 11px;
       left: 0;
-      border-radius: 16px;
     }
 
     span {
@@ -246,52 +259,34 @@
     }
 
     .contributorName {
-      display: none;
-      position: absolute;
-      background: black;
-      text-align: center;
-      color: white;
-      border-radius: 2px;
       font-family: din-regular;
-      line-height: 15px;
+      margin-top: 20px;
-      font-size: 12px;
+      display: inline-block;
-      padding: 3px 5px 2px;
+      vertical-align: middle;
+      width: 97px;
+      padding: 0 8px 0 4px;
       white-space: nowrap;
-      margin-top: 8px;
+      overflow: hidden;
-
+      text-overflow: ellipsis;
-      &: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;
     }
   }
 
   .mapCount {
-    padding:17px 0 17px 36px;
+    padding:17px 38px 17px 0;
-    margin-left: 12px;
+    width: 22px;
+    text-align: right;
 
     .mapCountIcon {
       position: absolute;
       top: 8px;
-      left: 0;
+      right: 0;
       width: 32px;
       height: 32px;
       background-image: url(<%= asset_data_uri('map32_sprite.png') %>);
       background-repeat: no-repeat;
       background-position: 0 0;
       cursor: pointer;
+      opacity: 0.6;
     }
 
     &:hover .mapCountIcon {
@@ -300,18 +295,18 @@
 
     .tip, .hoverTip {
       top: 44px;
-      left: 0px;
+      right: 0px;
       font-size: 12px !important;
 
       &:before {
         content: '';
         position: absolute;
         top: 26px;
-        left: 10px;
+        right: 10px;
         margin-top: -30px;
         width: 0;
         height: 0;
-        border-bottom: 4px solid #000000;
+        border-bottom: 4px solid #8A8A8A;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
       }
@@ -321,10 +316,9 @@
       white-space: nowrap;
       font-family: 'din-regular';
       top: 44px;
-      left: 0px;
       font-size: 12px !important;
       position: absolute;
-      background: black;
+      background: #8A8A8A;
       color: white;
       border-radius: 4px;
       line-height: 17px;
@@ -356,28 +350,31 @@
   }
 
   .synapseCount {
-    margin-left: 26px;
+    width: 22px;
-    width: 24px;
+    padding:17px 38px 17px 0;
-    padding:17px 0 17px 32px;
+    text-align: right;
+    margin-right: 4px;
 
     .synapseCountIcon {
       position: absolute;
       top: 8px;
-      left: 0;
+      right: 0;
       width: 32px;
       height: 32px;
       background-image: url(<%= asset_data_uri('synapse32_sprite.png') %>);
       background-repeat: no-repeat;
       background-position: 0 0;
+      opacity: 0.6;
     }
     hover .synapseCountIcon {
       background-position: 0 -32px;
     }
     .tip {
       position: absolute;
-      background: black;
+      background: #8A8A8A;
       width: auto;
       top: 44px;
+      right: 0px;
       color: white;
       white-space: nowrap;
       border-radius: 2px;
@@ -392,10 +389,10 @@
       content: '';
       position: absolute;
       margin-top: -8px;
-      margin-left: 6px;
+      right: 12px;
       width: 0;
       height: 0;
-      border-bottom: 4px solid black;
+      border-bottom: 4px solid #8A8A8A;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
     }
@@ -407,6 +404,10 @@
   color: #4FC059;
 }
 
+.linkItem.mapPerm {
+  margin-right: 8px;
+}
+
 .mapPerm {
   width: 32px;
   height: 32px;
@@ -428,14 +429,10 @@
 }
 
 .yourTopic .mapPerm:hover, .yourEdge .mapPerm:hover {
-  background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>);
-  background-position: -32px 0;
   cursor:pointer;
 }
 .yourTopic .mapPerm.minimize, .yourEdge .mapPerm.minimize {
- background-image: url(<%= asset_data_uri('arrowperms_sprite.png') %>) !important;
+  cursor: pointer;
-background-position: 0 0;
-cursor: pointer;
 }
 .mapPerm .permissionSelect {
   list-style: none;
@@ -474,23 +471,31 @@ cursor: pointer;
   font-family: 'din-regular';
   line-height: 24px;
   height: 26px;
-  font-size: 24px;
+  font-size: 18px;
-  padding: 13px 24px 9px 25px;
+  padding: 13px 24px 9px 24px;
   color: #424242;
+  width: 120px;
+  max-width: 120px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 }
 .permission.canEdit .metacodeTitle {
   cursor:pointer;
 }
 
 .permission.canEdit .expandMetacodeSelect {
-  position: absolute;
+  position: relative;
-  top: 18px;
+  top: 2px;
-  right: 4px;
+  left: 4px;
   width: 16px;
   height: 16px;
   background-image: url(<%= asset_data_uri('arrowright_sprite.png') %>);
   background-repeat: no-repeat;
   background-position: 0 -32px;
+  display: inline-block;
+  -webkit-transform: rotate(90deg);
+  transform: rotate(90deg);
 }
 .permission.canEdit .minimize .expandMetacodeSelect {
 
@@ -507,8 +512,8 @@ cursor: pointer;
   background: #EAEAEA;
   white-space: nowrap;
   position: absolute;
-  left: 300px;
+  top: 48px;
-  top: -1px;
+  box-shadow: 2px 2px 2px rgba(125, 125, 125, 0.23), -2px -1px 3px rgba(125, 125, 125, 0.16);
 }
 .CardOnGraph .metacodeSelect ul {
   position: relative;
@@ -601,9 +606,9 @@ background-color: #E0E0E0;
 }
 .CardOnGraph .tip {
  position: absolute;
- background: black;
+ background: #8A8A8A;
  top: 35px;
- left: 0;
+ right: 0;
  color: white;
  border-radius: 4px;
  font-size:15px !important;
@@ -682,9 +687,9 @@ background-color: #E0E0E0;
 }
 
 #addLinkInput input{
-padding: 9px 7px 9px 31px;
+padding: 9px 27px 9px 31px;
 height: 12px;
-width: 198px;
+width: 210px;
 margin: 0 0 0 0;
 border: none;
 outline: none;

frontend/src/Metamaps/DataModel/Map.js

@@ -35,7 +35,7 @@ const Map = Backbone.Model.extend({
     }
   },
   isFollowedBy: function(mapper) {
-    return mapper.get('follows') && mapper.get('follows').maps.indexOf(this.get('id')) > -1
+    return mapper && mapper.get('follows') && mapper.get('follows').maps.indexOf(this.get('id')) > -1
   },
   getUser: function() {
     return Mapper.get(this.get('user_id'))

frontend/src/Metamaps/DataModel/Topic.js

@@ -48,7 +48,7 @@ const Topic = Backbone.Model.extend({
     else return false
   },
   isFollowedBy: function(mapper) {
-    return mapper.get('follows') && mapper.get('follows').topics.indexOf(this.get('id')) > -1
+    return mapper && mapper.get('follows') && mapper.get('follows').topics.indexOf(this.get('id')) > -1
   },
   getDate: function() {},
   getMetacode: function() {

frontend/src/components/MetacodeSelect.js

@@ -12,6 +12,7 @@ import React, { PropTypes, Component } from 'react'
 
 class MetacodeSelect extends Component {
   render = () => {
+    if (!this.props.metacodeSets) return null
     return (
       <div id="metacodeOptions">
         <ul>

frontend/src/components/TopicCard/Desc.js

@@ -25,7 +25,7 @@ class MdTextArea extends RIETextArea {
 class Desc extends Component {
   render = () => {
     const descHTML = (!this.props.desc && this.props.authorizedToEdit)
-      ? '<p>Click to add description...</p>'
+      ? '<p class="emptyDesc">Edit the description...</p>'
       : Util.mdToHTML(this.props.desc)
 
     if (this.props.authorizedToEdit) {

frontend/src/components/TopicCard/Follow.js

@@ -2,16 +2,17 @@ import React, { PropTypes, Component } from 'react'
 
 class Follow extends Component {
   render = () => {
-    const { isFollowing, onTopicFollow } = this.props
+    const { ActiveMapper, isFollowing, onTopicFollow } = this.props
-    return <div className='topicFollow' onClick={onTopicFollow}>
+    return <div className='topicFollow' onClick={() => ActiveMapper && onTopicFollow()}>
-      {isFollowing ? 'Unfollow' : 'Follow'}
+      {ActiveMapper ? isFollowing ? 'Unfollow' : 'Follow' : ''}
     </div>
   }
 }
 
 Follow.propTypes = {
   isFollowing: PropTypes.bool,
-  onTopicFollow: PropTypes.func
+  onTopicFollow: PropTypes.func,
+  ActiveMapper: PropTypes.object
 }
 
 export default Follow

frontend/src/components/TopicCard/Info.js

@@ -0,0 +1,104 @@
+/* global $ */
+
+import React, { PropTypes, Component } from 'react'
+import { Link } from 'react-router'
+
+class Info extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      showInMaps: false,
+      showMoreMaps: false,
+      hoveringMapCount: false,
+      hoveringSynapseCount: false
+    }
+  }
+
+  toggleShowMoreMaps = e => {
+    e.stopPropagation()
+    e.preventDefault()
+    this.setState({ showMoreMaps: !this.state.showMoreMaps })
+  }
+
+  updateState = (key, value) => () => {
+    this.setState({ [key]: value })
+  }
+
+  inMaps = (topic) => {
+    const inmapsArray = topic.get('inmaps') || []
+    const inmapsLinks = topic.get('inmapsLinks') || []
+
+    let firstFiveLinks = []
+    let extraLinks = []
+    for (let i = 0; i < inmapsArray.length; i ++) {
+      if (i < 5) {
+        firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
+      } else {
+        extraLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
+      }
+    }
+
+    let output = []
+
+    firstFiveLinks.forEach(obj => {
+      output.push(<li key={obj.mapId}><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
+    })
+
+    if (extraLinks.length > 0) {
+      if (this.state.showMoreMaps) {
+        extraLinks.forEach(obj => {
+          output.push(<li key={obj.mapId} className="hideExtra extraText"><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
+        })
+      }
+      const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...`
+      output.push(<li key="showMore"><span className="showMore" onClick={this.toggleShowMoreMaps}>{text}</span></li>)
+    }
+
+    return output
+  }
+
+  render = () => {
+    const { topic } = this.props
+
+    return (
+      <div className="info">
+        <div className="linkItem contributor">
+                <a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank">
+                  <img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" />
+                  <div className="contributorName">{topic.get('user_name')}</div>
+                </a>
+              </div>
+       <a href={`/topics/${topic.id}`}
+          target="_blank"
+          className="linkItem synapseCount"
+          onMouseOver={this.updateState('hoveringSynapseCount', true)}
+          onMouseOut={this.updateState('hoveringSynapseCount', false)}
+        >
+          <div className="synapseCountIcon"></div>
+          {topic.get('synapse_count').toString()}
+          {this.state.hoveringSynapseCount && <div className="tip">Click to see this topics synapses</div>}
+        </a>
+         <div className="linkItem mapCount"
+          onMouseOver={this.updateState('hoveringMapCount', true)}
+          onMouseOut={this.updateState('hoveringMapCount', false)}
+          onClick={this.updateState('showInMaps', !this.state.showInMaps)}
+        >
+          <div className="mapCountIcon"></div>
+          {topic.get('map_count').toString()}
+          {!this.state.showInMaps && this.state.hoveringMapCount && (
+            <div className="hoverTip">Click to see which maps topic appears on</div>
+          )}
+          {this.state.showInMaps && <div className="tip"><ul>{this.inMaps(topic)}</ul></div>}
+        </div>
+        <div className="clearfloat"></div>
+      </div>
+    )
+  }
+}
+
+Info.propTypes = {
+  topic: PropTypes.object, // backbone object
+}
+
+export default Info

frontend/src/components/TopicCard/Links.js

@@ -26,9 +26,7 @@ class Links extends Component {
   }
 
   handleMetacodeBarClick = () => {
-    if (this.state.showMetacodeTitle) {
+    this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
-      this.setState({ showMetacodeSelect: !this.state.showMetacodeSelect })
-    }
   }
 
   render = () => {
@@ -41,17 +39,16 @@ class Links extends Component {
 
     return (
       <div className="links">
-        <div className="linkItem icon metacodeItem"
+        <div className="linkItem icon metacodeItem">
-          onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
+          <div className={`metacodeTitle mbg${metacode.get('id')}`}
-        >
+            onClick={() => authorizedToEdit && this.handleMetacodeBarClick()}
-          <div className={`metacodeTitle mbg${metacode.get('id')}`}>
+          >
             {metacode.get('name')}
             <div className="expandMetacodeSelect"/>
           </div>
           <div className="metacodeImage"
             style={{backgroundImage: `url(${metacode.get('icon')})`}}
             title="click and drag to move card"
-            onMouseEnter={() => this.setState({ showMetacodeTitle: true })}
           />
           <div className="metacodeSelect"
             style={{ display: this.state.showMetacodeSelect ? 'block' : 'none' }}
@@ -59,12 +56,12 @@ class Links extends Component {
             <MetacodeSelect onMetacodeSelect={this.handleMetacodeSelect} metacodeSets={this.props.metacodeSets} />
           </div>
         </div>  
+        <Follow ActiveMapper={ActiveMapper} isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
         <Permission
           permission={topic.get('permission')}
           authorizedToEdit={authorizedPermissionChange}
           updateTopic={this.props.updateTopic}
         />
-        <Follow isFollowing={isFollowing} onTopicFollow={wrappedTopicFollow} />
         <div className="clearfloat"></div>
       </div>
     )

frontend/src/components/TopicCard/index.js

@@ -5,62 +5,9 @@ import Title from './Title'
 import Links from './Links'
 import Desc from './Desc'
 import Attachments from './Attachments'
-import Follow from './Follow'
+import Info from './Info'
 
 class ReactTopicCard extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      showInMaps: false,
-      showMoreMaps: false,
-      hoveringMapCount: false,
-      hoveringSynapseCount: false
-    }
-  }
-
-  toggleShowMoreMaps = e => {
-    e.stopPropagation()
-    e.preventDefault()
-    this.setState({ showMoreMaps: !this.state.showMoreMaps })
-  }
-
-  updateState = (key, value) => () => {
-    this.setState({ [key]: value })
-  }
-
-  inMaps = (topic) => {
-    const inmapsArray = topic.get('inmaps') || []
-    const inmapsLinks = topic.get('inmapsLinks') || []
-
-    let firstFiveLinks = []
-    let extraLinks = []
-    for (let i = 0; i < inmapsArray.length; i ++) {
-      if (i < 5) {
-        firstFiveLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
-      } else {
-        extraLinks.push({ mapName: inmapsArray[i], mapId: inmapsLinks[i] })
-      }
-    }
-
-    let output = []
-
-    firstFiveLinks.forEach(obj => {
-      output.push(<li key={obj.mapId}><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
-    })
-
-    if (extraLinks.length > 0) {
-      if (this.state.showMoreMaps) {
-        extraLinks.forEach(obj => {
-          output.push(<li key={obj.mapId} className="hideExtra extraText"><Link to={`/maps/${obj.mapId}`}>{obj.mapName}</Link></li>)
-        })
-      }
-      const text = this.state.showMoreMaps ? 'See less...' : `See ${extraLinks.length} more...`
-      output.push(<li key="showMore"><span className="showMore" onClick={this.toggleShowMoreMaps}>{text}</span></li>)
-    }
-
-    return output
-  }
 
   render = () => {
     const { currentUser, onTopicFollow, updateTopic } = this.props
@@ -89,6 +36,7 @@ class ReactTopicCard extends Component {
           <div className={classname}>
             <div className={`CardOnGraph ${hasAttachment ? 'hasAttachment' : ''}`} id={`topic_${topic.id}`}>
               <Links topic={topic}
+                onTopicFollow={onTopicFollow}
                 ActiveMapper={this.props.currentUser}
                 updateTopic={wrappedUpdateTopic}
                 metacodeSets={this.props.metacodeSets}
@@ -106,34 +54,7 @@ class ReactTopicCard extends Component {
                 authorizedToEdit={authorizedToEdit}
                 updateTopic={wrappedUpdateTopic}
               />
-              <div className="linkItem contributor">
+              <Info topic={topic} /> 
-                <a href={`/explore/mapper/${topic.get('user_id')}`} target="_blank">
-                  <img src={topic.get('user_image')} className="contributorIcon" width="32" height="32" />
-                  <div className="contributorName">{topic.get('user_name')}</div>
-                </a>
-              </div>
-        <div className="linkItem mapCount"
-          onMouseOver={this.updateState('hoveringMapCount', true)}
-          onMouseOut={this.updateState('hoveringMapCount', false)}
-          onClick={this.updateState('showInMaps', !this.state.showInMaps)}
-        >
-          <div className="mapCountIcon"></div>
-          {topic.get('map_count').toString()}
-          {!this.state.showInMaps && this.state.hoveringMapCount && (
-            <div className="hoverTip">Click to see which maps topic appears on</div>
-          )}
-          {this.state.showInMaps && <div className="tip"><ul>{this.inMaps(topic)}</ul></div>}
-        </div>
-        <a href={`/topics/${topic.id}`}
-          target="_blank"
-          className="linkItem synapseCount"
-          onMouseOver={this.updateState('hoveringSynapseCount', true)}
-          onMouseOut={this.updateState('hoveringSynapseCount', false)}
-        >
-          <div className="synapseCountIcon"></div>
-          {topic.get('synapse_count').toString()}
-          {this.state.hoveringSynapseCount && <div className="tip">Click to see this topics synapses</div>}
-        </a>
               <div className="clearfloat"></div>
             </div>
           </div>