From deb3bf1d9983ae209890ea337b442a0c4ae7d003 Mon Sep 17 00:00:00 2001 From: bach Date: Thu, 10 Mar 2022 21:47:52 +0100 Subject: [PATCH] improved index lists #1259 --- assets/css/app.scss | 85 ++++++++++++++++++++------ assets/css/base/_fonts.scss | 9 +++ src/components/Content/LocorumItem.vue | 6 +- src/components/Content/NominumItem.vue | 8 +-- src/components/Content/OperumItem.vue | 2 +- src/pages/IndexLocorum.vue | 57 +++++++++++++++-- src/pages/IndexNominum.vue | 58 ++++++++++++++++-- src/pages/IndexOperum.vue | 59 ++++++++++++++++-- src/pages/ListCorpus.vue | 2 +- 9 files changed, 245 insertions(+), 41 deletions(-) diff --git a/assets/css/app.scss b/assets/css/app.scss index 0ef0b5a..2cd84fe 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -194,46 +194,74 @@ section[role="main-content"]{ } #list-corpus, .index{ - >header>h1{ - font-family: "noto_sans"; - color: $rouge; - font-weight: 400; + >header{ + + &>h1{ + @include titleSansRed; + margin: 0; + } } article.item{ - margin: 2em 0 0; - header h1{ - font-size: 1.512em; - color: $bleuroi; - font-weight: 400; + // margin: 2em 0 0; + + header{ margin:0; - } + h1{ + margin:0; + span.title{ + @include title1black; + color: $bleuroi; + } + span.quantity{ + @include title4black; + } + } + } + } + &:not(#list-corpus){ + ul.item-list{ + li{ + // margin: 0 0 2em 0; + max-height: $base-line * 3; + opacity: 1; + transition: all 0.3s ease-in-out; + &.hidden { + // display: none; + max-height: 0.01px; + opacity: 0; + } + } + } } ul.item-list{ li{ - margin: 0 0 2em 0; + // margin: 0 0 2em 0; header{ h2{ @include title1blue; - margin:0.4em 0 0.2em; + // margin:0.4em 0 0.2em; + margin-bottom: $base-line / 2; } h3{ - margin:0.2em 0; + margin:0; @include fontsans; font-size: 0.756em; font-weight: 500; + line-height: $base-line / 2; } - margin-bottom: 0.3em; + margin-bottom: $base-line / 2; } h4{ - margin:0.1em 0; + margin:0; font-weight: 300; @include fontsans; font-size: 0.756em; + line-height: $base-line / 2; &.texts-quantity{ color: $rouge; - margin: 0.3em 0 0; + // margin: 0.3em 0 0; } } section.editions{ @@ -253,17 +281,19 @@ section[role="main-content"]{ ul.texts-list{ padding: 0 0 0 1em; li{ - margin: 0; + margin-bottom: $base-line / 2; } h3{ @include title2black; - margin: 0.7em 0 0.3em; + // margin: 0.7em 0 0.3em; + line-height: $base-line / 2; } p{ font-weight: 300; @include fontsans; font-size: 0.756em; margin: 0; + line-height: $base-line / 2; } } } @@ -280,6 +310,25 @@ section[role="main-content"]{ } } } + + .abc{ + ul{ + li{ + opacity: 1; + transition: opacity 0.3s ease-in-out; + &.inactive{ + opacity: 0.4; + } + span{ + @include fontcaption; + font-variant: small-caps; + font-size: 1em; + cursor: pointer; + line-height: $base-line / 2; + } + } + } + } } #corpus{ diff --git a/assets/css/base/_fonts.scss b/assets/css/base/_fonts.scss index 7cebada..00ffed1 100644 --- a/assets/css/base/_fonts.scss +++ b/assets/css/base/_fonts.scss @@ -43,6 +43,7 @@ footer[role="tools"] .row>nav{ color: $grisfonce; font-weight: 400; margin:0; + line-height: $base-line; } @mixin title2black { @@ -69,6 +70,7 @@ footer[role="tools"] .row>nav{ color: $grisfonce; font-weight: 400; margin:0; + line-height: $base-line / 2; } @mixin title4grey { @@ -100,6 +102,13 @@ footer[role="tools"] .row>nav{ line-height: $base-line; } +@mixin titleSansRed { + font-family: "noto_sans"; + color: $rouge; + font-weight: 400; + line-height: $base-line; +} + @mixin fontcaption { @include fontsans; font-size: 0.643em; diff --git a/src/components/Content/LocorumItem.vue b/src/components/Content/LocorumItem.vue index a46bc1b..f88d724 100644 --- a/src/components/Content/LocorumItem.vue +++ b/src/components/Content/LocorumItem.vue @@ -6,10 +6,10 @@ :href="item.url" @click.prevent="onclick" @keyup.enter="onclick" - v-html="item.title" - /> + > + [{{ item.texts.length }}] + -

{{ item.type }}

diff --git a/src/components/Content/NominumItem.vue b/src/components/Content/NominumItem.vue index 17f3c98..47aa911 100644 --- a/src/components/Content/NominumItem.vue +++ b/src/components/Content/NominumItem.vue @@ -6,12 +6,10 @@ :href="item.url" @click.prevent="onclick" @keyup.enter="onclick" - v-html="item.title" - /> + > + [{{ item.texts.length }}] + -

- {{ item.birth }} -- {{ item.death }} -

diff --git a/src/components/Content/OperumItem.vue b/src/components/Content/OperumItem.vue index f3b5ef8..2e1dd1a 100644 --- a/src/components/Content/OperumItem.vue +++ b/src/components/Content/OperumItem.vue @@ -9,7 +9,7 @@ @click.prevent="onclick" @keyup.enter="onclick" > - {{ item.title }} + [{{ item.texts.length }}] {{ item.title }} diff --git a/src/pages/IndexLocorum.vue b/src/pages/IndexLocorum.vue index b74a428..369dcd7 100644 --- a/src/pages/IndexLocorum.vue +++ b/src/pages/IndexLocorum.vue @@ -6,12 +6,37 @@
    -
  • +
- @@ -31,20 +56,44 @@ export default { MainContentLayout }, data: () => ({ - items: [] + items: [], + letters: [], + activeLetter: null }), beforeCreate () { REST.get(`${window.apipath}/indexLocorum`, {}) .then(({ data }) => { console.log('index locorum REST: data', data) if (data.content.length) { - this.items = data.content + this.items = data.content.sort((a, b) => { + let Aletter = a.letter.toLowerCase() + let Bletter = b.letter.toLowerCase() + if (Aletter < Bletter) { + return -1 + } else if (Aletter > Bletter) { + return 1 + } else { + return 0 + } + }) } + for (let i = 0; i < this.items.length; i++) { + if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { + this.letters.push(this.items[i].letter.toLowerCase()) + } + } + this.letters = this.letters.sort() }) .catch((error) => { console.warn('Issue with index locorum', error) Promise.reject(error) }) + }, + methods: { + onClickLetter (l) { + this.activeLetter = l + // console.log('activeLetter', this.activeLetter) + } } } diff --git a/src/pages/IndexNominum.vue b/src/pages/IndexNominum.vue index a25fb82..3fce9cc 100644 --- a/src/pages/IndexNominum.vue +++ b/src/pages/IndexNominum.vue @@ -6,12 +6,37 @@
    -
  • +
- @@ -31,8 +56,9 @@ export default { MainContentLayout }, data: () => ({ - items: [] - + items: [], + letters: [], + activeLetter: null }), beforeCreate () { // items/gdpLeMaire1685T01BodyFr01.003.016 @@ -41,13 +67,35 @@ export default { .then(({ data }) => { console.log('index nominum REST: data', data) if (data.content.length) { - this.items = data.content + this.items = data.content.sort((a, b) => { + let Aletter = a.letter.toLowerCase() + let Bletter = b.letter.toLowerCase() + if (Aletter < Bletter) { + return -1 + } else if (Aletter > Bletter) { + return 1 + } else { + return 0 + } + }) } + for (let i = 0; i < this.items.length; i++) { + if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { + this.letters.push(this.items[i].letter.toLowerCase()) + } + } + this.letters = this.letters.sort() }) .catch((error) => { console.warn('Issue with index nominum', error) Promise.reject(error) }) + }, + methods: { + onClickLetter (l) { + this.activeLetter = l + // console.log('activeLetter', this.activeLetter) + } } } diff --git a/src/pages/IndexOperum.vue b/src/pages/IndexOperum.vue index bb4c3ea..b44b954 100644 --- a/src/pages/IndexOperum.vue +++ b/src/pages/IndexOperum.vue @@ -6,12 +6,39 @@
    -
  • +
  • +
- @@ -31,20 +58,44 @@ export default { MainContentLayout }, data: () => ({ - items: [] + items: [], + letters: [], + activeLetter: null }), beforeCreate () { REST.get(`${window.apipath}/indexOperum`, {}) .then(({ data }) => { console.log('index operum REST: data', data) if (data.content.length) { - this.items = data.content + this.items = data.content.sort((a, b) => { + let Aletter = a.letter.toLowerCase() + let Bletter = b.letter.toLowerCase() + if (Aletter < Bletter) { + return -1 + } else if (Aletter > Bletter) { + return 1 + } else { + return 0 + } + }) } + for (let i = 0; i < this.items.length; i++) { + if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { + this.letters.push(this.items[i].letter.toLowerCase()) + } + } + this.letters = this.letters.sort() }) .catch((error) => { console.warn('Issue with index operum', error) Promise.reject(error) }) + }, + methods: { + onClickLetter (l) { + this.activeLetter = l + // console.log('activeLetter', this.activeLetter) + } } } diff --git a/src/pages/ListCorpus.vue b/src/pages/ListCorpus.vue index 65fc56c..4dd56f9 100644 --- a/src/pages/ListCorpus.vue +++ b/src/pages/ListCorpus.vue @@ -36,7 +36,7 @@