add better graphics for skills page
This commit is contained in:
smthbh
parent
ebf57b42a3
commit
624163748e
3 changed files with 247 additions and 16 deletions
|
|
@ -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> {{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> {{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> {{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> {{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> {{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> {{this.value}}/{{this.max}}</span>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
|
|
|||
120
static/css/character-skills.css
Normal file
120
static/css/character-skills.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
#talent-template,
|
||||
#talent-tree-template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon-border {
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.empty .icon {
|
||||
filter: grayscale(100%);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.iconmedium.notfull .icon-border {
|
||||
background-position: -84px 0px;
|
||||
}
|
||||
|
||||
.iconmedium.full .icon-border {
|
||||
background-position: -42px 0px;
|
||||
}
|
||||
|
||||
.iconmedium .icon-border {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
position: absolute;
|
||||
left: 1px;
|
||||
top: 1px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.iconmedium a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium::after {
|
||||
content: attr(rank);
|
||||
background-color: black;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
font-size: 14px;
|
||||
padding: 0px 2px;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.iconmedium.empty::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.iconmedium.full::after,
|
||||
.iconmedium.notfull::after {
|
||||
border-radius: 4px;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.iconmedium.notfull::after {
|
||||
color: #30ec30;
|
||||
border: 1px solid #30ec30;
|
||||
}
|
||||
|
||||
.iconmedium.full::after {
|
||||
color: #ffcf00;
|
||||
border: 1px solid #ffcf00;
|
||||
}
|
||||
|
||||
.skills-table {
|
||||
width: 33%; /* Ensures all tables take up the full width of the container */
|
||||
}
|
||||
|
||||
.skills-table table {
|
||||
width: 100%; /* Ensures all tables inside .skills-table are the same width */
|
||||
table-layout: fixed; /* Ensures consistent column widths */
|
||||
}
|
||||
|
||||
.skills-table th,
|
||||
.skills-table td {
|
||||
width: 33.33%;
|
||||
}
|
||||
|
||||
.progress-bar-container {
|
||||
width: 100%;
|
||||
background-color: #020018;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
height: 20px;
|
||||
position: relative; /* Enables positioning of child elements */
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background-color: #000852;
|
||||
position: absolute; /* Allows the bar to stay behind the text */
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
z-index: 1; /* Ensures the bar is behind the text */
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute; /* Positions the text over the bar */
|
||||
top: 50%; /* Centers the text vertically */
|
||||
left: 10px; /* Aligns the text to the left with some padding */
|
||||
transform: translateY(-50%); /* Vertically centers the text */
|
||||
z-index: 2; /* Ensures the text is above the bar */
|
||||
color: white; /* Makes the text visible on the bar */
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
white-space: nowrap; /* Prevents text from wrapping */
|
||||
}
|
||||
|
||||
#spec-links {
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
.gold-text {
|
||||
color: #FFD700; /* Gold color */
|
||||
font-weight: bold; /* Optional: Make the text bold */
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue