@internetarchive/collection-browser 0.2.4-alpha.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/sort-filter-bar/sort-filter-bar.js +1 -1
- package/dist/src/sort-filter-bar/sort-filter-bar.js.map +1 -1
- package/dist/src/tiles/grid/account-tile.d.ts +0 -1
- package/dist/src/tiles/grid/account-tile.js +68 -31
- package/dist/src/tiles/grid/account-tile.js.map +1 -1
- package/dist/src/tiles/grid/icons/account.d.ts +1 -0
- package/dist/src/tiles/grid/icons/account.js +12 -0
- package/dist/src/tiles/grid/icons/account.js.map +1 -0
- package/dist/src/{assets/img → tiles/grid}/icons/favorite-filled.d.ts +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/favorite-filled.js +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/favorite-filled.js.map +1 -1
- package/dist/src/{assets/img → tiles/grid}/icons/reviews.d.ts +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/reviews.js +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/reviews.js.map +1 -1
- package/dist/src/{assets/img → tiles/grid}/icons/upload.d.ts +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/upload.js +0 -0
- package/dist/src/{assets/img → tiles/grid}/icons/upload.js.map +1 -1
- package/dist/src/tiles/grid/icons/views.d.ts +2 -0
- package/dist/src/{assets/img → tiles/grid}/icons/views.js +1 -1
- package/dist/src/tiles/grid/icons/views.js.map +1 -0
- package/dist/src/tiles/grid/item-tile.d.ts +0 -1
- package/dist/src/tiles/grid/item-tile.js +91 -43
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/mediatype-icon.js +0 -4
- package/dist/src/tiles/mediatype-icon.js.map +1 -1
- package/package.json +1 -1
- package/src/sort-filter-bar/sort-filter-bar.ts +1 -1
- package/src/tiles/grid/account-tile.ts +67 -30
- package/src/tiles/grid/icons/account.ts +12 -0
- package/src/{assets/img → tiles/grid}/icons/favorite-filled.ts +0 -0
- package/src/{assets/img → tiles/grid}/icons/reviews.ts +0 -0
- package/src/{assets/img → tiles/grid}/icons/upload.ts +0 -0
- package/src/{assets/img → tiles/grid}/icons/views.ts +1 -1
- package/src/tiles/grid/item-tile.ts +94 -46
- package/src/tiles/mediatype-icon.ts +0 -4
- package/dist/src/assets/img/icons/views.d.ts +0 -1
- package/dist/src/assets/img/icons/views.js.map +0 -1
- package/dist/src/tiles/grid/tile-stats.d.ts +0 -10
- package/dist/src/tiles/grid/tile-stats.js +0 -106
- package/dist/src/tiles/grid/tile-stats.js.map +0 -1
- package/src/tiles/grid/tile-stats.ts +0 -104
|
@@ -2,78 +2,91 @@ import { __decorate } from "tslib";
|
|
|
2
2
|
/* eslint-disable import/no-duplicates */
|
|
3
3
|
import { css, html, LitElement, nothing } from 'lit';
|
|
4
4
|
import { customElement, property } from 'lit/decorators.js';
|
|
5
|
-
import {
|
|
5
|
+
import { formatCount } from '../../utils/format-count';
|
|
6
|
+
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
7
|
+
import { reviewsIcon } from './icons/reviews';
|
|
8
|
+
import viewsIcon from './icons/views';
|
|
6
9
|
import '../mediatype-icon';
|
|
7
10
|
import '../item-image';
|
|
8
|
-
import './tile-stats';
|
|
9
11
|
let ItemTile = class ItemTile extends LitElement {
|
|
10
12
|
render() {
|
|
11
|
-
var _a, _b, _c, _d, _e, _f;
|
|
12
|
-
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
13
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
14
|
+
const itemTitle = ((_a = this.model) === null || _a === void 0 ? void 0 : _a.title) || nothing;
|
|
13
15
|
const itemCreator = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator;
|
|
14
16
|
return html `
|
|
15
17
|
<div id="container">
|
|
16
|
-
<div id="
|
|
17
|
-
<
|
|
18
|
-
|
|
18
|
+
<div id="title-image-container">
|
|
19
|
+
<h1 id="item-title" title=${itemTitle}>${itemTitle}</h1>
|
|
20
|
+
<div id="item-image-container">
|
|
21
|
+
<item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
|
|
22
|
+
</item-image>
|
|
19
23
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
<item-image
|
|
24
|
-
.model=${this.model}
|
|
25
|
-
.baseImageUrl=${this.baseImageUrl}>
|
|
26
|
-
</item-image>
|
|
27
|
-
</div>
|
|
28
|
-
<div class="item-creator">
|
|
29
|
-
<div class="truncated">
|
|
30
|
-
${itemCreator
|
|
24
|
+
<div class="item-creator">
|
|
25
|
+
<div class="truncated">
|
|
26
|
+
${itemCreator
|
|
31
27
|
? html `<span>by ${itemCreator}</span>`
|
|
32
28
|
: nothing}
|
|
33
|
-
</div>
|
|
34
29
|
</div>
|
|
35
30
|
</div>
|
|
36
31
|
</div>
|
|
37
32
|
|
|
38
|
-
<
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
33
|
+
<div class="hr"></div>
|
|
34
|
+
|
|
35
|
+
<div id="item-stats-container">
|
|
36
|
+
<div id="stats-holder">
|
|
37
|
+
<div class="col">
|
|
38
|
+
<mediatype-icon
|
|
39
|
+
.mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
|
|
40
|
+
.collection=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.collections}
|
|
41
|
+
style="--iconHeight:25px; --iconWidth:25px;"
|
|
42
|
+
>
|
|
43
|
+
</mediatype-icon>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="col">
|
|
46
|
+
${viewsIcon}
|
|
47
|
+
<p class="status-text">
|
|
48
|
+
${formatCount((_e = this.model) === null || _e === void 0 ? void 0 : _e.viewCount, 'short', 'short')}
|
|
49
|
+
</p>
|
|
50
|
+
</div>
|
|
51
|
+
<div class="col">
|
|
52
|
+
${favoriteFilledIcon}
|
|
53
|
+
<p class="status-text">
|
|
54
|
+
${formatCount((_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount, 'short', 'short')}
|
|
55
|
+
</p>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="col">
|
|
58
|
+
${reviewsIcon}
|
|
59
|
+
<p class="status-text">
|
|
60
|
+
${formatCount((_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount, 'short', 'short')}
|
|
61
|
+
</p>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
44
64
|
</div>
|
|
45
65
|
</div>
|
|
46
66
|
`;
|
|
47
67
|
}
|
|
48
68
|
static get styles() {
|
|
69
|
+
const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
|
|
49
70
|
return css `
|
|
50
71
|
#container {
|
|
51
72
|
background-color: #ffffff;
|
|
52
|
-
border-radius:
|
|
73
|
+
border-radius: ${cornerRadiusCss};
|
|
53
74
|
box-shadow: 1px 1px 2px 0px;
|
|
54
75
|
display: flex;
|
|
55
76
|
flex-direction: column;
|
|
56
77
|
height: 100%;
|
|
78
|
+
position: relative;
|
|
57
79
|
}
|
|
58
80
|
|
|
59
|
-
#
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
.title-wrapper {
|
|
66
|
-
flex-shrink: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.image-wrapper {
|
|
70
|
-
flex-grow: 1;
|
|
81
|
+
#title-image-container {
|
|
82
|
+
display: flex;
|
|
83
|
+
flex: 1;
|
|
84
|
+
flex-direction: column;
|
|
85
|
+
padding: 0.5rem 0.5rem 0 0.5rem;
|
|
71
86
|
}
|
|
72
87
|
|
|
73
88
|
#item-title {
|
|
74
|
-
flex: 1;
|
|
75
89
|
color: #2c2c2c;
|
|
76
|
-
min-width: 0; /* Important for long words! */
|
|
77
90
|
font-size: 1.6rem;
|
|
78
91
|
text-align: center;
|
|
79
92
|
margin-top: 0rem;
|
|
@@ -81,7 +94,6 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
81
94
|
overflow: hidden;
|
|
82
95
|
text-overflow: ellipsis;
|
|
83
96
|
display: -webkit-box;
|
|
84
|
-
word-wrap: break-word;
|
|
85
97
|
-webkit-line-clamp: 2;
|
|
86
98
|
-webkit-box-orient: vertical;
|
|
87
99
|
line-height: 2rem;
|
|
@@ -92,7 +104,6 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
92
104
|
display: flex;
|
|
93
105
|
justify-content: center;
|
|
94
106
|
flex: 1;
|
|
95
|
-
height: 16rem;
|
|
96
107
|
}
|
|
97
108
|
|
|
98
109
|
.hidden {
|
|
@@ -118,7 +129,6 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
118
129
|
align-items: flex-end; /* Important to start text from bottom */
|
|
119
130
|
height: 3rem;
|
|
120
131
|
padding-top: 1rem;
|
|
121
|
-
margin-top: 5px;
|
|
122
132
|
}
|
|
123
133
|
|
|
124
134
|
.truncated {
|
|
@@ -138,6 +148,44 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
138
148
|
line-height: 2rem;
|
|
139
149
|
text-align: center;
|
|
140
150
|
}
|
|
151
|
+
|
|
152
|
+
.hr {
|
|
153
|
+
border: 0.5px solid #ccc;
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
#item-stats-container {
|
|
157
|
+
align-items: center;
|
|
158
|
+
display: flex;
|
|
159
|
+
height: 5.5rem;
|
|
160
|
+
padding-left: 1rem;
|
|
161
|
+
padding-right: 0.5rem;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
#stats-holder {
|
|
165
|
+
align-items: center;
|
|
166
|
+
display: flex;
|
|
167
|
+
flex: 1;
|
|
168
|
+
justify-content: space-evenly;
|
|
169
|
+
text-align: center;
|
|
170
|
+
width: 100%;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
svg {
|
|
174
|
+
height: 10px;
|
|
175
|
+
width: 10px;
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.status-text {
|
|
179
|
+
font-size: 14px;
|
|
180
|
+
color: #2c2c2c;
|
|
181
|
+
margin: auto;
|
|
182
|
+
display: block;
|
|
183
|
+
text-align: center;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.col {
|
|
187
|
+
width: 25%;
|
|
188
|
+
}
|
|
141
189
|
`;
|
|
142
190
|
}
|
|
143
191
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"item-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/item-tile.ts"],"names":[],"mappings":";AAAA,yCAAyC;AACzC,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAEvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AAGvB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,KAAI,OAAO,CAAC;QAC/C,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;sCAGuB,SAAS,IAAI,SAAS;;iCAE3B,IAAI,CAAC,KAAK,kBAAkB,IAAI,CAAC,YAAY;;;;;gBAK9D,WAAW;YACX,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OAAO;;;;;;;;;;;6BAWI,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;8BACpB,MAAA,IAAI,CAAC,KAAK,0CAAE,WAAW;;;;;;gBAMrC,SAAS;;kBAEP,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,kBAAkB;;kBAEhB,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,EAAE,OAAO,EAAE,OAAO,CAAC;;;;gBAItD,WAAW;;kBAET,WAAW,CAAC,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;;KAMhE,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,MAAM,eAAe,GAAG,GAAG,CAAA,wCAAwC,CAAC;QAEpE,OAAO,GAAG,CAAA;;;yBAGW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoHnC,CAAC;IACJ,CAAC;CACF,CAAA;AAxL6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAuB;AAHvC,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAyLpB;SAzLY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { TileModel } from '../../models';\nimport { formatCount } from '../../utils/format-count';\n\nimport { favoriteFilledIcon } from './icons/favorite-filled';\nimport { reviewsIcon } from './icons/reviews';\nimport viewsIcon from './icons/views';\n\nimport '../mediatype-icon';\nimport '../item-image';\n\n@customElement('item-tile')\nexport class ItemTile extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n @property({ type: String }) baseImageUrl?: string;\n\n render() {\n const itemTitle = this.model?.title || nothing;\n const itemCreator = this.model?.creator;\n return html`\n <div id=\"container\">\n <div id=\"title-image-container\">\n <h1 id=\"item-title\" title=${itemTitle}>${itemTitle}</h1>\n <div id=\"item-image-container\">\n <item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>\n </item-image>\n </div>\n <div class=\"item-creator\">\n <div class=\"truncated\">\n ${itemCreator\n ? html`<span>by ${itemCreator}</span>`\n : nothing}\n </div>\n </div>\n </div>\n\n <div class=\"hr\"></div>\n\n <div id=\"item-stats-container\">\n <div id=\"stats-holder\">\n <div class=\"col\">\n <mediatype-icon\n .mediatype=${this.model?.mediatype}\n .collection=${this.model?.collections}\n style=\"--iconHeight:25px; --iconWidth:25px;\"\n >\n </mediatype-icon>\n </div>\n <div class=\"col\">\n ${viewsIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.viewCount, 'short', 'short')}\n </p>\n </div>\n <div class=\"col\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.itemCount, 'short', 'short')}\n </p>\n </div>\n <div class=\"col\">\n ${reviewsIcon}\n <p class=\"status-text\">\n ${formatCount(this.model?.favCount, 'short', 'short')}\n </p>\n </div>\n </div>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n const cornerRadiusCss = css`var(--collectionTileCornerRadius, 4px)`;\n\n return css`\n #container {\n background-color: #ffffff;\n border-radius: ${cornerRadiusCss};\n box-shadow: 1px 1px 2px 0px;\n display: flex;\n flex-direction: column;\n height: 100%;\n position: relative;\n }\n\n #title-image-container {\n display: flex;\n flex: 1;\n flex-direction: column;\n padding: 0.5rem 0.5rem 0 0.5rem;\n }\n\n #item-title {\n color: #2c2c2c;\n font-size: 1.6rem;\n text-align: center;\n margin-top: 0rem;\n margin-bottom: 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n line-height: 2rem;\n height: 4rem;\n }\n\n #item-image-container {\n display: flex;\n justify-content: center;\n flex: 1;\n }\n\n .hidden {\n display: none;\n }\n\n #container:hover > #title-image-container > .item-title {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title-image-container:hover > #item-title {\n text-decoration: underline;\n }\n\n #container:hover > #item-title {\n background-color: #fcfcfc;\n }\n\n .item-creator {\n display: flex;\n justify-content: center;\n align-items: flex-end; /* Important to start text from bottom */\n height: 3rem;\n padding-top: 1rem;\n }\n\n .truncated {\n flex: 1;\n min-width: 0; /* Important for long words! */\n }\n\n .truncated span {\n font-size: 1.4rem;\n color: #2c2c2c;\n -webkit-line-clamp: 2;\n text-overflow: ellipsis;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-wrap: break-word;\n line-height: 2rem;\n text-align: center;\n }\n\n .hr {\n border: 0.5px solid #ccc;\n }\n\n #item-stats-container {\n align-items: center;\n display: flex;\n height: 5.5rem;\n padding-left: 1rem;\n padding-right: 0.5rem;\n }\n\n #stats-holder {\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-evenly;\n text-align: center;\n width: 100%;\n }\n\n svg {\n height: 10px;\n width: 10px;\n }\n\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: center;\n }\n\n .col {\n width: 25%;\n }\n `;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"mediatype-icon.js","sourceRoot":"","sources":["../../../src/tiles/mediatype-icon.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAkB,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAGhE,IAAa,aAAa,GAA1B,MAAa,aAAc,SAAQ,UAAU;IAA7C;;QAK+B,aAAQ,GAAG,KAAK,CAAC;IA+DhD,CAAC;IA7DC,IAAY,gBAAgB;;QAC1B,MAAM,YAAY,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;QAC3D,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,cAAc,CAAC,CAAC;QAElD,IACE,IAAI,CAAC,SAAS,KAAK,QAAQ;aAC3B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC3D;YACA,OAAO,IAAI,CAAC;SACb;QACD,IACE,IAAI,CAAC,SAAS,KAAK,OAAO;aAC1B,MAAA,IAAI,CAAC,WAAW,0CAAE,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA,EAC9D;YACA,OAAO,OAAO,CAAC;SAChB;QACD,OAAO,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,MAAM,MAAM,GAAG,eAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,IAAI,CAAA,EAAE,CAAC;SACf;QAED,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;kCACxB,MAAM,CAAC,KAAK;;UAEpC,MAAM,CAAC,IAAI;iCACY,MAAM,CAAC,IAAI;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;KAqBT,CAAC;IACJ,CAAC;CACF,CAAA;AAnE6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDAA+B;AAE/B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;kDAAmC;AAEhC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AALnC,aAAa;IADzB,aAAa,CAAC,gBAAgB,CAAC;GACnB,aAAa,CAoEzB;SApEY,aAAa","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { mediatypeConfig } from '../mediatype/mediatype-config';\n\n@customElement('mediatype-icon')\nexport class MediatypeIcon extends LitElement {\n @property({ type: String }) mediatype: string | undefined;\n\n @property({ type: Array }) collections: string[] | undefined;\n\n @property({ type: Boolean }) showText = false;\n\n private get displayMediatype(): string {\n const tvIdentifier = ['tvnews', 'tvarchive', 'television'];\n const radioIdentifier = ['radio', 'radioprogram'];\n\n if (\n this.mediatype === 'movies' &&\n this.collections?.some(id => tvIdentifier.indexOf(id) >= 0)\n ) {\n return 'tv';\n }\n if (\n this.mediatype === 'audio' &&\n this.collections?.some(id => radioIdentifier.indexOf(id) >= 0)\n ) {\n return 'radio';\n }\n return this.mediatype || '';\n }\n\n render() {\n const config = mediatypeConfig[this.displayMediatype];\n if (!config) {\n return html``;\n }\n\n return html`\n <div\n id=\"icon\"\n class=\"${this.showText ? 'show-text' : 'hide-text'}\"\n style=\"--iconFillColor: ${config.color}\"\n >\n ${config.icon}\n <p class=\"status-text\">${config.text}</p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .status-text {\n font-size: 14px;\n color: #2c2c2c;\n margin: auto;\n display: block;\n text-align: var(--iconTextAlign, center);\n }\n\n #icon.hide-text p {\n display: none;\n }\n\n svg {\n height: var(--iconHeight, 10px);\n width: var(--iconWidth, 10px);\n }\n\n .fill-color {\n fill: var(--iconFillColor, '#000000');\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,10 @@ import { css, html, LitElement } from 'lit';
|
|
|
2
2
|
import { customElement, property } from 'lit/decorators.js';
|
|
3
3
|
import { TileModel } from '../../models';
|
|
4
4
|
|
|
5
|
-
import './
|
|
5
|
+
import { accountIcon } from './icons/account';
|
|
6
|
+
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
7
|
+
import { reviewsIcon } from './icons/reviews';
|
|
8
|
+
import { uploadIcon } from './icons/upload';
|
|
6
9
|
|
|
7
10
|
@customElement('account-tile')
|
|
8
11
|
export class AccountTile extends LitElement {
|
|
@@ -11,37 +14,43 @@ export class AccountTile extends LitElement {
|
|
|
11
14
|
render() {
|
|
12
15
|
return html`
|
|
13
16
|
<div class="outer-holder">
|
|
14
|
-
<div id="header-holder">
|
|
15
|
-
<div id="title-holder">
|
|
16
|
-
<h1 class="truncated">${this.model?.identifier}</h1>
|
|
17
|
-
</div>
|
|
18
|
-
</div>
|
|
19
|
-
|
|
20
17
|
<div class="inner-holder">
|
|
21
|
-
<div id="
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
18
|
+
<div id="header-holder">
|
|
19
|
+
<div id="title-holder">
|
|
20
|
+
<h1 class="truncated">${this.model?.identifier}</h1>
|
|
21
|
+
</div>
|
|
22
|
+
<div id="avatar-holder">
|
|
23
|
+
<div
|
|
24
|
+
id="avatar"
|
|
25
|
+
style="background-image: url('https://archive.org/services/img/${this
|
|
26
|
+
.model?.identifier}')"
|
|
27
|
+
></div>
|
|
28
|
+
</div>
|
|
27
29
|
</div>
|
|
28
|
-
|
|
29
30
|
<div id="year-holder">
|
|
30
31
|
<div id="archivist-since">
|
|
31
|
-
<
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
<h3>Archivist Since</h3>
|
|
33
|
+
</div>
|
|
34
|
+
<div id="year-holder">
|
|
35
|
+
<h3>${this.model?.dateAdded?.getFullYear()}</h3>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<div id="status-holder">
|
|
39
|
+
<div id="patron-icon">${accountIcon}</div>
|
|
40
|
+
<div class="stat-icon">
|
|
41
|
+
${uploadIcon}
|
|
42
|
+
<h3>${this.model?.itemCount}</h3>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="stat-icon">
|
|
45
|
+
${favoriteFilledIcon}
|
|
46
|
+
<h3>${this.model?.favCount}</h3>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="stat-icon">
|
|
49
|
+
${reviewsIcon}
|
|
50
|
+
<h3>${this.model?.commentCount}</h3>
|
|
34
51
|
</div>
|
|
35
52
|
</div>
|
|
36
53
|
</div>
|
|
37
|
-
|
|
38
|
-
<tile-stats
|
|
39
|
-
.mediatype=${this.model?.mediatype}
|
|
40
|
-
.itemCount=${this.model?.itemCount}
|
|
41
|
-
.favCount=${this.model?.favCount}
|
|
42
|
-
.commentCount=${this.model?.commentCount}
|
|
43
|
-
>
|
|
44
|
-
</tile-stats>
|
|
45
54
|
</div>
|
|
46
55
|
`;
|
|
47
56
|
}
|
|
@@ -54,8 +63,9 @@ export class AccountTile extends LitElement {
|
|
|
54
63
|
margin: 0;
|
|
55
64
|
}
|
|
56
65
|
|
|
57
|
-
|
|
66
|
+
h3 {
|
|
58
67
|
font-size: 14px;
|
|
68
|
+
font-weight: bold;
|
|
59
69
|
color: #2c2c2c;
|
|
60
70
|
margin: 0px;
|
|
61
71
|
}
|
|
@@ -67,22 +77,27 @@ export class AccountTile extends LitElement {
|
|
|
67
77
|
box-shadow: 1px 1px 2px 0px;
|
|
68
78
|
height: 100%;
|
|
69
79
|
display: flex;
|
|
70
|
-
flex-direction: column;
|
|
71
80
|
text-align: center;
|
|
72
81
|
width: 100%;
|
|
73
82
|
}
|
|
74
83
|
|
|
75
84
|
.inner-holder {
|
|
76
|
-
|
|
85
|
+
padding: 5px;
|
|
86
|
+
width: 100%;
|
|
87
|
+
display: flex;
|
|
88
|
+
flex-direction: column;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
#header-holder {
|
|
92
|
+
flex: 1;
|
|
77
93
|
}
|
|
78
94
|
|
|
79
95
|
#title-holder {
|
|
80
|
-
flex-shrink: 0;
|
|
81
96
|
height: 40px;
|
|
97
|
+
margin-bottom: 5px;
|
|
82
98
|
}
|
|
83
99
|
|
|
84
100
|
#avatar-holder {
|
|
85
|
-
margin-top: 5px;
|
|
86
101
|
margin-bottom: 5px;
|
|
87
102
|
display: flex;
|
|
88
103
|
align-items: center;
|
|
@@ -102,6 +117,22 @@ export class AccountTile extends LitElement {
|
|
|
102
117
|
height: 40px;
|
|
103
118
|
}
|
|
104
119
|
|
|
120
|
+
#year-holder {
|
|
121
|
+
margin: 0px;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
#status-holder {
|
|
125
|
+
height: 25px;
|
|
126
|
+
display: flex;
|
|
127
|
+
justify-content: space-evenly;
|
|
128
|
+
line-height: initial;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
#patron-icon {
|
|
132
|
+
height: 25px;
|
|
133
|
+
width: 25px;
|
|
134
|
+
}
|
|
135
|
+
|
|
105
136
|
.truncated {
|
|
106
137
|
flex: 1;
|
|
107
138
|
min-width: 0; /* Important for long words! */
|
|
@@ -111,9 +142,15 @@ export class AccountTile extends LitElement {
|
|
|
111
142
|
display: -webkit-box;
|
|
112
143
|
-webkit-box-orient: vertical;
|
|
113
144
|
word-wrap: break-word;
|
|
145
|
+
word-break: break-all;
|
|
114
146
|
line-height: 2rem;
|
|
115
147
|
text-align: center;
|
|
116
148
|
}
|
|
149
|
+
|
|
150
|
+
.stat-icon {
|
|
151
|
+
height: 10px;
|
|
152
|
+
width: 10px;
|
|
153
|
+
}
|
|
117
154
|
`;
|
|
118
155
|
}
|
|
119
156
|
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { svg } from 'lit';
|
|
2
|
+
|
|
3
|
+
export const accountIcon = svg`
|
|
4
|
+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
5
|
+
<path
|
|
6
|
+
d="m89.6854559 79.6500588c1.7300364 6.4823648 2.180423 13.3122689 3.3145441 20.3499412h-86c.5683151-15.8558542 2.98334063-30.7849367 15.1676149-41.6581341 22.9948067-20.518674 59.250299-9.0032844 67.517841 21.3081929zm-40.0998307-79.6500588c10.872402.0493248 19.9700408 9.25722341 19.917959 20.1421788-.0829413 11.042868-8.9616237 19.8492523-20.0602807 19.8578212-11.1181198 0-19.9397193-8.7904706-19.9397193-19.8908727-.0327543-11.11998815 9.0125781-20.17487063 20.082041-20.1091273z"
|
|
7
|
+
fill="#333"
|
|
8
|
+
fill-rule="evenodd"
|
|
9
|
+
/>
|
|
10
|
+
<title>Icon of a person</title>
|
|
11
|
+
</svg>
|
|
12
|
+
`;
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { svg } from 'lit';
|
|
2
2
|
|
|
3
|
-
export
|
|
3
|
+
export default svg`
|
|
4
4
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
5
5
|
<path
|
|
6
6
|
d="m98 50.5704143c-.2830293-.471515-.671154-1.1088947-1.1643742-1.9121392s-1.6003642-2.3617474-3.3214321-4.6755089c-1.7210678-2.3137614-3.522258-4.5325939-5.4035703-6.6564975-1.8813124-2.1239037-4.2828993-4.473133-7.2047606-7.0476881-2.9218612-2.5745551-5.8895067-4.7933876-8.9029363-6.6564976-3.0134295-1.86311-6.4628491-3.4330878-10.3482587-4.7099336-3.8854095-1.2768458-7.7822651-1.9142256-11.6905667-1.9121443-3.9083017.0020914-7.8051573.6154781-11.6905668 1.8401652-3.8854096 1.2246871-7.3702078 2.8301329-10.4543947 4.8163375-3.0841869 1.9862045-6.0278997 4.1695691-8.8311384 6.5500937s-5.2048256 4.7652219-7.2047605 7.1540919c-1.99993501 2.38887-3.75430043 4.5722346-5.26309632 6.5500938s-2.63883199 3.583305-3.39010829 4.8163374l-1.13003609 1.8401602c.2830293.4715149.67115403 1.1088946 1.16437421 1.9121391.49322017.8032445 1.5878776 2.3617475 3.28397229 4.6755089s3.47439274 4.521119 5.3348942 6.6220728c1.8605014 2.1009538 4.2506422 4.4387083 7.1704224 7.0132633 2.9197801 2.5745551 5.8874256 4.7819127 8.9029363 6.6220729 3.0155106 1.8401601 6.4774168 3.398663 10.3857184 4.6755088 3.9083017 1.2768458 7.8176438 1.9142256 11.7280266 1.9121443 3.9103827-.0020914 7.7957922-.6154781 11.6562286-1.8401652s7.3337886-2.818658 10.4200566-4.7819127 6.0299808-4.1351444 8.8311384-6.515669 5.2152311-4.7652219 7.2422203-7.1540919 3.8052873-4.5607597 5.3348942-6.515669c1.5296068-1.9549093 2.6721295-3.5488802 3.427568-4.7819127zm-24.5142913 0c0 6.467683-2.3079374 12.0152859-6.9238123 16.6428087s-10.1495139 6.9412843-16.600917 6.9412843c-6.4992683 0-12.0453939-2.3137615-16.6383767-6.9412843s-6.8894742-10.1751257-6.8894742-16.6428087 2.2964914-12.003811 6.8894742-16.608384 10.1391084-6.9068595 16.6383767-6.9068595c6.4534842 0 11.9871232 2.3022865 16.600917 6.9068595s6.9217312 10.140701 6.9238123 16.608384zm-23.5247293-10.552755c2.8261308 0 5.2870289 1.0619518 7.3826944 3.1858555 2.0956655 2.1239036 3.1434982 4.5795368 3.1434982 7.3668995 0 2.8332624-1.0478327 5.2888956-3.1434982 7.3668995-2.0956655 2.078004-4.5565636 3.1170059-7.3826944 3.1170059-2.873996 0-5.3348941-1.0264838-7.3826944-3.0794516-2.0478002-2.0529677-3.0717003-4.5200758-3.0717003-7.4013243 0-2.8332624 1.0239001-5.3003705 3.0717003-7.4013243 2.0478003-2.1009538 4.5086984-3.1514307 7.3826944-3.1514307z"
|