cal/paper-dynasty-database
1
0
Fork 0
Code Issues 10 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

fix: improve diamond tier indicator visibility

Browse Source 
- Add silver backing div behind diamond so the X gap lines pop
- Darken unfilled quads for better contrast with filled tier color
- Make diamond grid background transparent (backing shows through gaps)

NOTE: These are volume-mounted template files, NOT baked into the
Docker image. After merging, manually deploy to each server:

  scp storage/templates/tier_style.html <host>:<container-data>/storage/templates/
  scp storage/templates/player_card.html <host>:<container-data>/storage/templates/

Hosts:
  Dev:  ssh pd-database → /home/cal/container-data/dev-pd-database/
  Prod: ssh akamai → /root/container-data/paper-dynasty/

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Cal Corum 2026-04-07 08:40:56 -05:00
parent 35fbe2082d
commit abbcd75382
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
storage/templates/player_card.html
View File

@ -15,6 +15,7 @@
} -%}
{%- set dc = diamond_colors[refractor_tier] -%}
{%- set filled_bg = 'linear-gradient(135deg, ' ~ dc.highlight ~ ' 0%, ' ~ dc.color ~ ' 50%, ' ~ dc.color ~ ' 100%)' -%}
<div class="tier-diamond-backing"></div>
<div class="tier-diamond{% if refractor_tier == 4 %} diamond-glow{% endif %}">
<div class="diamond-quad{% if refractor_tier >= 2 %} filled{% endif %}" {% if refractor_tier >= 2 %}style="background: {{ filled_bg }};"{% endif %}></div>
<div class="diamond-quad{% if refractor_tier >= 1 %} filled{% endif %}" {% if refractor_tier >= 1 %}style="background: {{ filled_bg }};"{% endif %}></div>

17
storage/templates/tier_style.html
View File

@ -6,6 +6,19 @@
</style>
{% if refractor_tier is defined and refractor_tier > 0 %}
<style>
.tier-diamond-backing {
position: absolute;
left: 597px;
top: 78.5px;
width: 44px;
height: 44px;
transform: translate(-50%, -50%) rotate(45deg);
background: rgba(200,210,220,0.9);
border-radius: 2px;
z-index: 19;
pointer-events: none;
}
.tier-diamond {
position: absolute;
left: 597px;
@ -16,7 +29,7 @@
gap: 2px;
z-index: 20;
pointer-events: none;
background: rgba(0,0,0,0.75);
background: transparent;
border-radius: 2px;
box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 2px 5px rgba(0,0,0,0.5);
}
@ -24,7 +37,7 @@
.diamond-quad {
width: 19px;
height: 19px;
background: rgba(0,0,0,0.3);
background: rgba(0,0,0,0.55);
}
.diamond-quad.filled {