From 031f97ba42da80efa3a0ca1d1da8397f4b1b1675 Mon Sep 17 00:00:00 2001 From: Connor Turland Date: Wed, 1 Oct 2014 13:18:24 -0400 Subject: [PATCH] search results styling --- app/assets/javascripts/lib/typeahead.js | 15 ++ .../javascripts/src/Metamaps.GlobalUI.js | 37 +++- app/assets/stylesheets/clean.css | 197 ++++++++++-------- app/views/layouts/_templates.html.erb | 47 ++--- app/views/layouts/_upperelements.html.erb | 1 + 5 files changed, 170 insertions(+), 127 deletions(-) diff --git a/app/assets/javascripts/lib/typeahead.js b/app/assets/javascripts/lib/typeahead.js index e7f72913..3a413d68 100644 --- a/app/assets/javascripts/lib/typeahead.js +++ b/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) { diff --git a/app/assets/javascripts/src/Metamaps.GlobalUI.js b/app/assets/javascripts/src/Metamaps.GlobalUI.js index 97435893..b1eb4afa 100644 --- a/app/assets/javascripts/src/Metamaps.GlobalUI.js +++ b/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 ? '

Maps

' : '

Maps

'; - var topicheader = Metamaps.Active.Mapper ? '

Topics

' : '

Topics

'; + var mapheader = Metamaps.Active.Mapper ? '

Maps

' : '

Maps

'; + var topicheader = Metamaps.Active.Mapper ? '

Topics

' : '

Topics

'; var mapperheader = '

Mappers

'; 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(); } }; \ No newline at end of file diff --git a/app/assets/stylesheets/clean.css b/app/assets/stylesheets/clean.css index 54cba2bb..a586d6ba 100644 --- a/app/assets/stylesheets/clean.css +++ b/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; - margin-right: 5px; + display: table-cell; + 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; - float: left; + display: table-cell; + padding-left: 8px; + vertical-align: middle; word-wrap: break-word; } .sidebarSearch .resultTitle { font-weight: normal; - font-size: 18px; - line-height: 22px; + font-size: 16px; + 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; - float: right; - position: relative; + width: 114px; + height: 48px; + 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; - left: 84px; + top: 12px; + 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; - height: 16px; + width: 24px; + height: 24px; background: url(topic16.png); background-repeat: no-repeat; - background-size: 16px 16px; - top: 7px; - left: 13px; + background-position-y: center; + top: 0; + 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; - left: 47px; + background: url(metamap16.png); + 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; - font-size: 15px !important; - font-family: 'LatoRegular'; - line-height: 17px; - padding: 3px 5px 2px; + border-radius: 2px; + font-size: 12px !important; + font-family: 'din-regular'; + line-height: 12px; + 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; - background: url(/assets/MMCCicon_mapper.png); - background-repeat: no-repeat; - background-size: 17px 17px; - top: 7px; - right: 25px; - padding-left: 19px; + height: 24px; + top: 0; + left: 44px; font-size: 12px; - line-height: 20px; - padding-right: 5px; + line-height: 24px; } .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; - left: 47px; + top: 24px; + 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; } diff --git a/app/views/layouts/_templates.html.erb b/app/views/layouts/_templates.html.erb index dead8f9f..c5bf7fd5 100644 --- a/app/views/layouts/_templates.html.erb +++ b/app/views/layouts/_templates.html.erb @@ -83,20 +83,17 @@ add to map <% end %> -
- appears on this # of maps +
{{mapCount}}
-
- has this # of synapses +
{{synapseCount}}
- + created by {{originator}}
-
- topic is {{permission}} +
@@ -105,29 +102,25 @@