This commit is contained in:
2023-03-08 20:36:36 +01:00
parent 5bda8d9c36
commit 18c4c331f2
4 changed files with 100 additions and 29 deletions
+5 -2
View File
@@ -335,7 +335,7 @@ section[role="main-content"]{
&.inactive{ &.inactive{
opacity: 0.4; opacity: 0.4;
} }
span{ span.tout, span.letter{
@include fontcaption; @include fontcaption;
font-variant: small-caps; font-variant: small-caps;
font-size: 1em; font-size: 1em;
@@ -348,9 +348,12 @@ section[role="main-content"]{
text-align: center; text-align: center;
} }
&:not(:first-of-type) span{ &:not(:first-of-type) span.letter{
width: 1.1em; height: 1.1em; width: 1.1em; height: 1.1em;
} }
span.quantity{
font-size: 0.765em;
}
} }
} }
} }
+32 -9
View File
@@ -20,18 +20,22 @@
<ul> <ul>
<li :class="{ inactive: activeLetter }"> <li :class="{ inactive: activeLetter }">
<span <span
class="tout"
@click.prevent="onClickLetter(null)" @click.prevent="onClickLetter(null)"
@keyup.enter="onClickLetter(null)" @keyup.enter="onClickLetter(null)"
>tout</span> >tout</span>
<span class="quantity">[{{ items.length }}]</span>
</li> </li>
<li <li
v-for="l in letters" :key="l" v-for="l in letters" :key="l.l"
:class="{ inactive: activeLetter && l !== activeLetter }" :class="{ inactive: activeLetter && l.l !== activeLetter }"
> >
<span <span
@click.prevent="onClickLetter(l)" class="letter"
@keyup.enter="onClickLetter(l)" @click.prevent="onClickLetter(l.l)"
>{{ l }}</span> @keyup.enter="onClickLetter(l.l)"
>{{ l.l }}</span>
<span class="quantity">[{{ l.q }}]</span>
</li> </li>
</ul> </ul>
@@ -57,7 +61,7 @@ export default {
}, },
data: () => ({ data: () => ({
items: [], items: [],
letters: [], letters: {},
activeLetter: null activeLetter: null
}), }),
beforeCreate () { beforeCreate () {
@@ -78,11 +82,30 @@ export default {
}) })
} }
for (let i = 0; i < this.items.length; i++) { for (let i = 0; i < this.items.length; i++) {
if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { // console.log(typeof this.items[i].letter)
this.letters.push(this.items[i].letter.toLowerCase()) if (this.items[i].letter !== '') {
let letter = this.items[i].letter.toLowerCase()
console.log(letter)
if (Object.keys(this.letters).indexOf(letter) === -1) {
this.letters[letter] = {
l: letter,
q: 1
}
} else {
this.letters[letter].q += 1
} }
} }
this.letters = this.letters.sort() }
console.log(this.letters)
this.letters = this.letters.sort((a, b) => {
if (a.l < b.l) {
return -1
} else if (a.l > b.l) {
return 1
} else {
return 0
}
})
}) })
.catch((error) => { .catch((error) => {
console.warn('Issue with index locorum', error) console.warn('Issue with index locorum', error)
+31 -9
View File
@@ -20,18 +20,22 @@
<ul> <ul>
<li :class="{ inactive: activeLetter }"> <li :class="{ inactive: activeLetter }">
<span <span
class="tout"
@click.prevent="onClickLetter(null)" @click.prevent="onClickLetter(null)"
@keyup.enter="onClickLetter(null)" @keyup.enter="onClickLetter(null)"
>tout</span> >tout</span>
<span class="quantity">[{{ items.length }}]</span>
</li> </li>
<li <li
v-for="l in letters" :key="l" v-for="l in letters" :key="l.l"
:class="{ inactive: activeLetter && l !== activeLetter }" :class="{ inactive: activeLetter && l.l !== activeLetter }"
> >
<span <span
@click.prevent="onClickLetter(l)" class="letter"
@keyup.enter="onClickLetter(l)" @click.prevent="onClickLetter(l.l)"
>{{ l }}</span> @keyup.enter="onClickLetter(l.l)"
>{{ l.l }}</span>
<span class="quantity">[{{ l.q }}]</span>
</li> </li>
</ul> </ul>
@@ -57,7 +61,7 @@ export default {
}, },
data: () => ({ data: () => ({
items: [], items: [],
letters: [], letters: {},
activeLetter: null activeLetter: null
}), }),
beforeCreate () { beforeCreate () {
@@ -81,11 +85,29 @@ export default {
} }
for (let i = 0; i < this.items.length; i++) { for (let i = 0; i < this.items.length; i++) {
// console.log(typeof this.items[i].letter) // console.log(typeof this.items[i].letter)
if (this.items[i].letter !== '' && this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { if (this.items[i].letter !== '') {
this.letters.push(this.items[i].letter.toLowerCase()) let letter = this.items[i].letter.toLowerCase()
console.log(letter)
if (Object.keys(this.letters).indexOf(letter) === -1) {
this.letters[letter] = {
l: letter,
q: 1
}
} else {
this.letters[letter].q += 1
} }
} }
this.letters = this.letters.sort() }
console.log(this.letters)
this.letters = this.letters.sort((a, b) => {
if (a.l < b.l) {
return -1
} else if (a.l > b.l) {
return 1
} else {
return 0
}
})
}) })
.catch((error) => { .catch((error) => {
console.warn('Issue with index nominum', error) console.warn('Issue with index nominum', error)
+32 -9
View File
@@ -21,18 +21,22 @@
<ul> <ul>
<li :class="{ inactive: activeLetter }"> <li :class="{ inactive: activeLetter }">
<span <span
class="tout"
@click.prevent="onClickLetter(null)" @click.prevent="onClickLetter(null)"
@keyup.enter="onClickLetter(null)" @keyup.enter="onClickLetter(null)"
>tout</span> >tout</span>
<span class="quantity">[{{ items.length }}]</span>
</li> </li>
<li <li
v-for="l in letters" :key="l" v-for="l in letters" :key="l.l"
:class="{ inactive: activeLetter && l !== activeLetter }" :class="{ inactive: activeLetter && l.l !== activeLetter }"
> >
<span <span
@click.prevent="onClickLetter(l)" class="letter"
@keyup.enter="onClickLetter(l)" @click.prevent="onClickLetter(l.l)"
>{{ l }}</span> @keyup.enter="onClickLetter(l.l)"
>{{ l.l }}</span>
<span class="quantity">[{{ l.q }}]</span>
</li> </li>
</ul> </ul>
@@ -59,7 +63,7 @@ export default {
}, },
data: () => ({ data: () => ({
items: [], items: [],
letters: [], letters: {},
activeLetter: null activeLetter: null
}), }),
beforeCreate () { beforeCreate () {
@@ -80,11 +84,30 @@ export default {
}) })
} }
for (let i = 0; i < this.items.length; i++) { for (let i = 0; i < this.items.length; i++) {
if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) { // console.log(typeof this.items[i].letter)
this.letters.push(this.items[i].letter.toLowerCase()) if (this.items[i].letter !== '') {
let letter = this.items[i].letter.toLowerCase()
console.log(letter)
if (Object.keys(this.letters).indexOf(letter) === -1) {
this.letters[letter] = {
l: letter,
q: 1
}
} else {
this.letters[letter].q += 1
} }
} }
this.letters = this.letters.sort() }
console.log(this.letters)
this.letters = this.letters.sort((a, b) => {
if (a.l < b.l) {
return -1
} else if (a.l > b.l) {
return 1
} else {
return 0
}
})
}) })
.catch((error) => { .catch((error) => {
console.warn('Issue with index operum', error) console.warn('Issue with index operum', error)