style(Exercices): move search bar into the exercise panel and make it bigger

Author: dewita

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/form.scss

@@ -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));

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);

pages/exercices/_id.vue

@@ -4,7 +4,7 @@
 
       <div class="banner__nav banner__nav--with-link">
         <span>
-          Exercices > {{exercise.title}}
+          Bibliothèque > {{exercise.title}}
         </span>
         <nuxt-link to="/exercices" tag="span">
           <Icon type="arrowLeft" class="reversed-arrow" theme="theme--primary-color-light"/>

pages/exercices/index.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="container--with-menu">
-    <div class="banner search-banner">
-      <div class="input-wrapper--with-icon one-third input-with--enter-icon">
-        <Icon type="search"/>
-        <input ref="inputText" class="input--primary-color" type="text" @input="resetIfEmpty" @keydown.enter="debounceInput"
-               placeholder="Rechercher">
+    <div class="banner banner--with-shadow-bottom">
+      <div class="banner__nav">
+        <span>
+          Bibliothèque
+        </span>
       </div>
     </div>
 
@@ -23,7 +23,7 @@
           <FavoritePanel @fetch="setInput"/>
         </PanelItem>
       </Panel>
-      <ExercisesPanel @reset="resetInput"/>
+      <ExercisesPanel ref="exercisesPanel"/>
     </div>
   </div>
 </template>
@@ -73,41 +73,22 @@
     middleware: 'exercises-store'
   })
   export default class extends Vue {
-    @Ref() inputText!: HTMLInputElement;
 
-    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
-      })
-    }
+    @Ref() exercisesPanel!: ExercisesPanel;
 
     resetInput() {
-      this.inputText.value = ""
-    }
-
-    resetIfEmpty(e:any) {
-      const value:string =  e.target.value;
-
-      if(value === '') {
-        this.$accessor.exercises.fetch({data: {title: ""}});
-      }
+      // @ts-ignore
+      this.exercisesPanel.resetInput();
     }
 
     refreshInput() {
-      this.inputText.value = this.$accessor.exercises.search_criterion.title || '';
+      // @ts-ignore
+      this.exercisesPanel.refreshInput();
     }
 
     setInput() {
-      const title = this.$accessor.exercises.search_criterion.title;
-      this.inputText.value = !!title ? title : '';
-    }
-
-    mounted() {
-      this.setInput();
+      // @ts-ignore
+      this.exercisesPanel.setInput();
     }
   }
 </script>