@internetarchive/collection-browser 0.2.4-alpha.1 → 0.2.4-alpha.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/tiles/grid/account-tile.js +23 -19
- package/dist/src/tiles/grid/account-tile.js.map +1 -1
- package/dist/src/tiles/grid/item-tile.js +37 -62
- package/dist/src/tiles/grid/item-tile.js.map +1 -1
- package/dist/src/tiles/grid/tile-stats.js +49 -27
- package/dist/src/tiles/grid/tile-stats.js.map +1 -1
- package/dist/src/tiles/mediatype-icon.js +15 -1
- package/dist/src/tiles/mediatype-icon.js.map +1 -1
- package/package.json +1 -1
- package/src/tiles/grid/account-tile.ts +23 -19
- package/src/tiles/grid/item-tile.ts +39 -64
- package/src/tiles/grid/tile-stats.ts +49 -27
- package/src/tiles/mediatype-icon.ts +15 -1
|
@@ -6,15 +6,13 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
6
6
|
render() {
|
|
7
7
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
8
8
|
return html `
|
|
9
|
-
<div class="
|
|
10
|
-
<div id="
|
|
11
|
-
<
|
|
12
|
-
<h1 class="truncated">${(_a = this.model) === null || _a === void 0 ? void 0 : _a.identifier}</h1>
|
|
13
|
-
</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>
|
|
14
12
|
</div>
|
|
15
13
|
|
|
16
|
-
<div class="
|
|
17
|
-
<div id="avatar-
|
|
14
|
+
<div class="account-info">
|
|
15
|
+
<div id="avatar-info">
|
|
18
16
|
<img
|
|
19
17
|
id="avatar"
|
|
20
18
|
alt="patron-avatar"
|
|
@@ -22,13 +20,9 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
22
20
|
/>
|
|
23
21
|
</div>
|
|
24
22
|
|
|
25
|
-
<
|
|
26
|
-
|
|
27
|
-
|
|
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>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
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>
|
|
32
26
|
</div>
|
|
33
27
|
|
|
34
28
|
<tile-stats
|
|
@@ -55,7 +49,7 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
55
49
|
margin: 0px;
|
|
56
50
|
}
|
|
57
51
|
|
|
58
|
-
.
|
|
52
|
+
.account-tile-main {
|
|
59
53
|
background-color: #fcf5e6;
|
|
60
54
|
border: 1px #2c2c2c;
|
|
61
55
|
border-radius: 4px;
|
|
@@ -67,16 +61,26 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
67
61
|
width: 100%;
|
|
68
62
|
}
|
|
69
63
|
|
|
70
|
-
.
|
|
64
|
+
.account-info {
|
|
71
65
|
flex-grow: 1;
|
|
72
66
|
}
|
|
73
67
|
|
|
74
|
-
#title
|
|
68
|
+
#title {
|
|
69
|
+
padding: 5px 5px 0px 5px;
|
|
75
70
|
flex-shrink: 0;
|
|
76
71
|
height: 40px;
|
|
77
72
|
}
|
|
78
73
|
|
|
79
|
-
|
|
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;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
#avatar-info {
|
|
80
84
|
margin-top: 5px;
|
|
81
85
|
margin-bottom: 5px;
|
|
82
86
|
display: flex;
|
|
@@ -92,7 +96,7 @@ let AccountTile = class AccountTile extends LitElement {
|
|
|
92
96
|
box-shadow: 1px 1px 2px #888888;
|
|
93
97
|
}
|
|
94
98
|
|
|
95
|
-
#
|
|
99
|
+
#archivist-since {
|
|
96
100
|
margin-bottom: 5px;
|
|
97
101
|
height: 40px;
|
|
98
102
|
}
|
|
@@ -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,cAAc,CAAC;AAGtB,IAAa,WAAW,GAAxB,MAAa,WAAY,SAAQ,UAAU;IAGzC,MAAM;;QACJ,OAAO,IAAI,CAAA
|
|
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"]}
|
|
@@ -12,26 +12,20 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
12
12
|
const itemTitle = (_a = this.model) === null || _a === void 0 ? void 0 : _a.title;
|
|
13
13
|
const itemCreator = (_b = this.model) === null || _b === void 0 ? void 0 : _b.creator;
|
|
14
14
|
return html `
|
|
15
|
-
<div
|
|
16
|
-
<div
|
|
17
|
-
<div
|
|
18
|
-
<h1
|
|
15
|
+
<div class="container">
|
|
16
|
+
<div class="item-info">
|
|
17
|
+
<div id="title">
|
|
18
|
+
<h1 class="truncated" title=${ifDefined(itemTitle)}>${itemTitle}</h1>
|
|
19
19
|
</div>
|
|
20
20
|
|
|
21
|
-
<div
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
<div class="truncated">
|
|
30
|
-
${itemCreator
|
|
31
|
-
? html `<span>by ${itemCreator}</span>`
|
|
32
|
-
: nothing}
|
|
33
|
-
</div>
|
|
34
|
-
</div>
|
|
21
|
+
<div id="image">
|
|
22
|
+
<item-image
|
|
23
|
+
.model=${this.model}
|
|
24
|
+
.baseImageUrl=${this.baseImageUrl}>
|
|
25
|
+
</item-image>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="created-by truncated">
|
|
28
|
+
${itemCreator ? html `<span>by ${itemCreator}</span>` : nothing}
|
|
35
29
|
</div>
|
|
36
30
|
</div>
|
|
37
31
|
|
|
@@ -47,7 +41,7 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
47
41
|
}
|
|
48
42
|
static get styles() {
|
|
49
43
|
return css `
|
|
50
|
-
|
|
44
|
+
.container {
|
|
51
45
|
background-color: #ffffff;
|
|
52
46
|
border-radius: var(--collectionTileCornerRadius, 4px);
|
|
53
47
|
box-shadow: 1px 1px 2px 0px;
|
|
@@ -56,39 +50,16 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
56
50
|
height: 100%;
|
|
57
51
|
}
|
|
58
52
|
|
|
59
|
-
|
|
60
|
-
padding
|
|
61
|
-
padding-left: 5px;
|
|
62
|
-
padding-right: 5px;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.title-wrapper {
|
|
66
|
-
flex-shrink: 0;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.image-wrapper {
|
|
53
|
+
.item-info {
|
|
54
|
+
padding: 5px 5px 0 5px;
|
|
70
55
|
flex-grow: 1;
|
|
71
56
|
}
|
|
72
57
|
|
|
73
|
-
#
|
|
74
|
-
flex:
|
|
75
|
-
color: #2c2c2c;
|
|
76
|
-
min-width: 0; /* Important for long words! */
|
|
77
|
-
font-size: 1.6rem;
|
|
78
|
-
text-align: center;
|
|
79
|
-
margin-top: 0rem;
|
|
80
|
-
margin-bottom: 0.5rem;
|
|
81
|
-
overflow: hidden;
|
|
82
|
-
text-overflow: ellipsis;
|
|
83
|
-
display: -webkit-box;
|
|
84
|
-
word-wrap: break-word;
|
|
85
|
-
-webkit-line-clamp: 2;
|
|
86
|
-
-webkit-box-orient: vertical;
|
|
87
|
-
line-height: 2rem;
|
|
88
|
-
height: 4rem;
|
|
58
|
+
#title {
|
|
59
|
+
flex-shrink: 0;
|
|
89
60
|
}
|
|
90
61
|
|
|
91
|
-
#
|
|
62
|
+
#image {
|
|
92
63
|
display: flex;
|
|
93
64
|
justify-content: center;
|
|
94
65
|
flex: 1;
|
|
@@ -99,20 +70,16 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
99
70
|
display: none;
|
|
100
71
|
}
|
|
101
72
|
|
|
102
|
-
|
|
73
|
+
.container:hover > .item-info > #title > .truncated {
|
|
103
74
|
text-decoration: underline;
|
|
104
75
|
}
|
|
105
76
|
|
|
106
77
|
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
107
|
-
#title
|
|
78
|
+
#title:hover > .truncated {
|
|
108
79
|
text-decoration: underline;
|
|
109
80
|
}
|
|
110
81
|
|
|
111
|
-
|
|
112
|
-
background-color: #fcfcfc;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
.item-creator {
|
|
82
|
+
.created-by {
|
|
116
83
|
display: flex;
|
|
117
84
|
justify-content: center;
|
|
118
85
|
align-items: flex-end; /* Important to start text from bottom */
|
|
@@ -123,20 +90,28 @@ let ItemTile = class ItemTile extends LitElement {
|
|
|
123
90
|
|
|
124
91
|
.truncated {
|
|
125
92
|
flex: 1;
|
|
93
|
+
color: #2c2c2c;
|
|
126
94
|
min-width: 0; /* Important for long words! */
|
|
95
|
+
text-align: center;
|
|
96
|
+
line-height: 2rem;
|
|
97
|
+
text-overflow: ellipsis;
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
word-wrap: break-word;
|
|
100
|
+
-webkit-line-clamp: 2;
|
|
101
|
+
-webkit-box-orient: vertical;
|
|
127
102
|
}
|
|
128
103
|
|
|
129
104
|
.truncated span {
|
|
130
105
|
font-size: 1.4rem;
|
|
131
|
-
color: #2c2c2c;
|
|
132
|
-
-webkit-line-clamp: 2;
|
|
133
|
-
text-overflow: ellipsis;
|
|
134
|
-
overflow: hidden;
|
|
135
106
|
display: -webkit-box;
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
h1.truncated {
|
|
110
|
+
margin-top: 0rem;
|
|
111
|
+
margin-bottom: 0.5rem;
|
|
112
|
+
font-size: 1.6rem;
|
|
113
|
+
height: 4rem;
|
|
114
|
+
display: -webkit-box;
|
|
140
115
|
}
|
|
141
116
|
`;
|
|
142
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;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;;;;
|
|
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"]}
|
|
@@ -9,62 +9,84 @@ import { formatCount } from '../../utils/format-count';
|
|
|
9
9
|
let TileStats = class TileStats extends LitElement {
|
|
10
10
|
render() {
|
|
11
11
|
return html `
|
|
12
|
-
<div class="stats
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
</mediatype-icon>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="col">
|
|
12
|
+
<div class="item-stats">
|
|
13
|
+
<p class="sr-only">
|
|
14
|
+
${this.mediatype === 'account' ? 'Account' : 'Item'} Stats:
|
|
15
|
+
</p>
|
|
16
|
+
<ul id="stats-row">
|
|
17
|
+
<li class="col">
|
|
18
|
+
<mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
|
|
19
|
+
</li>
|
|
20
|
+
<li class="col">
|
|
24
21
|
${this.mediatype === 'account' ? uploadIcon : viewsIcon}
|
|
25
22
|
<p class="status-text">
|
|
23
|
+
<span class="sr-only">
|
|
24
|
+
${this.mediatype === 'account' ? 'Uploads' : 'Views'} count:
|
|
25
|
+
</span>
|
|
26
26
|
${formatCount(this.mediatype === 'account' ? this.itemCount : this.viewCount, 'short', 'short')}
|
|
27
27
|
</p>
|
|
28
|
-
</
|
|
29
|
-
<
|
|
28
|
+
</li>
|
|
29
|
+
<li class="col">
|
|
30
30
|
${favoriteFilledIcon}
|
|
31
31
|
<p class="status-text">
|
|
32
|
+
<span class="sr-only">Favorites count:</span>
|
|
32
33
|
${formatCount(this.favCount, 'short', 'short')}
|
|
33
34
|
</p>
|
|
34
|
-
</
|
|
35
|
-
<
|
|
35
|
+
</li>
|
|
36
|
+
<li class="col">
|
|
36
37
|
${reviewsIcon}
|
|
37
38
|
<p class="status-text">
|
|
39
|
+
<span class="sr-only">Reviews count:</span>
|
|
38
40
|
${formatCount(this.commentCount, 'short', 'short')}
|
|
39
41
|
</p>
|
|
40
|
-
</
|
|
41
|
-
</
|
|
42
|
+
</li>
|
|
43
|
+
</ul>
|
|
42
44
|
</div>
|
|
43
45
|
`;
|
|
44
46
|
}
|
|
45
47
|
static get styles() {
|
|
46
48
|
return css `
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
mediatype-icon {
|
|
50
|
+
--iconHeight: 25px;
|
|
51
|
+
--iconWidth: 25px;
|
|
50
52
|
}
|
|
51
53
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
ul {
|
|
55
|
+
all: unset; // unset all property values
|
|
56
|
+
list-style-type: none; // remove default list-style
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
li {
|
|
60
|
+
list-style-type: none; // remove default list-style
|
|
55
61
|
}
|
|
56
62
|
|
|
57
|
-
|
|
63
|
+
.item-stats {
|
|
64
|
+
height: 35px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
#stats-row {
|
|
68
|
+
border-top: 1px solid #bbb;
|
|
58
69
|
align-items: center;
|
|
59
70
|
display: flex;
|
|
60
71
|
flex: 1;
|
|
61
72
|
justify-content: space-evenly;
|
|
62
73
|
text-align: center;
|
|
63
74
|
width: 100%;
|
|
64
|
-
padding-top:
|
|
75
|
+
padding-top: 5px;
|
|
65
76
|
padding-bottom: 5px;
|
|
66
77
|
}
|
|
67
78
|
|
|
79
|
+
.sr-only {
|
|
80
|
+
position: absolute;
|
|
81
|
+
width: 1px;
|
|
82
|
+
height: 1px;
|
|
83
|
+
padding: 0;
|
|
84
|
+
margin: -1px;
|
|
85
|
+
overflow: hidden;
|
|
86
|
+
clip: rect(0, 0, 0, 0);
|
|
87
|
+
border: 0;
|
|
88
|
+
}
|
|
89
|
+
|
|
68
90
|
.col {
|
|
69
91
|
width: 25%;
|
|
70
92
|
height: 25px;
|
|
@@ -81,7 +103,7 @@ let TileStats = class TileStats extends LitElement {
|
|
|
81
103
|
font-size: 14px;
|
|
82
104
|
height: 15px;
|
|
83
105
|
color: #2c2c2c;
|
|
84
|
-
line-height:
|
|
106
|
+
line-height: 20px;
|
|
85
107
|
margin: auto;
|
|
86
108
|
display: block;
|
|
87
109
|
text-align: center;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.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,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,IAAI,CAAA
|
|
1
|
+
{"version":3,"file":"tile-stats.js","sourceRoot":"","sources":["../../../../src/tiles/grid/tile-stats.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,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAEzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,IAAa,SAAS,GAAtB,MAAa,SAAU,SAAQ,UAAU;IAWvC,MAAM;QACJ,OAAO,IAAI,CAAA;;;YAGH,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;;;;yCAIpB,IAAI,CAAC,SAAS;;;cAGzC,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS;;;kBAGjD,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO;;gBAEpD,WAAW,CACX,IAAI,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,EAC9D,OAAO,EACP,OAAO,CACR;;;;cAID,kBAAkB;;;gBAGhB,WAAW,CAAC,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,OAAO,CAAC;;;;cAI9C,WAAW;;;gBAGT,WAAW,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,EAAE,OAAO,CAAC;;;;;KAK3D,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+DT,CAAC;IACJ,CAAC;CACF,CAAA;AAtH6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAoB;AAEnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAmB;AAElB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CAAuB;AATvC,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAuHrB;SAvHY,SAAS","sourcesContent":["import { css, CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { favoriteFilledIcon } from '../../assets/img/icons/favorite-filled';\nimport { reviewsIcon } from '../../assets/img/icons/reviews';\nimport { uploadIcon } from '../../assets/img/icons/upload';\nimport { viewsIcon } from '../../assets/img/icons/views';\n\nimport { formatCount } from '../../utils/format-count';\n\n@customElement('tile-stats')\nexport class TileStats extends LitElement {\n @property({ type: String }) mediatype?: string;\n\n @property({ type: Number }) itemCount?: number;\n\n @property({ type: Number }) viewCount?: number;\n\n @property({ type: Number }) favCount?: number;\n\n @property({ type: Number }) commentCount?: number;\n\n render() {\n return html`\n <div class=\"item-stats\">\n <p class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Account' : 'Item'} Stats:\n </p>\n <ul id=\"stats-row\">\n <li class=\"col\">\n <mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>\n </li>\n <li class=\"col\">\n ${this.mediatype === 'account' ? uploadIcon : viewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">\n ${this.mediatype === 'account' ? 'Uploads' : 'Views'} count:\n </span>\n ${formatCount(\n this.mediatype === 'account' ? this.itemCount : this.viewCount,\n 'short',\n 'short'\n )}\n </p>\n </li>\n <li class=\"col\">\n ${favoriteFilledIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Favorites count:</span>\n ${formatCount(this.favCount, 'short', 'short')}\n </p>\n </li>\n <li class=\"col\">\n ${reviewsIcon}\n <p class=\"status-text\">\n <span class=\"sr-only\">Reviews count:</span>\n ${formatCount(this.commentCount, 'short', 'short')}\n </p>\n </li>\n </ul>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n mediatype-icon {\n --iconHeight: 25px;\n --iconWidth: 25px;\n }\n\n ul {\n all: unset; // unset all property values\n list-style-type: none; // remove default list-style\n }\n\n li {\n list-style-type: none; // remove default list-style\n }\n\n .item-stats {\n height: 35px;\n }\n\n #stats-row {\n border-top: 1px solid #bbb;\n align-items: center;\n display: flex;\n flex: 1;\n justify-content: space-evenly;\n text-align: center;\n width: 100%;\n padding-top: 5px;\n padding-bottom: 5px;\n }\n\n .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n\n .col {\n width: 25%;\n height: 25px;\n }\n\n svg {\n height: 10px;\n width: 10px;\n display: block;\n margin: auto;\n }\n\n .status-text {\n font-size: 14px;\n height: 15px;\n color: #2c2c2c;\n line-height: 20px;\n margin: auto;\n display: block;\n text-align: center;\n }\n `;\n }\n}\n"]}
|
|
@@ -33,7 +33,10 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
|
|
|
33
33
|
style="--iconFillColor: ${config.color}"
|
|
34
34
|
>
|
|
35
35
|
${config.icon}
|
|
36
|
-
<p class="status-text"
|
|
36
|
+
<p class="status-text">
|
|
37
|
+
<span class="sr-only">${config.text} icon</span>
|
|
38
|
+
${config.text}
|
|
39
|
+
</p>
|
|
37
40
|
</div>
|
|
38
41
|
`;
|
|
39
42
|
}
|
|
@@ -63,6 +66,17 @@ let MediatypeIcon = class MediatypeIcon extends LitElement {
|
|
|
63
66
|
.fill-color {
|
|
64
67
|
fill: var(--iconFillColor, '#000000');
|
|
65
68
|
}
|
|
69
|
+
|
|
70
|
+
.sr-only {
|
|
71
|
+
position: absolute;
|
|
72
|
+
width: 1px;
|
|
73
|
+
height: 1px;
|
|
74
|
+
padding: 0;
|
|
75
|
+
margin: -1px;
|
|
76
|
+
overflow: hidden;
|
|
77
|
+
clip: rect(0, 0, 0, 0);
|
|
78
|
+
border: 0;
|
|
79
|
+
}
|
|
66
80
|
`;
|
|
67
81
|
}
|
|
68
82
|
};
|
|
@@ -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;IAiFhD,CAAC;IA/EC,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;;kCAEa,MAAM,CAAC,IAAI;YACjC,MAAM,CAAC,IAAI;;;KAGlB,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoCT,CAAC;IACJ,CAAC;CACF,CAAA;AArF6B;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,CAsFzB;SAtFY,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\">\n <span class=\"sr-only\">${config.text} icon</span>\n ${config.text}\n </p>\n </div>\n `;\n }\n\n static get styles(): CSSResultGroup {\n return css`\n #icon {\n height: var(--iconHeight, 25px);\n }\n\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 .sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n }\n `;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -10,15 +10,13 @@ export class AccountTile extends LitElement {
|
|
|
10
10
|
|
|
11
11
|
render() {
|
|
12
12
|
return html`
|
|
13
|
-
<div class="
|
|
14
|
-
<div id="
|
|
15
|
-
<
|
|
16
|
-
<h1 class="truncated">${this.model?.identifier}</h1>
|
|
17
|
-
</div>
|
|
13
|
+
<div class="account-tile-main">
|
|
14
|
+
<div id="title">
|
|
15
|
+
<h1 class="truncated">${this.model?.identifier}</h1>
|
|
18
16
|
</div>
|
|
19
17
|
|
|
20
|
-
<div class="
|
|
21
|
-
<div id="avatar-
|
|
18
|
+
<div class="account-info">
|
|
19
|
+
<div id="avatar-info">
|
|
22
20
|
<img
|
|
23
21
|
id="avatar"
|
|
24
22
|
alt="patron-avatar"
|
|
@@ -26,13 +24,9 @@ export class AccountTile extends LitElement {
|
|
|
26
24
|
/>
|
|
27
25
|
</div>
|
|
28
26
|
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
Archivist since ${this.model?.dateAdded?.getFullYear()}
|
|
33
|
-
</span>
|
|
34
|
-
</div>
|
|
35
|
-
</div>
|
|
27
|
+
<span id="archivist-since">
|
|
28
|
+
Archivist since ${this.model?.dateAdded?.getFullYear()}
|
|
29
|
+
</span>
|
|
36
30
|
</div>
|
|
37
31
|
|
|
38
32
|
<tile-stats
|
|
@@ -60,7 +54,7 @@ export class AccountTile extends LitElement {
|
|
|
60
54
|
margin: 0px;
|
|
61
55
|
}
|
|
62
56
|
|
|
63
|
-
.
|
|
57
|
+
.account-tile-main {
|
|
64
58
|
background-color: #fcf5e6;
|
|
65
59
|
border: 1px #2c2c2c;
|
|
66
60
|
border-radius: 4px;
|
|
@@ -72,16 +66,26 @@ export class AccountTile extends LitElement {
|
|
|
72
66
|
width: 100%;
|
|
73
67
|
}
|
|
74
68
|
|
|
75
|
-
.
|
|
69
|
+
.account-info {
|
|
76
70
|
flex-grow: 1;
|
|
77
71
|
}
|
|
78
72
|
|
|
79
|
-
#title
|
|
73
|
+
#title {
|
|
74
|
+
padding: 5px 5px 0px 5px;
|
|
80
75
|
flex-shrink: 0;
|
|
81
76
|
height: 40px;
|
|
82
77
|
}
|
|
83
78
|
|
|
84
|
-
|
|
79
|
+
.account-tile-main:hover > #title > .truncated {
|
|
80
|
+
text-decoration: underline;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
84
|
+
#title:hover > .truncated {
|
|
85
|
+
text-decoration: underline;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
#avatar-info {
|
|
85
89
|
margin-top: 5px;
|
|
86
90
|
margin-bottom: 5px;
|
|
87
91
|
display: flex;
|
|
@@ -97,7 +101,7 @@ export class AccountTile extends LitElement {
|
|
|
97
101
|
box-shadow: 1px 1px 2px #888888;
|
|
98
102
|
}
|
|
99
103
|
|
|
100
|
-
#
|
|
104
|
+
#archivist-since {
|
|
101
105
|
margin-bottom: 5px;
|
|
102
106
|
height: 40px;
|
|
103
107
|
}
|
|
@@ -19,28 +19,22 @@ export class ItemTile extends LitElement {
|
|
|
19
19
|
const itemTitle = this.model?.title;
|
|
20
20
|
const itemCreator = this.model?.creator;
|
|
21
21
|
return html`
|
|
22
|
-
<div
|
|
23
|
-
<div
|
|
24
|
-
<div
|
|
25
|
-
<h1
|
|
22
|
+
<div class="container">
|
|
23
|
+
<div class="item-info">
|
|
24
|
+
<div id="title">
|
|
25
|
+
<h1 class="truncated" title=${ifDefined(
|
|
26
|
+
itemTitle
|
|
27
|
+
)}>${itemTitle}</h1>
|
|
26
28
|
</div>
|
|
27
29
|
|
|
28
|
-
<div
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<div class="truncated">
|
|
37
|
-
${
|
|
38
|
-
itemCreator
|
|
39
|
-
? html`<span>by ${itemCreator}</span>`
|
|
40
|
-
: nothing
|
|
41
|
-
}
|
|
42
|
-
</div>
|
|
43
|
-
</div>
|
|
30
|
+
<div id="image">
|
|
31
|
+
<item-image
|
|
32
|
+
.model=${this.model}
|
|
33
|
+
.baseImageUrl=${this.baseImageUrl}>
|
|
34
|
+
</item-image>
|
|
35
|
+
</div>
|
|
36
|
+
<div class="created-by truncated">
|
|
37
|
+
${itemCreator ? html`<span>by ${itemCreator}</span>` : nothing}
|
|
44
38
|
</div>
|
|
45
39
|
</div>
|
|
46
40
|
|
|
@@ -57,7 +51,7 @@ export class ItemTile extends LitElement {
|
|
|
57
51
|
|
|
58
52
|
static get styles(): CSSResultGroup {
|
|
59
53
|
return css`
|
|
60
|
-
|
|
54
|
+
.container {
|
|
61
55
|
background-color: #ffffff;
|
|
62
56
|
border-radius: var(--collectionTileCornerRadius, 4px);
|
|
63
57
|
box-shadow: 1px 1px 2px 0px;
|
|
@@ -66,39 +60,16 @@ export class ItemTile extends LitElement {
|
|
|
66
60
|
height: 100%;
|
|
67
61
|
}
|
|
68
62
|
|
|
69
|
-
|
|
70
|
-
padding
|
|
71
|
-
padding-left: 5px;
|
|
72
|
-
padding-right: 5px;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.title-wrapper {
|
|
76
|
-
flex-shrink: 0;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.image-wrapper {
|
|
63
|
+
.item-info {
|
|
64
|
+
padding: 5px 5px 0 5px;
|
|
80
65
|
flex-grow: 1;
|
|
81
66
|
}
|
|
82
67
|
|
|
83
|
-
#
|
|
84
|
-
flex:
|
|
85
|
-
color: #2c2c2c;
|
|
86
|
-
min-width: 0; /* Important for long words! */
|
|
87
|
-
font-size: 1.6rem;
|
|
88
|
-
text-align: center;
|
|
89
|
-
margin-top: 0rem;
|
|
90
|
-
margin-bottom: 0.5rem;
|
|
91
|
-
overflow: hidden;
|
|
92
|
-
text-overflow: ellipsis;
|
|
93
|
-
display: -webkit-box;
|
|
94
|
-
word-wrap: break-word;
|
|
95
|
-
-webkit-line-clamp: 2;
|
|
96
|
-
-webkit-box-orient: vertical;
|
|
97
|
-
line-height: 2rem;
|
|
98
|
-
height: 4rem;
|
|
68
|
+
#title {
|
|
69
|
+
flex-shrink: 0;
|
|
99
70
|
}
|
|
100
71
|
|
|
101
|
-
#
|
|
72
|
+
#image {
|
|
102
73
|
display: flex;
|
|
103
74
|
justify-content: center;
|
|
104
75
|
flex: 1;
|
|
@@ -109,20 +80,16 @@ export class ItemTile extends LitElement {
|
|
|
109
80
|
display: none;
|
|
110
81
|
}
|
|
111
82
|
|
|
112
|
-
|
|
83
|
+
.container:hover > .item-info > #title > .truncated {
|
|
113
84
|
text-decoration: underline;
|
|
114
85
|
}
|
|
115
86
|
|
|
116
87
|
/** this is a workaround for Safari 15 where the hover effects are not working */
|
|
117
|
-
#title
|
|
88
|
+
#title:hover > .truncated {
|
|
118
89
|
text-decoration: underline;
|
|
119
90
|
}
|
|
120
91
|
|
|
121
|
-
|
|
122
|
-
background-color: #fcfcfc;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.item-creator {
|
|
92
|
+
.created-by {
|
|
126
93
|
display: flex;
|
|
127
94
|
justify-content: center;
|
|
128
95
|
align-items: flex-end; /* Important to start text from bottom */
|
|
@@ -133,20 +100,28 @@ export class ItemTile extends LitElement {
|
|
|
133
100
|
|
|
134
101
|
.truncated {
|
|
135
102
|
flex: 1;
|
|
103
|
+
color: #2c2c2c;
|
|
136
104
|
min-width: 0; /* Important for long words! */
|
|
105
|
+
text-align: center;
|
|
106
|
+
line-height: 2rem;
|
|
107
|
+
text-overflow: ellipsis;
|
|
108
|
+
overflow: hidden;
|
|
109
|
+
word-wrap: break-word;
|
|
110
|
+
-webkit-line-clamp: 2;
|
|
111
|
+
-webkit-box-orient: vertical;
|
|
137
112
|
}
|
|
138
113
|
|
|
139
114
|
.truncated span {
|
|
140
115
|
font-size: 1.4rem;
|
|
141
|
-
color: #2c2c2c;
|
|
142
|
-
-webkit-line-clamp: 2;
|
|
143
|
-
text-overflow: ellipsis;
|
|
144
|
-
overflow: hidden;
|
|
145
116
|
display: -webkit-box;
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
h1.truncated {
|
|
120
|
+
margin-top: 0rem;
|
|
121
|
+
margin-bottom: 0.5rem;
|
|
122
|
+
font-size: 1.6rem;
|
|
123
|
+
height: 4rem;
|
|
124
|
+
display: -webkit-box;
|
|
150
125
|
}
|
|
151
126
|
`;
|
|
152
127
|
}
|
|
@@ -22,67 +22,89 @@ export class TileStats extends LitElement {
|
|
|
22
22
|
|
|
23
23
|
render() {
|
|
24
24
|
return html`
|
|
25
|
-
<div class="stats
|
|
26
|
-
<
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
</mediatype-icon>
|
|
35
|
-
</div>
|
|
36
|
-
<div class="col">
|
|
25
|
+
<div class="item-stats">
|
|
26
|
+
<p class="sr-only">
|
|
27
|
+
${this.mediatype === 'account' ? 'Account' : 'Item'} Stats:
|
|
28
|
+
</p>
|
|
29
|
+
<ul id="stats-row">
|
|
30
|
+
<li class="col">
|
|
31
|
+
<mediatype-icon .mediatype=${this.mediatype}></mediatype-icon>
|
|
32
|
+
</li>
|
|
33
|
+
<li class="col">
|
|
37
34
|
${this.mediatype === 'account' ? uploadIcon : viewsIcon}
|
|
38
35
|
<p class="status-text">
|
|
36
|
+
<span class="sr-only">
|
|
37
|
+
${this.mediatype === 'account' ? 'Uploads' : 'Views'} count:
|
|
38
|
+
</span>
|
|
39
39
|
${formatCount(
|
|
40
40
|
this.mediatype === 'account' ? this.itemCount : this.viewCount,
|
|
41
41
|
'short',
|
|
42
42
|
'short'
|
|
43
43
|
)}
|
|
44
44
|
</p>
|
|
45
|
-
</
|
|
46
|
-
<
|
|
45
|
+
</li>
|
|
46
|
+
<li class="col">
|
|
47
47
|
${favoriteFilledIcon}
|
|
48
48
|
<p class="status-text">
|
|
49
|
+
<span class="sr-only">Favorites count:</span>
|
|
49
50
|
${formatCount(this.favCount, 'short', 'short')}
|
|
50
51
|
</p>
|
|
51
|
-
</
|
|
52
|
-
<
|
|
52
|
+
</li>
|
|
53
|
+
<li class="col">
|
|
53
54
|
${reviewsIcon}
|
|
54
55
|
<p class="status-text">
|
|
56
|
+
<span class="sr-only">Reviews count:</span>
|
|
55
57
|
${formatCount(this.commentCount, 'short', 'short')}
|
|
56
58
|
</p>
|
|
57
|
-
</
|
|
58
|
-
</
|
|
59
|
+
</li>
|
|
60
|
+
</ul>
|
|
59
61
|
</div>
|
|
60
62
|
`;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
static get styles(): CSSResultGroup {
|
|
64
66
|
return css`
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
67
|
+
mediatype-icon {
|
|
68
|
+
--iconHeight: 25px;
|
|
69
|
+
--iconWidth: 25px;
|
|
68
70
|
}
|
|
69
71
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
72
|
+
ul {
|
|
73
|
+
all: unset; // unset all property values
|
|
74
|
+
list-style-type: none; // remove default list-style
|
|
73
75
|
}
|
|
74
76
|
|
|
75
|
-
|
|
77
|
+
li {
|
|
78
|
+
list-style-type: none; // remove default list-style
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.item-stats {
|
|
82
|
+
height: 35px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
#stats-row {
|
|
86
|
+
border-top: 1px solid #bbb;
|
|
76
87
|
align-items: center;
|
|
77
88
|
display: flex;
|
|
78
89
|
flex: 1;
|
|
79
90
|
justify-content: space-evenly;
|
|
80
91
|
text-align: center;
|
|
81
92
|
width: 100%;
|
|
82
|
-
padding-top:
|
|
93
|
+
padding-top: 5px;
|
|
83
94
|
padding-bottom: 5px;
|
|
84
95
|
}
|
|
85
96
|
|
|
97
|
+
.sr-only {
|
|
98
|
+
position: absolute;
|
|
99
|
+
width: 1px;
|
|
100
|
+
height: 1px;
|
|
101
|
+
padding: 0;
|
|
102
|
+
margin: -1px;
|
|
103
|
+
overflow: hidden;
|
|
104
|
+
clip: rect(0, 0, 0, 0);
|
|
105
|
+
border: 0;
|
|
106
|
+
}
|
|
107
|
+
|
|
86
108
|
.col {
|
|
87
109
|
width: 25%;
|
|
88
110
|
height: 25px;
|
|
@@ -99,7 +121,7 @@ export class TileStats extends LitElement {
|
|
|
99
121
|
font-size: 14px;
|
|
100
122
|
height: 15px;
|
|
101
123
|
color: #2c2c2c;
|
|
102
|
-
line-height:
|
|
124
|
+
line-height: 20px;
|
|
103
125
|
margin: auto;
|
|
104
126
|
display: block;
|
|
105
127
|
text-align: center;
|
|
@@ -43,7 +43,10 @@ export class MediatypeIcon extends LitElement {
|
|
|
43
43
|
style="--iconFillColor: ${config.color}"
|
|
44
44
|
>
|
|
45
45
|
${config.icon}
|
|
46
|
-
<p class="status-text"
|
|
46
|
+
<p class="status-text">
|
|
47
|
+
<span class="sr-only">${config.text} icon</span>
|
|
48
|
+
${config.text}
|
|
49
|
+
</p>
|
|
47
50
|
</div>
|
|
48
51
|
`;
|
|
49
52
|
}
|
|
@@ -74,6 +77,17 @@ export class MediatypeIcon extends LitElement {
|
|
|
74
77
|
.fill-color {
|
|
75
78
|
fill: var(--iconFillColor, '#000000');
|
|
76
79
|
}
|
|
80
|
+
|
|
81
|
+
.sr-only {
|
|
82
|
+
position: absolute;
|
|
83
|
+
width: 1px;
|
|
84
|
+
height: 1px;
|
|
85
|
+
padding: 0;
|
|
86
|
+
margin: -1px;
|
|
87
|
+
overflow: hidden;
|
|
88
|
+
clip: rect(0, 0, 0, 0);
|
|
89
|
+
border: 0;
|
|
90
|
+
}
|
|
77
91
|
`;
|
|
78
92
|
}
|
|
79
93
|
}
|