starshard/peafowl
starshard/peafowl
Template
1
Fork 0
mirror of https://github.com/starshardstudio/peafowl.git synced 2024-11-24 05:54:19 +00:00
Code Activity

Make the progress icons into colored badges

Browse source
This commit is contained in:
Steffo 2024-07-07 05:31:43 +02:00
parent 35131612e6
commit b4623ff06c
Signed by: steffo
GPG key ID: 5ADA3868646C3FC0
3 changed files with 64 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
_components/GameRow.tsx
View file

@ -45,9 +45,11 @@ export function GameRow({game, columns = gameRowColumnKindDefault, priority}: Ga
case "progress": { case "progress": {
return ( return (
<td key={index} className={`game-progress ${progressClass}`}> <td key={index} className={`game-progress ${progressClass}`}>
<data value={game.progress ?? Progress.Unset} title={progressTitle}> <div title={progressTitle}>
{progressIcon && <i className={`fa-sharp fa-regular ${progressIcon} ${activeClassFa}`}></i>} <data value={game.progress ?? Progress.Unset}>
</data> {progressIcon && <i className={`fa-sharp fa-regular ${progressIcon} ${activeClassFa}`}></i>}
</data>
</div>
</td> </td>
) )
} }

2
_static/scripting/sort.js
View file

@ -137,7 +137,7 @@ function readProgress(a) {
/** /**
* @type {HTMLDataElement} * @type {HTMLDataElement}
*/ */
const data = cell.firstElementChild const data = cell.firstElementChild.firstElementChild
switch (data.value) { switch (data.value) {
case undefined: case undefined:
return undefined; return undefined;

86
_static/styles/base.css
View file

@ -12,6 +12,7 @@
--color-body-over: #FFFFFF; --color-body-over: #FFFFFF;
--color-link: #99ffff; --color-link: #99ffff;
--color-link-over: #000000;
--color-unset: #474747; --color-unset: #474747;
--color-unset-over: #FFFFFF; --color-unset-over: #FFFFFF;
@ -63,6 +64,7 @@
--color-body-over: #1E1E1E; --color-body-over: #1E1E1E;
--color-link: #006666; --color-link: #006666;
--color-link-over: #FFFFFF;
} }
} }
@ -70,6 +72,10 @@
box-sizing: border-box; box-sizing: border-box;
} }
*[title] {
cursor: help;
}
body { body {
margin: 0; margin: 0;
@ -132,10 +138,13 @@ h1, h2, h3, h4, h5, h6 {
margin-left: 12px; margin-left: 12px;
} }
a { a, .sortable, .sortable * {
color: var(--color-link); color: var(--color-link);
text-decoration: 1px solid var(--color-link) underline; text-decoration: 1px solid var(--color-link) underline;
--color-current: var(--color-link);
--color-current-over: var(--color-link-over);
cursor: pointer;
} }
/* Kind of an hack but ok */ /* Kind of an hack but ok */
@ -144,10 +153,6 @@ a[href] i[class^="fa-"]::before {
vertical-align: text-top; vertical-align: text-top;
} }
*[title] {
cursor: help;
}
abbr[title] i[class^="fa-"]::before { abbr[title] i[class^="fa-"]::before {
text-decoration: 1px dotted currentColor underline; text-decoration: 1px dotted currentColor underline;
vertical-align: text-top; vertical-align: text-top;
@ -278,7 +283,11 @@ td, th {
} }
thead th { thead th {
border-bottom: 2px solid var(--color-current); background-color: color-mix(in srgb, var(--color-current) 5%, transparent);
}
thead th.sortable:hover {
background-color: color-mix(in srgb, var(--color-current) 10%, transparent);
} }
tbody th { tbody th {
@ -286,11 +295,40 @@ tbody th {
font-weight: 700; font-weight: 700;
} }
td.review-rating, td.game-progress { td.review-rating {
border-bottom: 0; border-bottom: 0;
font-family: var(--font-title), serif; font-family: var(--font-title), serif;
font-weight: 700; font-weight: 700;
width: 38px;
min-width: 38px;
height: 38px;
min-height: 38px;
text-align: center;
}
td.game-progress {
font-family: var(--font-title), serif;
font-weight: 700;
width: 38px;
min-width: 38px;
height: 38px;
min-height: 38px;
text-align: center;
}
td.game-progress div {
width: 25px;
height: 25px;
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
} }
td.rating-unset { td.rating-unset {
@ -318,56 +356,48 @@ td.rating-perfect {
color: var(--color-perfect-over); color: var(--color-perfect-over);
} }
td.progress-unset, .reviewinfo-metadata-content.game-progress.progress-unset .reviewinfo-metadata-icon { td.progress-unset div, .reviewinfo-metadata-content.game-progress.progress-unset .reviewinfo-metadata-icon {
background-image: var(--image-unset); background-image: var(--image-unset);
background-color: var(--color-unset); background-color: var(--color-unset);
color: var(--color-unset-over); color: var(--color-unset-over);
} }
td.progress-new, .reviewinfo-metadata-content.game-progress.progress-new .reviewinfo-metadata-icon { td.progress-new div, .reviewinfo-metadata-content.game-progress.progress-new .reviewinfo-metadata-icon {
background-image: var(--image-new); background-image: var(--image-new);
background-color: var(--color-new); background-color: var(--color-new);
color: var(--color-new-over); color: var(--color-new-over);
} }
td.progress-started, .reviewinfo-metadata-content.game-progress.progress-started .reviewinfo-metadata-icon { td.progress-started div, .reviewinfo-metadata-content.game-progress.progress-started .reviewinfo-metadata-icon {
background-image: var(--gradient-started); background-image: var(--gradient-started);
background-color: var(--color-started); background-color: var(--color-started);
color: var(--color-started-over); color: var(--color-started-over);
} }
td.progress-beaten, .reviewinfo-metadata-content.game-progress.progress-beaten .reviewinfo-metadata-icon { td.progress-beaten div, .reviewinfo-metadata-content.game-progress.progress-beaten .reviewinfo-metadata-icon {
background-image: var(--gradient-beaten); background-image: var(--gradient-beaten);
background-color: var(--color-beaten); background-color: var(--color-beaten);
color: var(--color-beaten-over); color: var(--color-beaten-over);
} }
td.progress-completed, .reviewinfo-metadata-content.game-progress.progress-completed .reviewinfo-metadata-icon { td.progress-completed div, .reviewinfo-metadata-content.game-progress.progress-completed .reviewinfo-metadata-icon {
background-image: var(--gradient-completed); background-image: var(--gradient-completed);
background-color: var(--color-completed); background-color: var(--color-completed);
color: var(--color-completed-over); color: var(--color-completed-over);
} }
td.progress-mastered, .reviewinfo-metadata-content.game-progress.progress-mastered .reviewinfo-metadata-icon { td.progress-mastered div, .reviewinfo-metadata-content.game-progress.progress-mastered .reviewinfo-metadata-icon {
background-image: var(--gradient-mastered); background-image: var(--gradient-mastered);
background-color: var(--color-mastered); background-color: var(--color-mastered);
color: var(--color-mastered-over); color: var(--color-mastered-over);
} }
td.progress-notapplicable, .reviewinfo-metadata-content.game-progress.progress-notapplicable .reviewinfo-metadata-icon { td.progress-notapplicable div, .reviewinfo-metadata-content.game-progress.progress-notapplicable .reviewinfo-metadata-icon {
background-image: var(--gradient-notapplicable); background-image: var(--gradient-notapplicable);
background-color: var(--color-notapplicable); background-color: var(--color-notapplicable);
color: var(--color-notapplicable-over); color: var(--color-notapplicable-over);
} }
td.review-rating, td.game-progress {
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
text-align: center;
}
td.review-date { td.review-date {
font-family: var(--font-mono), monospace; font-family: var(--font-mono), monospace;
text-align: center; text-align: center;
@ -476,7 +506,7 @@ td.review-hascontent {
.reviewinfo-metadata { .reviewinfo-metadata {
grid-area: metadata; grid-area: metadata;
padding: var(--size-bar); padding: 12px;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
@ -490,7 +520,7 @@ td.review-hascontent {
display: flex; display: flex;
align-items: center; align-items: center;
height: 32px; height: 25px;
} }
.reviewinfo-metadata-label { .reviewinfo-metadata-label {
@ -515,10 +545,10 @@ td.review-hascontent {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 32px; height: 25px;
width: 32px; width: 25px;
border-radius: 100%; border-radius: 30%;
background-color: color-mix(in srgb, var(--color-current) 20%, transparent); background-color: color-mix(in srgb, var(--color-current) 20%, transparent);
} }