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

feat(character/talents): made responsive, style adjustments

Browse source
This commit is contained in:
Axel Cocat 2022-02-26 16:56:46 +01:00
parent bba163aa51
commit 61a500e09b
4 changed files with 29 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{ {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.6.2", "version": "0.6.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.6.2", "version": "0.6.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@supercharge/promise-pool": "^2.1.0", "@supercharge/promise-pool": "^2.1.0",

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "azerothcore-armory", "name": "azerothcore-armory",
"version": "0.6.2", "version": "0.6.3",
"description": "", "description": "",
"scripts": { "scripts": {
"build": "tsc -p tsconfig.json", "build": "tsc -p tsconfig.json",

40
static/character-talents.html
View file

@ -14,11 +14,11 @@
<a target="_blank"></a> <a target="_blank"></a>
</div> </div>
<div id="talent-tree-template" class="talent-tree"> <div id="talent-tree-template" class="talent-tree column is-full-touch is-one-quarter-desktop">
<div class="header"> <div class="header">
<img class="icon"> <img class="image">
<span class="name"></span> <span class="name is-size-4"></span>
<span class="points"></span> <span class="points is-size-5"></span>
</div> </div>
<div class="cols"> <div class="cols">
<div class="col"></div> <div class="col"></div>
@ -28,21 +28,21 @@
</div> </div>
</div> </div>
<div id="spec-links"> <div id="spec-links" class="is-size-4">
<a href="#0" id="link-spec-0">Primary specialization</a> <a href="#0" id="link-spec-0" class="is-block-touch">Primary specialization</a>
&ensp;|&ensp; <span class="is-hidden-touch">&ensp;|&ensp;</span>
<a href="#1" id="link-spec-1">Secondary specialization</a> <a href="#1" id="link-spec-1" class="is-block-touch">Secondary specialization</a>
</div> </div>
<div id="talents-spec-0"> <div id="talents-spec-0" class="columns is-multiline has-text-centered">
<div> <div class="column is-one-quarter-desktop">
<h3>Glyphs</h3> <span class="is-size-4">Glyphs</span>
<div class="glyphs"></div> <div class="glyphs"></div>
</div> </div>
</div> </div>
<div id="talents-spec-1" style="display: none;"> <div id="talents-spec-1" class="columns is-multiline has-text-centered hidden">
<div> <div class="column is-one-quarter-desktop">
<h3>Glyphs</h3> <span class="is-size-4">Glyphs</span>
<div class="glyphs"></div> <div class="glyphs"></div>
</div> </div>
</div> </div>
@ -81,14 +81,14 @@
.clone(false) .clone(false)
.removeAttr("id") .removeAttr("id")
.appendTo($spec); .appendTo($spec);
$tree.find(".header .icon").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`); $tree.find(".header .image").attr("src", `{{aowow}}/static/images/wow/icons/medium/${tree.icon}.jpg`);
$tree.find(".header .name").text(tree.name); $tree.find(".header .name").text(tree.name);
createTree(tree, learned, $tree[0]); createTree(tree, learned, $tree[0]);
} }
if (nbLearned === 0 && spec !== 0) { if (nbLearned === 0 && spec !== 0) {
$spec.hide(); $spec.addClass("hidden");
$("#spec-links").hide(); $("#spec-links").hide();
continue; continue;
} }
@ -220,13 +220,13 @@
} }
$("#link-spec-0").on("click", () => { $("#link-spec-0").on("click", () => {
$("#talents-spec-0").show(); $("#talents-spec-0").removeClass("hidden");
$("#talents-spec-1").hide(); $("#talents-spec-1").addClass("hidden");
}); });
$("#link-spec-1").on("click", () => { $("#link-spec-1").on("click", () => {
$("#talents-spec-1").show(); $("#talents-spec-1").removeClass("hidden");
$("#talents-spec-0").hide(); $("#talents-spec-0").addClass("hidden");
}); });
if (location.hash === "#1") { if (location.hash === "#1") {

10
static/css/character-talents.css
View file

@ -65,10 +65,9 @@
border: 1px solid #ffcf00; border: 1px solid #ffcf00;
} }
#talents-spec-0, #talents-spec-0.hidden,
#talents-spec-1 { #talents-spec-1.hidden {
display: flex; display: none;
column-gap: 50px;
} }
.talent-tree .header { .talent-tree .header {
@ -77,10 +76,13 @@
align-items: center; align-items: center;
column-gap: 10px; column-gap: 10px;
margin-bottom: 16px; margin-bottom: 16px;
display: flex;
align-items: center;
} }
.talent-tree .cols { .talent-tree .cols {
display: flex; display: flex;
justify-content: center;
gap: 14px; gap: 14px;
} }