@internetarchive/collection-browser 0.2.5 → 0.2.6
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/{tiles/grid → assets/img}/icons/favorite-filled.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/favorite-filled.js.map +1 -1
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/reviews.js.map +1 -1
- package/dist/src/{tiles/grid → assets/img}/icons/upload.d.ts +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/upload.js +0 -0
- package/dist/src/{tiles/grid → assets/img}/icons/upload.js.map +1 -1
- package/dist/src/assets/img/icons/views.d.ts +1 -0
- package/dist/src/{tiles/grid → assets/img}/icons/views.js +1 -1
- package/dist/src/assets/img/icons/views.js.map +1 -0
- package/dist/src/tiles/grid/account-tile.d.ts +1 -0
- package/dist/src/tiles/grid/account-tile.js +45 -78
- package/dist/src/tiles/grid/account-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.d.ts +1 -0
- package/dist/src/tiles/grid/item-tile.js +49 -122
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/tile-stats.d.ts +10 -0
- package/dist/src/tiles/grid/tile-stats.js +134 -0
- package/dist/src/tiles/grid/tile-stats.js.map +1 -0
- package/dist/src/tiles/mediatype-icon.js +4 -0
- package/dist/src/tiles/mediatype-icon.js.map +1 -1
- package/dist/test/tile-stats.test.d.ts +1 -0
- package/dist/test/tile-stats.test.js +42 -0
- package/dist/test/tile-stats.test.js.map +1 -0
- package/package.json +1 -1
- package/src/{tiles/grid → assets/img}/icons/favorite-filled.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/reviews.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/upload.ts +0 -0
- package/src/{tiles/grid → assets/img}/icons/views.ts +1 -1
- package/src/tiles/grid/account-tile.ts +44 -77
- package/src/tiles/grid/item-tile.ts +50 -123
- package/src/tiles/grid/tile-stats.ts +132 -0
- package/src/tiles/mediatype-icon.ts +4 -0
- package/test/tile-stats.test.ts +57 -0
- package/dist/src/tiles/grid/icons/account.d.ts +0 -1
- package/dist/src/tiles/grid/icons/account.js +0 -12
- package/dist/src/tiles/grid/icons/account.js.map +0 -1
- package/dist/src/tiles/grid/icons/views.d.ts +0 -2
- package/dist/src/tiles/grid/icons/views.js.map +0 -1
- package/src/tiles/grid/icons/account.ts +0 -12
|
File without changes
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/
|
|
1
|
+
{"version":3,"file":"favorite-filled.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/favorite-filled.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;CAQpC,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const favoriteFilledIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m81.0388846 100-30.9636029-22.5595033-30.7410319 22.5595033 10.6670595-37.3922042-30.0013093-25.2155916h37.5556428l12.5196389-37.3922042 12.3690754 37.3922042h37.5556429l-29.7034563 25.2155916z\"\n fill=\"#333\"\n />\n <title>Icon of a star, filled in</title>\n </svg>\n`;\n"]}
|
|
File without changes
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/
|
|
1
|
+
{"version":3,"file":"reviews.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/reviews.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const reviewsIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m100 7.78013601c0-2.14552613-.7593357-3.978597-2.278007-5.4992126-1.5186713-1.52061561-3.3493984-2.28092341-5.4921813-2.28092341h-84.54977287c-2.08268321 0-3.88336049.7603078-5.40203183 2.28092341-1.51867133 1.5206156-2.278007 3.35368647-2.278007 5.4992126v51.49262709c0 2.0853495.75933567 3.8883321 2.278007 5.4089477 1.51867134 1.5206156 3.31934862 2.2809234 5.40203183 2.2809234h10.53361537l.3571304 33.0373658 32.4087237-33.0373658h41.2468361c2.1427829 0 3.97351-.7603078 5.4921813-2.2809234s2.278007-3.3235982 2.278007-5.4089477z\"\n fill=\"#333\"\n />\n <title>Icon of a speech bubble</title>\n </svg>\n`;\n"]}
|
|
File without changes
|
|
File without changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/
|
|
1
|
+
{"version":3,"file":"upload.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;CAS5B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const uploadIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m50 20 33.3333333 43.3333333h-20v36.6666667h-26.6666666v-36.6666667h-20zm50-20v13.3333333h-100v-13.3333333z\"\n fill=\"#333\"\n fill-rule=\"evenodd\"\n />\n <title>Icon of an arrow pointing upwards</title>\n </svg>\n`;\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const viewsIcon: import("lit-html").TemplateResult<2>;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { svg } from 'lit';
|
|
2
|
-
export
|
|
2
|
+
export const viewsIcon = svg `
|
|
3
3
|
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
|
|
4
4
|
<path
|
|
5
5
|
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"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"views.js","sourceRoot":"","sources":["../../../../../src/assets/img/icons/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,CAAA;;;;;;;;CAQ3B,CAAC","sourcesContent":["import { svg } from 'lit';\n\nexport const viewsIcon = svg`\n <svg viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n 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\"\n fill=\"#333\"\n />\n <title>Eye icon</title>\n </svg>\n`;\n"]}
|
|
@@ -1,52 +1,37 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { css, html, LitElement } from 'lit';
|
|
3
3
|
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import
|
|
5
|
-
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
6
|
-
import { reviewsIcon } from './icons/reviews';
|
|
7
|
-
import { uploadIcon } from './icons/upload';
|
|
4
|
+
import './tile-stats';
|
|
8
5
|
let AccountTile = class AccountTile extends LitElement {
|
|
9
6
|
render() {
|
|
10
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
7
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
11
8
|
return html `
|
|
12
|
-
<div class="
|
|
13
|
-
<div
|
|
14
|
-
<
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</div>
|
|
25
|
-
</div>
|
|
26
|
-
<div id="year-holder">
|
|
27
|
-
<div id="archivist-since">
|
|
28
|
-
<h3>Archivist Since</h3>
|
|
29
|
-
</div>
|
|
30
|
-
<div id="year-holder">
|
|
31
|
-
<h3>${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}</h3>
|
|
32
|
-
</div>
|
|
33
|
-
</div>
|
|
34
|
-
<div id="status-holder">
|
|
35
|
-
<div id="patron-icon">${accountIcon}</div>
|
|
36
|
-
<div class="stat-icon">
|
|
37
|
-
${uploadIcon}
|
|
38
|
-
<h3>${(_e = this.model) === null || _e === void 0 ? void 0 : _e.itemCount}</h3>
|
|
39
|
-
</div>
|
|
40
|
-
<div class="stat-icon">
|
|
41
|
-
${favoriteFilledIcon}
|
|
42
|
-
<h3>${(_f = this.model) === null || _f === void 0 ? void 0 : _f.favCount}</h3>
|
|
43
|
-
</div>
|
|
44
|
-
<div class="stat-icon">
|
|
45
|
-
${reviewsIcon}
|
|
46
|
-
<h3>${(_g = this.model) === null || _g === void 0 ? void 0 : _g.commentCount}</h3>
|
|
47
|
-
</div>
|
|
9
|
+
<div class="account-tile-main">
|
|
10
|
+
<div id="title">
|
|
11
|
+
<h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<div class="account-info">
|
|
15
|
+
<div id="avatar-info">
|
|
16
|
+
<img
|
|
17
|
+
id="avatar"
|
|
18
|
+
alt="patron-avatar"
|
|
19
|
+
src="https://archive.org/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}"
|
|
20
|
+
/>
|
|
48
21
|
</div>
|
|
22
|
+
|
|
23
|
+
<span id="archivist-since">
|
|
24
|
+
Archivist since ${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}
|
|
25
|
+
</span>
|
|
49
26
|
</div>
|
|
27
|
+
|
|
28
|
+
<tile-stats
|
|
29
|
+
.mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
|
|
30
|
+
.itemCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount}
|
|
31
|
+
.favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
|
|
32
|
+
.commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
|
|
33
|
+
>
|
|
34
|
+
</tile-stats>
|
|
50
35
|
</div>
|
|
51
36
|
`;
|
|
52
37
|
}
|
|
@@ -58,41 +43,45 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
58
43
|
margin: 0;
|
|
59
44
|
}
|
|
60
45
|
|
|
61
|
-
|
|
46
|
+
span {
|
|
62
47
|
font-size: 14px;
|
|
63
|
-
font-weight: bold;
|
|
64
48
|
color: #2c2c2c;
|
|
65
49
|
margin: 0px;
|
|
66
50
|
}
|
|
67
51
|
|
|
68
|
-
.
|
|
52
|
+
.account-tile-main {
|
|
69
53
|
background-color: #fcf5e6;
|
|
70
54
|
border: 1px #2c2c2c;
|
|
71
55
|
border-radius: 4px;
|
|
72
56
|
box-shadow: 1px 1px 2px 0px;
|
|
73
57
|
height: 100%;
|
|
74
58
|
display: flex;
|
|
59
|
+
flex-direction: column;
|
|
75
60
|
text-align: center;
|
|
76
61
|
width: 100%;
|
|
77
62
|
}
|
|
78
63
|
|
|
79
|
-
.
|
|
80
|
-
|
|
81
|
-
width: 100%;
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
64
|
+
.account-info {
|
|
65
|
+
flex-grow: 1;
|
|
84
66
|
}
|
|
85
67
|
|
|
86
|
-
#
|
|
87
|
-
|
|
68
|
+
#title {
|
|
69
|
+
padding: 5px 5px 0px 5px;
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
height: 40px;
|
|
88
72
|
}
|
|
89
73
|
|
|
90
|
-
#title
|
|
91
|
-
|
|
92
|
-
|
|
74
|
+
.account-tile-main:hover > #title > .truncated {
|
|
75
|
+
text-decoration: underline;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
79
|
+
#title:hover > .truncated {
|
|
80
|
+
text-decoration: underline;
|
|
93
81
|
}
|
|
94
82
|
|
|
95
|
-
#avatar-
|
|
83
|
+
#avatar-info {
|
|
84
|
+
margin-top: 5px;
|
|
96
85
|
margin-bottom: 5px;
|
|
97
86
|
display: flex;
|
|
98
87
|
align-items: center;
|
|
@@ -107,27 +96,11 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
107
96
|
box-shadow: 1px 1px 2px #888888;
|
|
108
97
|
}
|
|
109
98
|
|
|
110
|
-
#
|
|
99
|
+
#archivist-since {
|
|
111
100
|
margin-bottom: 5px;
|
|
112
101
|
height: 40px;
|
|
113
102
|
}
|
|
114
103
|
|
|
115
|
-
#year-holder {
|
|
116
|
-
margin: 0px;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
#status-holder {
|
|
120
|
-
height: 25px;
|
|
121
|
-
display: flex;
|
|
122
|
-
justify-content: space-evenly;
|
|
123
|
-
line-height: initial;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
#patron-icon {
|
|
127
|
-
height: 25px;
|
|
128
|
-
width: 25px;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
104
|
.truncated {
|
|
132
105
|
flex: 1;
|
|
133
106
|
min-width: 0; /* Important for long words! */
|
|
@@ -137,15 +110,9 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
137
110
|
display: -webkit-box;
|
|
138
111
|
-webkit-box-orient: vertical;
|
|
139
112
|
word-wrap: break-word;
|
|
140
|
-
word-break: break-all;
|
|
141
113
|
line-height: 2rem;
|
|
142
114
|
text-align: center;
|
|
143
115
|
}
|
|
144
|
-
|
|
145
|
-
.stat-icon {
|
|
146
|
-
height: 10px;
|
|
147
|
-
width: 10px;
|
|
148
|
-
}
|
|
149
116
|
`;
|
|
150
117
|
}
|
|
151
118
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,
|
|
1
|
+
{"version":3,"file":"account-tile.js","sourceRoot":"","sources":["../../../../src/tiles/grid/account-tile.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAG5D,OAAO,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA;;;kCAGmB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;;sDAQF,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;8BAK9C,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;;uBAK3C,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6ET,CAAC;IACJ,CAAC;CACF,CAAA;AAlH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CAmHvB;SAnHY,WAAW","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { TileModel } from '../../models';\n\nimport './tile-stats';\n\n@customElement('account-tile')\nexport class AccountTile extends LitElement {\n @property({ type: Object }) model?: TileModel;\n\n render() {\n return html`\n <div class=\"account-tile-main\">\n <div id=\"title\">\n <h1 class=\"truncated\">${this.model?.identifier}</h1>\n </div>\n\n <div class=\"account-info\">\n <div id=\"avatar-info\">\n <img\n id=\"avatar\"\n alt=\"patron-avatar\"\n src=\"https://archive.org/services/img/${this.model?.identifier}\"\n />\n </div>\n\n <span id=\"archivist-since\">\n Archivist since ${this.model?.dateAdded?.getFullYear()}\n </span>\n </div>\n\n <tile-stats\n .mediatype=${this.model?.mediatype}\n .itemCount=${this.model?.itemCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}\n >\n </tile-stats>\n </div>\n `;\n }\n\n static get styles() {\n return css`\n h1 {\n color: black;\n font-size: 16px;\n margin: 0;\n }\n\n span {\n font-size: 14px;\n color: #2c2c2c;\n margin: 0px;\n }\n\n .account-tile-main {\n background-color: #fcf5e6;\n border: 1px #2c2c2c;\n border-radius: 4px;\n box-shadow: 1px 1px 2px 0px;\n height: 100%;\n display: flex;\n flex-direction: column;\n text-align: center;\n width: 100%;\n }\n\n .account-info {\n flex-grow: 1;\n }\n\n #title {\n padding: 5px 5px 0px 5px;\n flex-shrink: 0;\n height: 40px;\n }\n\n .account-tile-main:hover > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n #avatar-info {\n margin-top: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #avatar {\n background-position: 50% 50%;\n border-radius: 50%;\n width: 160px;\n height: 160px;\n box-shadow: 1px 1px 2px #888888;\n }\n\n #archivist-since {\n margin-bottom: 5px;\n height: 40px;\n }\n\n .truncated {\n flex: 1;\n min-width: 0; /* Important for long words! */\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 }\n}\n"]}
|
|
@@ -2,6 +2,7 @@ import { CSSResultGroup, LitElement } from 'lit';
|
|
|
2
2
|
import { TileModel } from '../../models';
|
|
3
3
|
import '../mediatype-icon';
|
|
4
4
|
import '../item-image';
|
|
5
|
+
import './tile-stats';
|
|
5
6
|
export declare class ItemTile extends LitElement {
|
|
6
7
|
model?: TileModel;
|
|
7
8
|
baseImageUrl?: string;
|
|
@@ -2,189 +2,116 @@ 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 {
|
|
6
|
-
import { favoriteFilledIcon } from './icons/favorite-filled';
|
|
7
|
-
import { reviewsIcon } from './icons/reviews';
|
|
8
|
-
import viewsIcon from './icons/views';
|
|
5
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
6
|
import '../mediatype-icon';
|
|
10
7
|
import '../item-image';
|
|
8
|
+
import './tile-stats';
|
|
11
9
|
let ItemTile = class ItemTile extends LitElement {
|
|
12
10
|
render() {
|
|
13
|
-
var _a, _b, _c, _d, _e, _f
|
|
14
|
-
const itemTitle = (
|
|
11
|
+
var _a, _b, _c, _d, _e, _f;
|
|
12
|
+
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
15
13
|
const itemCreator = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator;
|
|
16
14
|
return html `
|
|
17
|
-
<div
|
|
18
|
-
<div
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
15
|
+
<div class="container">
|
|
16
|
+
<div class="item-info">
|
|
17
|
+
<div id="title">
|
|
18
|
+
<h1 class="truncated" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
|
|
19
|
+
</div>
|
|
20
|
+
|
|
21
|
+
<div id="image">
|
|
22
|
+
<item-image
|
|
23
|
+
.model=${this.model}
|
|
24
|
+
.baseImageUrl=${this.baseImageUrl}>
|
|
22
25
|
</item-image>
|
|
23
26
|
</div>
|
|
24
|
-
<div class="
|
|
25
|
-
|
|
26
|
-
${itemCreator
|
|
27
|
-
? html `<span>by ${itemCreator}</span>`
|
|
28
|
-
: nothing}
|
|
29
|
-
</div>
|
|
27
|
+
<div class="created-by truncated">
|
|
28
|
+
${itemCreator ? html `<span>by ${itemCreator}</span>` : nothing}
|
|
30
29
|
</div>
|
|
31
30
|
</div>
|
|
32
31
|
|
|
33
|
-
<
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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>
|
|
32
|
+
<tile-stats
|
|
33
|
+
.mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
|
|
34
|
+
.viewCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount}
|
|
35
|
+
.favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
|
|
36
|
+
.commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}>
|
|
37
|
+
</tile-stats>
|
|
64
38
|
</div>
|
|
65
39
|
</div>
|
|
66
40
|
`;
|
|
67
41
|
}
|
|
68
42
|
static get styles() {
|
|
69
|
-
const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
|
|
70
43
|
return css `
|
|
71
|
-
|
|
44
|
+
.container {
|
|
72
45
|
background-color: #ffffff;
|
|
73
|
-
border-radius:
|
|
46
|
+
border-radius: var(--collectionTileCornerRadius, 4px);
|
|
74
47
|
box-shadow: 1px 1px 2px 0px;
|
|
75
48
|
display: flex;
|
|
76
49
|
flex-direction: column;
|
|
77
50
|
height: 100%;
|
|
78
|
-
position: relative;
|
|
79
51
|
}
|
|
80
52
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
flex: 1;
|
|
84
|
-
flex-direction: column;
|
|
85
|
-
padding: 0.5rem 0.5rem 0 0.5rem;
|
|
53
|
+
.item-info {
|
|
54
|
+
padding: 5px 5px 0 5px;
|
|
55
|
+
flex-grow: 1;
|
|
86
56
|
}
|
|
87
57
|
|
|
88
|
-
#
|
|
89
|
-
|
|
90
|
-
font-size: 1.6rem;
|
|
91
|
-
text-align: center;
|
|
92
|
-
margin-top: 0rem;
|
|
93
|
-
margin-bottom: 0.5rem;
|
|
94
|
-
overflow: hidden;
|
|
95
|
-
text-overflow: ellipsis;
|
|
96
|
-
display: -webkit-box;
|
|
97
|
-
-webkit-line-clamp: 2;
|
|
98
|
-
-webkit-box-orient: vertical;
|
|
99
|
-
line-height: 2rem;
|
|
100
|
-
height: 4rem;
|
|
58
|
+
#title {
|
|
59
|
+
flex-shrink: 0;
|
|
101
60
|
}
|
|
102
61
|
|
|
103
|
-
#
|
|
62
|
+
#image {
|
|
104
63
|
display: flex;
|
|
105
64
|
justify-content: center;
|
|
106
65
|
flex: 1;
|
|
66
|
+
height: 16rem;
|
|
107
67
|
}
|
|
108
68
|
|
|
109
69
|
.hidden {
|
|
110
70
|
display: none;
|
|
111
71
|
}
|
|
112
72
|
|
|
113
|
-
|
|
73
|
+
.container:hover > .item-info > #title > .truncated {
|
|
114
74
|
text-decoration: underline;
|
|
115
75
|
}
|
|
116
76
|
|
|
117
77
|
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
118
|
-
#title
|
|
78
|
+
#title:hover > .truncated {
|
|
119
79
|
text-decoration: underline;
|
|
120
80
|
}
|
|
121
81
|
|
|
122
|
-
|
|
123
|
-
background-color: #fcfcfc;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.item-creator {
|
|
82
|
+
.created-by {
|
|
127
83
|
display: flex;
|
|
128
84
|
justify-content: center;
|
|
129
85
|
align-items: flex-end; /* Important to start text from bottom */
|
|
130
86
|
height: 3rem;
|
|
131
87
|
padding-top: 1rem;
|
|
88
|
+
margin-top: 5px;
|
|
132
89
|
}
|
|
133
90
|
|
|
134
91
|
.truncated {
|
|
135
92
|
flex: 1;
|
|
136
|
-
min-width: 0; /* Important for long words! */
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.truncated span {
|
|
140
|
-
font-size: 1.4rem;
|
|
141
93
|
color: #2c2c2c;
|
|
142
|
-
-
|
|
94
|
+
min-width: 0; /* Important for long words! */
|
|
95
|
+
text-align: center;
|
|
96
|
+
line-height: 2rem;
|
|
143
97
|
text-overflow: ellipsis;
|
|
144
98
|
overflow: hidden;
|
|
145
|
-
display: -webkit-box;
|
|
146
|
-
-webkit-box-orient: vertical;
|
|
147
99
|
word-wrap: break-word;
|
|
148
|
-
line-
|
|
149
|
-
|
|
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;
|
|
100
|
+
-webkit-line-clamp: 2;
|
|
101
|
+
-webkit-box-orient: vertical;
|
|
176
102
|
}
|
|
177
103
|
|
|
178
|
-
.
|
|
179
|
-
font-size:
|
|
180
|
-
|
|
181
|
-
margin: auto;
|
|
182
|
-
display: block;
|
|
183
|
-
text-align: center;
|
|
104
|
+
.truncated span {
|
|
105
|
+
font-size: 1.4rem;
|
|
106
|
+
display: -webkit-box;
|
|
184
107
|
}
|
|
185
108
|
|
|
186
|
-
.
|
|
187
|
-
|
|
109
|
+
h1.truncated {
|
|
110
|
+
margin-top: 0rem;
|
|
111
|
+
margin-bottom: 0.5rem;
|
|
112
|
+
font-size: 1.6rem;
|
|
113
|
+
height: 4rem;
|
|
114
|
+
display: -webkit-box;
|
|
188
115
|
}
|
|
189
116
|
`;
|
|
190
117
|
}
|
|
@@ -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;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAIzD,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AAGtB,IAAa,QAAQ,GAArB,MAAa,QAAS,SAAQ,UAAU;IAKtC,MAAM;;QACJ,MAAM,SAAS,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,KAAK,CAAC;QACpC,MAAM,WAAW,GAAG,MAAA,IAAI,CAAC,KAAK,0CAAE,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;;0CAI2B,SAAS,CACrC,SAAS,CACV,IAAI,SAAS;;;;;uBAKH,IAAI,CAAC,KAAK;8BACH,IAAI,CAAC,YAAY;;;;cAIjC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS,CAAC,CAAC,CAAC,OAAO;;;;;uBAKxD,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;uBACrB,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS;sBACtB,MAAA,IAAI,CAAC,KAAK,0CAAE,QAAQ;0BAChB,MAAA,IAAI,CAAC,KAAK,0CAAE,YAAY;;;;KAI7C,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyET,CAAC;IACJ,CAAC;CACF,CAAA;AAlH6B;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,CAmHpB;SAnHY,QAAQ","sourcesContent":["/* eslint-disable import/no-duplicates */\nimport { css, CSSResultGroup, html, LitElement, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport { TileModel } from '../../models';\n\nimport '../mediatype-icon';\nimport '../item-image';\nimport './tile-stats';\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;\n const itemCreator = this.model?.creator;\n return html`\n <div class=\"container\">\n <div class=\"item-info\">\n <div id=\"title\">\n <h1 class=\"truncated\" title=${ifDefined(\n itemTitle\n )}>${itemTitle}</h1>\n </div>\n\n <div id=\"image\">\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}>\n </item-image>\n </div>\n <div class=\"created-by truncated\">\n ${itemCreator ? html`<span>by ${itemCreator}</span>` : nothing}\n </div>\n </div>\n\n <tile-stats \n .mediatype=${this.model?.mediatype}\n .viewCount=${this.model?.viewCount}\n .favCount=${this.model?.favCount}\n .commentCount=${this.model?.commentCount}>\n </tile-stats>\n </div>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n .container {\n background-color: #ffffff;\n border-radius: var(--collectionTileCornerRadius, 4px);\n box-shadow: 1px 1px 2px 0px;\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .item-info {\n padding: 5px 5px 0 5px;\n flex-grow: 1;\n }\n\n #title {\n flex-shrink: 0;\n }\n\n #image {\n display: flex;\n justify-content: center;\n flex: 1;\n height: 16rem;\n }\n\n .hidden {\n display: none;\n }\n\n .container:hover > .item-info > #title > .truncated {\n text-decoration: underline;\n }\n\n /** this is a workaround for Safari 15 where the hover effects are not working */\n #title:hover > .truncated {\n text-decoration: underline;\n }\n\n .created-by {\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 margin-top: 5px;\n }\n\n .truncated {\n flex: 1;\n color: #2c2c2c;\n min-width: 0; /* Important for long words! */\n text-align: center;\n line-height: 2rem;\n text-overflow: ellipsis;\n overflow: hidden;\n word-wrap: break-word;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n\n .truncated span {\n font-size: 1.4rem;\n display: -webkit-box;\n }\n\n h1.truncated {\n margin-top: 0rem;\n margin-bottom: 0.5rem;\n font-size: 1.6rem;\n height: 4rem;\n display: -webkit-box;\n }\n `;\n }\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { CSSResultGroup, LitElement } from 'lit';
|
|
2
|
+
export declare class TileStats extends LitElement {
|
|
3
|
+
mediatype?: string;
|
|
4
|
+
itemCount?: number;
|
|
5
|
+
viewCount?: number;
|
|
6
|
+
favCount?: number;
|
|
7
|
+
commentCount?: number;
|
|
8
|
+
render(): import("lit-html").TemplateResult<1>;
|
|
9
|
+
static get styles(): CSSResultGroup;
|
|
10
|
+
}
|