.
This commit is contained in:
Ross
@@ -1,6 +1,6 @@
|
||||
<article class="card-item" id="card-{{ card.pk }}">
|
||||
<div class="toptrump-card">
|
||||
<div class="hero-image" style="background-image: url('{% if background and background.image %}{{ background.image.url }}{% endif %}');">
|
||||
<div class="hero-image" style="background-image: url('{% if card.background and card.background.image %}{{ card.background.image.url }}{% elif background and background.image %}{{ background.image.url }}{% endif %}');">
|
||||
{% if card.image %}
|
||||
<img src="{{ card.image.url }}" alt="{{ card.name }}" style="display:block;margin:16px auto 0; max-width:72%; height:auto; object-fit:cover; box-shadow:0 4px 12px rgba(0,0,0,0.3); border-radius:6px;">
|
||||
{% endif %}
|
||||
@@ -16,9 +16,49 @@
|
||||
</ul>
|
||||
{% endif %}
|
||||
<div style="margin-top:0.5rem">
|
||||
<div class="stat-row"><div class="stat-label">Speed</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.speed }}%"></div></div></div>
|
||||
<div class="stat-row"><div class="stat-label">Weight</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.weight }}%"></div></div></div>
|
||||
<div class="stat-row"><div class="stat-label">Intelligence</div><div class="stat-bar"><div class="stat-fill" style="width:{{ card.intelligence }}%"></div></div></div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-label">Speed <small class="is-size-7">(km/h)</small></div>
|
||||
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.speed_percent }}%"></div></div>
|
||||
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
||||
<div>{{ card.speed_display }}</div>
|
||||
<div class="is-size-7" style="font-weight:500">
|
||||
{% for t in card.speed_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
||||
<span style="margin-left:6px">(orig: {{ card.speed_orig }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-label">Weight <small class="is-size-7">(kg)</small></div>
|
||||
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.weight_percent }}%"></div></div>
|
||||
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
||||
<div>{{ card.weight_display }}</div>
|
||||
<div class="is-size-7" style="font-weight:500">
|
||||
{% for t in card.weight_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
||||
<span style="margin-left:6px">(orig: {{ card.weight_orig }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-label">Height <small class="is-size-7">(m)</small></div>
|
||||
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.height_percent }}%"></div></div>
|
||||
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
||||
<div>{{ card.height_display }}</div>
|
||||
<div class="is-size-7" style="font-weight:500">
|
||||
{% for t in card.height_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
||||
<span style="margin-left:6px">(orig: {{ card.height_orig }})</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-label">Intelligence <small class="is-size-7">(score)</small></div>
|
||||
<div class="stat-bar"><div class="stat-fill" style="width:{{ card.intelligence_percent }}%"></div></div>
|
||||
<div class="stat-value" style="margin-left:8px;font-weight:600">
|
||||
<div class="is-size-7" style="font-weight:600">
|
||||
{% for t in card.intelligence_star_types %}<span class="star {{ t }}">{% if t == 'full' %}★{% else %}☆{% endif %}</span>{% endfor %}
|
||||
</div>
|
||||
<div class="is-size-7" style="font-weight:500">(orig: {{ card.intelligence_orig }})</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons" style="margin-top:0.6rem">
|
||||
<button class="button is-small is-info" hx-get="{% url 'cards:edit' card.pk %}" hx-target="#htmx-form" hx-swap="innerHTML">Edit</button>
|
||||
|
||||
@@ -86,19 +86,47 @@
|
||||
<div class="field-body">
|
||||
<div class="field">
|
||||
<label class="label">{{ form.speed.label }}</label>
|
||||
<div class="control">{{ form.speed }}</div>
|
||||
<div class="control">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">{{ form.speed }}</div>
|
||||
<div class="control">
|
||||
<a class="button is-static">km/h</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ form.weight.label }}</label>
|
||||
<div class="control">{{ form.weight }}</div>
|
||||
<div class="control">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">{{ form.weight }}</div>
|
||||
<div class="control">
|
||||
<a class="button is-static">kg</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ form.intelligence.label }}</label>
|
||||
<div class="control">{{ form.intelligence }}</div>
|
||||
<div class="control">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">{{ form.intelligence }}</div>
|
||||
<div class="control">
|
||||
<a class="button is-static">score</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="label">{{ form.height.label }}</label>
|
||||
<div class="control">{{ form.height }}</div>
|
||||
<div class="control">
|
||||
<div class="field has-addons">
|
||||
<div class="control is-expanded">{{ form.height }}</div>
|
||||
<div class="control">
|
||||
<a class="button is-static">m</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,6 +41,13 @@
|
||||
.toptrump-card .stat-bar{flex:1;height:12px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:hidden}
|
||||
.toptrump-card .stat-fill{height:100%;background:linear-gradient(90deg,var(--accent),#ffdd57);}
|
||||
.toptrump-card .fact-list{margin-top:0.5rem;padding-left:1rem}
|
||||
/* Star rating visuals */
|
||||
.star { font-size:0.95rem; display:inline-block; line-height:1; margin-left:2px; }
|
||||
.star.full { color:#ffdd57; }
|
||||
.star.empty { color:rgba(255,255,255,0.25); }
|
||||
.star.half { color:rgba(255,255,255,0.25); position:relative; display:inline-block; }
|
||||
.star.half::before { content: '★'; color:#ffdd57; position:absolute; left:0; top:0; width:50%; overflow:hidden; display:inline-block; }
|
||||
.stat-value { text-align:right; min-width:6.5rem }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user