-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: improve custom component search page (#1112)
<!-- For Coveo Employees only. Fill this section. CDX-XXX --> ## Proposed changes * Enhanced results templates * Updated facets * Dedicated pipeline with featured results ### Before  ### After  <!-- Remove this section if the PR does not include any breaking change If your changes includes some breaking changes in the code, thoroughly explains: - What are the breaking changes programmatically speaking. - What is the impact on the end-user (e.g. user cannot do X anymore). - What motivates those changes. --> ## Testing - [ ] Unit Tests: <!-- Did you write unit tests for your feature? If not, explains why? --> - [ ] Functionnal Tests: <!-- Did you write functionnal tests for your feature? If not, explains why? --> - [ ] Manual Tests: <!-- How did you test your changeset? --> --------- Co-authored-by: Louis Bompart <[email protected]>
- Loading branch information
1 parent
97498ed
commit db1d2cb
Showing
6 changed files
with
327 additions
and
82 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
packages/ui/atomic/create-atomic-component-project/template/src/pages/index.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,7 @@ | ||
| :root { | ||
| --atomic-font-family: Lexend; | ||
| --atomic-font-normal: 300; | ||
| } | ||
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -5,28 +5,42 @@ | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Test-2121</title> | ||
| <link href="/index.css" rel="stylesheet" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://fonts.googleapis.com/css?family=Lexend:200,300,400,500,600,700,900&display=swap" | ||
| /> | ||
| <link href="/atomic/themes/coveo.css" rel="stylesheet" /> | ||
| <!-- | ||
| <link href="/index.css" rel="stylesheet" /> | ||
| <!-- | ||
| When using the Coveo CDN - Make sure you're using the same minor version as the packaged Atomic. | ||
| E.g., if you have "@coveo/[email protected]" installed, use the "/atomic/v1.44/" path. | ||
| <script type="module" src="https://static.cloud.coveo.com/atomic/vMAJOR.MINOR/atomic.esm.js"></script> | ||
| <script type="module" src="https://static.cloud.coveo.com/atomic/vMAJOR.MINOR/atomic.esm.js"></script> | ||
| --> | ||
| <script type="module" src="/atomic/atomic.esm.js"></script> | ||
| <!-- Custom Elements Lazy Loading --> | ||
| <script type="module" src="/build/my-custom-components.esm.js"></script> | ||
| </head> | ||
| <body> | ||
| <atomic-search-interface> | ||
| <atomic-search-interface | ||
| fields-to-include='["urihash","objecttype","collection","foldingcollection","foldingparent","foldingchild","date","ytvideoduration","ytviewcount","ytthumbnailurl","sports_blogimage"]' | ||
| > | ||
| <atomic-search-layout> | ||
| <atomic-layout-section section="search"> | ||
| <atomic-search-box></atomic-search-box> | ||
| </atomic-layout-section> | ||
| <atomic-layout-section section="facets"> | ||
| <atomic-facet-manager> | ||
| <atomic-facet field="filetype" label="Filetype"></atomic-facet> | ||
| <atomic-facet field="source" label="Source"></atomic-facet> | ||
| <atomic-facet | ||
| field="objecttype" | ||
| label="Type" | ||
| with-search="false" | ||
| ></atomic-facet> | ||
| <atomic-timeframe-facet label="Date" with-date-picker> | ||
| <atomic-timeframe unit="month"></atomic-timeframe> | ||
| <atomic-timeframe unit="quarter"></atomic-timeframe> | ||
| <atomic-timeframe unit="year"></atomic-timeframe> | ||
| </atomic-timeframe-facet> | ||
| </atomic-facet-manager> | ||
| </atomic-layout-section> | ||
| <atomic-layout-section section="main"> | ||
|
|
@@ -47,75 +61,302 @@ | |
| <atomic-did-you-mean></atomic-did-you-mean> | ||
| </atomic-layout-section> | ||
| <atomic-layout-section section="results"> | ||
| <atomic-result-list> | ||
| <atomic-result-template> | ||
| <atomic-folded-result-list display="list" image-size="small"> | ||
| <atomic-result-template must-match-source="Youtube"> | ||
| <template> | ||
| <style> | ||
| .field { | ||
| display: inline-flex; | ||
| white-space: nowrap; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .field-label { | ||
| font-weight: bold; | ||
| margin-right: 0.25rem; | ||
| } | ||
| </style> | ||
|
|
||
| <atomic-result-section-visual> | ||
| <atomic-result-icon class="icon"></atomic-result-icon> | ||
| </atomic-result-section-visual> | ||
| .smooth-border { | ||
| border-radius: 5px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .force-fit-content { | ||
| height: fit-content !important; | ||
| } | ||
| </style> | ||
| <atomic-result-section-badges> | ||
| <atomic-field-condition must-match-is-recommendation="true"> | ||
| <atomic-result-badge | ||
| label="Recommended" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| <atomic-field-condition must-match-is-top-result="true"> | ||
| <atomic-result-badge | ||
| label="Top Result" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-badges> | ||
|
|
||
| <atomic-result-section-title> | ||
| <atomic-result-link></atomic-result-link> | ||
| <atomic-result-link> | ||
| <a slot="attributes" target="_blank"></a> | ||
| </atomic-result-link> | ||
| </atomic-result-section-title> | ||
|
|
||
| <atomic-result-section-excerpt> | ||
| <atomic-result-section-visual class="force-fit-content"> | ||
| <atomic-field-condition if-defined="ytthumbnailurl"> | ||
| <atomic-result-image | ||
| field="ytthumbnailurl" | ||
| class="force-fit-content smooth-border" | ||
| ></atomic-result-image> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-visual> | ||
|
|
||
| <atomic-result-section-excerpt style="margin-top: 0.5rem"> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
|
|
||
| <atomic-result-section-bottom-metadata> | ||
| <atomic-result-fields-list> | ||
| <atomic-field-condition class="field" if-defined="source"> | ||
| <span class="field-label"> | ||
| <atomic-text value="source"></atomic-text>: | ||
| </span> | ||
| <atomic-result-text field="source"></atomic-result-text> | ||
| <atomic-field-condition | ||
| class="field" | ||
| if-defined="ytvideoduration" | ||
| > | ||
| <span> 00: </span> | ||
| <atomic-result-number | ||
| field="ytvideoduration" | ||
| ></atomic-result-number> | ||
| </atomic-field-condition> | ||
|
|
||
| <atomic-field-condition | ||
| class="field" | ||
| if-defined="language" | ||
| if-defined="ytviewcount" | ||
| > | ||
| <span class="field-label"> | ||
| <atomic-text value="language"></atomic-text>: | ||
| <atomic-text value="Views"></atomic-text>: | ||
| </span> | ||
| <atomic-result-multi-value-text | ||
| field="language" | ||
| ></atomic-result-multi-value-text> | ||
| <atomic-result-number | ||
| field="ytviewcount" | ||
| ></atomic-result-number> | ||
| </atomic-field-condition> | ||
|
|
||
| <span class="field"> | ||
| <atomic-result-date | ||
| relative-time="true" | ||
| format="MMM D, YYYY" | ||
| ></atomic-result-date> | ||
| </span> | ||
| </atomic-result-fields-list> | ||
| </atomic-result-section-bottom-metadata> | ||
| </template> | ||
| </atomic-result-template> | ||
|
|
||
| <atomic-result-template must-match-source="Sports - Blog"> | ||
| <template> | ||
| <style> | ||
| .field { | ||
| display: inline-flex; | ||
| white-space: nowrap; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .field-label { | ||
| font-weight: bold; | ||
| margin-right: 0.25rem; | ||
| } | ||
|
|
||
| .smooth-border { | ||
| border-radius: 5px; | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .force-fit-content { | ||
| height: fit-content !important; | ||
| } | ||
| </style> | ||
| <atomic-result-section-badges> | ||
| <atomic-field-condition must-match-is-recommendation="true"> | ||
| <atomic-result-badge | ||
| label="Recommended" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| <atomic-field-condition must-match-is-top-result="true"> | ||
| <atomic-result-badge | ||
| label="Top Result" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-badges> | ||
|
|
||
| <atomic-result-section-title> | ||
| <atomic-result-link> | ||
| <a slot="attributes" target="_blank"></a> | ||
| </atomic-result-link> | ||
| </atomic-result-section-title> | ||
|
|
||
| <atomic-result-section-visual class="force-fit-content"> | ||
| <atomic-field-condition if-defined="sports_blogimage"> | ||
| <atomic-result-image | ||
| field="sports_blogimage" | ||
| class="force-fit-content smooth-border" | ||
| ></atomic-result-image> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-visual> | ||
|
|
||
| <atomic-result-section-excerpt style="margin-top: 0.5rem"> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
|
|
||
| <atomic-result-section-bottom-metadata> | ||
| <atomic-result-fields-list> | ||
| <atomic-field-condition | ||
| class="field" | ||
| if-defined="filetype" | ||
| if-defined="ytviewcount" | ||
| > | ||
| <span class="field-label"> | ||
| <atomic-text value="fileType"></atomic-text>: | ||
| <atomic-text value="Views"></atomic-text>: | ||
| </span> | ||
| <atomic-result-text | ||
| field="filetype" | ||
| ></atomic-result-text> | ||
| <atomic-result-number | ||
| field="ytviewcount" | ||
| ></atomic-result-number> | ||
| </atomic-field-condition> | ||
|
|
||
| <span class="field"> | ||
| <span class="field-label">Date:</span> | ||
| <atomic-result-date></atomic-result-date> | ||
| <atomic-result-date | ||
| relative-time="true" | ||
| format="MMM D, YYYY" | ||
| ></atomic-result-date> | ||
| </span> | ||
| </atomic-result-fields-list> | ||
| </atomic-result-section-bottom-metadata> | ||
| </template> | ||
| </atomic-result-template> | ||
| </atomic-result-list> | ||
|
|
||
| <atomic-result-template must-match-source="Chatter"> | ||
| <template> | ||
| <style> | ||
| .thumbnail { | ||
| border-radius: 5px; | ||
| } | ||
| </style> | ||
| <atomic-result-section-visual class="thumbnail"> | ||
| <img src="https://picsum.photos/360" /> | ||
| </atomic-result-section-visual> | ||
|
|
||
| <atomic-result-section-badges> | ||
| <atomic-field-condition must-match-is-recommendation="true"> | ||
| <atomic-result-badge | ||
| label="Recommended" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| <atomic-field-condition must-match-is-top-result="true"> | ||
| <atomic-result-badge | ||
| label="Top Result" | ||
| ></atomic-result-badge> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-badges> | ||
|
|
||
| <atomic-result-section-title> | ||
| <atomic-result-link></atomic-result-link> | ||
| </atomic-result-section-title> | ||
|
|
||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
|
|
||
| <atomic-result-section-children> | ||
| <atomic-load-more-children-results></atomic-load-more-children-results> | ||
|
|
||
| <atomic-result-children image-size="icon"> | ||
| <!-- CHILD --> | ||
| <atomic-result-children-template> | ||
| <!-- CHILD TEMPLATE --> | ||
| <template> | ||
| <atomic-result-section-visual> | ||
| <atomic-result-image | ||
| class="icon" | ||
| ></atomic-result-image> | ||
| <img | ||
| src="https://picsum.photos/350" | ||
| class="thumbnail" | ||
| /> | ||
| </atomic-result-section-visual> | ||
|
|
||
| <atomic-result-section-title-metadata> | ||
| <atomic-result-link></atomic-result-link> | ||
| </atomic-result-section-title-metadata> | ||
|
|
||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text | ||
| field="excerpt" | ||
| ></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
|
|
||
| <atomic-result-section-children> | ||
| <atomic-result-children inherit-templates=""> | ||
| </atomic-result-children> | ||
| </atomic-result-section-children> | ||
| </template> | ||
| </atomic-result-children-template> | ||
| </atomic-result-children> | ||
| </atomic-result-section-children> | ||
| </template> | ||
| </atomic-result-template> | ||
|
|
||
| <atomic-result-template> | ||
| <template> | ||
| <style> | ||
| .field { | ||
| display: inline-flex; | ||
| white-space: nowrap; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .field-label { | ||
| font-weight: bold; | ||
| margin-right: 0.25rem; | ||
| } | ||
|
|
||
| .badge-fullname::part(result-badge-element) { | ||
| background-color: #1372ec; | ||
| } | ||
|
|
||
| .badge-fullname::part(result-badge-label) { | ||
| color: #ffffff; | ||
| } | ||
| </style> | ||
| <atomic-result-section-visual image-size="icon"> | ||
| <atomic-field-condition if-not-defined="thumbnailurl"> | ||
| <atomic-result-icon class="icon"></atomic-result-icon> | ||
| </atomic-field-condition> | ||
| <atomic-field-condition if-defined="thumbnailurl"> | ||
| <atomic-result-image | ||
| field="thumbnailurl" | ||
| ></atomic-result-image> | ||
| </atomic-field-condition> | ||
| </atomic-result-section-visual> | ||
| <atomic-result-section-badges> | ||
| <atomic-result-badge | ||
| class="badge-fullname" | ||
| field="fullname" | ||
| ></atomic-result-badge> | ||
| </atomic-result-section-badges> | ||
| <atomic-result-section-title> | ||
| <atomic-result-link> | ||
| <a slot="attributes" target="_blank"></a> | ||
| </atomic-result-link> | ||
| </atomic-result-section-title> | ||
| <atomic-result-section-title-metadata> | ||
| </atomic-result-section-title-metadata> | ||
| <atomic-result-section-excerpt> | ||
| <atomic-result-text field="excerpt"></atomic-result-text> | ||
| </atomic-result-section-excerpt> | ||
| <atomic-result-section-bottom-metadata> | ||
| <atomic-result-fields-list> </atomic-result-fields-list> | ||
| </atomic-result-section-bottom-metadata> | ||
| </template> | ||
| </atomic-result-template> | ||
| </atomic-folded-result-list> | ||
| <atomic-query-error></atomic-query-error> | ||
| <atomic-no-results></atomic-no-results> | ||
| </atomic-layout-section> | ||
|
|
||
Oops, something went wrong.