feat(cxl-ui): cxl-jw-player update result count styles

conversionxl · Oct 1, 2024 · 036bd53 · 036bd53
1 parent a4ae583
commit 036bd53
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss b/packages/cxl-ui/scss/cxl-jw-player/cxl-jw-player-shadow.scss
@@ -73,7 +73,7 @@
 }
 
 .gap {
-  gap: var(--lumo-space-m);
+  gap: var(--lumo-space-s);
 }
 
 .grid {
@@ -112,6 +112,10 @@
   max-width: var(--cxl-content-max-width);
   width: 100%;
 
+  #search-result-count {
+    font-size: var(--lumo-font-size-s);
+  }
+
   vaadin-checkbox {
     --lumo-body-text-color: #fff;
 

diff --git a/packages/cxl-ui/src/components/cxl-jw-player/index.html.js b/packages/cxl-ui/src/components/cxl-jw-player/index.html.js
@@ -11,7 +11,7 @@ export const template = function () {
             <slot></slot>
             ${this.captions
               ? html`
-                  <div class="center search padding">
+                  <div class="center gap padding search">
                     <vaadin-text-field
                       @input=${this._debouncedSearch}
                       clear-button-visible
@@ -21,11 +21,9 @@ export const template = function () {
                     >
                       <vaadin-icon slot="prefix" icon="lumo:search"></vaadin-icon>
                     </vaadin-text-field>
-                    <div id="searchResultCount">
-                      ${this._isSearchMinimumLength
-                        ? html`<span>(${this._matches} matches)</span>`
-                        : nothing}
-                    </div>
+                    ${this._isSearchMinimumLength
+                      ? html`<div id="search-result-count">(${this._matches} matches)</div>`
+                      : nothing}
                     <vaadin-checkbox
                       @change=${this._toggleShouldScroll}
                       ?checked=${this._shouldScroll}
@@ -55,6 +53,8 @@ export const template = function () {
           </div>
         `
       : nothing}
-    ${this.error ? html`<div class="center error">There was an error loading the video.</div>` : nothing}
+    ${this.error
+      ? html`<div class="center error">There was an error loading the video.</div>`
+      : nothing}
   `;
 };