-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #79 from UCDavisLibrary/sp-collection-card
Sp collection card
- Loading branch information
Showing
9 changed files
with
206 additions
and
44 deletions.
There are no files selected for viewing
52 changes: 52 additions & 0 deletions
52
services/ucd-lib-client/client/public/elements/components/cards/dams-collection-card.js
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 |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import { LitElement } from 'lit-element'; | ||
| import render from "./dams-collection-card.tpl.js"; | ||
|
|
||
| /** | ||
| * @class DamsCollectionCard | ||
| * @description UI component class for displaying a collection preview card | ||
| * | ||
| * @prop {Object} collection - An object describing a DAMS collection. | ||
| * If used, element will set all subsequent properties with data from collections object. | ||
| * @prop {String} imgSrc - The collection thumbnail src. | ||
| * @prop {String} cardTitle - The title of the collection. | ||
| * @prop {Number} itemCt - The total number of items in the collections. | ||
| * @prop {String} href - Link to the collection landing page. | ||
| */ | ||
| export default class DamsCollectionCard extends LitElement { | ||
|
|
||
| static get properties() { | ||
| return { | ||
| collection: {type: Object}, | ||
| imgSrc: {type: String, attribute: 'img-src'}, | ||
| cardTitle: {type: String, attribute: 'card-title'}, | ||
| itemCt: {type: Number, attribute: 'item-ct'}, | ||
| href: {type: String} | ||
| }; | ||
| } | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.render = render.bind(this); | ||
| this.imgSrc = ""; | ||
| this.cardTitle = ""; | ||
| this.itemCt = 0; | ||
| this.href = ""; | ||
|
|
||
| } | ||
|
|
||
| /** | ||
| * @method updated | ||
| * @description Lit lifecycle method called when element is updated. | ||
| * @param {Map} props - Properties that have changed. | ||
| */ | ||
| updated(props) { | ||
| if ( props.has('collection') && this.collection['_id'] ) { | ||
| this.imgSrc = this.collection.thumbnailUrl; | ||
| this.cardTitle = this.collection.name; | ||
| this.itemCt = this.collection.recordCount; | ||
| this.href = this.collection['_id']; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| customElements.define('dams-collection-card', DamsCollectionCard); |
81 changes: 81 additions & 0 deletions
81
services/ucd-lib-client/client/public/elements/components/cards/dams-collection-card.tpl.js
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 |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import { html } from 'lit-element'; | ||
| import { styleMap } from 'lit-html/directives/style-map'; | ||
|
|
||
| export default function render() { | ||
| return html` | ||
| <style> | ||
| :host { | ||
| display: block; | ||
| } | ||
| .container { | ||
| cursor: pointer; | ||
| } | ||
| a { | ||
| text-decoration: none; | ||
| } | ||
| .img-container { | ||
| width: 100%; | ||
| position: relative; | ||
| padding-top: 75%; | ||
| background-image: url(/images/logos/logo-white-512.png); | ||
| background-color: var(--color-black-20); | ||
| background-size: contain; | ||
| background-repeat: no-repeat; | ||
| background-position: center center; | ||
| } | ||
| .img-container img { | ||
| position: absolute; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .head { | ||
| border: 3px solid transparent; | ||
| transition: .3s; | ||
| } | ||
| .container:hover .head, .container:focus .head { | ||
| border: 3px solid var(--color-dams-secondary); | ||
| } | ||
| h5 { | ||
| margin: 10px 0 5px 0; | ||
| color: var(--color-h5); | ||
| font-size: var(--fs-h5); | ||
| font-weight: var(--fw-h5); | ||
| } | ||
| .subtitle { | ||
| font-size: var(--fs-p); | ||
| font-weight: var(--fw-extra-bold); | ||
| color: var(--color-aggie-blue-70); | ||
| margin-bottom: 20px; | ||
| } | ||
| .gold-dots { | ||
| width: 0; | ||
| transition: .4s; | ||
| border-bottom: 5px dotted var(--color-dams-secondary); | ||
| } | ||
| .container:hover .gold-dots, .container:focus .gold-dots { | ||
| width: 100%; | ||
| } | ||
| </style> | ||
| <div class="container"><a href="${this.href}"> | ||
| <div class="head"> | ||
| <div class="img-container"> | ||
| ${this.imgSrc ? html` | ||
| <img src="${this.imgSrc}"> | ||
| ` : html``} | ||
| </div> | ||
| </div> | ||
| <div class="body"> | ||
| <h5>${this.cardTitle}</h5> | ||
| <div class="subtitle">${this.itemCt} item${this.itemCt === 1 ? "" : "s"}</div> | ||
| </div> | ||
| <div class="footer"> | ||
| <div class="gold-dots"></div> | ||
| </div></a> | ||
| </div> | ||
| `;} |
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
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
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
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
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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.