From e5fc1dd0e1fa3c55d027b39dcc41394747e4ea03 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <xdrm.brackets.dev@gmail.com>
Date: Wed, 19 Oct 2022 18:00:22 +0200
Subject: [PATCH] feat: create the skill picker guide

---
 src/components/SkillPicker.vue | 46 +++++++++++++++++++++++++++++++---
 src/locales/en.json            |  1 +
 src/locales/fr.json            |  1 +
 3 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/SkillPicker.vue b/src/components/SkillPicker.vue
index e89860e..1b293a7 100644
--- a/src/components/SkillPicker.vue
+++ b/src/components/SkillPicker.vue
@@ -36,6 +36,10 @@
 					<p v-html='details.text[$i18n.locale]'></p>
 				</section>
 
+				<section class='guide' v-else>
+					<p v-html='$t("skills.guide")'></p>
+				</section>
+
 			</div>
 
 			<input type='button' v-show='this.sel != null' :value="$t('skills.browse')" @click='browse()'/>
@@ -83,10 +87,10 @@ export default class SkillPicker extends Vue {
 	// available categories (tags)
 	private tags: tTag[] = [DEFAULT_TAG, ...skills.tags()];
 	// currently selected tag
-	private tag: tTag = tTag.Web;
+	private tag: tTag = DEFAULT_TAG;
 
 	// details section when a skill is selected
-	private details: Details|null = null;
+	protected details: Details|null = null;
 
 	// selects or deselects a skill. If the skill is not in the current
 	// folder, it navigates to the DEFAULT_TAG folder beforehand. Scrolls to
@@ -132,11 +136,11 @@ export default class SkillPicker extends Vue {
 		go(`search-header`, 0);
 	}
 
-	private mounted() {
+	protected mounted() {
 		this.filterByTag();
 	}
 
-	private scroll(proj_name: string) {
+	protected scroll(proj_name: string) {
 		const head = document.querySelector(`#search-header`) as HTMLElement;
 		if ( head == null ) {
 			return;
@@ -350,6 +354,40 @@ export default class SkillPicker extends Vue {
 
 	}
 
+
+	.guide {
+		flex: auto;
+
+		display: flex;
+			height: 100%;
+
+		margin: auto;
+
+		flex-flow: column nowrap;
+		align-items: center;
+		justify-content: center;
+
+		p {
+			flex: auto 0 1;
+
+			display: block;
+			position: relative;
+			margin: 0 3em;
+			margin-top: 2em;
+			margin-bottom: 4rem;
+
+			font-size: 1.8em;
+			font-weight: 500;
+			text-align: justify;
+			color: #667;
+			padding: 1em;
+
+			overflow: hidden;
+
+			user-select: none;
+		}
+	}
+
 	input {
 		display: block;
 		position: absolute;
diff --git a/src/locales/en.json b/src/locales/en.json
index d5bbd2d..d660651 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -19,6 +19,7 @@
 	"skills.featured-after-n": "projects",
 	"skills.browse":           "Browse projects",
 	"skills.browse-all":       "Browse all projects",
+	"skills.guide":            "You can select a skill to browse related projects. You can browse all projects by not selecting or deselecting the active skill.",
 
 	"tag.all": "All",
 	"tag.web": "Web",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 5cff8ad..d1c0f90 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -19,6 +19,7 @@
 	"skills.featured-after-n": "projets",
 	"skills.browse":           "Parcourir les projets",
 	"skills.browse-all":       "Parcourir tous les projets",
+	"skills.guide":            "Vous pouvez sélectionner une compétence afin de parcourir les projets liés. Vous pouvez aussi parcourir tous les projets en ne sélectionnant pas de compétence.",
 
 	"tag.all": "Tout",
 	"tag.web": "Web",