mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Adjusted mobile styles for search results
This commit is contained in:
squidfunk
parent
ba3565625d
commit
1440c62e57
@ -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
|
||||
}
|
||||
|
||||
@ -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)
|
||||
}
|
||||
})
|
||||
|
||||
File diff suppressed because one or more lines are too long
3
material/assets/javascripts/application-2b47141f13.js
Normal file
3
material/assets/javascripts/application-2b47141f13.js
Normal file
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-76741b64bc.css
Normal file
1
material/assets/stylesheets/application-76741b64bc.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -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>
|
||||
|
||||
@ -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>
|
||||
{doc.text.length ?
|
||||
<p class="md-search-result__teaser">
|
||||
{{ __html:
|
||||
doc.text.replace(match, string => `<em>${string}</em>`)
|
||||
}}
|
||||
</p>
|
||||
{{ __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>
|
||||
{section.text.length ?
|
||||
<p class="md-search-result__teaser">
|
||||
{{ __html:
|
||||
section.text.replace(match,
|
||||
string => `<em>${string}</em>`)
|
||||
}}
|
||||
</p>
|
||||
{{ __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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user