From a8b837e85a886fc75188cf853a2475da938d1e24 Mon Sep 17 00:00:00 2001 From: alexandre dewit Date: Wed, 29 Apr 2020 14:10:10 +0200 Subject: [PATCH 01/15] style(Exercices): move search bar into the exercise panel and make it bigger --- assets/css/_container.scss | 2 +- assets/css/form.scss | 11 ++++- components/Exercise/ExercisesPanel.vue | 62 +++++++++++++++++++++++--- pages/exercices/_id.vue | 2 +- pages/exercices/index.vue | 45 ++++++------------- 5 files changed, 81 insertions(+), 41 deletions(-) diff --git a/assets/css/_container.scss b/assets/css/_container.scss index 61a8381..2d26202 100644 --- a/assets/css/_container.scss +++ b/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; diff --git a/assets/css/form.scss b/assets/css/form.scss index 156279a..7923771 100644 --- a/assets/css/form.scss +++ b/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)); diff --git a/components/Exercise/ExercisesPanel.vue b/components/Exercise/ExercisesPanel.vue index 49adc48..4cf31c8 100644 --- a/components/Exercise/ExercisesPanel.vue +++ b/components/Exercise/ExercisesPanel.vue @@ -2,10 +2,12 @@
-

- Résultats de recherche - - {{searchModel}} -

+ +
+ + +
{{nbOfResults}} résultats - réinitialiser la recherche @@ -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(); + } } @@ -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); diff --git a/pages/exercices/_id.vue b/pages/exercices/_id.vue index 37819f8..5b6f5f0 100644 --- a/pages/exercices/_id.vue +++ b/pages/exercices/_id.vue @@ -4,7 +4,7 @@
- + - + +
+ + +
@@ -312,6 +316,10 @@ this.createFavoriteInput = true; } + closeFavoriteInput() { + this.createFavoriteInput = false; + } + /** * Apply the search request of the user */ @@ -493,15 +501,25 @@ margin-top: 30px; margin-bottom: 15px; - > span { + > form { + display: flex; + flex-direction: column; + } + input { + width: 100%; + } + + div { + margin-top: 10px; + display: flex; - align-items: center; justify-content: space-between; } button { padding: 8px 14px; height: 40px; + width: 48%; margin-top: 0; } } From 6b64e4b8412195042ca30eee63d41c073c1ddf3b Mon Sep 17 00:00:00 2001 From: alexandre dewit Date: Wed, 29 Apr 2020 14:47:35 +0200 Subject: [PATCH 04/15] style(form): change weight of font (input) for more lisibility --- assets/css/form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/form.scss b/assets/css/form.scss index 7923771..edfcd13 100644 --- a/assets/css/form.scss +++ b/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; } From 9bb6117e89331c63df1078719f244559bd89f4de Mon Sep 17 00:00:00 2001 From: alexandre dewit Date: Wed, 29 Apr 2020 15:40:31 +0200 Subject: [PATCH 05/15] style(FilterPanel): remove additional scroll bar --- assets/css/_tag-selecter.scss | 9 ++++++--- components/Panel/Item/FilterPanel.vue | 5 ++--- components/Search/CheckBoxSelecter.vue | 18 ++++++++++++++++-- 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/assets/css/_tag-selecter.scss b/assets/css/_tag-selecter.scss index fc38129..2742381 100644 --- a/assets/css/_tag-selecter.scss +++ b/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; } diff --git a/components/Panel/Item/FilterPanel.vue b/components/Panel/Item/FilterPanel.vue index 3af5307..fd78df6 100644 --- a/components/Panel/Item/FilterPanel.vue +++ b/components/Panel/Item/FilterPanel.vue @@ -412,7 +412,8 @@ */ toggleList(tagSelecter: CheckBoxSelecter) { if (this.selectedTagSelecter !== undefined) { - this.selectedTagSelecter.$data.active = false; + // @ts-ignore + this.selectedTagSelecter.closeList(); this.selectedTagSelecter = undefined; } @@ -535,8 +536,6 @@ .selectable-tags { list-style-type: none; padding: 0; - overflow-y: scroll; - overflow-x: visible; height: 100%; margin-bottom: 0; diff --git a/components/Search/CheckBoxSelecter.vue b/components/Search/CheckBoxSelecter.vue index b2474c1..31e6528 100644 --- a/components/Search/CheckBoxSelecter.vue +++ b/components/Search/CheckBoxSelecter.vue @@ -4,7 +4,7 @@ -
    +
      • @@ -20,7 +20,7 @@