starshard/peafowl
starshard/peafowl
Template
1
Fork 0
mirror of https://github.com/starshardstudio/peafowl.git synced 2024-11-23 21:44:20 +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

4
_components/GameRow.tsx
View file

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

2
_static/scripting/sort.js
View file

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

86
_static/styles/base.css
View file

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