Merge pull request #71 from SourceCodeOER/improvements

feat: Improvements considering validation phase

Author: dewita

assets/css/_banner.scss

@@ -57,7 +57,8 @@
       }
 
       span:last-child {
-        color: $PRIMARY_COLOR_LIGHT;
+        color: $PRIMARY_COLOR;
+        font-weight: bold;
         display: flex;
         align-items: center;
         position: relative;

assets/css/_container.scss

@@ -74,9 +74,9 @@
 
         .input-wrapper--with-icon {
           position: relative;
-          height: 40px;
           width: 100%;
           max-width: 400px;
+          height: 45px;
 
           input {
             max-width: 400px;

assets/css/_markdown-style.scss

@@ -31,8 +31,8 @@
   }
 
   p {
-    margin-bottom: 25px;
-    margin-top: 25px;
+    margin-bottom: 15px;
+    margin-top: 15px;
 
     > code, .title-ref {
       background-color: lighten($TERNARY_COLOR, 25);
@@ -44,8 +44,8 @@
   }
 
   pre {
-    margin-top: 30px;
-    margin-bottom: 30px;
+    margin-top: 15px;
+    margin-bottom: 15px;
     overflow-x: scroll;
     background-color: lighten($GREY, 63);
     padding: 20px;

assets/css/_panel.scss

@@ -11,7 +11,18 @@
   border-radius: 4px;
   background-color: white;
   @include box-shadow($SHADOW);
-  overflow: hidden;
+
+  &::before{
+    content: "";
+    border-radius: 4px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    @include box-shadow($SHADOW_EXPANDED);
+    opacity: 0;
+  }
 
   .panel-wrapper {
     height: calc(100% - 50px);
@@ -28,3 +39,21 @@
     }
   }
 }
+
+.animatePanel  {
+  &::before {
+    animation: bounce infinite ease;
+    animation-duration: 1.5s;
+  }
+}
+
+@keyframes bounce {
+  from, 50%, to {
+    opacity: 0;
+  }
+
+  25%, 75% {
+    opacity: 1;
+  }
+}
+

assets/css/_tag-selecter.scss

@@ -10,16 +10,19 @@
     list-style-type: none;
     padding: 0 20px 0 20px;
     max-height: 0;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: hidden;
     @include transitionHelper(max-height .4s ease);
 
     &.active {
-      max-height: 300px;
+      max-height: inherit;
     }
 
   }
 
+  input {
+    width: 100%;
+  }
+
   li {
     margin-bottom: 10px;
   }

assets/css/_variables.scss

@@ -63,6 +63,7 @@ $LINEAR_GRADIENT_ORANGE: linear-gradient(to right, #eea849, #f46b45);
  */
 
 $SHADOW: 0 0 15px 0 rgba(0, 0, 0, 0.15);
+$SHADOW_EXPANDED: 0 0 30px 0 rgba(0, 0, 0, 0.24);
 $SHADOW_BOTTOM:0 12px 15px -15px rgba(0, 0, 0, 0.15);
 
 /*

assets/css/form.scss

@@ -25,7 +25,7 @@ input:not([type=radio]), textarea, .custom-select {
   outline: none;
   background-color: transparent;
   font-family: $Montserrat;
-  font-weight: lighter;
+  font-weight: normal;
   font-size: 0.75em;
 }
 
@@ -95,10 +95,17 @@ input[type=file] {
 
   input:not([type=radio]) {
     padding-left: 50px;
+    font-weight: normal;
+    line-height: 3em;
+
+    font-size: 0.9em;
+    &::placeholder {
+      font-size: 1em;
+    }
   }
 
   svg {
-    width: 15px;
+    width: 20px;
     position: absolute;
     top: 50%;
     left: 20px;
@@ -138,7 +145,7 @@ form {
   Custom theme of textarea
  */
 
-@include input-theme(primary-color, $PRIMARY_COLOR, $PRIMARY_COLOR_LIGHT);
+@include input-theme(primary-color, $PRIMARY_COLOR, $PRIMARY_COLOR);
 @include input-theme(secondary-color, $SECONDARY_COLOR, lighten($SECONDARY_COLOR, 10));
 @include input-theme(ternary-color, $TERNARY_COLOR, lighten($TERNARY_COLOR, 10));
 @include input-theme(grey, $GREY, lighten($GREY, 20));

assets/js/tiptap/ListItem.ts

@@ -0,0 +1,30 @@
+import { Node } from 'tiptap'
+import {splitListItem, liftListItem, sinkListItem, insertText, chainCommands} from 'tiptap-commands'
+
+export default class ListItem extends Node {
+
+  get name() {
+    return 'list_item'
+  }
+
+  get schema() {
+    return {
+      content: 'paragraph block*',
+      defining: true,
+      draggable: false,
+      parseDOM: [
+        { tag: 'li' },
+      ],
+      toDOM: () => ['li', 0],
+    }
+  }
+
+  keys({ type } : any) {
+    return {
+      Enter: splitListItem(type),
+      Tab: chainCommands(sinkListItem(type), insertText("    ")),
+      "Shift-Tab": liftListItem(type)
+    };
+  }
+
+}

components/Editor/RichTextEditor.vue

@@ -192,7 +192,6 @@
     HorizontalRule,
     OrderedList,
     BulletList,
-    ListItem,
     TodoItem,
     TodoList,
     Bold,
@@ -205,6 +204,7 @@
     CodeBlockHighlight,
     Placeholder
   } from 'tiptap-extensions'
+  import ListItem from "~/assets/js/tiptap/ListItem"
   import {Component, Prop, Ref, Vue} from "vue-property-decorator";
 
   @Component({

components/Exercise/ExercisesPanel.vue

@@ -2,10 +2,12 @@
   <section id="ExercisesPanel" class="exercises-wrapper">
     <header ref="headerExercise">
       <div class="header-wrapper">
-        <h1>
-          Résultats de recherche
-          <span v-if="!isEmptySearchModel"> - {{searchModel}}</span>
-        </h1>
+
+        <div class="input-wrapper--with-icon input-with--enter-icon">
+          <Icon type="search"/>
+          <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
+                 placeholder="Rechercher">
+        </div>
 
         <div class="results">
           {{nbOfResults}} résultats - <span @click.self="reset" class="init">réinitialiser la recherche</span>
@@ -39,11 +41,13 @@
   import PreviewExercise from '~/components/Exercise/PreviewExercise.vue'
   import IntersectMixins from "~/components/Mixins/IntersectMixins.vue";
   import {Exercise, SelectedTag, TagLabelObjectEmitted, TagState} from "~/types";
+  import Icon from "~/components/Symbols/Icon.vue";
 
   const ratio = .2;
 
   @Component({
     components: {
+      Icon,
       Tag,
       PreviewExercise
     }
@@ -52,6 +56,9 @@
     @Ref() headerExercise!: HTMLElement;
     @Ref() bodyExercise!: HTMLElement;
     @Ref() anchor!: Element;
+    @Ref() inputText!: HTMLInputElement;
+
+
 
     intersectionObserverOptions: IntersectionObserverInit = {
       root: null,
@@ -188,7 +195,38 @@
         }
       });
 
-      this.$emit('reset');
+      this.resetInput();
+    }
+
+    debounceInput(e: any) {
+      const value = e.target.value;
+      this.$accessor.exercises.fetch({data: {title: value}});
+      this.$accessor.historical.addHistorical({
+        tags: this.$accessor.tags.selectedTags,
+        title: value,
+        vote: this.$accessor.exercises.search_criterion.vote
+      })
+    }
+
+    resetInput() {
+      this.inputText.value = ""
+    }
+
+    resetIfEmpty(e:any) {
+      const value:string =  e.target.value;
+
+      if(value === '') {
+        this.$accessor.exercises.fetch({data: {title: ""}});
+      }
+    }
+
+    refreshInput() {
+      this.inputText.value = this.$accessor.exercises.search_criterion.title || '';
+    }
+
+    setInput() {
+      const title = this.$accessor.exercises.search_criterion.title;
+      this.inputText.value = !!title ? title : '';
     }
 
     handleIntersect(entries: IntersectionObserverEntry[]) {
@@ -202,6 +240,10 @@
     targets(): Element[] {
       return [this.anchor]
     }
+
+    mounted() {
+      this.setInput();
+    }
   }
 </script>
 
@@ -236,6 +278,16 @@
       }
     }
 
+    .input-wrapper--with-icon {
+      width: 100%;
+      max-width: 400px;
+      margin-bottom: 15px;
+
+      input {
+        width: 100%;
+      }
+    }
+
     .exercises-content-wrapper {
       overflow-y: scroll;
       max-height: calc(100% - 66px);