diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 00000000..ff54548e
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,5 @@
+language: node_js
+node_js: node
+before_install:
+ - "export DISPLAY=:99.0"
+ - "sh -e /etc/init.d/xvfb start"
\ No newline at end of file
diff --git a/package.json b/package.json
index 4874de0c..68f0ecbc 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,14 @@
{
"name": "bit-docs-html-canjs",
- "version": "0.7.1",
+ "version": "0.8.0",
"description": "The plugins to produce the CanJS site",
"main": "static/canjs",
"scripts": {
"start": "node make-example.js -f",
- "styles": "rm -rf node_modules/bit-docs-generate-html/site/static && node make-example.js -f",
+ "styles": "rm -rf node_modules/bit-docs-generate-html/site/static && npm start",
+ "test": "npm start && npm run testee",
+ "testee": "testee test/browser.html --browsers firefox",
+ "preversion": "npm test",
"postversion": "git push --tags && git push",
"release:pre": "npm version prerelease && npm publish",
"release:patch": "npm version patch && npm publish",
@@ -30,19 +33,22 @@
"can-control": "^3.0.3",
"can-util": "^3.0.10",
"escape-html": "^1.0.3",
- "jquery": "^2.2.4",
+ "jquery": "^3.1.1",
"lodash": "^4.17.4",
"lunr": "^2.0.3",
"steal-stache": "^3.0.1",
"unescape-html": "^1.0.0"
},
"devDependencies": {
- "bit-docs-generate-html": "^0.5.0",
- "bit-docs-generate-searchmap": "^0.0.1-0",
+ "bit-docs-generate-html": "^0.6.0",
+ "bit-docs-generate-searchmap": "^0.1.1",
+ "bit-docs-html-toc": "^0.6.0",
+ "connect": "^3.5.0",
+ "normalize.css": "^5.0.0",
"q": "^1.4.1",
- "connect": "^2.14.4",
- "normalize.css": "^4.1.1",
- "zombie": "^4.2.1",
- "bit-docs-html-toc": "^0.2.0"
+ "steal": "^0.16.44",
+ "steal-qunit": "^0.1.4",
+ "testee": "^0.6.0",
+ "zombie": "^5.0.5"
}
}
diff --git a/static/article-title.less b/static/article-title.less
index cc6332a1..60985925 100644
--- a/static/article-title.less
+++ b/static/article-title.less
@@ -7,8 +7,9 @@ section.title-footer{
}
ul.title-social{
display: flex;
+ flex-flow: row wrap;
+ justify-content: space-around;
padding-left: 0;
- justify-content: flex-start;
margin: 0;
li{
list-style: none;
@@ -37,8 +38,14 @@ ul.title-links {
.title-social {
float: right;
margin-top: @gutter;
+ @media screen and (max-width: (@breakpoint / 2)){
+ width: 100%;
+ }
li{
- margin: 0 0 0 @gutter;
+ margin: 0 0 @gutter @gutter;
+ &:first-child {
+ margin-left: 0px;
+ }
}
}
div{
diff --git a/static/breadcrumb.less b/static/breadcrumb.less
index dbff8b43..5e10add8 100644
--- a/static/breadcrumb.less
+++ b/static/breadcrumb.less
@@ -1,32 +1,35 @@
.breadcrumb {
- display: none;
- @media screen and (min-width: @breakpoint) {
+ display: none;
+ @media screen and (min-width: @breakpoint) {
height: 48px;
- display: block;
- padding-left: @gutter*2;
- background: @code-color;
- cursor: pointer;
- color: lighten(@gray, 10%);
- .breadcrumb-dropdown {
+ display: block;
+ padding-left: @gutter*2;
+ background: @code-color;
+ color: lighten(@gray, 10%);
+ .breadcrumb-dropdown {
display: none;
- padding: @gutter @gutter/4;
position: relative;
color: lighten(@gray, 10%);
a {
- padding-left: @gutter/4;
cursor: pointer;
color: white;
+ font-weight: 700;
}
&:hover {
- .on-this-page {
- display: flex;
- li {
- flex-grow: 1;
- flex-basis: auto;
- }
- }
- }
- &::after {
+ color: @link-color;
+ a {
+ background-color: white;
+ color: @link-color !important;
+ }
+ .on-this-page {
+ display: flex;
+ li {
+ flex-grow: 1;
+ flex-basis: auto;
+ }
+ }
+ }
+ &::after {
display: inline-block;
width: 16px;
height: 16px;
@@ -35,85 +38,78 @@
background-image: url(img/down_white.svg);
background-size: cover;
background-repeat: no-repeat;
- }
- }
- li {
+ }
+ }
+ li {
display: inline-block;
list-style: none;
- color: @link-color;
padding: @gutter @gutter/4;
- a {
- color: white;
- font-size: 14px;
- code {
- background: none;
- line-height: 14px;
- }
- }
- }
- }
+ a {
+ color: white;
+ font-size: 14px;
+ padding: @gutter;
+ code {
+ background: none;
+ line-height: 14px;
+ }
+ }
+ a:hover {
+ background-color: white;
+ color: @link-color !important;
+ text-decoration: none;
+ }
+ .on-this-page a {
+ padding: @gutter/4 0;
+ }
+ }
+ }
}
.on-this-page {
- width: 100%;
- font-size: 14px;
- margin-top:@gutter/2;
- margin-bottom: @gutter !important;
- background: #fff;
- list-style: none;
- line-height: 1.5em;
- a {
- color: @link-color !important;
- }
- @media screen and (min-width: @breakpoint) {
- padding: @gutter;
- margin: 0;
- position: fixed;
- .box-shadow;
- z-index: 15;
- cursor: pointer;
- display: none;
- margin-top: 15px;
- width: auto;
- flex-direction: column;
- flex-wrap: nowrap;
- li {
- padding: 0px;
- margin: 0px;
- code {
- background: none;
- font-weight: 600;
- padding: 0;
- }
- a {
- width: auto;
- padding: 0px;
- margin: 0px;
- }
- }
- li:hover {
- text-decoration: underline;
- }
- li .current {
- text-decoration: underline;
- font-weight: bold;
- }
- &::before {
- content: '';
- width:10px;
- height: 10px;
- background: #fff;
- position: absolute;
- top:-4px;
- left: @gutter;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- -ms-transform: rotate(-45deg);
- transform: rotate(-45deg);
- z-index: 16;
- }
- }
+ width: 100%;
+ font-size: 14px;
+ margin-top:@gutter/2;
+ margin-bottom: @gutter !important;
+ background: #fff;
+ list-style: none;
+ line-height: 1.5em;
+ a {
+ color: @link-color !important;
+ }
+ @media screen and (min-width: @breakpoint) {
+ padding: @gutter;
+ margin: 0;
+ position: fixed;
+ .box-shadow;
+ z-index: 15;
+ cursor: pointer;
+ display: none;
+ margin-top: 15px;
+ width: auto;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ li {
+ padding: 0px;
+ margin: 0px;
+ code {
+ background: none;
+ font-weight: 600;
+ padding: 0;
+ }
+ a {
+ width: auto;
+ padding: 0px;
+ margin: 0px;
+ }
+ }
+ li:hover {
+ text-decoration: underline;
+ }
+ li .current {
+ text-decoration: underline;
+ font-weight: bold;
+ }
+ }
}
.nav-toggle {
@@ -137,5 +133,5 @@
}
.on-this-page:empty{
- visibility: hidden;
+ visibility: hidden;
}
diff --git a/static/canjs.js b/static/canjs.js
index a39f5bb5..13c4c4de 100644
--- a/static/canjs.js
+++ b/static/canjs.js
@@ -88,14 +88,14 @@ function init() {
buildTOC();
setNavToggleListener();
setScrollPosition();
- searchControl = new SearchControl(".search-bar", {
- navigate: function(href){
- window.history.pushState(null, null, href);
- navigate(href);
- },
- pathPrefix: window.pathPrefix,
- animateInOnStart: !hasShownSearch
- });
+ // searchControl = new SearchControl(".search-bar", {
+ // navigate: function(href){
+ // window.history.pushState(null, null, href);
+ // navigate(href);
+ // },
+ // pathPrefix: window.pathPrefix,
+ // animateInOnStart: !hasShownSearch
+ // });
hasShownSearch = true;
}
@@ -172,7 +172,7 @@ function navigate(href) {
clearInterval(scrollPositionInterval);
loader.start();
-
+
navigating = true;
$.ajax(href, {
dataType: "text",
@@ -224,7 +224,7 @@ function navigate(href) {
$.getScript('https://buttons.github.io/buttons.js');
loader.end();
-
+
// go through every package and re-init
for (var packageName in window.PACKAGES) {
if (typeof window.PACKAGES[packageName] === "function") {
diff --git a/static/layout.less b/static/layout.less
index 57ae9746..2e1fc581 100644
--- a/static/layout.less
+++ b/static/layout.less
@@ -11,11 +11,17 @@
#left {
position: fixed;
width: @sidebar-width;
+ min-width: 0;
+ transition: min-width @transition-speed ease;
@media screen and (min-width: @breakpoint){
flex-shrink: 0;
padding: 0px;
position: relative;
width: auto;
+
+ &.search-showing {
+ min-width: 300px !important;
+ }
}
}
#right {
diff --git a/static/search.js b/static/search.js
index c4200ec5..b9b1c5d6 100644
--- a/static/search.js
+++ b/static/search.js
@@ -4,7 +4,7 @@ var searchResultsRenderer = require("./templates/search-results.stache!steal-sta
var joinURIs = require("can-util/js/join-uris/");
//https://lunrjs.com/guides/getting_started.html
-var searchEngine = require("lunr");
+var lunr = require("lunr");
var Search = Control.extend({
@@ -16,7 +16,7 @@ var Search = Control.extend({
//renderer stuff
resultsRenderer: searchResultsRenderer,
pathPrefix: window.pathPrefix,
- searchMapHashUrl: '/searchMapHash.json',
+ searchMapHashUrl: '/searchMapHash.json',
searchMapUrl: '/searchMap.json',
//callbacks
@@ -30,10 +30,10 @@ var Search = Control.extend({
keyboardActiveClass: "keyboard-active",
//search options
- minSearchLength: 3,
+ searchAnimation: 250,// matches @transition-speed in variables.less
searchTimeout: 400,
- localStorageKeyPrefix: "bit-docs-search",
+ localStorageKeyPrefix: "search",
//whether or not to animate in upon initialization
animateInOnStart: true
@@ -67,6 +67,7 @@ var Search = Control.extend({
init: function(){
+ var options = this.options;
var self = this;
//init elements
@@ -77,23 +78,28 @@ var Search = Control.extend({
this.useLocalStorage = this.localStorageIsAvailable();
- this.checkSearchMapHash(this.options.pathPrefix + this.options.searchMapHashUrl).then(function(searchMapHashChangedObject){
- self.getSearchMap(self.options.pathPrefix + self.options.searchMapUrl, searchMapHashChangedObject).then(function(searchMap){
- self.initSearchEngine(searchMap);
+ this.searchEnginePromise = new Promise(function(resolve, reject) {
+ self.checkSearchMapHash(options.pathPrefix + options.searchMapHashUrl).then(function(searchMapHashChangedObject){
+ self.getSearchMap(options.pathPrefix + options.searchMapUrl, searchMapHashChangedObject).then(function(searchMap){
+ var searchEngine = self.initSearchEngine(searchMap);
+ resolve(searchEngine);
- //show the search input when the search engine is ready
- if(self.options.animateInOnStart){
- self.$inputWrap.fadeIn(400);
- }else{
- self.$inputWrap.show();
- }
+ //show the search input when the search engine is ready
+ if(self.options.animateInOnStart){
+ self.$inputWrap.fadeIn(self.options.searchAnimation);
+ }else{
+ self.$inputWrap.show();
+ }
- self.bindResultsEvents();
+ self.bindResultsEvents();
+ }, function(error){
+ console.error("getSearchMap error", error);
+ reject(error);
+ });
}, function(error){
- console.error("getSearchMap error", error);
+ console.error("checkSearchMapHash error", error);
+ reject(error);
});
- }, function(error){
- console.error("checkSearchMapHash error", error);
});
},
destroy: function(){
@@ -105,7 +111,7 @@ var Search = Control.extend({
this.$element = $(this.element);
this.$inputWrap = this.$element.find('.search-wrap');
this.$input = this.$inputWrap.find(".search");
- this.$resultsContainer = $(this.options.searchResultsContainerSelector);
+ this.$resultsContainer = $(this.options.searchResultsContainerSelector);
this.$resultsWrap = this.$resultsContainer.find(".search-results-wrap");
this.$resultsContainerParent = this.$resultsContainer.closest(this.options.searchResultsContainerParentSelector);
this.$resultsCancelLink = this.$resultsContainer.find(".search-cancel");
@@ -127,7 +133,7 @@ var Search = Control.extend({
getLocalStorageItem: function(key){
var storageItem = (this.useLocalStorage) ? localStorage.getItem(key) : this.storageFallback[key];
if (storageItem) {
- return JSON.parse(storageItem);
+ return JSON.parse(storageItem);
}
return null;
},
@@ -136,9 +142,9 @@ var Search = Control.extend({
if (data) {
var storageItem = JSON.stringify(data);
if (this.useLocalStorage) {
- this.storageFallback[key] = storageItem;
- } else {
localStorage.setItem(key, storageItem);
+ } else {
+ this.storageFallback[key] = storageItem;
}
return true;
}
@@ -165,7 +171,7 @@ var Search = Control.extend({
// ---- END LOCAL STORAGE ---- //
// ---- END DATA RETRIEVAL ---- //
- searchMapLocalStorageKey: "searchMap",
+ searchMapLocalStorageKey: 'map',
searchMap: null,
// function getSearchMap
@@ -226,7 +232,7 @@ var Search = Control.extend({
return returnDeferred;
},
- searchMapHashLocalStorageKey: "searchMapHash",
+ searchMapHashLocalStorageKey: 'map-hash',
// function checkSearchMapHash
// retrieves the searchMapHash localStorage (if present)
// and from the specified url
@@ -236,22 +242,18 @@ var Search = Control.extend({
//
// @returns thenable that resolves to true if localStorage was cleared and false otherwise
checkSearchMapHash: function(dataUrl) {
- var self = this,
- returnDeferred = $.Deferred(),
- localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey),
- searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey),
- lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash;
+ var returnDeferred = $.Deferred();
+ var self = this;
//no need to do anything if localStorage isn't present
- if(!window.localStorage){
+ if (!this.useLocalStorage) {
returnDeferred.resolve(false);
return;
}
-
- localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey);
- searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey);
- lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash;
+ var localStorageKey = self.formatLocalStorageKey(self.searchMapHashLocalStorageKey);
+ var searchMapHashLocalStorage = self.getLocalStorageItem(localStorageKey);
+ var lsHash = searchMapHashLocalStorage && searchMapHashLocalStorage.hash;
$.ajax({
url: dataUrl,
@@ -297,7 +299,8 @@ var Search = Control.extend({
// ---- SEARCHING / PARSING ---- //
- searchIndexLocalStorageKey: "searchIndex",
+ searchIndexLocalStorageKey: 'index',
+ searchIndexVersionLocalStorageKey: 'index-version',
searchEngine: null,
// function initSearchEngine
// checks localStorage for an index
@@ -306,15 +309,28 @@ var Search = Control.extend({
// else
// generates search engine from searchMap & saves index to local storage
initSearchEngine: function(searchMap){
- var localStorageKey = this.formatLocalStorageKey(this.searchIndexLocalStorageKey),
- index = this.getLocalStorageItem(localStorageKey);
- if(index){
- this.searchEngine = searchEngine.Index.load(index);
+ var searchEngine;
+ var searchIndexKey = this.formatLocalStorageKey(this.searchIndexLocalStorageKey);
+ var searchIndexVersionKey = this.formatLocalStorageKey(this.searchIndexVersionLocalStorageKey);
+ var index = this.getLocalStorageItem(searchIndexKey);
+ var indexVersion = this.getLocalStorageItem(searchIndexVersionKey);
+ var currentIndexVersion = 2;// Bump this whenever the index code is changed
+
+ if (index && currentIndexVersion === indexVersion) {
+ searchEngine = lunr.Index.load(index);
}else{
- this.searchEngine = searchEngine(function(){
+ searchEngine = lunr(function(){
+ lunr.tokenizer.separator = /[\s]+/;
+
+ this.pipeline.remove(lunr.stemmer);
+ this.pipeline.remove(lunr.stopWordFilter);
+ this.pipeline.remove(lunr.trimmer);
+ this.searchPipeline.remove(lunr.stemmer);
+
this.ref('name');
this.field('title');
this.field('description');
+ this.field('name');
this.field('url');
for (var itemKey in searchMap) {
@@ -323,19 +339,48 @@ var Search = Control.extend({
}
}
});
- this.setLocalStorageItem(localStorageKey, this.searchEngine);
+ this.setLocalStorageItem(searchIndexKey, searchEngine);
+ this.setLocalStorageItem(searchIndexVersionKey, currentIndexVersion);
}
+ return searchEngine;
},
// function searchEngineSearch
// takes a value and returns a map of all relevant search items
searchEngineSearch: function(value){
+ var searchTerm = value.toLowerCase();
var self = this;
- return this.searchEngine
- //run the search
- .search(this.formatSearchTerm(value))
- //convert the results into a searchMap subset
- .map(function(result){ return self.searchMap[result.ref] });
+ return this.searchEnginePromise.then(function(searchEngine) {
+
+ //run the search
+ var queryResults = searchEngine.query(function(q) {
+
+ if (searchTerm.indexOf('can-') > -1) {// If the search term includes “can-”
+
+ // look for an exact match and apply a large positive boost
+ q.term(searchTerm, { usePipeline: true, boost: 375 });
+
+ } else {
+ // add “can-”, look for an exact match in the title field, and apply a positive boost
+ q.term('can-' + searchTerm, { usePipeline: false, fields: ['title'], boost: 12 });
+
+ // look for terms that match the beginning or end of this query
+ q.term('*' + searchTerm + '*', { usePipeline: false });
+ }
+
+ // look for matches in any of the fields and apply a medium positive boost
+ var split = searchTerm.split(lunr.tokenizer.separator);
+ split.forEach(function(term) {
+ q.term(term, { usePipeline: false, fields: q.allFields, boost: 10 });
+ q.term(term + '*', { usePipeline: false, fields: q.allFields });
+ });
+ });
+
+ //convert the results into a searchMap subset
+ var mappedResults = queryResults.map(function(result){ return self.searchMap[result.ref] });
+
+ return mappedResults;
+ });
},
//function formatSearchTerm
@@ -381,7 +426,7 @@ var Search = Control.extend({
var value = ev.target.value;
//hide search if input is empty or less than min length
- if(!value || !value.length || value.length < this.options.minSearchLength){
+ if(!value || !value.length){
this.unsetSearchState();
return;
}
@@ -396,6 +441,7 @@ var Search = Control.extend({
this.selectActiveResult();
break;
default:
+
if(value !== this.searchTerm){
this.searchTerm = value;
this.search(value);
@@ -427,12 +473,9 @@ var Search = Control.extend({
},
//cancel search on cancel click
- ".search-icon-cancel click": function(el, ev){
- ev.preventDefault();
- ev.stopPropagation();
- this.clear();
- },
-
+ ".search-icon-cancel click": "clear",
+ ".search-icon-cancel touchend": "clear",
+
// ---- END EVENTS ---- //
// ---- RESULTS EVENTS ---- //
@@ -459,8 +502,6 @@ var Search = Control.extend({
self.navigate($a.attr("href"));
return;
}
-
- self.clear();
});
}
},
@@ -487,36 +528,41 @@ var Search = Control.extend({
clearTimeout(this.searchDebounceHandle);
var self = this;
this.searchDebounceHandle = setTimeout(function(){
- var resultsMap = self.searchEngineSearch(value),
- numResults = Object.keys(resultsMap).length,
- resultsFrag = self.options.resultsRenderer({
- results:resultsMap,
- numResults:numResults,
- searchValue:value,
- pathPrefix: (self.options.pathPrefix === '.') ? '' : '/' + self.options.pathPrefix + '/'
- },{
- docUrl: function(){
- if(!self.options.pathPrefix){
- return this.url;
- }
-
- var root = joinURIs(window.location.href, self.options.pathPrefix);
- if(root.substr(-1) === "/"){
- root = root.substr(0, root.length-1);
- }
-
- return root + "/" + this.url;
+ self.searchEngineSearch(value).then(function(results) {
+ var numResults = results.length;
+ if (numResults > 50) {
+ numResults = '50+';
+ results = results.slice(0, 50);
+ }
+ var resultsFrag = self.options.resultsRenderer({
+ results: results,
+ numResults: numResults,
+ searchValue:value,
+ pathPrefix: (self.options.pathPrefix === '.') ? '' : '/' + self.options.pathPrefix + '/'
+ },{
+ docUrl: function(){
+ if(!self.options.pathPrefix){
+ return this.url;
}
- });
- self.$resultsWrap.empty();
- self.$resultsWrap[0].appendChild(resultsFrag);
+ var root = joinURIs(window.location.href, self.options.pathPrefix);
+ if(root.substr(-1) === "/"){
+ root = root.substr(0, root.length-1);
+ }
- //refresh necessary dom
- self.$resultsList = null;
- if(numResults){
- self.$resultsList = self.$resultsWrap.find(".search-results > ul");
- }
+ return root + "/" + this.url;
+ }
+ });
+
+ self.$resultsWrap.empty();
+ self.$resultsWrap[0].appendChild(resultsFrag);
+
+ //refresh necessary dom
+ self.$resultsList = null;
+ if(numResults){
+ self.$resultsList = self.$resultsWrap.find(".search-results > ul");
+ }
+ });
}, this.options.searchTimeout);
},
@@ -525,7 +571,11 @@ var Search = Control.extend({
// function clear
// - clears & focuses the input
// - unsets the search state
- clear: function(){
+ clear: function(element, event) {
+ if (event) {
+ event.preventDefault();
+ event.stopPropagation();
+ }
this.$input.val("").trigger("focus");
this.unsetSearchState();
},
@@ -549,8 +599,9 @@ var Search = Control.extend({
this.options.onResultsHide();
}
this.deactivateResult();
+ $('#left').removeClass('search-showing');
this.$resultsContainer.stop().addClass("is-hiding").fadeOut({
- duration: 400,
+ duration: this.options.searchAnimation,
complete: function(){
self.$resultsContainer.removeClass("is-hiding");
if(!self.$resultsContainer.is(".is-showing")){
@@ -577,18 +628,19 @@ var Search = Control.extend({
}
this.$resultsContainerParent.stop().addClass("search-active");
this.$resultsContainer.addClass("is-showing").fadeIn({
- duration: 400,
+ duration: this.options.searchAnimation,
complete: function(){
if(!self.$resultsContainer.is(".is-hiding")){
- self.$resultsContainer.removeClass("is-showing")
+ self.$resultsContainer.removeClass("is-showing");
if(self.options.onResultsShown){
self.options.onResultsShown();
}
}
}
});
-
+
this.$resultsContainer.scrollTop(0);
+ $('#left').addClass('search-showing');
}
},
@@ -618,7 +670,7 @@ var Search = Control.extend({
$nextResult = this.$activeResult.next("li");
- //if no next result,
+ //if no next result,
// activate the first one
if(!$nextResult || ($nextResult && !$nextResult.length)){
this.activateResult(this.$resultsList.find("li").first());
@@ -647,7 +699,7 @@ var Search = Control.extend({
$prevResult = this.$activeResult.prev("li");
- //if no prev result,
+ //if no prev result,
// activate the last one
if(!$prevResult || ($prevResult && !$prevResult.length)){
this.activateResult(this.$resultsList.find("li").last());
@@ -659,7 +711,7 @@ var Search = Control.extend({
// function activateResult
// sets property and adds class to active result
activateResult: function($result){
- this.deactivateResult();
+ this.deactivateResult();
this.$activeResult = $result;
this.$activeResult.addClass(this.options.keyboardActiveClass);
@@ -694,7 +746,7 @@ var Search = Control.extend({
// if method provided, use the return value
// otherwise, use the position().top of the first list item
getActiveResultOffset: function(){
-
+
if(this.options.getActiveResultOffset){
return this.options.getActiveResultOffset();
}
@@ -711,7 +763,7 @@ var Search = Control.extend({
// ---- HELPERS ---- //
- // function navigate
+ // function navigate
//if we've been given a navigate method, call it
// otherwise, just navigate normally
navigate: function(href){
@@ -720,9 +772,6 @@ var Search = Control.extend({
}else{
window.location.href = href;
}
-
- this.clear();
-
}
// ---- END HELPERS ---- //
diff --git a/static/search.less b/static/search.less
index d4309b53..7de9e824 100644
--- a/static/search.less
+++ b/static/search.less
@@ -3,16 +3,15 @@
background: @code-color;
padding: @gutter @gutter*2;
height: 48px;
- cursor:pointer;
+ // cursor:pointer;
.search-wrap{
+ display: flex;
position: relative;
- padding: 0 1.5em;
+ top: 1px;
+
.search-icon{
display: block;
- position: absolute;
- top: 1px;
- left: 0;
height: 1em;
width: 1em;
font-size: 1em;
@@ -22,13 +21,11 @@
background-repeat: no-repeat;
}
.search-icon-cancel{
- display: block;
- position: absolute;
- right: 0;
+ position: relative;
height: 1em;
width: 1em;
font-size: .8em;
- top: 0.25em;
+ top: 0.125em;
cursor: pointer;
background-color: @code-color;
background-image: url(img/icon-x-white.svg);
@@ -37,13 +34,13 @@
display:none;
}
-
.search{
+ transition: width @transition-speed ease;
background: @code-color;
color: #ffffff;
border: none;
- padding: 0;
- // text-indent: 1.5em;
+ padding: 0 .5em;
+ flex: 1;
.placeholder(@gray);
&:focus{
outline:none;
@@ -54,10 +51,6 @@
display:block;
}
}
-
- @media screen and (min-width: @breakpoint) {
- display: block;
- }
}
.bottom-left{
@@ -72,7 +65,8 @@
left: 0;
overflow-y: auto;
padding: 2em 0;
-
+ transition: -webkit-backdrop-filter backdrop-filter background @transition-speed ease;
+ z-index: 1;
.search-cancel{
color: @code-color;
display: block;
@@ -80,9 +74,6 @@
padding: .5em;
font-size: 1em;
line-height: 1;
- position: absolute;
- top: 0;
- right: 0;
}
ul{
@@ -90,7 +81,6 @@
> li{
padding: .9em .5em;
border-bottom: 1px solid @light-gray-color;
- border-left:3px solid transparent;
a{
color: @link-color;
padding-bottom:0;
@@ -119,8 +109,7 @@
}
&:hover,
&.keyboard-active{
- background-color: @highlight-color;
- border-left-color:@gray;
+ background-color: @light-gray-color;
cursor:pointer;
}
}
@@ -128,7 +117,6 @@
.search-results-heading{
padding:0 .5em;
- border-left: 3px solid transparent;
border-bottom: 1px solid @light-gray-color;
padding-bottom: 1em;
.count{
@@ -150,3 +138,11 @@
position:relative;
}
}
+
+@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {
+ .bottom-left .search-results-container {
+ -webkit-backdrop-filter: @backdrop-blur;
+ backdrop-filter: @backdrop-blur;
+ background: rgba(100%, 100%, 100%, .65);
+ }
+}
diff --git a/static/sidebar.less b/static/sidebar.less
index adaa56ff..4603ca3e 100644
--- a/static/sidebar.less
+++ b/static/sidebar.less
@@ -1,18 +1,3 @@
-.search-bar {
- background: @code-color;
- padding: @gutter @gutter*2;
- height: 48px;
- p {
- border: none;
- margin: 0px;
- color: white;
- font-weight: 300;
- }
- @media screen and (min-width: @breakpoint) {
- display: block;
- }
-}
-
// ----- SOCIAL BUTTONS FOR MOBILE VIEW -----
ul.social-side{
margin: 0;
diff --git a/static/templates/search-results.stache b/static/templates/search-results.stache
index 72f738d4..141c8343 100644
--- a/static/templates/search-results.stache
+++ b/static/templates/search-results.stache
@@ -23,12 +23,12 @@
{{#if result.title}}
({{result.name}})
-
+
{{/if}}
{{#if result.description}}
- {{{result.description}}}
+ {{result.description}}
{{/if}}
diff --git a/static/variables.less b/static/variables.less
index a55d1f1f..a5a3bcda 100644
--- a/static/variables.less
+++ b/static/variables.less
@@ -18,3 +18,6 @@
/*----- TYPE -----*/
@font-weight-heading: 500;
+
+/*----- OTHER -----*/
+@backdrop-blur: saturate(180%) blur(20px);
diff --git a/templates/breadcrumb.mustache b/templates/breadcrumb.mustache
index 04fb056d..2e813400 100644
--- a/templates/breadcrumb.mustache
+++ b/templates/breadcrumb.mustache
@@ -1,12 +1,15 @@
diff --git a/templates/footer.mustache b/templates/footer.mustache
index 2c32e8ed..6c923d92 100644
--- a/templates/footer.mustache
+++ b/templates/footer.mustache
@@ -1 +1 @@
-CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently {{package.version}}.
\ No newline at end of file
+CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently {{package.version}}.
diff --git a/templates/header-left.mustache b/templates/header-left.mustache
index b5af5c48..cb78d49c 100644
--- a/templates/header-left.mustache
+++ b/templates/header-left.mustache
@@ -3,10 +3,10 @@
diff --git a/templates/header-right.mustache b/templates/header-right.mustache
index 0787cc3b..0e25b0a0 100644
--- a/templates/header-right.mustache
+++ b/templates/header-right.mustache
@@ -1,7 +1,7 @@