improved index lists #1259
This commit is contained in:
+67
-18
@@ -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{
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
:href="item.url"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="item.title"
|
||||
/>
|
||||
>
|
||||
<span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
|
||||
</a>
|
||||
</h1>
|
||||
<p>{{ item.type }}</p>
|
||||
</header>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@@ -6,12 +6,10 @@
|
||||
:href="item.url"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="item.title"
|
||||
/>
|
||||
>
|
||||
<span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
|
||||
</a>
|
||||
</h1>
|
||||
<p v-if="item.birth && item.death">
|
||||
<span>{{ item.birth }}</span> -- <span>{{ item.death }}</span>
|
||||
</p>
|
||||
</header>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
>
|
||||
{{ item.title }}
|
||||
<span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
|
||||
</a>
|
||||
<span v-else class="red">
|
||||
{{ item.title }}
|
||||
|
||||
@@ -6,12 +6,37 @@
|
||||
</template>
|
||||
|
||||
<ul v-if="items.length" class="item-list">
|
||||
<li v-for="item in items" :key="item.uuid">
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.uuid"
|
||||
:class="{ hidden: activeLetter && item.letter !== activeLetter }"
|
||||
>
|
||||
<LocorumItem :item="item" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<template v-slot:nav />
|
||||
<template v-slot:nav>
|
||||
<div v-if="items.length" class="abc">
|
||||
<ul>
|
||||
<li :class="{ inactive: activeLetter }">
|
||||
<span
|
||||
@click.prevent="onClickLetter(null)"
|
||||
@keyup.enter="onClickLetter(null)"
|
||||
>tout</span>
|
||||
</li>
|
||||
<li
|
||||
v-for="l in letters" :key="l"
|
||||
:class="{ inactive: activeLetter && l !== activeLetter }"
|
||||
>
|
||||
<span
|
||||
@click.prevent="onClickLetter(l)"
|
||||
@keyup.enter="onClickLetter(l)"
|
||||
>{{ l }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</MainContentLayout>
|
||||
</template>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,12 +6,37 @@
|
||||
</template>
|
||||
|
||||
<ul v-if="items.length" class="item-list">
|
||||
<li v-for="item in items" :key="item.url">
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.url"
|
||||
:class="{ hidden: activeLetter && item.letter !== activeLetter }"
|
||||
>
|
||||
<NominumItem :item="item" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<template v-slot:nav />
|
||||
<template v-slot:nav>
|
||||
<div v-if="items.length" class="abc">
|
||||
<ul>
|
||||
<li :class="{ inactive: activeLetter }">
|
||||
<span
|
||||
@click.prevent="onClickLetter(null)"
|
||||
@keyup.enter="onClickLetter(null)"
|
||||
>tout</span>
|
||||
</li>
|
||||
<li
|
||||
v-for="l in letters" :key="l"
|
||||
:class="{ inactive: activeLetter && l !== activeLetter }"
|
||||
>
|
||||
<span
|
||||
@click.prevent="onClickLetter(l)"
|
||||
@keyup.enter="onClickLetter(l)"
|
||||
>{{ l }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</MainContentLayout>
|
||||
</template>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -6,12 +6,39 @@
|
||||
</template>
|
||||
|
||||
<ul v-if="items.length" class="item-list">
|
||||
<li v-for="item in items" :key="item.uuid">
|
||||
<li
|
||||
v-for="item in items"
|
||||
:key="item.uuid"
|
||||
:class="{ hidden: activeLetter && item.letter !== activeLetter }"
|
||||
>
|
||||
|
||||
<OperumItem :item="item" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<template v-slot:nav />
|
||||
<template v-slot:nav>
|
||||
<div v-if="items.length" class="abc">
|
||||
<ul>
|
||||
<li :class="{ inactive: activeLetter }">
|
||||
<span
|
||||
@click.prevent="onClickLetter(null)"
|
||||
@keyup.enter="onClickLetter(null)"
|
||||
>tout</span>
|
||||
</li>
|
||||
<li
|
||||
v-for="l in letters" :key="l"
|
||||
:class="{ inactive: activeLetter && l !== activeLetter }"
|
||||
>
|
||||
<span
|
||||
@click.prevent="onClickLetter(l)"
|
||||
@keyup.enter="onClickLetter(l)"
|
||||
>{{ l }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
</MainContentLayout>
|
||||
</template>
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
</h3>
|
||||
<p
|
||||
class="biblio"
|
||||
v-html="text.biblio"
|
||||
v-html="text.biblio.description"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user