@internetarchive/collection-browser 0.2.3 → 0.2.4-alpha.3
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/mediatype/mediatype-config.js +10 -10
- package/dist/src/mediatype/mediatype-config.js.map +1 -1
- package/dist/src/tiles/grid/account-tile.d.ts +1 -0
- package/dist/src/tiles/grid/account-tile.js +31 -68
- 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 +43 -91
- 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 +106 -0
- package/dist/src/tiles/grid/tile-stats.js.map +1 -0
- package/dist/src/tiles/list/tile-list-compact.d.ts +0 -1
- package/dist/src/tiles/list/tile-list-compact.js +0 -9
- package/dist/src/tiles/list/tile-list-compact.js.map +1 -1
- package/dist/src/tiles/list/tile-list.d.ts +0 -1
- package/dist/src/tiles/list/tile-list.js +0 -9
- package/dist/src/tiles/list/tile-list.js.map +1 -1
- package/dist/src/tiles/mediatype-icon.js +5 -1
- package/dist/src/tiles/mediatype-icon.js.map +1 -1
- 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/mediatype/mediatype-config.ts +10 -10
- package/src/tiles/grid/account-tile.ts +30 -67
- package/src/tiles/grid/item-tile.ts +46 -94
- package/src/tiles/grid/tile-stats.ts +104 -0
- package/src/tiles/list/tile-list-compact.ts +0 -9
- package/src/tiles/list/tile-list.ts +0 -9
- package/src/tiles/mediatype-icon.ts +5 -1
- 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"]}
|
|
@@ -18,12 +18,12 @@ export const mediatypeConfig = {
|
|
|
18
18
|
text: 'Account',
|
|
19
19
|
},
|
|
20
20
|
audio: {
|
|
21
|
-
color: '#
|
|
21
|
+
color: '#00adef',
|
|
22
22
|
icon: audioIcon,
|
|
23
23
|
text: 'Audio',
|
|
24
24
|
},
|
|
25
25
|
collection: {
|
|
26
|
-
color: '#
|
|
26
|
+
color: '#4666ff',
|
|
27
27
|
icon: collectionIcon,
|
|
28
28
|
text: 'Collection',
|
|
29
29
|
},
|
|
@@ -33,7 +33,7 @@ export const mediatypeConfig = {
|
|
|
33
33
|
text: 'Data',
|
|
34
34
|
},
|
|
35
35
|
etree: {
|
|
36
|
-
color: '#
|
|
36
|
+
color: '#00adef',
|
|
37
37
|
icon: etreeIcon,
|
|
38
38
|
text: 'E-tree',
|
|
39
39
|
},
|
|
@@ -43,12 +43,12 @@ export const mediatypeConfig = {
|
|
|
43
43
|
text: 'Film',
|
|
44
44
|
},
|
|
45
45
|
image: {
|
|
46
|
-
color: '#
|
|
46
|
+
color: '#aa99c9',
|
|
47
47
|
icon: imagesIcon,
|
|
48
48
|
text: 'Image',
|
|
49
49
|
},
|
|
50
50
|
movies: {
|
|
51
|
-
color: '#
|
|
51
|
+
color: '#f1644b',
|
|
52
52
|
icon: filmIcon,
|
|
53
53
|
text: 'Movie',
|
|
54
54
|
},
|
|
@@ -58,27 +58,27 @@ export const mediatypeConfig = {
|
|
|
58
58
|
text: 'Radio',
|
|
59
59
|
},
|
|
60
60
|
software: {
|
|
61
|
-
color: '#
|
|
61
|
+
color: '#9ecc4f',
|
|
62
62
|
icon: softwareIcon,
|
|
63
63
|
text: 'Software',
|
|
64
64
|
},
|
|
65
65
|
texts: {
|
|
66
|
-
color: '#
|
|
66
|
+
color: '#faab3c',
|
|
67
67
|
icon: textsIcon,
|
|
68
68
|
text: 'Text',
|
|
69
69
|
},
|
|
70
70
|
tv: {
|
|
71
|
-
color: '#
|
|
71
|
+
color: '#f1644b',
|
|
72
72
|
icon: tvIcon,
|
|
73
73
|
text: 'TV',
|
|
74
74
|
},
|
|
75
75
|
video: {
|
|
76
|
-
color: '#
|
|
76
|
+
color: '#f1644b',
|
|
77
77
|
icon: videoIcon,
|
|
78
78
|
text: 'Video',
|
|
79
79
|
},
|
|
80
80
|
web: {
|
|
81
|
-
color: '#
|
|
81
|
+
color: '#ffcd27',
|
|
82
82
|
icon: webIcon,
|
|
83
83
|
text: 'Web',
|
|
84
84
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mediatype-config.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,UAAU,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,QAAQ;KACf;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,KAAK;KACZ;CACF,CAAC","sourcesContent":["import { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nexport const mediatypeConfig: { [key: string]: any } = {\n account: {\n color: '#000000',\n icon: accountIcon,\n text: 'Account',\n },\n audio: {\n color: '#
|
|
1
|
+
{"version":3,"file":"mediatype-config.js","sourceRoot":"","sources":["../../../src/mediatype/mediatype-config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,sCAAsC,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAC;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAE5D,MAAM,CAAC,MAAM,eAAe,GAA2B;IACrD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,WAAW;QACjB,IAAI,EAAE,SAAS;KAChB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,UAAU,EAAE;QACV,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,cAAc;QACpB,IAAI,EAAE,YAAY;KACnB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,QAAQ;KACf;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,MAAM;KACb;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,UAAU;QAChB,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,OAAO;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,YAAY;QAClB,IAAI,EAAE,UAAU;KACjB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,MAAM;KACb;IACD,EAAE,EAAE;QACF,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,IAAI;KACX;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,IAAI,EAAE,OAAO;KACd;IACD,GAAG,EAAE;QACH,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,KAAK;KACZ;CACF,CAAC","sourcesContent":["import { accountIcon } from '../assets/img/icons/mediatype/account';\nimport { audioIcon } from '../assets/img/icons/mediatype/audio';\nimport { collectionIcon } from '../assets/img/icons/mediatype/collection';\nimport { dataIcon } from '../assets/img/icons/mediatype/data';\nimport { etreeIcon } from '../assets/img/icons/mediatype/etree';\nimport { imagesIcon } from '../assets/img/icons/mediatype/images';\nimport { filmIcon } from '../assets/img/icons/mediatype/film';\nimport { radioIcon } from '../assets/img/icons/mediatype/radio';\nimport { softwareIcon } from '../assets/img/icons/mediatype/software';\nimport { textsIcon } from '../assets/img/icons/mediatype/texts';\nimport { tvIcon } from '../assets/img/icons/mediatype/tv';\nimport { videoIcon } from '../assets/img/icons/mediatype/video';\nimport { webIcon } from '../assets/img/icons/mediatype/web';\n\nexport const mediatypeConfig: { [key: string]: any } = {\n account: {\n color: '#000000',\n icon: accountIcon,\n text: 'Account',\n },\n audio: {\n color: '#00adef',\n icon: audioIcon,\n text: 'Audio',\n },\n collection: {\n color: '#4666ff',\n icon: collectionIcon,\n text: 'Collection',\n },\n data: {\n color: '#333333',\n icon: dataIcon,\n text: 'Data',\n },\n etree: {\n color: '#00adef',\n icon: etreeIcon,\n text: 'E-tree',\n },\n film: {\n color: '#bf1b2c',\n icon: filmIcon,\n text: 'Film',\n },\n image: {\n color: '#aa99c9',\n icon: imagesIcon,\n text: 'Image',\n },\n movies: {\n color: '#f1644b',\n icon: filmIcon,\n text: 'Movie',\n },\n radio: {\n color: '#8fdaef',\n icon: radioIcon,\n text: 'Radio',\n },\n software: {\n color: '#9ecc4f',\n icon: softwareIcon,\n text: 'Software',\n },\n texts: {\n color: '#faab3c',\n icon: textsIcon,\n text: 'Text',\n },\n tv: {\n color: '#f1644b',\n icon: tvIcon,\n text: 'TV',\n },\n video: {\n color: '#f1644b',\n icon: videoIcon,\n text: 'Video',\n },\n web: {\n color: '#ffcd27',\n icon: webIcon,\n text: 'Web',\n },\n};\n"]}
|
|
@@ -1,52 +1,43 @@
|
|
|
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
9
|
<div class="outer-holder">
|
|
10
|
+
<div id="header-holder">
|
|
11
|
+
<div id="title-holder">
|
|
12
|
+
<h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
|
|
13
|
+
</div>
|
|
14
|
+
</div>
|
|
15
|
+
|
|
13
16
|
<div class="inner-holder">
|
|
14
|
-
<div id="
|
|
15
|
-
<
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
id="avatar"
|
|
21
|
-
style="background-image: url('https://archive.org/services/img/${(_b = this
|
|
22
|
-
.model) === null || _b === void 0 ? void 0 : _b.identifier}')"
|
|
23
|
-
></div>
|
|
24
|
-
</div>
|
|
17
|
+
<div id="avatar-holder">
|
|
18
|
+
<img
|
|
19
|
+
id="avatar"
|
|
20
|
+
alt="patron-avatar"
|
|
21
|
+
src="https://archive.org/services/img/${(_b = this.model) === null || _b === void 0 ? void 0 : _b.identifier}"
|
|
22
|
+
/>
|
|
25
23
|
</div>
|
|
24
|
+
|
|
26
25
|
<div id="year-holder">
|
|
27
26
|
<div id="archivist-since">
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
|
|
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>
|
|
27
|
+
<span>
|
|
28
|
+
Archivist since ${(_d = (_c = this.model) === null || _c === void 0 ? void 0 : _c.dateAdded) === null || _d === void 0 ? void 0 : _d.getFullYear()}
|
|
29
|
+
</span>
|
|
47
30
|
</div>
|
|
48
31
|
</div>
|
|
49
32
|
</div>
|
|
33
|
+
|
|
34
|
+
<tile-stats
|
|
35
|
+
.mediatype=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.mediatype}
|
|
36
|
+
.itemCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.itemCount}
|
|
37
|
+
.favCount=${(_g = this.model) === null || _g === void 0 ? void 0 : _g.favCount}
|
|
38
|
+
.commentCount=${(_h = this.model) === null || _h === void 0 ? void 0 : _h.commentCount}
|
|
39
|
+
>
|
|
40
|
+
</tile-stats>
|
|
50
41
|
</div>
|
|
51
42
|
`;
|
|
52
43
|
}
|
|
@@ -58,9 +49,8 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
58
49
|
margin: 0;
|
|
59
50
|
}
|
|
60
51
|
|
|
61
|
-
|
|
52
|
+
span {
|
|
62
53
|
font-size: 14px;
|
|
63
|
-
font-weight: bold;
|
|
64
54
|
color: #2c2c2c;
|
|
65
55
|
margin: 0px;
|
|
66
56
|
}
|
|
@@ -72,27 +62,22 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
72
62
|
box-shadow: 1px 1px 2px 0px;
|
|
73
63
|
height: 100%;
|
|
74
64
|
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
75
66
|
text-align: center;
|
|
76
67
|
width: 100%;
|
|
77
68
|
}
|
|
78
69
|
|
|
79
70
|
.inner-holder {
|
|
80
|
-
|
|
81
|
-
width: 100%;
|
|
82
|
-
display: flex;
|
|
83
|
-
flex-direction: column;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
#header-holder {
|
|
87
|
-
flex: 1;
|
|
71
|
+
flex-grow: 1;
|
|
88
72
|
}
|
|
89
73
|
|
|
90
74
|
#title-holder {
|
|
75
|
+
flex-shrink: 0;
|
|
91
76
|
height: 40px;
|
|
92
|
-
margin-bottom: 5px;
|
|
93
77
|
}
|
|
94
78
|
|
|
95
79
|
#avatar-holder {
|
|
80
|
+
margin-top: 5px;
|
|
96
81
|
margin-bottom: 5px;
|
|
97
82
|
display: flex;
|
|
98
83
|
align-items: center;
|
|
@@ -112,22 +97,6 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
112
97
|
height: 40px;
|
|
113
98
|
}
|
|
114
99
|
|
|
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
100
|
.truncated {
|
|
132
101
|
flex: 1;
|
|
133
102
|
min-width: 0; /* Important for long words! */
|
|
@@ -137,15 +106,9 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
137
106
|
display: -webkit-box;
|
|
138
107
|
-webkit-box-orient: vertical;
|
|
139
108
|
word-wrap: break-word;
|
|
140
|
-
word-break: break-all;
|
|
141
109
|
line-height: 2rem;
|
|
142
110
|
text-align: center;
|
|
143
111
|
}
|
|
144
|
-
|
|
145
|
-
.stat-icon {
|
|
146
|
-
height: 10px;
|
|
147
|
-
width: 10px;
|
|
148
|
-
}
|
|
149
112
|
`;
|
|
150
113
|
}
|
|
151
114
|
};
|
|
@@ -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;;;;oCAIqB,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;;;sDASJ,MAAA,IAAI,CAAC,KAAK,0CAAE,UAAU;;;;;;;kCAO1C,MAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,SAAS,0CAAE,WAAW,EAAE;;;;;;;uBAO/C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmET,CAAC;IACJ,CAAC;CACF,CAAA;AA9G6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AADnC,WAAW;IADvB,aAAa,CAAC,cAAc,CAAC;GACjB,WAAW,CA+GvB;SA/GY,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=\"outer-holder\">\n <div id=\"header-holder\">\n <div id=\"title-holder\">\n <h1 class=\"truncated\">${this.model?.identifier}</h1>\n </div>\n </div>\n\n <div class=\"inner-holder\">\n <div id=\"avatar-holder\">\n <img\n id=\"avatar\"\n alt=\"patron-avatar\"\n src=\"https://archive.org/services/img/${this.model?.identifier}\"\n />\n </div>\n\n <div id=\"year-holder\">\n <div id=\"archivist-since\">\n <span>\n Archivist since ${this.model?.dateAdded?.getFullYear()}\n </span>\n </div>\n </div>\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 .outer-holder {\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 .inner-holder {\n flex-grow: 1;\n }\n\n #title-holder {\n flex-shrink: 0;\n height: 40px;\n }\n\n #avatar-holder {\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 #year-holder {\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,91 +2,78 @@ 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
15
|
<div id="container">
|
|
18
|
-
<div id="
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
<item-image .model=${this.model} .baseImageUrl=${this.baseImageUrl}>
|
|
22
|
-
</item-image>
|
|
16
|
+
<div id="inner-wrapper">
|
|
17
|
+
<div class="title-wrapper">
|
|
18
|
+
<h1 id="item-title" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
|
|
23
19
|
</div>
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
20
|
+
|
|
21
|
+
<div class="image-wrapper">
|
|
22
|
+
<div id="item-image-container">
|
|
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
|
|
27
31
|
? html `<span>by ${itemCreator}</span>`
|
|
28
32
|
: nothing}
|
|
33
|
+
</div>
|
|
29
34
|
</div>
|
|
30
35
|
</div>
|
|
31
36
|
</div>
|
|
32
37
|
|
|
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>
|
|
38
|
+
<tile-stats
|
|
39
|
+
.mediatype=${(_c = this.model) === null || _c === void 0 ? void 0 : _c.mediatype}
|
|
40
|
+
.viewCount=${(_d = this.model) === null || _d === void 0 ? void 0 : _d.viewCount}
|
|
41
|
+
.favCount=${(_e = this.model) === null || _e === void 0 ? void 0 : _e.favCount}
|
|
42
|
+
.commentCount=${(_f = this.model) === null || _f === void 0 ? void 0 : _f.commentCount}>
|
|
43
|
+
</tile-stats>
|
|
64
44
|
</div>
|
|
65
45
|
</div>
|
|
66
46
|
`;
|
|
67
47
|
}
|
|
68
48
|
static get styles() {
|
|
69
|
-
const cornerRadiusCss = css `var(--collectionTileCornerRadius, 4px)`;
|
|
70
49
|
return css `
|
|
71
50
|
#container {
|
|
72
51
|
background-color: #ffffff;
|
|
73
|
-
border-radius:
|
|
52
|
+
border-radius: var(--collectionTileCornerRadius, 4px);
|
|
74
53
|
box-shadow: 1px 1px 2px 0px;
|
|
75
54
|
display: flex;
|
|
76
55
|
flex-direction: column;
|
|
77
56
|
height: 100%;
|
|
78
|
-
position: relative;
|
|
79
57
|
}
|
|
80
58
|
|
|
81
|
-
#
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
59
|
+
#inner-wrapper {
|
|
60
|
+
padding-top: 5px;
|
|
61
|
+
padding-left: 5px;
|
|
62
|
+
padding-right: 5px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.title-wrapper {
|
|
66
|
+
flex-shrink: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.image-wrapper {
|
|
70
|
+
flex-grow: 1;
|
|
86
71
|
}
|
|
87
72
|
|
|
88
73
|
#item-title {
|
|
74
|
+
flex: 1;
|
|
89
75
|
color: #2c2c2c;
|
|
76
|
+
min-width: 0; /* Important for long words! */
|
|
90
77
|
font-size: 1.6rem;
|
|
91
78
|
text-align: center;
|
|
92
79
|
margin-top: 0rem;
|
|
@@ -94,6 +81,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
94
81
|
overflow: hidden;
|
|
95
82
|
text-overflow: ellipsis;
|
|
96
83
|
display: -webkit-box;
|
|
84
|
+
word-wrap: break-word;
|
|
97
85
|
-webkit-line-clamp: 2;
|
|
98
86
|
-webkit-box-orient: vertical;
|
|
99
87
|
line-height: 2rem;
|
|
@@ -104,6 +92,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
104
92
|
display: flex;
|
|
105
93
|
justify-content: center;
|
|
106
94
|
flex: 1;
|
|
95
|
+
height: 16rem;
|
|
107
96
|
}
|
|
108
97
|
|
|
109
98
|
.hidden {
|
|
@@ -129,6 +118,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
129
118
|
align-items: flex-end; /* Important to start text from bottom */
|
|
130
119
|
height: 3rem;
|
|
131
120
|
padding-top: 1rem;
|
|
121
|
+
margin-top: 5px;
|
|
132
122
|
}
|
|
133
123
|
|
|
134
124
|
.truncated {
|
|
@@ -148,44 +138,6 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
148
138
|
line-height: 2rem;
|
|
149
139
|
text-align: center;
|
|
150
140
|
}
|
|
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
|
-
}
|
|
189
141
|
`;
|
|
190
142
|
}
|
|
191
143
|
};
|
|
@@ -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;;;;wCAIyB,SAAS,CAAC,SAAS,CAAC,IAAI,SAAS;;;;;;yBAMhD,IAAI,CAAC,KAAK;gCACH,IAAI,CAAC,YAAY;;;;;kBAM/B,WAAW;YACT,CAAC,CAAC,IAAI,CAAA,iBAAiB,WAAW,SAAS;YAC3C,CAAC,CAAC,OACN;;;;;;;uBAOO,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA4FT,CAAC;IACJ,CAAC;CACF,CAAA;AA3I6B;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,CA4IpB;SA5IY,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 id=\"container\">\n <div id=\"inner-wrapper\">\n <div class=\"title-wrapper\">\n <h1 id=\"item-title\" title=${ifDefined(itemTitle)}>${itemTitle}</h1>\n </div>\n\n <div class=\"image-wrapper\">\n <div id=\"item-image-container\">\n <item-image\n .model=${this.model}\n .baseImageUrl=${this.baseImageUrl}>\n </item-image>\n </div>\n <div class=\"item-creator\">\n <div class=\"truncated\">\n ${\n itemCreator\n ? html`<span>by ${itemCreator}</span>`\n : nothing\n }\n </div>\n </div>\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 #inner-wrapper {\n padding-top: 5px;\n padding-left: 5px;\n padding-right: 5px;\n }\n\n .title-wrapper {\n flex-shrink: 0;\n }\n\n .image-wrapper {\n flex-grow: 1;\n }\n\n #item-title {\n flex: 1;\n color: #2c2c2c;\n min-width: 0; /* Important for long words! */\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 word-wrap: break-word;\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 height: 16rem;\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 margin-top: 5px;\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 }\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
|
+
}
|