Skip to content

Commit

Permalink
Stabilized Pagefind UI styles & classnames
Browse files Browse the repository at this point in the history
  • Loading branch information
@bglw
bglw committed Jun 30, 2022
1 parent f924140 commit 74ae136
Show file tree
Hide file tree
Showing 7 changed files with 336 additions and 202 deletions.
2 changes: 1 addition & 1 deletion pagefind/src/output/stubs/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ class Pagefind {
let ptr = await this.getPtr();
// Strip special characters to match the indexing operation
let exact_search = /^\s*".+"\s*$/.test(term);
term = term.toLowerCase().trim().replace(/[^\w\s]/g, "").trim();
term = term.toLowerCase().trim().replace(/[^\w\s]/g, "").replace(/\s{2,}/g, " ").trim();

let filter_list = [];
for (let [filter, values] of Object.entries(options.filters)) {
Expand Down
62 changes: 62 additions & 0 deletions pagefind_ui/dev_files/_pagefind/pagefind.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,68 @@
// This is a Pagefind testing stub that needs to be updated if src/output/search.js is changed

const stubbed_results = [
{
id: 123,
data: {
content: [
`Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
`Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
`Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
].join('\n'),
url: "/cats/",
filters: {
color: ["Red"]
},
meta: {
title: `Post about TERM`,
image: "https://placekitten.com/800/400"
},
word_count: 12,
excerpt: `some excerpt that references TERM with a nice highlighted element.`
}
},
{
id: 1234,
data: {
content: [
`Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
`Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
`Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
].join('\n'),
url: "/dogs/",
filters: {
color: ["Blue", "Gold"]
},
meta: {
title: `TERM and TERM-like things`,
image: "https://placekitten.com/1000/500"
},
word_count: 15,
excerpt: `I like TERM and also TERM...`
}
},
{
id: 12345,
data: {
content: [
`Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.`,
`Cras mattis consectetur purus sit amet fermentum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam.`,
`Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.`
].join('\n'),
url: "/llamas/",
filters: {
color: ["White"],
smell: ["Sweet"]
},
meta: {
title: `TERM the llama`,
image: "https://placekitten.com/900/600",
name: "Steve"
},
word_count: 100,
excerpt: `Nullam id dolor id nibh ultricies TERM vehicula ut id elit.`
}
},
{
id: 123,
data: {
Expand Down
130 changes: 69 additions & 61 deletions pagefind_ui/svelte/filters.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,29 @@
export const selected_filters = {};
</script>

<fieldset class="pagefind-filter-block">
<legend>Filters</legend>
<fieldset class="pagefind-ui__filter-panel">
<legend class="pagefind-ui__filter-panel-label">Filters</legend>
{#if available_filters}
{#each Object.entries(available_filters) as [filter, values]}
<details>
<summary
<details class="pagefind-ui__filter-block">
<summary class="pagefind-ui__filter-name"
>{filter.replace(/^(\w)/, (c) =>
c.toLocaleUpperCase()
)}</summary
>
<fieldset class="pagefind-filter">
<legend>{filter}</legend>
<fieldset class="pagefind-ui__filter-group">
<legend class="pagefind-ui__filter-group-label"
>{filter}</legend
>
{#each Object.entries(values) as [value, count]}
<div
class="pagefind-filter-input"
class:checked={selected_filters[
class="pagefind-ui__filter-value"
class:pagefind-ui__filter-value--checked={selected_filters[
`${filter}:${value}`
]}
>
<input
class="pagefind-ui__filter-checkbox"
type="checkbox"
id="{filter}-{value}"
name={filter}
Expand All @@ -31,123 +34,128 @@
]}
{value}
/>
<label for="{filter}-{value}"
>{value} ({count})</label
<label
class="pagefind-ui__filter-label"
for="{filter}-{value}">{value} ({count})</label
>
</div>
{/each}
</fieldset>
</details>
{/each}
{:else}
<p class="loading">..........</p>
<p class="pagefind-ui__loading">..........</p>
{/if}
</fieldset>

<style>
.pagefind-filter-block {
legend {
position: absolute;
clip: rect(0 0 0 0);
}
.pagefind-ui__filter-panel {
min-width: min(calc(260px * var(--pagefind-ui-scale)), 100%);
gap: calc(40px * var(--pagefind-ui-scale));
flex: 1;
min-width: 250px;
display: flex;
flex-direction: column;
}
fieldset {
.pagefind-ui__filter-group {
border: 0;
padding: 0;
}
legend {
position: absolute;
clip: rect(0 0 0 0);
}
details {
.pagefind-ui__filter-block {
padding: 0;
display: block;
max-height: 300px;
border-top: 1px solid #cfcfcf;
border-bottom: 1px solid #cfcfcf;
}
details + details {
margin-top: -1px;
}
summary {
.pagefind-ui__filter-name {
font-size: calc(16px * var(--pagefind-ui-scale));
position: relative;
display: flex;
align-items: center;
height: 44px;
list-style: none;
font-weight: 700;
font-size: 16px;
cursor: pointer;
}
summary::after {
.pagefind-ui__filter-name::after {
position: absolute;
content: "";
right: 6px;
right: calc(6px * var(--pagefind-ui-scale));
top: 50%;
width: 8px;
height: 8px;
border: solid 2px currentColor;
width: calc(8px * var(--pagefind-ui-scale));
height: calc(8px * var(--pagefind-ui-scale));
border: solid calc(2px * var(--pagefind-ui-scale)) currentColor;
border-right: 0;
border-top: 0;
transform: translateY(-70%) rotateZ(-45deg);
}
.pagefind-filter {
.pagefind-ui__filter-block[open] .pagefind-ui__filter-name::after {
transform: translateY(-70%) rotateZ(-225deg);
}
.pagefind-ui__filter-group {
display: flex;
flex-direction: column;
gap: 8px;
padding: 0 12px 20px;
gap: calc(20px * var(--pagefind-ui-scale));
padding: calc(30px * var(--pagefind-ui-scale)) 0
calc(20px * var(--pagefind-ui-scale));
}
.pagefind-filter-input {
.pagefind-ui__filter-value {
position: relative;
display: flex;
align-items: center;
gap: 8px;
gap: calc(8px * var(--pagefind-ui-scale));
}
.pagefind-filter-input::before {
.pagefind-ui__filter-value::before {
position: absolute;
content: "";
top: 50%;
left: 8px;
left: calc(8px * var(--pagefind-ui-scale));
width: 0px;
height: 0px;
border: solid 1px #fff;
opacity: 0;
transform: translate(-4.5px, 0.8px) skewX(-5deg) rotateZ(-45deg);
transform: translate(
calc(4.5px * var(--pagefind-ui-scale) * -1),
calc(0.8px * var(--pagefind-ui-scale))
)
skewX(-5deg) rotateZ(-45deg);
transform-origin: top left;
border-top: 0;
border-right: 0;
pointer-events: none;
}
.pagefind-filter-input.checked::before {
.pagefind-ui__filter-value.pagefind-ui__filter-value--checked::before {
opacity: 1;
width: 9px;
height: 4px;
width: calc(9px * var(--pagefind-ui-scale));
height: calc(4px * var(--pagefind-ui-scale));
transition: width 0.1s ease-out 0.1s, height 0.1s ease-in;
}
input[type="checkbox"] {
.pagefind-ui__filter-checkbox {
margin: 0;
width: 16px;
height: 16px;
border: solid 1px #cfcfcf;
width: calc(16px * var(--pagefind-ui-scale));
height: calc(16px * var(--pagefind-ui-scale));
border: solid 1px var(--pagefind-ui-border);
appearance: none;
-webkit-appearance: none;
border-radius: 4px;
background-color: #fff;
border-radius: calc(var(--pagefind-ui-border-radius) / 2);
background-color: var(--pagefind-ui-background);
cursor: pointer;
}
input[type="checkbox"]:checked {
background-color: #034ad8;
border: solid 1px #034ad8;
.pagefind-ui__filter-checkbox:checked {
background-color: var(--pagefind-ui-primary);
border: solid 1px var(--pagefind-ui-primary);
}
label {
.pagefind-ui__filter-label {
cursor: pointer;
font-size: 16px;
font-size: calc(16px * var(--pagefind-ui-scale));
font-weight: 400;
}
.loading {
height: 44px;
.pagefind-ui__loading {
height: calc(44px * var(--pagefind-ui-scale));
margin: 0;
color: #efefef;
background-color: #efefef;
color: var(--pagefind-ui-text);
background-color: var(--pagefind-ui-text);
opacity: 0.1;
pointer-events: none;
}
</style>
34 changes: 20 additions & 14 deletions pagefind_ui/svelte/reset.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,70 +10,71 @@
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
:global(.pagefind-ui--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) {
:global(.pagefind-ui--reset *, .pagefind-ui--reset
*::before, .pagefind-ui--reset *::after) {
box-sizing: border-box;
}
/* Reapply the pointer cursor for anchor tags */
:global(.pagefind-reset a, .pagefind-reset button) {
:global(.pagefind-ui--reset a, .pagefind-ui--reset button) {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
:global(.pagefind-reset ol, .pagefind-reset ul, .pagefind-reset menu) {
:global(.pagefind-ui--reset ol, .pagefind-ui--reset ul, .pagefind-ui--reset
menu) {
list-style: none;
}
/* For images to not be able to exceed their container */
:global(.pagefind-reset img) {
:global(.pagefind-ui--reset img) {
max-width: 100%;
}
/* removes spacing between cells in tables */
:global(.pagefind-reset table) {
:global(.pagefind-ui--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) {
:global(.pagefind-ui--reset input, .pagefind-ui--reset textarea) {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
:global(.pagefind-reset textarea) {
:global(.pagefind-ui--reset textarea) {
white-space: revert;
}
/* minimum style to allow to style meter element */
:global(.pagefind-reset meter) {
:global(.pagefind-ui--reset meter) {
-webkit-appearance: revert;
appearance: revert;
}
/* reset default text opacity of input placeholder */
:global(.pagefind-reset ::placeholder) {
:global(.pagefind-ui--reset ::placeholder) {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:global(.pagefind-reset :where([hidden])) {
:global(.pagefind-ui--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
:global(.pagefind-ui--reset
:where([contenteditable]:not([contenteditable="false"]))) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
Expand All @@ -83,7 +84,12 @@
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:global(.pagefind-reset :where([draggable="true"])) {
:global(.pagefind-ui--reset :where([draggable="true"])) {
-webkit-user-drag: element;
}
/* Pagefind specific — use the default mark styling */
:global(.pagefind-ui--reset mark) {
all: revert;
}
</style>
Loading

0 comments on commit 74ae136

Please sign in to comment.