diff --git a/assets/css/_banner.scss b/assets/css/_banner.scss index 3949170..9ae4a98 100644 --- a/assets/css/_banner.scss +++ b/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; 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/_markdown-style.scss b/assets/css/_markdown-style.scss index c5ab8ae..c26501d 100644 --- a/assets/css/_markdown-style.scss +++ b/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; diff --git a/assets/css/_panel.scss b/assets/css/_panel.scss index 8e69900..6bfaaad 100644 --- a/assets/css/_panel.scss +++ b/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; + } +} + 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/assets/css/_variables.scss b/assets/css/_variables.scss index 7bdd88f..1d680d6 100644 --- a/assets/css/_variables.scss +++ b/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); /* diff --git a/assets/css/form.scss b/assets/css/form.scss index 156279a..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; } @@ -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/assets/js/tiptap/ListItem.ts b/assets/js/tiptap/ListItem.ts new file mode 100644 index 0000000..622bf5a --- /dev/null +++ b/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) + }; + } + +} diff --git a/components/Editor/RichTextEditor.vue b/components/Editor/RichTextEditor.vue index 79a77cd..633bf0d 100644 --- a/components/Editor/RichTextEditor.vue +++ b/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({ 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/components/Gestion/FavoriteForm.vue b/components/Gestion/FavoriteForm.vue index 4d48535..3652cc3 100644 --- a/components/Gestion/FavoriteForm.vue +++ b/components/Gestion/FavoriteForm.vue @@ -81,9 +81,8 @@ // Tags validation const tags: number[] = this.selectedTags.map((tag: SelectedTag) => tag.tag_id); - const isTagsValid = tags.length !== 0; - if (isValid && isTagsValid) { + if (isValid) { const request: UpdateConfigurationRequest | CreateConfigurationRequest = { name: this.form.name, diff --git a/components/Menu.vue b/components/Menu.vue index 505fd9c..0c66d33 100644 --- a/components/Menu.vue +++ b/components/Menu.vue @@ -276,13 +276,7 @@ background-color: rgba(white, .2); @include transitionHelper(background-color .3s ease) } - - &.cta-link-with-arrow:after { - content: url("~assets/logo/arrow.svg"); - position: absolute; - right: $PADDING_MENU/1.5; - - } + &.cta-animate { @include animation(blink-background 1.5s linear) diff --git a/components/Panel/Item/DetailsPanel.vue b/components/Panel/Item/DetailsPanel.vue index ef545a7..a43488c 100644 --- a/components/Panel/Item/DetailsPanel.vue +++ b/components/Panel/Item/DetailsPanel.vue @@ -41,7 +41,7 @@ * The exercise containing details, tags,... */ @Prop({type: Object, required: true}) exercise!: Exercise; - + /** * Classify all tags by categories and sorts the categories */ @@ -80,7 +80,7 @@ @import "assets/css/font"; #DetailsPanel { - + position: relative; padding: 20px; h4 { diff --git a/components/Panel/Item/ExercisesCheckPanel.vue b/components/Panel/Item/ExercisesCheckPanel.vue index aefa694..7c899b3 100644 --- a/components/Panel/Item/ExercisesCheckPanel.vue +++ b/components/Panel/Item/ExercisesCheckPanel.vue @@ -107,6 +107,7 @@ #ExercisesCheckPanel { padding: 20px 0; + position: relative; .results { padding: 0 20px; diff --git a/components/Panel/Item/FavoritePanel.vue b/components/Panel/Item/FavoritePanel.vue index eceb5a9..af3aae7 100644 --- a/components/Panel/Item/FavoritePanel.vue +++ b/components/Panel/Item/FavoritePanel.vue @@ -5,9 +5,21 @@
-

{{configuration.name}}

+ +
+
+ {{configuration.title}} +
+
+ +
+
@@ -145,6 +157,8 @@ #FavoritePanel { padding: 0; + position: relative; + .disclaimer { padding: 0 20px; @@ -199,14 +213,18 @@ } } - .historical { + .favorite { cursor: pointer; border-bottom: 1px solid rgba($GREY, .1); + .content { + padding: 0 20px; + } + .title { margin-bottom: 20px; - color: $TERNARY_COLOR; + color: $PRIMARY_COLOR_LIGHT; font-family: $CircularStd; } diff --git a/components/Panel/Item/FilterPanel.vue b/components/Panel/Item/FilterPanel.vue index 79da2aa..95f5f5a 100644 --- a/components/Panel/Item/FilterPanel.vue +++ b/components/Panel/Item/FilterPanel.vue @@ -8,13 +8,17 @@
- + - + +
+ + +
@@ -312,6 +316,10 @@ this.createFavoriteInput = true; } + closeFavoriteInput() { + this.createFavoriteInput = false; + } + /** * Apply the search request of the user */ @@ -342,7 +350,6 @@ * Validating part for the favorite input */ async validateBeforeSubmit() { - if (this.confirmedTags.length !== 0) { const tags_id: number[] = this.confirmedTags.map(tag => tag.tag_id); const title: string | undefined = this.$accessor.exercises.search_criterion.title; @@ -361,11 +368,8 @@ this.createFavoriteInput = false; this.$displaySuccess("Votre favori a bien été créé."); } catch (e) { - this.$displayError("Vos favoris n'ont pas pu être chargé"); + this.$displayError('Un problème est survenu lors de la création du favori.'); } - } else { - this.$displayWarning('Vous devez ajouter au moins un tag afin de créer votre favori') - } } /** @@ -404,7 +408,8 @@ */ toggleList(tagSelecter: CheckBoxSelecter) { if (this.selectedTagSelecter !== undefined) { - this.selectedTagSelecter.$data.active = false; + // @ts-ignore + this.selectedTagSelecter.closeList(); this.selectedTagSelecter = undefined; } @@ -493,15 +498,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; } } @@ -517,8 +532,6 @@ .selectable-tags { list-style-type: none; padding: 0; - overflow-y: scroll; - overflow-x: visible; height: 100%; margin-bottom: 0; diff --git a/components/Panel/Item/HistoricalPanel.vue b/components/Panel/Item/HistoricalPanel.vue index 2d6359a..6b49e61 100644 --- a/components/Panel/Item/HistoricalPanel.vue +++ b/components/Panel/Item/HistoricalPanel.vue @@ -114,6 +114,7 @@ #HistoricalPanel { padding: 0 0 20px; + position: relative; h3 { padding-left: 20px; diff --git a/components/Panel/Panel.vue b/components/Panel/Panel.vue index cc489a4..678bc51 100644 --- a/components/Panel/Panel.vue +++ b/components/Panel/Panel.vue @@ -101,7 +101,16 @@ }); BusEvent.$on('changePanel', (id: number) => { - this.changePanel(id) + this.changePanel(id); + + const classList: DOMTokenList = this.$el.classList; + + if(!classList.contains("animatePanel")) { + this.$el.classList.add("animatePanel"); + setTimeout(() => { + this.$el.classList.remove("animatePanel"); + }, 1500); + } }) } @@ -124,6 +133,7 @@ right: 0; z-index: 1000; display: flex; + border-radius: 4px 4px 0 0; width: 100%; justify-content: stretch; overflow: hidden; 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 @@ diff --git a/pages/gestion/mes-exercices/_id.vue b/pages/gestion/mes-exercices/_id.vue index 5cbd310..fee5e9c 100644 --- a/pages/gestion/mes-exercices/_id.vue +++ b/pages/gestion/mes-exercices/_id.vue @@ -6,7 +6,7 @@ Gestion > Mes exercices > {{exercise.title}} - + Mes exercices
diff --git a/pages/gestion/mes-exercices/creer-exercice.vue b/pages/gestion/mes-exercices/creer-exercice.vue index 2d3c194..1502bce 100644 --- a/pages/gestion/mes-exercices/creer-exercice.vue +++ b/pages/gestion/mes-exercices/creer-exercice.vue @@ -6,7 +6,7 @@ Gestion > Mes exercices > Créer un exercice - + Mes exercices
diff --git a/pages/gestion/mes-favoris/_id.vue b/pages/gestion/mes-favoris/_id.vue index 5f3a83d..e225c37 100644 --- a/pages/gestion/mes-favoris/_id.vue +++ b/pages/gestion/mes-favoris/_id.vue @@ -6,7 +6,7 @@ Gestion > Mes Favoris > {{configuration.name}} - + Mes favoris
diff --git a/pages/gestion/mes-favoris/creer-favori.vue b/pages/gestion/mes-favoris/creer-favori.vue index a096be5..61660f0 100644 --- a/pages/gestion/mes-favoris/creer-favori.vue +++ b/pages/gestion/mes-favoris/creer-favori.vue @@ -6,7 +6,7 @@ Gestion > Mes Favoris > Créer un favori - + Mes favoris diff --git a/ts-shim.d.ts b/ts-shim.d.ts index cf7703e..5d9874c 100644 --- a/ts-shim.d.ts +++ b/ts-shim.d.ts @@ -5,6 +5,7 @@ declare module "*.vue" { declare module 'tiptap'; declare module 'tiptap-extensions'; +declare module 'tiptap-commands'; declare module 'highlight.js/lib/highlight'; declare module 'highlight.js/lib/languages/javascript'; declare module 'highlight.js/lib/languages/css';