More UI iteration

CloudCannon · Jun 29, 2022 · 9038c99 · 9038c99
1 parent 7f132ae
commit 9038c99
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 2 deletions.
diff --git a/pagefind_ui/svelte/filters.svelte b/pagefind_ui/svelte/filters.svelte
@@ -53,6 +53,7 @@
         clip: rect(0 0 0 0);
     }
     details {
+        padding: 0;
         display: block;
         max-height: 300px;
         border-top: 1px solid #cfcfcf;

diff --git a/pagefind_ui/svelte/reset.svelte b/pagefind_ui/svelte/reset.svelte
@@ -0,0 +1,89 @@
+<script></script>
+
+<style>
+    /***
+    The new CSS reset - version 1.7.2 (last updated 23.6.2022)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+    /*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+ */
+    :global(.pagefind-reset
+            *:where(:not(html, iframe, canvas, img, svg, video):not(svg
+                    *, symbol *))) {
+        all: unset;
+        display: revert;
+    }
+
+    /* Preferred box-sizing value */
+    :global(.pagefind-reset *, .pagefind-reset *::before, .pagefind-reset
+            *::after) {
+        box-sizing: border-box;
+    }
+
+    /* Reapply the pointer cursor for anchor tags */
+    :global(.pagefind-reset a, .pagefind-reset button) {
+        cursor: revert;
+    }
+
+    /* Remove list styles (bullets/numbers) */
+    :global(.pagefind-reset ol, .pagefind-reset ul, .pagefind-reset menu) {
+        list-style: none;
+    }
+
+    /* For images to not be able to exceed their container */
+    :global(.pagefind-reset img) {
+        max-width: 100%;
+    }
+
+    /* removes spacing between cells in tables */
+    :global(.pagefind-reset table) {
+        border-collapse: collapse;
+    }
+
+    /* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+    :global(.pagefind-reset input, .pagefind-reset textarea) {
+        -webkit-user-select: auto;
+    }
+
+    /* revert the 'white-space' property for textarea elements on Safari */
+    :global(.pagefind-reset textarea) {
+        white-space: revert;
+    }
+
+    /* minimum style to allow to style meter element */
+    :global(.pagefind-reset meter) {
+        -webkit-appearance: revert;
+        appearance: revert;
+    }
+
+    /* reset default text opacity of input placeholder */
+    :global(.pagefind-reset ::placeholder) {
+        color: unset;
+    }
+
+    /* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+    :global(.pagefind-reset :where([hidden])) {
+        display: none;
+    }
+
+    /* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+    :global(.pagefind-reset
+            :where([contenteditable]:not([contenteditable="false"]))) {
+        -moz-user-modify: read-write;
+        -webkit-user-modify: read-write;
+        overflow-wrap: break-word;
+        -webkit-line-break: after-white-space;
+        -webkit-user-select: auto;
+    }
+
+    /* apply back the draggable feature - exist only in Chromium and Safari */
+    :global(.pagefind-reset :where([draggable="true"])) {
+        -webkit-user-drag: element;
+    }
+</style>
diff --git a/pagefind_ui/svelte/ui.svelte b/pagefind_ui/svelte/ui.svelte
@@ -1,6 +1,7 @@
 <script>
     import Result from "./result.svelte";
     import Filters from "./filters.svelte";
+    import Reset from "./reset.svelte";
 
     export let base_path = "/_pagefind/";
     export let pagefind_options = {};
@@ -74,12 +75,21 @@
             }
             searchResult = results;
             loading = false;
+            show = 5;
         }
     };
+
+    const showMore = () => {
+        show += 5;
+    };
 </script>
 
-<div class="pagefind-ui">
-    <form role="search" aria-label="Search this site">
+<div class="pagefind-ui pagefind-reset">
+    <form
+        role="search"
+        aria-label="Search this site"
+        action="javascript:void(0);"
+    >
         <input
             on:focus={init}
             bind:value={val}
@@ -115,6 +125,11 @@
                                 <Result {result} />
                             {/each}
                         </ol>
+                        {#if searchResult.results.length > show}
+                            <button on:click={showMore}
+                                >Load more results</button
+                            >
+                        {/if}
                     {/if}
                 {/if}
             </div>
@@ -190,4 +205,22 @@
         font-weight: 700;
         margin-top: 0;
     }
+
+    button {
+        border: 2px solid #cfcfcf;
+        border-radius: 8px;
+        height: 48px;
+        padding: 0 12px;
+        color: #034ad8;
+        font-weight: 700;
+        font-size: 16px;
+        cursor: pointer;
+        background: #fff;
+    }
+
+    button:hover {
+        border-color: #034ad8;
+        background: #fff;
+        margin-top: 40px;
+    }
 </style>