From 61a500e09b148dad3c7d8dd3bc20338d3217b23c Mon Sep 17 00:00:00 2001
From: Axel Cocat <ax.cocat@gmail.com>
Date: Sat, 26 Feb 2022 16:56:46 +0100
Subject: [PATCH] feat(character/talents): made responsive, style adjustments

---
 package-lock.json                |  4 ++--
 package.json                     |  2 +-
 static/character-talents.html    | 40 ++++++++++++++++----------------
 static/css/character-talents.css | 10 ++++----
 4 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1b67b70..937775c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "azerothcore-armory",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "azerothcore-armory",
-			"version": "0.6.2",
+			"version": "0.6.3",
 			"license": "MIT",
 			"dependencies": {
 				"@supercharge/promise-pool": "^2.1.0",
diff --git a/package.json b/package.json
index 26e8a3d..1f60e1b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "azerothcore-armory",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"description": "",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/static/character-talents.html b/static/character-talents.html
index 219fbcc..49f6f55 100644
--- a/static/character-talents.html
+++ b/static/character-talents.html
@@ -14,11 +14,11 @@
 	<a target="_blank"></a>
 </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">
-		<img class="icon">
-		<span class="name"></span>
-		<span class="points"></span>
+		<img class="image">
+		<span class="name is-size-4"></span>
+		<span class="points is-size-5"></span>
 	</div>
 	<div class="cols">
 		<div class="col"></div>
@@ -28,21 +28,21 @@
 	</div>
 </div>
 
-<div id="spec-links">
-	<a href="#0" id="link-spec-0">Primary specialization</a>
-	&ensp;|&ensp;
-	<a href="#1" id="link-spec-1">Secondary specialization</a>
+<div id="spec-links" class="is-size-4">
+	<a href="#0" id="link-spec-0" class="is-block-touch">Primary specialization</a>
+	<span class="is-hidden-touch">&ensp;|&ensp;</span>
+	<a href="#1" id="link-spec-1" class="is-block-touch">Secondary specialization</a>
 </div>
 
-<div id="talents-spec-0">
-	<div>
-		<h3>Glyphs</h3>
+<div id="talents-spec-0" class="columns is-multiline has-text-centered">
+	<div class="column is-one-quarter-desktop">
+		<span class="is-size-4">Glyphs</span>
 		<div class="glyphs"></div>
 	</div>
 </div>
-<div id="talents-spec-1" style="display: none;">
-	<div>
-		<h3>Glyphs</h3>
+<div id="talents-spec-1" class="columns is-multiline has-text-centered hidden">
+	<div class="column is-one-quarter-desktop">
+		<span class="is-size-4">Glyphs</span>
 		<div class="glyphs"></div>
 	</div>
 </div>
@@ -81,14 +81,14 @@
 				.clone(false)
 				.removeAttr("id")
 				.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);
 
 			createTree(tree, learned, $tree[0]);
 		}
 
 		if (nbLearned === 0 && spec !== 0) {
-			$spec.hide();
+			$spec.addClass("hidden");
 			$("#spec-links").hide();
 			continue;
 		}
@@ -220,13 +220,13 @@
 	}
 
 	$("#link-spec-0").on("click", () => {
-		$("#talents-spec-0").show();
-		$("#talents-spec-1").hide();
+		$("#talents-spec-0").removeClass("hidden");
+		$("#talents-spec-1").addClass("hidden");
 	});
 
 	$("#link-spec-1").on("click", () => {
-		$("#talents-spec-1").show();
-		$("#talents-spec-0").hide();
+		$("#talents-spec-1").removeClass("hidden");
+		$("#talents-spec-0").addClass("hidden");
 	});
 
 	if (location.hash === "#1") {
diff --git a/static/css/character-talents.css b/static/css/character-talents.css
index 3dc532a..26ea7d5 100644
--- a/static/css/character-talents.css
+++ b/static/css/character-talents.css
@@ -65,10 +65,9 @@
 	border: 1px solid #ffcf00;
 }
 
-#talents-spec-0,
-#talents-spec-1 {
-	display: flex;
-	column-gap: 50px;
+#talents-spec-0.hidden,
+#talents-spec-1.hidden {
+	display: none;
 }
 
 .talent-tree .header {
@@ -77,10 +76,13 @@
 	align-items: center;
 	column-gap: 10px;
 	margin-bottom: 16px;
+	display: flex;
+	align-items: center;
 }
 
 .talent-tree .cols {
 	display: flex;
+	justify-content: center;
 	gap: 14px;
 }