Adjusted mobile styles for search results

lib/declarations/jsx.js

@@ -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
 }

lib/providers/jsx.js

@@ -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)
         }
       })

material/base.html

@@ -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>

src/assets/javascripts/components/Material/Search/Result.jsx

@@ -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:
+                  {{ __html: doc.title.replace(match, highlight) }}
-                      doc.title.replace(match, string => `<em>${string}</em>`)
-                  }}
                 </h1>
-                <p class="md-search-result__teaser">
+                {doc.text.length ?
-                  {{ __html:
+                  <p class="md-search-result__teaser">
-                      doc.text.replace(match, string => `<em>${string}</em>`)
+                    {{ __html: doc.text.replace(match, highlight) }}
-                  }}
+                  </p> : {}}
-                </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
+                  <article class="md-search-result__article">
-                        md-search-result__article--section">
                     <h1 class="md-search-result__title">
-                      {{ __html:
+                      {{ __html: section.title.replace(match, highlight) }}
-                          section.title.replace(match,
-                            string => `<em>${string}</em>`)
-                      }}
                     </h1>
-                    <p class="md-search-result__teaser">
+                    {section.text.length ?
-                      {{ __html:
+                      <p class="md-search-result__teaser">
-                          section.text.replace(match,
+                        {{ __html: section.text.replace(match, highlight) }}
-                            string => `<em>${string}</em>`)
+                      </p> : {}}
-                      }}
-                    </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"
     }
   }
 }

src/assets/stylesheets/layout/_search.scss

@@ -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;