feat: Improvements ux

assets/css/_editor.scss

@@ -14,7 +14,7 @@
     padding: 10px;
     display: flex;
     background-color: lighten($GREY, 64);
-
+    border-top: 1px solid lighten($GREY, 20);;
   }
 
   .menubar__button__wrapper {
@@ -60,13 +60,30 @@
 
   .editor__content {
     //margin-top: 30px;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    max-height: 500px;
 
     .ProseMirror {
       padding: 20px 20px;
       -webkit-appearance: none;
       -moz-appearance: none;
       appearance: none;
       outline: none;
+
+      pre {
+        position: relative;
+      }
+
+      pre:hover:after {
+        content: "ctrl + enter pour quitter le mode bloc de code";
+        font-style: italic;
+        font-weight: bold;
+        display: block;
+        position: absolute;
+        bottom: 0;
+      }
+
       > p:first-of-type {
         margin-top: 0;
       }

assets/css/_exercise-gestion.scss

@@ -100,7 +100,6 @@ form {
 
 .cta__validate--wrapper {
   margin-top: 20px;
-  position: absolute;
   right: 20px;
   top: 0;
 

assets/css/_markdown-style.scss

@@ -92,7 +92,7 @@
 
   em {
     color: $GREY;
-    font-weight: bold;
+    font-style: italic;
   }
 
   a {

components/Editor/RichTextEditor.vue

@@ -11,6 +11,7 @@
 
             <button
               class="menubar__button"
+              title="Mettre en gras"
               :class="{ 'button--grey-light-reverse': isActive.bold(), 'button--grey-light': !isActive.bold() }"
               @click="commands.bold"
             >
@@ -19,6 +20,7 @@
 
             <button
               class="menubar__button"
+              title="Mettre en italic"
               :class="{ 'button--grey-light-reverse': isActive.italic(), 'button--grey-light': !isActive.italic() }"
               @click="commands.italic"
             >
@@ -27,6 +29,7 @@
 
             <button
               class="menubar__button"
+              title="Barrer"
               :class="{ 'button--grey-light-reverse': isActive.strike(), 'button--grey-light': !isActive.strike() }"
               @click="commands.strike"
             >
@@ -35,8 +38,8 @@
 
             <button
               class="menubar__button"
+              title="Souligner"
               :class="{ 'button--grey-light-reverse': isActive.underline(), 'button--grey-light': !isActive.underline() }"
-
               @click="commands.underline"
             >
               <u>u</u>
@@ -49,6 +52,7 @@
 
             <button
               class="menubar__button"
+              title="Paragraphe"
               :class="{ 'button--grey-light-reverse': isActive.paragraph(), 'button--grey-light': !isActive.paragraph() }"
               @click="commands.paragraph"
             >
@@ -57,6 +61,7 @@
 
             <button
               class="menubar__button menubar__button--with-icon"
+              title="Citation"
               :class="{ 'button--grey-light-reverse': isActive.blockquote(), 'button--grey-light': !isActive.blockquote() }"
               @click="commands.blockquote"
             >
@@ -65,6 +70,7 @@
 
             <button
               class="menubar__button menubar__button--with-icon button--grey-light"
+              title="Séparateur horizontal"
               @click="commands.horizontal_rule"
             >
               <Icon type="lineH" theme="theme--grey-light"/>
@@ -77,6 +83,7 @@
             <button
               class="menubar__button"
               :class="{ 'button--grey-light-reverse': isActive.heading({ level: 2 }), 'button--grey-light': !isActive.heading({ level: 2 }) }"
+              title="Titre de niveau 2"
               @click="commands.heading({ level: 2 })"
             >
               H2
@@ -85,6 +92,7 @@
             <button
               class="menubar__button"
               :class="{ 'button--grey-light-reverse': isActive.heading({ level: 3 }), 'button--grey-light': !isActive.heading({ level: 3 }) }"
+              title="Titre de niveau 3"
               @click="commands.heading({ level: 3 })"
             >
               H3
@@ -97,13 +105,15 @@
             <button
               class="menubar__button"
               :class="{ 'button--grey-light-reverse': isActive.bullet_list(), 'button--grey-light': !isActive.bullet_list() }"
+              title="Liste à puces"
               @click="commands.bullet_list"
             >
               ul
             </button>
 
             <button
               class="menubar__button"
+              title="Liste ordonnée"
               :class="{ 'button--grey-light-reverse': isActive.ordered_list(), 'button--grey-light': !isActive.ordered_list() }"
               @click="commands.ordered_list"
             >
@@ -118,6 +128,7 @@
             <button
               class="menubar__button menubar__button--with-icon"
               :class="{ 'button--grey-light-reverse': isActive.code(), 'button--grey-light': !isActive.code() }"
+              title="Code sur une ligne"
               @click="commands.code"
             >
               <Icon type="codeBasic" :theme="isActive.code() ? 'theme--white' : 'theme--grey-light'"/>
@@ -127,6 +138,7 @@
               class="menubar__button menubar__button--with-icon"
               :class="{ 'button--grey-light-reverse': isActive.code_block(), 'button--grey-light': !isActive.code_block() }"
               @click="commands.code_block"
+              title="Bloc de code"
             >
               <Icon type="codeBlock" :theme="isActive.code_block() ? 'theme--white' : 'theme--grey-light'"/>
             </button>
@@ -138,6 +150,7 @@
             <button
               class="menubar__button menubar__button--with-icon button--grey-light"
               @click="commands.undo"
+              title="Revenir en arrière"
             >
               <Icon type="undo" theme="theme--grey-light"/>
 
@@ -146,6 +159,7 @@
             <button
               class="menubar__button menubar__button--with-icon button--grey-light"
               @click="commands.redo"
+              title="Revenir en avant"
             >
               <Icon type="redo" theme="theme--grey-light"/>
             </button>

components/Exercise/PreviewExercise.vue

@@ -2,14 +2,6 @@
   <article>
     <div class="rating" :class="{'rating--empty': exercise.metrics.votes === 0}">
         {{rating}}
-        <div @click="gotoExercise" class="overlay">
-          <span v-if="!$auth.loggedIn">
-            Connectez-vous pour côter cet exercice !
-          </span>
-          <span v-else>
-            Soyez le premier à côter cet exercice !
-          </span>
-        </div>
     </div>
 
     <div class="info-wrapper">
@@ -99,10 +91,11 @@
           const metrics = this.exercise.metrics;
 
           if(metrics) {
+            if(metrics.votes === 0) return '-';
             return metrics.avg_score
           }
 
-          return 0
+          return '-'
 
         }
 
@@ -152,7 +145,6 @@
       display: flex;
       align-items: center;
       justify-content: center;
-      cursor:pointer;
       @include transitionHelper(opacity .4s ease);
 
       span {
@@ -161,11 +153,6 @@
       }
     }
 
-    .rating--empty:hover .overlay {
-      visibility: visible;
-      opacity: 1;
-
-    }
 
     button {
       margin: 0;
@@ -187,7 +174,6 @@
       align-items: center;
 
       &.rating--empty {
-        cursor:pointer;
         color:lighten($GREY, 30);
       }
     }

components/Gestion/CategoryForm.vue

@@ -17,12 +17,12 @@
 
     </ValidationObserver>
 
+    <p class="disclaimer">* champs obligatoires</p>
     <div class="cta__validate--wrapper">
       <button @click="validateBeforeSubmit" class="button--ternary-color-reverse cta__validate">
         Publier
       </button>
     </div>
-    <p class="disclaimer">* champs obligatoires</p>
 
   </section>
 

components/Gestion/ExerciseForm.vue

@@ -131,6 +131,7 @@
     </ValidationObserver>
 
 
+    <p class="disclaimer">* champs obligatoires</p>
     <div class="cta__validate--wrapper">
       <template v-if="['admin', 'super_admin'].includes(userRole)">
         <button @click="validateBeforeSubmit('NOT_VALIDATED')" class="button--red-reverse cta__validate">
@@ -155,7 +156,6 @@
         Soumettre
       </button>
     </div>
-    <p class="disclaimer">* champs obligatoires</p>
 
   </section>
 

components/Gestion/FavoriteForm.vue

@@ -47,12 +47,12 @@
 
     <TagColorLegend/>
 
+    <p class="disclaimer">* champs obligatoires</p>
     <div class="cta__validate--wrapper">
       <button @click="validateBeforeSubmit" class="button--ternary-color-reverse button__validate">
         sauver le favori
       </button>
     </div>
-    <p class="disclaimer">* champs obligatoires</p>
   </section>
 
 </template>

components/Gestion/TagForm.vue

@@ -34,6 +34,7 @@
 
     </ValidationObserver>
 
+    <p class="disclaimer">* champs obligatoires</p>
     <div class="cta__validate--wrapper">
       <button @click="validateBeforeSubmit('NOT_VALIDATED')" class="button--red-reverse cta__validate">
         Invalider
@@ -48,7 +49,6 @@
         Valider
       </button>
     </div>
-    <p class="disclaimer">* champs obligatoires</p>
 
   </section>
 

components/Menu.vue

@@ -222,6 +222,12 @@
       position: relative;
       padding: 0 $PADDING_MENU/1.5 0 $PADDING_MENU/1.5;
 
+
+      &.cta-link-with-arrow.nuxt-link-exact-active {
+        background-color: rgba(white, .2);
+        @include transitionHelper(background-color .3s ease)
+      }
+
       &.cta-link-with-arrow:after {
         content: url("~assets/logo/arrow.svg");
         position: absolute;