yrtria/azerothcore-armory
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Activity Actions

add better graphics for skills page

Browse source
This commit is contained in:
smthbh 2025-04-17 17:59:03 -04:00
parent ebf57b42a3
commit 624163748e
3 changed files with 247 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

123
static/character-skills.hbs
View file

@ -1,4 +1,4 @@
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-talents.css">
<link rel="stylesheet" type="text/css" href="{{websiteRoot}}/css/character-skills.css">
{{> icons }}
<script type="application/javascript">
const aowow_tooltips = { "renamelinks": true, };
@ -6,24 +6,121 @@
{{> character-header }}
<div class="skills-table">
<h2 class="is-size-4">Character Skills</h2>
<table class="table is-striped is-hoverable is-fullwidth">
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Professions</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<thead>
<tr>
{{!-- <th>Skill ID</th> --}}
<th>Skill Name</th>
<th>Skill Value</th>
<th>Max Value</th>
<th>Name</th>
{{!-- <th>Level</th> --}}
{{!-- <th>Max</th> --}}
</tr>
</thead>
<tbody>
{{#each data.skills}}
{{#each data.professions}}
<tr>
{{!-- <td>{{this.id}}</td> --}}
<td>{{this.skill}}</td>
<td>{{this.value}}</td>
<td>{{this.max}}</td>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Secondary Skills</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<tbody>
{{#each data.secondarySkills}}
<tr>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Weapon Skills</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<tbody>
{{#each data.weaponSkills}}
<tr>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Class Skills</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<tbody>
{{#each data.classSkills}}
<tr>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Armor Proficiencies</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<tbody>
{{#each data.armorSkills}}
<tr>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
<div class="skills-table" style="margin-bottom: 20px;">
<h2 class="is-size-4">Languages</h2>
<table class="table is-striped is-hoverable is-quarter-desktop">
<tbody>
{{#each data.languages}}
<tr>
<!-- Skill ID: {{this.id}} -->
<td>
<div class="progress-bar-container">
<div class="progress-bar" style="width: {{multiply (divide this.value this.max) 100}}%;"></div>
<span class="progress-text"><span class="gold-text">{{this.skill}}</span>&nbsp;&nbsp;&nbsp;&nbsp;{{this.value}}/{{this.max}}</span>
</div>
</td>
</tr>
{{/each}}
</tbody>