Skip to content

Commit 2a2963f

Browse files
dewitadewita
committed
feat(tutorial): add all sections for tutorial (with content)
1 parent 69ed3e1 commit 2a2963f

File tree

10 files changed

+826
-129
lines changed

10 files changed

+826
-129
lines changed

‎layouts/tuto.vue‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,27 @@
4848
import PanelItem from "~/components/Panel/PanelItem.vue";
4949
import Icon from "~/components/Symbols/Icon.vue";
5050
51+
const formatNameOfPage = function (name: string) {
52+
switch (name) {
53+
case "tutoriel-bibliotheque":
54+
return 'Bibliothèque';
55+
case "tutoriel-comptes-et-utilisateurs":
56+
return 'Comptes et utilisateurs';
57+
case "tutoriel-ressources-informatiques":
58+
return 'Ressources informatiques';
59+
case "tutoriel-favoris":
60+
return 'Favoris';
61+
case "tutoriel-introduction":
62+
return 'Introduction';
63+
case "tutoriel-editeur-de-texte":
64+
return 'Editeur de texte';
65+
case "tutoriel-mes-exercices":
66+
return 'Mes exercices';
67+
case "tutoriel-administration":
68+
return 'Administration';
69+
}
70+
};
71+
5172
@Component({
5273
components: {
5374
Icon,
@@ -62,40 +83,17 @@
6283
6384
get tutorialNameFormatted() {
6485
const name = this.$route.name;
65-
66-
switch (name) {
67-
case "tutoriel-bibliotheque":
68-
return 'Bibliothèque';
69-
case "tutoriel-comptes-et-utilisateurs":
70-
return 'Comptes et utilisateurs';
71-
case "tutoriel-panneau-a-onglets":
72-
return 'Panneau à onglets';
73-
case "tutoriel-favoris":
74-
return 'Favoris';
75-
case "tutoriel-introduction":
76-
return 'Introduction';
77-
}
86+
if (name) return formatNameOfPage(name);
7887
7988
return this.$route.name
8089
}
8190
8291
tutorialLink(pageName: string) {
83-
switch (pageName) {
84-
case "bibliotheque":
85-
return 'Bibliothèque';
86-
case "panneau-a-onglets":
87-
return 'Panneau à onglets';
88-
case "favoris":
89-
return 'Favoris';
90-
case "comptes-et-utilisateurs":
91-
return 'Comptes et utilisateurs';
92-
case "introduction":
93-
return 'Introduction';
94-
}
92+
return formatNameOfPage('tutoriel-' + pageName);
9593
}
9694
9795
created() {
98-
this.pageNames = ["introduction", "comptes-et-utilisateurs", "bibliotheque", "panneau-a-onglets", "favoris"];
96+
this.pageNames = ["introduction", "comptes-et-utilisateurs", "bibliotheque", "ressources-informatiques", "favoris", "mes-exercices", "editeur-de-texte", "administration"];
9997
}
10098
}
10199
</script>
@@ -117,21 +115,21 @@
117115
margin-bottom: 5px;
118116
}
119117
120-
h2 {
121-
margin-bottom: 10px;
122-
margin-top: 30px;
123118
124-
~ h3 {
125-
margin-top:20px;
126-
}
127-
}
128-
129-
h3 {
130-
font-size: 1em;
131-
}
132119
133120
> .exercise-article {
134121
font-size: .875em;
122+
p, blockquote {
123+
max-width: 1000px;
124+
}
125+
126+
ul.list--with-img {
127+
li img, li svg {
128+
width: 25px;
129+
margin: 0 5px 0 0;
130+
vertical-align: middle;
131+
}
132+
}
135133
136134
ol {
137135
> li {
@@ -147,10 +145,20 @@
147145
ul {
148146
max-width: 700px;
149147
}
148+
150149
> ul > li {
151150
margin-bottom: 10px;
152151
}
153152
153+
.img-wrapper {
154+
display: flex;
155+
156+
.content {
157+
max-width: 400px;
158+
margin-left: 20px;
159+
}
160+
}
161+
154162
img.extra-large {
155163
max-width: 1000px;
156164
width: 100%;
@@ -170,6 +178,11 @@
170178
max-width: 250px;
171179
width: 100%;
172180
}
181+
182+
img.extra-small {
183+
max-width: 125px;
184+
width: 100%;
185+
}
173186
}
174187
175188
}

‎pages/tutoriel/administration.vue‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,178 @@
1+
<template>
2+
<section>
3+
<h1>Administration</h1>
4+
<div class="exercise-article">
5+
<p>
6+
<b>Source Code</b> ne serait rien sans son équipe d'administrateurs garantissant la maintenance de
7+
contenus qualitatifs. Dans cette section nous allons aborder les différentes interfaces qu'un administrateur
8+
pourra utiliser.
9+
</p>
10+
11+
12+
<h2 class="title--secondary-color">Table des matières</h2>
13+
14+
<ol>
15+
<li><nuxt-link to="#Tutorial_exercises">Gestion des exercices</nuxt-link></li>
16+
<li><nuxt-link to="#Tutorial_tags">Gestion des tags</nuxt-link></li>
17+
<li><nuxt-link to="#Tutorial_categories">Gestion des catégories</nuxt-link></li>
18+
</ol>
19+
20+
<h2 class="title--secondary-color" id="Tutorial_exercises">Gestion des exercices</h2>
21+
22+
<p>
23+
<b>La gestion d'exercices</b> fonctionne exactement comme la gestion de ses propres exercices. Reportez-vous donc à la
24+
section <nuxt-link to="mes-exercices">mes exercices</nuxt-link> !
25+
</p>
26+
27+
<img src="/img/tutorial/admin-exercises.png" class="extra-large" alt="">
28+
29+
30+
<p>
31+
En tant qu'administrateur, vous possédez néanmoins des foncionnalités additionnelles.
32+
Laissez-nous vous les introduire.
33+
</p>
34+
35+
<h3 class="title--ternary-color">Export des résultats de recherche</h3>
36+
37+
<p>
38+
Lorsque vous filtrez les ressources informatiques par tags et/ou par titre de recherche, vous pouvez exporter
39+
tous les résultats correspondant à votre filtrage dans un fichier <i>JSON</i>.
40+
</p>
41+
42+
<div class="img-wrapper">
43+
<img src="/img/tutorial/export.png" class="small" alt="">
44+
45+
<div class="content">
46+
<p>
47+
Vous pouvez exporter les résultats de recherche en cliquant sur "exporter les résultats".
48+
</p>
49+
</div>
50+
</div>
51+
52+
<h3 class="title--ternary-color">Actions supplémentaires dans "plus d'actions"</h3>
53+
54+
<p>
55+
Par rapport un à utilisateur classique, vous pouvez changer l'état d'une ressource informatique comme bon
56+
vous semble (valide, non valide, en attente, archive, brouillon).
57+
</p>
58+
59+
<p>
60+
Vous pouvez aussi exporter sous format JSON toutes les ressources cochées.
61+
</p>
62+
63+
<h3 class="title--ternary-color">Champ supplémentaire dans le tableau des ressources</h3>
64+
65+
<ul>
66+
<li>
67+
<b>Créateur</b> : le créateur de le la ressource informatique.
68+
</li>
69+
</ul>
70+
71+
<h2 class="title--secondary-color" id="Tutorial_tags">Gestion des tags</h2>
72+
73+
<p>
74+
Vous pouvez créer, modifier ou valider des tags depuis l'interface de gestion
75+
<nuxt-link to="/administration/tags" class="external-link">tags</nuxt-link>
76+
</p>
77+
78+
<p>Utilisez le panneau latéral pour filtrer les tags par catégories ou par status. Vous pouvez aussi rechercher
79+
des tags en utilisant le champ de recherche.</p>
80+
81+
<p>Plusieurs informations sont disponibles pour identifier les tags :</p>
82+
83+
<ul>
84+
<li>
85+
Le <b>nom</b> du tag.
86+
</li>
87+
<li>
88+
La <b>catégorie</b> à laquelle il appartient.
89+
</li>
90+
<li>
91+
Le nombre de ressources informatiques utilisant ce tag (<b>exercices tagués</b>).
92+
</li>
93+
<li>
94+
Le nombre de fois que le tag a subit une modification (<b>version</b>).
95+
</li>
96+
<li>
97+
Le <b>status</b> du tag.
98+
</li>
99+
</ul>
100+
101+
<img src="/img/tutorial/admin-tags.png" class="extra-large" alt="">
102+
103+
<h3 class="title--ternary-color">Status des tags</h3>
104+
105+
<ul class="list--with-img">
106+
<li>
107+
<Icon type="send" theme="theme--yellow"/>
108+
En attente de validation
109+
<ul>
110+
<li>
111+
Le tag est mis en attente pour révision.
112+
Un administrateur se chargera de le valider ultérieurement.
113+
</li>
114+
</ul>
115+
</li>
116+
<li>
117+
<Icon type="check" theme="theme--green"/>
118+
Valide
119+
<ul>
120+
<li>
121+
Lorsque le tag est accepté par l'administration, le tag est alors validé et disponible
122+
publiquement dans la <nuxt-link to="bibliotheque">bibliothèque</nuxt-link>.
123+
</li>
124+
</ul>
125+
</li>
126+
<li>
127+
<Icon type="close" theme="theme--red-light"/>
128+
Invalide
129+
<ul>
130+
<li>
131+
Lorsque le tag n'est pas considérée comme valide (faute de frappe, doublons,
132+
incohérences), l'administrateur se réserve le droit d'invalider le tag. Il pourra néanmoins être
133+
modifié (par un admin) pour le revalider plus tard.
134+
</li>
135+
</ul>
136+
</li>
137+
<li>
138+
<Icon type="archive" theme="theme--red-light"/>
139+
Obsolète
140+
<ul>
141+
<li>
142+
Quand un tag n'est plus d'utilité ou est remplacé par un autre.
143+
</li>
144+
</ul>
145+
</li>
146+
</ul>
147+
148+
<h3 class="title--ternary-color">Création/modification de tags</h3>
149+
150+
<p>La création de tag implique un <b>nom</b> et une <b>catégorie</b> à laquelle il appartient.</p>
151+
152+
<img src="/img/tutorial/admin-tag-form.png" class="extra-large" alt="">
153+
154+
155+
<h2 class="title--secondary-color" id="Tutorial_categories">Gestion des catégories</h2>
156+
157+
<p>
158+
La gestion des catégories se limite uniquement à la modification du titre ou la création d'une nouvelles
159+
catégorie. La suppression est réservée au super-administrateur.
160+
</p>
161+
162+
<img src="/img/tutorial/admin-category.png" class="extra-large" alt="">
163+
</div>
164+
</section>
165+
</template>
166+
167+
<script lang="ts">
168+
import {Component, Vue} from "vue-property-decorator";
169+
import Icon from "~/components/Symbols/Icon.vue";
170+
171+
172+
@Component({
173+
components: {Icon},
174+
layout: 'tuto'
175+
})
176+
export default class extends Vue {
177+
}
178+
</script>

0 commit comments

Comments
 (0)