Style search results

phpDocumentor · Oct 27, 2020 · 3f9d062 · 3f9d062
1 parent 4e50650
commit 3f9d062
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 18 deletions.
diff --git a/data/templates/default/components/search-results.css.twig b/data/templates/default/components/search-results.css.twig
@@ -5,12 +5,12 @@
 .phpdocumentor-search-results {
     backdrop-filter: blur(5px);
     background: var(--popover-background-color);
-    min-height: 100%;
-    left: calc(var(--spacing-lg) * -1);
-    position: absolute;
-    right: calc(var(--spacing-lg) * -1);
+    position: fixed;
     top: 0;
-    padding: 0 var(--spacing-lg);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0;
     opacity: 1;
     pointer-events: all;
 
@@ -24,14 +24,49 @@
     pointer-events: none;
 }
 
+.phpdocumentor-search-results__dialog {
+    width: 100%;
+    background: white;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.phpdocumentor-search-results__body {
+    overflow: auto;
+}
+
+.phpdocumentor-search-results__header {
+    padding: var(--spacing-lg);
+    display: flex;
+    justify-content: space-between;
+    background: var(--primary-color-darken);
+    color: white;
+    align-items: center;
+}
+
+.phpdocumentor-search-results__close {
+    font-size: var(--text-xl);
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.phpdocumentor  .phpdocumentor-search-results__title {
+    font-size: var(--text-xl);
+    margin-bottom: 0;
+}
+
 .phpdocumentor-search-results__entries {
     list-style: none;
-    padding: 0;
+    padding: 0 var(--spacing-lg);
+    margin: 0;
 }
 
 .phpdocumentor-search-results__entry {
     border-bottom: 1px solid var(--table-separator-color);
-    padding: var(--spacing-sm) var(--spacing-md);
+    padding: var(--spacing-sm) 0;
     text-align: left;
 }
 
@@ -44,8 +79,30 @@
     margin-bottom: var(--spacing-md);
     color: var(--primary-color-darker);
     display: block;
+    word-break: break-word;
 }
 
 .phpdocumentor-search-results__entry h3 {
+    font-size: var(--text-lg);
     margin: 0;
 }
+
+@media (min-width: {{ breakpoints['md'] }}) {
+    .phpdocumentor-search-results {
+        padding: 0 var(--spacing-lg);
+    }
+
+    .phpdocumentor-search-results__entry h3 {
+        font-size: var(--text-xxl);
+    }
+
+    .phpdocumentor-search-results__dialog {
+        margin: var(--spacing-xl) auto;
+        max-width: 40rem;
+        background: white;
+        border: 1px solid silver;
+        box-shadow: 0 2px 5px silver;
+        max-height: 40rem;
+        border-radius: 3px;
+    }
+}
diff --git a/data/templates/default/components/search-results.html.twig b/data/templates/default/components/search-results.html.twig
@@ -1,6 +1,11 @@
-<div data-search-results class="phpdocumentor-search-results phpdocumentor-search-results--hidden">
-
-    <h2>Search results</h2>
-    <ul class="phpdocumentor-search-results__entries">
-    </ul>
-</div>
+<section data-search-results class="phpdocumentor-search-results phpdocumentor-search-results--hidden">
+    <section class="phpdocumentor-search-results__dialog">
+        <header class="phpdocumentor-search-results__header">
+            <h2 class="phpdocumentor-search-results__title">Search results</h2>
+            <button class="phpdocumentor-search-results__close"><i class="fas fa-times"></i></button>
+        </header>
+        <section class="phpdocumentor-search-results__body">
+            <ul class="phpdocumentor-search-results__entries"></ul>
+        </section>
+    </section>
+</section>
diff --git a/data/templates/default/css/base.css.twig b/data/templates/default/css/base.css.twig
@@ -34,5 +34,6 @@ body {
 {% include 'components/breadcrumbs.css.twig' %}
 {% include 'components/back-to-top.css.twig' %}
 {% include 'components/search.css.twig' %}
+{% include 'components/search-results.css.twig' %}
 
 {% include 'css/utilities.css.twig' %}
diff --git a/data/templates/default/css/template.css.twig b/data/templates/default/css/template.css.twig
@@ -3,7 +3,6 @@
 {% include 'components/element.css.twig' %}
 {% include 'components/signature.css.twig' %}
 {% include 'components/table-of-contents.css.twig' %}
-{% include 'components/search-results.css.twig' %}
 {% include 'components/element-found-in.css.twig' %}
 {% include 'components/class-graph.css.twig' %}
 {% include 'components/tag-list.css.twig' %}

diff --git a/data/templates/default/css/variables.css.twig b/data/templates/default/css/variables.css.twig
@@ -38,7 +38,7 @@
     --button-color-primary: var(--primary-color);
     --button-text-color: #555;
     --button-text-color-primary: white;
-    --popover-background-color: hsla(96, 57%, 95%, 0.9);
+    --popover-background-color: rgba(255, 255, 255, 0.75);
     --link-color-primary: var(--primary-color-darken);
     --link-hover-color-primary: var(--primary-color-darker);
     --form-field-border-color: var(--dark-gray);

diff --git a/data/templates/default/search.js.twig b/data/templates/default/search.js.twig
@@ -68,6 +68,13 @@ var Search = (function () {
     }
 
     function close() {
+        // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+        const scrollY = document.body.style.top;
+        document.body.style.position = '';
+        document.body.style.top = '';
+        window.scrollTo(0, parseInt(scrollY || '0') * -1);
+        // End scroll prevention
+
         var form = document.querySelector('[data-search-form]');
         var searchResults = document.querySelector('[data-search-results]');
 
@@ -78,12 +85,17 @@ var Search = (function () {
     }
 
     function search(event) {
+        // Start scroll prevention: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/
+        document.body.style.position = 'fixed';
+        document.body.style.top = `-${window.scrollY}px`;
+        // End scroll prevention
+
         // prevent enter's from autosubmitting
         event.stopPropagation();
 
         var form = document.querySelector('[data-search-form]');
         var searchResults = document.querySelector('[data-search-results]');
-        var searchResultEntries = document.querySelector('[data-search-results] > ul');
+        var searchResultEntries = document.querySelector('[data-search-results] .phpdocumentor-search-results__entries');
 
         searchResultEntries.innerHTML = '';
 
@@ -94,7 +106,7 @@ var Search = (function () {
 
         form.classList.toggle('phpdocumentor-search--has-results', true);
         searchResults.classList.remove('phpdocumentor-search-results--hidden');
-        var results = fuse.search(event.target.value);
+        var results = fuse.search(event.target.value, {limit: 25});
 
         results.forEach(function (result) {
             var entry = document.createElement("li");
@@ -121,6 +133,12 @@ var Search = (function () {
         var form = document.querySelector('[data-search-form]');
         var searchField = document.querySelector('[data-search-form] input[type="search"]');
 
+        var closeButton = document.querySelector('.phpdocumentor-search-results__close');
+        closeButton.addEventListener('click', function() { close() }.bind(this));
+
+        var searchResults = document.querySelector('[data-search-results]');
+        searchResults.addEventListener('click', function() { close() }.bind(this));
+
         form.classList.add('phpdocumentor-search--active');
 
         searchField.setAttribute('placeholder', 'Search (Press "/" to focus)');
@@ -134,7 +152,7 @@ var Search = (function () {
             if (event.code === 'Escape') {
                 close();
             }
-        });
+        }.bind(this));
     }
 
     return {