search results styling

app/assets/javascripts/lib/typeahead.js

@@ -922,10 +922,17 @@
             this.dropdownView = new DropdownView({
                 menu: $menu
             }).on("suggestionSelected", this._handleSelection).on("cursorMoved", this._clearHint).on("cursorMoved", this._setInputValueToSuggestionUnderCursor).on("cursorRemoved", this._setInputValueToQuery).on("cursorRemoved", this._updateHint).on("suggestionsRendered", this._updateHint).on("opened", this._updateHint).on("closed", this._clearHint).on("opened closed", this._propagateEvent);
+            // START METAMAPS CODE
+                this.dropdownView.on('suggestionsRendered', this._suggestionsRendered);
+            // END METAMAPS CODE
+
             this.inputView = new InputView({
                 input: $input,
                 hint: $hint
             }).on("focused", this._openDropdown).on("blured", this._closeDropdown).on("blured", this._setInputValueToQuery).on("enterKeyed tabKeyed", this._handleSelection).on("queryChanged", this._clearHint).on("queryChanged", this._clearSuggestions).on("queryChanged", this._getSuggestions).on("whitespaceChanged", this._updateHint).on("queryChanged whitespaceChanged", this._openDropdown).on("queryChanged whitespaceChanged", this._setLanguageDirection).on("escKeyed", this._closeDropdown).on("escKeyed", this._setInputValueToQuery).on("tabKeyed upKeyed downKeyed", this._managePreventDefault).on("upKeyed downKeyed", this._moveDropdownCursor).on("upKeyed downKeyed", this._openDropdown).on("tabKeyed leftKeyed rightKeyed", this._autocomplete);
+            // START METAMAPS CODE
+                this.inputView.on('queryChanged', this._queryChanged);
+            // END METAMAPS CODE
         }
         utils.mixin(TypeaheadView.prototype, EventTarget, {
             _managePreventDefault: function(e) {
@@ -952,6 +959,14 @@
                     this.dropdownView.setLanguageDirection(dir);
                 }
             },
+            // START METAMAPS CODE
+            _suggestionsRendered: function() {
+                this.eventBus.trigger('suggestionsRendered');
+            },
+            _queryChanged: function() {
+                this.eventBus.trigger('queryChanged');
+            },
+            // END METAMAPS CODE
             _updateHint: function() {
                 var suggestion = this.dropdownView.getFirstSuggestion(), hint = suggestion ? suggestion.value : null, dropdownIsVisible = this.dropdownView.isVisible(), inputHasOverflow = this.inputView.isOverflow(), inputValue, query, escapedQuery, beginsWithQuery, match;
                 if (hint && dropdownIsVisible && !inputHasOverflow) {

app/assets/javascripts/src/Metamaps.GlobalUI.js

@@ -335,6 +335,13 @@ Metamaps.GlobalUI.Search = {
     init: function () {
         var self = Metamaps.GlobalUI.Search;
 
+        var loader = new CanvasLoader('searchLoading');
+        loader.setColor('#4fb5c0'); // default is '#000000'
+        loader.setDiameter(24); // default is 40
+        loader.setDensity(41); // default is 40
+        loader.setRange(0.9); // default is 1.3
+        loader.show(); // Hidden by default
+
         // bind the hover events
         $(".sidebarSearch").hover(function () {
             self.open()
@@ -422,7 +429,7 @@ Metamaps.GlobalUI.Search = {
                 self.isOpen = true;
             });
         }
-        else if (self.locked) $('.sidebarSearchField').focus();
+        //else if (self.locked) $('.sidebarSearchField').focus();
     },
     close: function (closeAfter, bypass) {
         var self = Metamaps.GlobalUI.Search;
@@ -445,16 +452,16 @@ Metamaps.GlobalUI.Search = {
             }
         }, closeAfter);
         
-        if (self.locked) {
+        /*if (self.locked) {
             $('.sidebarSearchField').typeahead('setQuery', '');
             $('.sidebarSearchField').blur();
-        }
+        }*/
     },
     startTypeahead: function () {
         var self = Metamaps.GlobalUI.Search;
 
-        var mapheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
+        var mapheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><input type="checkbox" class="limitToMe" id="limitMapsToMe"></input><label for="limitMapsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Maps</h3><div class="minimizeResults minimizeMapResults"></div><div class="clearfloat"></div></div>';
-        var topicheader = Metamaps.Active.Mapper ? '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchMapsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
+        var topicheader = Metamaps.Active.Mapper ? '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><input type="checkbox" class="limitToMe" id="limitTopicsToMe"></input><label for="limitTopicsToMe" class="limitToMeLabel">added by me</label><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>' : '<div class="searchTopicsHeader searchHeader"><h3 class="search-heading">Topics</h3><div class="minimizeResults minimizeTopicResults"></div><div class="clearfloat"></div></div>';
         var mapperheader = '<div class="searchMappersHeader searchHeader"><h3 class="search-heading">Mappers</h3><div class="minimizeResults minimizeMapperResults"></div><div class="clearfloat"></div></div>';
 
         var topics = {
@@ -548,7 +555,9 @@ Metamaps.GlobalUI.Search = {
         $('.sidebarSearchField').typeahead([topics, maps, mappers]);
 
         //Set max height of the search results box to prevent it from covering bottom left footer
-        $('.sidebarSearchField').bind('typeahead:opened', function (event) {
+        $('.sidebarSearchField').bind('typeahead:suggestionsRendered', function (event) {
+            self.initSearchOptions();
+            self.hideLoader();
             var h = $(window).height();
             $(".tt-dropdown-menu").css('max-height', h - 100);
         });
@@ -559,13 +568,21 @@ Metamaps.GlobalUI.Search = {
 
         // tell the autocomplete to launch a new tab with the topic, map, or mapper you clicked on
         $('.sidebarSearchField').bind('typeahead:selected', self.handleResultClick);
+        
         // don't do it, if they clicked on a 'addToMap' button
         $('.sidebarSearch button.addToMap').click(function (event) {
             event.stopPropagation();
         });
 
         // make sure that when you click on 'limit to me' or 'toggle section' it works
-        $('.sidebarSearchField').bind('keyup', self.initSearchOptions);
+        $('.sidebarSearchField').bind('typeahead:queryChanged', function(){
+            if ($(this).val() === "") {
+                self.hideLoader();
+            }
+            else {
+                self.showLoader();
+            }
+        });
 
     },
     handleResultClick: function (event, datum, dataset) {
@@ -628,5 +645,11 @@ Metamaps.GlobalUI.Search = {
 
             self.optionsInitialized = true;
         }
+    },
+    hideLoader: function () {
+        $('#searchLoading').hide();
+    },
+    showLoader: function () {
+        $('#searchLoading').show();
     }
 };

app/assets/stylesheets/clean.css

@@ -154,6 +154,16 @@
 .sidebarSearch {
     float:left;
     height: 32px;
+    position: relative;
+}
+
+#searchLoading {
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    top: 4px;
+    right: 76px;
+    display: none;
 }
 
 .unauthenticated .homePage .sidebarSearchIcon {
@@ -184,6 +194,12 @@
 	padding: 7px 10px 3px 10px;
 }
 
+.sidebarSearchField {
+    color: #424242;
+}
+.sidebarSearch .tt-hint {
+    color: transparent;
+}
 .sidebarSearchField,
 .sidebarSearch .tt-hint {
     height: 20px;
@@ -198,7 +214,6 @@
     font-size: 14px;
     line-height: 14px;
     background: #FFFFFF; 
-    color: #BDBDBD; 
     font-family: 'din-medium', helvetica, sans-serif;
 }
 .sidebarSearch .tt-dropdown-menu {
@@ -271,28 +286,40 @@
     overflow: visible;
 }
 .sidebarSearch .tt-suggestion {
+    position: relative;
     background: #FFF;
+    padding: 8px 0;
 }
 .sidebarSearch .tt-is-under-cursor,
 .sidebarSearch .tt-is-under-mouse-cursor {
     background: #E0E0E0;
 }
-.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
+
+.resultmap, .resulttopic, .resultmapper, .resultnoresult {
+    min-height: 48px;
+    display: table;
+}
+/*.sidebarSearch .tt-dataset-maps .tt-is-under-cursor .resultmap,
 .sidebarSearch .tt-dataset-maps .tt-is-under-mouse-cursor .resultmap,
 .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .resulttopic,
 .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .resulttopic {
-    min-height: 57px;
+    min-height: 48px;
+}*/
+.sidebarSearch .tt-suggestion .searchResIconWrapper {
+    display: table-cell;
+    vertical-align: middle;
+    height: 32px;
+    padding: 0 8px;
 }
 .sidebarSearch .tt-suggestion .icon {
-    float: left;
     width: 32px;
     height: 32px;
-    margin-right: 5px;
     border-radius:16px;
 }
 .sidebarSearch .topicMetacode {
-    float: left;
+    display: table-cell;
-    margin-right: 5px;
+    vertical-align: middle;
+    padding: 0 0 0 8px;
     max-width: 70px;
 }
 .sidebarSearch .tt-dataset-topics .topicIcon {
@@ -302,7 +329,6 @@
 .sidebarSearch .tt-dataset-topics .tt-is-under-cursor .topicIcon,
 .sidebarSearch .tt-dataset-topics .tt-is-under-mouse-cursor .topicIcon {
     margin: 0 auto;
-    padding-left: 10px;
 }
 .sidebarSearch .tt-dataset-topics .metacodeTip {
     display: none;
@@ -322,31 +348,38 @@
 }
 .sidebarSearch .resultText {
     width: 260px;
-    display: block;
+    display: table-cell;
-    float: left;
+    padding-left: 8px;
+    vertical-align: middle;
     word-wrap: break-word;
 }
 .sidebarSearch .resultTitle {
     font-weight: normal;
-    font-size: 18px;
+    font-size: 16px;
-    line-height: 22px;
+    line-height: 20px;
     width: 100%;
-    padding-top: 8px;
+    font-family: 'din-regular', helvetica, sans-serif;
 }
 .sidebarSearch .resultDesc {
-    font-size: 14px;
+    font-size: 12px;
     line-height: 16px;
     width: 100%;
-    padding: 3px 0 6px 0;
+    font-style: italic;
+    font-family: helvetica, sans-serif;
 }
 .sidebarSearch .tip {
     display: none;
 }
 .sidebarSearch div.autoOptions {
-    width: 122px;
+    width: 114px;
-    float: right;
+    height: 48px;
-    position: relative;
+    position: absolute;
     display: none;
+    top: 8px;
+    right: 0;
+}
+.tt-dataset-maps div.autoOptions {
+    width: 84px;
 }
 .sidebarSearch .tt-is-under-cursor .autoOptions,
 .sidebarSearch .tt-is-under-mouse-cursor .autoOptions {
@@ -370,106 +403,91 @@
     background: url(addtopic_sprite.png);
     background-repeat: no-repeat;
     background-size: 48px 24px;
-    top: 19px;
+    top: 12px;
-    left: 84px;
+    left: 80px;
     cursor: pointer;
 }
 .sidebarSearch button.addToMap:hover {
     background-position: -24px;
 }
-/*
+
-.sidebarSearch div.goTo {
-    width: 20px;
-    height: 20px;
-    background: url(/assets/MMCCicon_pop-out.png) no-repeat center center;
-    background-size: 18px 18px;
-    top: 7px;
-    left: 84px;
-}*/
 .sidebarSearch div.topicCount {
-    width: 16px;
+    width: 24px;
-    height: 16px;
+    height: 24px;
     background: url(topic16.png);
     background-repeat: no-repeat;
-    background-size: 16px 16px;
+    background-position-y: center;
-    top: 7px;
+    top: 0;
-    left: 13px;
+    left: 0;
     padding-left: 18px;
     font-size: 12px;
-    line-height: 20px;
+    line-height: 24px;
 }
 
 .sidebarSearch div.mapCount {
-    width: 20px;
-    height: 20px;
-    background: url(metamap16.png);
-    background-repeat: no-repeat;
-    background-size: 14px 14px;
-    top: 7px;
-    left: 13px;
-    padding-left: 18px;
-    font-size: 12px;
-    line-height: 20px;
-}
-.sidebarSearch div.synapseCount {
-    width: 20px;
-    height: 20px;
-    background: url(synapse16.png);
-    background-repeat: no-repeat;
-    background-size: 15px 15px;
-    top: 30px;
-    left: 13px;
-    padding-left: 19px;
-    font-size: 12px;
-    line-height: 20px;
-}
-.sidebarSearch div.topicOriginatorIcon {
     width: 24px;
     height: 24px;
-    top: 7px;
+    background: url(metamap16.png);
-    left: 47px;
+    background-repeat: no-repeat;
+    background-position-y: center;
+    left: 0;
+    padding-left: 20px;
+    font-size: 12px;
+    line-height: 24px;
+}
+.sidebarSearch div.synapseCount {
+    width: 24px;
+    height: 24px;
+    background: url(synapse16.png);
+    background-repeat: no-repeat;
+    background-position-y: center;
+    top: 24px;
+    left: 0;
+    padding-left: 20px;
+    font-size: 12px;
+    line-height: 24px;
+}
+.sidebarSearch div.topicOriginatorIcon {
+    width: 18px;
+    height: 18px;
+    padding: 3px;
+    top: 0;
+    left: 44px;
+}
+.sidebarSearch .topicOriginatorIcon img {
+    border-radius: 9px;
 }
 .sidebarSearch .tip {
     position: absolute;
-    background: white;
+    background: #424242;
     width: auto;
-    bottom: 0;
+    top: 2px;
     right: 25px;
-    color: black;
+    color: white;
     white-space: nowrap;
-    border-radius: 4px;
+    border-radius: 2px;
-    font-size: 15px !important;
+    font-size: 12px !important;
-    font-family: 'LatoRegular';
+    font-family: 'din-regular';
-    line-height: 17px;
+    line-height: 12px;
-    padding: 3px 5px 2px;
+    padding: 4px 4px 4px;
     z-index: 100;
 }
-.sidebarSearch .mapCount .tip,
-.sidebarSearch .synapseCount .tip,
-.sidebarSearch .topicCount .tip {
-    right: -3px;
-    bottom: 24px;
-}
 .sidebarSearch .hoverForTip:hover .tip {
     display: block;
 }
 .sidebarSearch .mapContributorsIcon .mapContributors {
+    top: auto;
     right: 0;
     bottom: 21px;
     white-space: normal;
     width: 200px;
 }
 .sidebarSearch div.mapContributorsIcon {
-    height: 20px;
+    height: 24px;
-    background: url(/assets/MMCCicon_mapper.png);
+    top: 0;
-    background-repeat: no-repeat;
+    left: 44px;
-    background-size: 17px 17px;
-    top: 7px;
-    right: 25px;
-    padding-left: 19px;
     font-size: 12px;
-    line-height: 20px;
+    line-height: 24px;
-    padding-right: 5px;
 }
 .sidebarSearch div.topicPermission,
 .sidebarSearch div.mapPermission {
@@ -478,8 +496,8 @@
     background-image: url(permissions32_sprite.png);
     background-repeat: no-repeat;
     background-size: 72px 48px !important;
-    top: 27px;
+    top: 24px;
-    left: 47px;
+    left: 44px;
 }
 .sidebarSearch div.topicPermission.commons,
 .sidebarSearch div.mapPermission.commons {
@@ -487,16 +505,13 @@
 }
 .sidebarSearch div.topicPermission.public,
 .sidebarSearch div.mapPermission.public {
-    background-position: -32px 0;
+    background-position: -48px 0;
 }
 .sidebarSearch div.topicPermission.private,
 .sidebarSearch div.mapPermission.private {
-    background-position: -16px 0;
+    background-position: -24px 0;
 }
 
-.sidebarSearch .tt-dataset-mappers a.goTo {
-    top: 7px;
-}
 .sidebarSearch .tt-dataset-mappers div.mapCount {
     top: 8px;
 }

app/views/layouts/_templates.html.erb

@@ -83,20 +83,17 @@
           <span class="tip">add to map</span>
         </button>
         <% end %>
-        <div class="mapCount hoverForTip">
+        <div class="mapCount">
-          <span class="tip">appears on this # of maps</span>
           {{mapCount}}
         </div>
-        <div class="synapseCount hoverForTip">
+        <div class="synapseCount">
-          <span class="tip"> has this # of synapses</span>
           {{synapseCount}}
         </div>
         <div class="topicOriginatorIcon hoverForTip">
-            <img width="24" height="24" src="{{originatorImage}}">
+            <img width="18" height="18" src="{{originatorImage}}">
             <span class="tip topicOriginator">created by {{originator}}</span>
         </div>
-        <div class="topicPermission {{permission}} hoverForTip">
+        <div class="topicPermission {{permission}}">
-          <span class="tip">topic is {{permission}}</span>
         </div>
       </div>
       <div class="clearfloat"></div>
@@ -105,29 +102,25 @@
 
     <script type="text/template" id="mapSearchTemplate">
     <div class="result{{rtype}}">
-      <img class="icon" src="/assets/metamap32c.png">
+      <div class="searchResIconWrapper">
+        <img class="icon" src="/assets/metamap32c.png">
+      </div>
       <div class="resultText">
         <p class="resultTitle">{{label}}</p>
         <p class="resultDesc">{{description}}</p>
       </div>
       <div class="autoOptions">
-        <div class="goTo hoverForTip">
+        <div class="topicCount">
-          <span class="tip">open in new tab</span>
-        </div>
-        <div class="topicCount hoverForTip">
-          <span class="tip">has this # of topics</span>
           {{topicCount}}
         </div>
-        <div class="synapseCount hoverForTip">
+        <div class="synapseCount">
-          <span class="tip">has this # of synapses</span>
           {{synapseCount}}
         </div>
         <div class="mapContributorsIcon hoverForTip">
           <span class="tip mapContributors">{{contributorList}}</span>
           {{contributorCount}}
         </div>
-        <div class="mapPermission {{permission}} hoverForTip">
+        <div class="mapPermission {{permission}}">
-          <span class="tip">map is {{permission}}</span>
         </div>
       </div>
       <div class="clearfloat"></div>
@@ -136,24 +129,20 @@
 
     <script type="text/template" id="mapperSearchTemplate">
     <div class="result{{rtype}}">
-      <img class="icon" width="32" height="32" src="{{profile}}">
+      <div class="searchResIconWrapper">
+        <img class="icon" width="32" height="32" src="{{profile}}">
+      </div>
       <div class="resultText">
         <p class="resultTitle">{{label}}</p>
       </div>
       <div class="autoOptions">
-        <div class="goTo hoverForTip">
+        <div class="mapperCreated">
-          <span class="tip">open in new tab</span>
+          <span>Mapping since: {{created_at}}</span>
         </div>
-        <div class="mapCount hoverForTip">
+        <div class="mapperGeneration">
-          <span>Mapping since:</span>
+          <span>Generation {{generation}}</span>
-          {{create_at}}
         </div>
-        <div class="mapCount hoverForTip">
+        <div class="mapCount">
-          <span>Generation</span>
-          {{mapCount}}
-        </div>
-        <div class="mapCount hoverForTip">
-          <span class="tip">created this # of maps</span>
           {{mapCount}}
         </div>
       </div>

app/views/layouts/_upperelements.html.erb

@@ -10,6 +10,7 @@
     <!-- search box -->
     <div class="sidebarSearch">
         <input type="text" class="sidebarSearchField" placeholder="Search for topics, maps, and mappers..."></input>
+        <div id="searchLoading"></div>
         <div class="sidebarSearchIcon"></div>
         <div class="clearfloat"></div>
     </div> <!-- end sidebarSearch -->