OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Adjusted mobile styles for search results

Browse Source
This commit is contained in:
squidfunk 2017-03-14 18:30:33 +01:00
parent ba3565625d
commit 1440c62e57
9 changed files with 52 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lib/declarations/jsx.js
View File

@ -27,7 +27,7 @@
declare class Jsx {
static createElement(tag: string, properties?: Object,
...children?: Array<
string | number | { __html: string } | Array<HTMLElement>
string | number | { __html?: string } | Array<HTMLElement>
>
): HTMLElement
}

5
lib/providers/jsx.js
View File

@ -32,7 +32,8 @@ export default /* JSX */ {
*
* @param {string} tag - Tag name
* @param {?Object} properties - Properties
* @param {...(string|number|Array)} children - Child nodes
* @param {Array<string | number | { __html?: string } | Array<HTMLElement>>}
* children - Child nodes
* @return {HTMLElement} Native DOM node
*/
createElement(tag, properties, ...children) {
@ -62,7 +63,7 @@ export default /* JSX */ {
el.innerHTML += node.__html
/* Append regular nodes */
} else {
} else if (node instanceof Node) {
el.appendChild(node)
}
})

3
material/assets/javascripts/application-095a104376.js
View File

File diff suppressed because one or more lines are too long

3
material/assets/javascripts/application-2b47141f13.js Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-76741b64bc.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-b825c62f38.css
View File

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -38,7 +38,7 @@
<script src="{{ base_url }}/assets/javascripts/modernizr-56ade86843.js"></script>
{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-b825c62f38.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-76741b64bc.css">
{% if config.extra.palette %}
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-66fa0d9bba.palette.css">
{% endif %}
@ -151,7 +151,7 @@
{% endblock %}
</div>
{% block scripts %}
<script src="{{ base_url }}/assets/javascripts/application-095a104376.js"></script>
<script src="{{ base_url }}/assets/javascripts/application-2b47141f13.js"></script>
<script>app.initialize({url:{base:"{{ base_url }}"}})</script>
{% for path in extra_javascript %}
<script src="{{ path }}"></script>

67
src/assets/javascripts/components/Material/Search/Result.jsx
View File

@ -72,7 +72,7 @@ export default class Result {
*
* This is not a reasonable approach, since the summaries kind of suck. It
* would be better to create something more intelligent, highlighting the
* search occurrences and making a better summary out of it
* search occurrences and making a better summary out of it.
*
* @param {string} string - String to be truncated
* @param {number} n - Number of characters
@ -171,14 +171,12 @@ export default class Result {
/* Assemble highlight regex from query string */
const match = new RegExp(
`\\b(${target.value.trim().replace(" ", "|")})`, "img")
const highlight = string => `<em>${string}</em>`
/* Render results */
result.forEach((items, ref) => {
const doc = this.docs_.get(ref)
// TODO: unify teaser and stuff again and use modifier --document --section
// TODO: write a highlight function which receives a document --> can be abstracted later
/* Append search result */
this.list_.appendChild(
<li class="md-search-result__item">
@ -187,15 +185,12 @@ export default class Result {
<article class="md-search-result__article
md-search-result__article--document">
<h1 class="md-search-result__title">
{{ __html:
doc.title.replace(match, string => `<em>${string}</em>`)
}}
{{ __html: doc.title.replace(match, highlight) }}
</h1>
<p class="md-search-result__teaser">
{{ __html:
doc.text.replace(match, string => `<em>${string}</em>`)
}}
</p>
{doc.text.length ?
<p class="md-search-result__teaser">
{{ __html: doc.text.replace(match, highlight) }}
</p> : {}}
</article>
</a>
{items.map(item => {
@ -203,20 +198,14 @@ export default class Result {
return (
<a href={section.location} title={section.title}
class="md-search-result__link" data-md-rel="anchor">
<article class="md-search-result__article
md-search-result__article--section">
<article class="md-search-result__article">
<h1 class="md-search-result__title">
{{ __html:
section.title.replace(match,
string => `<em>${string}</em>`)
}}
{{ __html: section.title.replace(match, highlight) }}
</h1>
<p class="md-search-result__teaser">
{{ __html:
section.text.replace(match,
string => `<em>${string}</em>`)
}}
</p>
{section.text.length ?
<p class="md-search-result__teaser">
{{ __html: section.text.replace(match, highlight) }}
</p> : {}}
</article>
</a>
)
@ -225,34 +214,6 @@ export default class Result {
) /* {this.truncate_(doc.text, 140)} */
})
// process results!
// const re = new RegExp(`\\b${target.value}`, "img")
// result.map(item => {
// // console.time("someFunction")
// text = text.replace(re, "*XXX*") // do in parallel and collect!
// // console.timeEnd("someFunction")
// })
// result.forEach(item => {
// const doc = this.docs_[item.ref]
// // console.log(item.score)
//
// /* Check if it's a anchor link on the current page */
// let [pathname] = doc.location.split("#")
// pathname = pathname.replace(/^(\/?\.{2})+/g, "")
//
// // TODO: match in children but show top level entry with merged
// // sentences split top level and main entries! index one top level,
// // when there is no child
//
// let text = doc.text
// // const re = new RegExp(`\\b${ev.target.value}`, "img")
// // console.time("someFunction")
// text = text.replace(re, string => {
// return `<b style="color: red">${string}</b>`
// })
// })
/* Bind click handlers for anchors */
const anchors = this.list_.querySelectorAll("[data-md-rel=anchor]")
Array.prototype.forEach.call(anchors, anchor => {
@ -276,7 +237,7 @@ export default class Result {
/* Update search metadata */
this.meta_.textContent =
`${result.length} search result${result.length !== 1 ? "s" : ""}`
`${result.size} search result${result.size !== 1 ? "s" : ""}` // TODO "20 references in 8 documents"
}
}
}

30
src/assets/stylesheets/layout/_search.scss
View File

@ -406,7 +406,6 @@
// Document
&--document {
padding-left: 0;
// Icon
&::before {
@ -414,8 +413,13 @@
position: absolute;
left: 0;
color: $md-color-black--light;
color: $md-color-black--lighter;
content: "find_in_page";
// [tablet portrait -]: Hide page icon
@include break-to-device(tablet portrait) {
display: none;
}
}
// Title
@ -436,14 +440,36 @@
line-height: 1.4;
}
// stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix
// Teaser
&__teaser {
display: -webkit-box;
max-height: 3.3rem;
margin: 0.5em 0;
color: $md-color-black--light;
font-size: ms(-1);
line-height: 1.4;
text-overflow: ellipsis;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
// [mobile -]: Increase number of lines
@include break-to-device(mobile) {
max-height: 5rem;
-webkit-line-clamp: 3;
}
// [tablet landscape]: Increase number of lines
@include break-at-device(tablet landscape) {
max-height: 5rem;
-webkit-line-clamp: 3;
}
}
// stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix
// Highlighting
em {
font-style: normal;