Add ellipsis while remove items (#515)

* Add ellipsis while remove items

Author: nsharma123

package.json

@@ -3,7 +3,7 @@
   "description": "The Internet Archive Collection Browser.",
   "license": "AGPL-3.0-only",
   "author": "Internet Archive",
-  "version": "3.0.2",
+  "version": "3.0.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "scripts": {
@@ -28,7 +28,7 @@
     "@internetarchive/field-parsers": "^1.0.0",
     "@internetarchive/histogram-date-range": "^1.4.0",
     "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/ia-dropdown": "^1.4.1",
+    "@internetarchive/ia-dropdown": "^1.4.0",
     "@internetarchive/iaux-item-metadata": "^1.0.5",
     "@internetarchive/infinite-scroller": "^1.0.1",
     "@internetarchive/modal-manager": "^2.0.1",

src/collection-browser.ts

@@ -2687,7 +2687,6 @@ export class CollectionBrowser
 
         #tile-blur-check {
           margin: 0 5px 0 0;
-          width: 15px;
         }
 
         circular-activity-indicator {

src/collection-facets.ts

@@ -397,7 +397,6 @@ export class CollectionFacets extends LitElement {
       ? html`<button
           class="expand-date-picker-btn"
           aria-hidden="true"
-          tabindex="-1"
           @click=${this.showDatePickerModal}
         >
           ${expandIcon}
@@ -426,7 +425,7 @@ export class CollectionFacets extends LitElement {
 
     return html`
       <histogram-date-range
-        class=${this.isTvSearch ? 'wide-inputs' : ''}
+        class=${this.isTvSearch ? 'wide-inputs' : nothing}
         .minDate=${minDate}
         .maxDate=${maxDate}
         .minSelectedDate=${this.minSelectedDate ?? minDate}
@@ -952,7 +951,6 @@ export class CollectionFacets extends LitElement {
           font-size: 1.2rem;
           text-decoration: none;
           padding: 0;
-          margin-top: 0.25rem;
           background: inherit;
           border: 0;
           color: var(--ia-theme-link-color, #4b64ff);

src/collection-facets/facet-row.ts

@@ -213,8 +213,7 @@ export class FacetRow extends LitElement {
         display: flex;
         font-weight: 500;
         font-size: 1.2rem;
-        margin: 0 auto;
-        padding: 0.25rem 0;
+        margin: 2.5px auto;
         height: auto;
         border-top: ${facetRowBorderTop};
         border-bottom: ${facetRowBorderBottom};

src/manage/manage-bar.ts

@@ -65,7 +65,7 @@ export class ManageBar extends LitElement {
             ?disabled=${!this.removeAllowed}
             @click=${this.showRemoveItemsModal}
           >
-            ${msg('Remove selected items')} (${this.selectedItems.length})
+            ${msg('Remove selected items')} (${this.selectedItems.length})...
           </button>
           ${when(
             this.showItemManageButton,

src/tiles/grid/collection-tile.ts

@@ -55,7 +55,7 @@ export class CollectionTile extends BaseTileComponent {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h3 class="truncated">${this.model?.title}</h3>
+      <h4 class="truncated">${this.model?.title}</h4>
     </div>`;
   }
 
@@ -123,8 +123,7 @@ export class CollectionTile extends BaseTileComponent {
           flex-grow: initial;
         }
 
-        h4.truncated,
-        h3.truncated {
+        h4.truncated {
           color: ${whiteColor};
         }
 

src/tiles/grid/item-tile.ts

@@ -60,9 +60,9 @@ export class ItemTile extends BaseTileComponent {
             ${this.imageBlockTemplate}
 
             <div id="title">
-              <h3 class="truncated" title=${ifDefined(itemTitle)}>
+              <h4 class="truncated" title=${ifDefined(itemTitle)}>
                 ${itemTitle}
-              </h3>
+              </h4>
             </div>
 
             ${this.volumeIssueTemplate}

src/tiles/grid/search-tile.ts

@@ -49,7 +49,7 @@ export class SearchTile extends BaseTileComponent {
 
   private get getTitleTemplate() {
     return html`<div id="title">
-      <h3 class="truncated">${this.model?.title}</h3>
+      <h4 class="truncated">${this.model?.title}</h4>
     </div>`;
   }
 
@@ -70,8 +70,7 @@ export class SearchTile extends BaseTileComponent {
           flex-grow: initial;
         }
 
-        h4.truncated,
-        h3.truncated {
+        h4.truncated {
           color: ${whiteColor};
           -webkit-line-clamp: 4;
         }

src/tiles/grid/styles/tile-grid-shared-styles.ts

@@ -72,8 +72,7 @@ export const baseTileStyles = css`
     -webkit-box-orient: vertical;
   }
 
-  h4.truncated,
-  h3.truncated {
+  h4.truncated {
     display: -webkit-box;
     margin: 0px;
     line-height: 15px;
@@ -115,7 +114,7 @@ export const baseTileStyles = css`
     align-items: center;
     background: rgba(220, 220, 220, 0.5);
     color: white;
-    font-size: 2.4rem;
+    font-size: 2rem;
     font-weight: bold;
     line-height: 1;
     text-shadow: black 1px 1px 3px;

src/tiles/list/tile-list.ts

@@ -4,7 +4,7 @@ import { join } from 'lit/directives/join.js';
 import { map } from 'lit/directives/map.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, state } from 'lit/decorators.js';
-import { msg, str } from '@lit/localize';
+import { msg } from '@lit/localize';
 import DOMPurify from 'dompurify';
 
 import type { SortParam } from '@internetarchive/search-service';
@@ -94,11 +94,7 @@ export class TileList extends BaseTileComponent {
       isCollection,
     );
 
-    return html`<a
-      id="image-link"
-      title=${msg(str`View ${this.model?.title}`)}
-      href=${href}
-    >
+    return html`<a href=${href}>
       <image-block
         .model=${this.model}
         .baseImageUrl=${this.baseImageUrl}
@@ -131,11 +127,7 @@ export class TileList extends BaseTileComponent {
   // Data templates
   private get iconRightTemplate() {
     return html`
-      <a
-        id="icon-right"
-        href=${this.mediatypeURL}
-        title=${msg(str`See more: ${this.model?.mediatype}`)}
-      >
+      <a id="icon-right" href=${this.mediatypeURL}>
         <tile-mediatype-icon .model=${this.model}> </tile-mediatype-icon>
       </a>
     `;