finished synapse autocomplete styling

app/assets/javascripts/src/Metamaps.js

@@ -741,7 +741,7 @@ Metamaps.Create = {
                         }
                     },
                     engine: Hogan,
-                    header: "<h3>Existing Synapses</h3>"
+                    header: "<h3>Existing synapses</h3>"
                 }
           ]);
 

app/assets/stylesheets/application.css

@@ -581,7 +581,7 @@ input[type="submit"]:active {
 }
 .new_synapse #synapse_desc,
 .new_synapse .tt-hint {
-    width: 244px;
+    width: 258px;
     background: #FFFFFF;
     height: 14px;
     margin: 0;
@@ -1359,7 +1359,7 @@ float: left;
 #new_topic .tt-suggestion, 
 #new_synapse .tt-suggestion {
     background: #F5F5F5;
-    width: 256px;
+    width: 270px;
     position: relative;
 }
 #new_topic .autocompleteSection {
@@ -1380,9 +1380,9 @@ float: left;
     line-height: 14px;
     font-size: 14px;
     padding: 9px 0 9px 8px;
+    display: inline-block;
 }
-#new_topic .expandTopicMetadata,
-#new_synapse .expandSynapseMetadata {
+#new_topic .expandTopicMetadata {
     display:none;
     width: 16px;
     height: 16px;
@@ -1394,19 +1394,14 @@ float: left;
     background-position: 0 -32px;
 }
 #new_topic .tt-suggestion.tt-is-under-cursor .expandTopicMetadata,
-#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata,
-#new_synapse .tt-suggestion.tt-is-under-cursor .expandSynapseMetadata,
-#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .expandSynapseMetadata {
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .expandTopicMetadata {
     display: block;
 }
 #new_topic .tt-suggestion.tt-is-under-cursor .topicMetadata,
-#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata,
-#new_synapse .tt-suggestion.tt-is-under-cursor .synapseMetadata,
-#new_synapse .tt-suggestion.tt-is-under-mouse-cursor .synapseMetadata {
+#new_topic .tt-suggestion.tt-is-under-mouse-cursor .topicMetadata {
     display: block;
 }
-#new_topic .topicMetadata, 
-#new_synapse .synapseMetadata {
+#new_topic .topicMetadata {
     position: absolute;
     display: none;
     top: -18px;
@@ -1417,8 +1412,7 @@ float: left;
     font-family: 'din-regular', helvetica, sans-serif;
     font-size: 14px;
 }
-#new_topic .topicPermission,
-#new_synapse .synapsePermission {
+#new_topic .topicPermission {
     width: 32px;
     height: 32px;
     background-repeat: no-repeat;
@@ -1439,8 +1433,7 @@ float: left;
 #new_synapse .synapsePermission.private {
     background-position: -32px 0;
 }
-#new_topic .topicNumMaps,
-#new_synapse .synapseNumMaps {
+#new_topic .topicNumMaps {
     height: 14px;
     padding: 1px 0 1px 32px;
     background-image: url(metamap16.png);
@@ -1458,14 +1451,12 @@ float: left;
     position: absolute;
     bottom: 10px;
 }
-#new_topic .topicOriginatorIcon,
-#new_synapse .synapseOriginatorIcon {
+#new_topic .topicOriginatorIcon {
     position: absolute;
     top: 8px;
     right: 8px;
 }
-#new_topic .topicOriginatorIcon img,
-#new_synapse .synapseOriginatorIcon img {
+#new_topic .topicOriginatorIcon img {
     border-radius: 12px;
 }
 #new_topic .topicOriginatorIcon:hover .tip,
@@ -1493,17 +1484,59 @@ float: left;
     background: #F5F5F5;
 }
 #new_synapse .tt-dropdown-menu h3 {
-    font-family: 'vinyl', helvetica, sans-serif;
-    text-transform: uppercase;
-    font-style: italic;
-    font-size: 14pxpx;
+    font-size: 14px;
     line-height: 16px;
-    margin: 3px;
+    padding: 8px;
+    border-top: 1px solid #BFBFBF;
+    color: #808080;
 }
 #new_synapse .tt-suggestion .resultnoresult .synapsePermission,
 #new_synapse .tt-suggestion .resultnoresult .synapseOriginatorIcon {
     display: none;
 }
+
+#new_synapse .synapseMetadata {
+    width: 64px;
+    padding-left: 4px;
+    height: 32px;
+    position: absolute;
+    left: 202px;
+    top: 0;
+}
+#new_synapse .synapseOriginatorIcon {
+    position: absolute;
+    top: 4px;
+}
+#new_synapse .synapseOriginatorIcon .tooltips {
+    right: 36px;
+    top: -2px;
+}
+#new_synapse .synapseOriginatorIcon .tooltips:after {
+    content: '';
+    position: absolute;
+    top: 57%;
+    left: 100%;
+    margin-top: -6px;
+    width: 0;
+    height: 0;
+    border-left: 4px solid #000000;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+}
+#new_synapse .synapseOriginatorIcon:hover .tooltips {
+    display:block;
+}
+#new_synapse .synapseOriginatorIcon img {
+    border-radius: 12px;
+}
+#new_synapse .synapsePermission {
+    position: absolute;
+    left: 32px;
+    width: 32px;
+    height: 32px;
+    background-repeat: no-repeat;
+    background-image: url(permissions32_sprite.png);
+}
 /* map info box */
 /* map info box */
 

app/helpers/synapses_helper.rb

@@ -20,7 +20,7 @@ module SynapsesHelper
     synapses.each do |s|
       synapse = {}
       synapse['id'] = s.id
-      synapse['label'] = s.desc
+      synapse['label'] = s.desc == nil || s.desc == "" ? "(no description)" : s.desc
       synapse['value'] = s.desc
       synapse['permission'] = s.permission
       synapse['mapCount'] = s.maps.count

app/views/layouts/_templates.html.erb

@@ -156,13 +156,11 @@
 
     <script type="text/template" id="synapseAutocompleteTemplate">
       <div class="result{{rtype}}">
-      <p class="autocompleteSection synapseDesc">{{label}}</p>
-      <div class="expandSynapseMetadata"></div>
+        <p class="autocompleteSection synapseDesc">{{label}}</p>
         <div class="synapseMetadata">
-          <div class="synapseNumMaps">{{mapCount}}</div>
           <div class="synapseOriginatorIcon hoverForTip">
               <img width="24" height="24" src="{{originatorImage}}" />
-              <span class="tip synapseOriginator">{{originator}}</span>
+              <span class="tooltips synapseOriginator">{{originator}}</span>
           </div>
           <div class="synapsePermission {{permission}}"></div>
         </div>