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 @@
+
+
@@ -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",