redesigned index nominum item page
This commit is contained in:
+110
-59
@@ -312,73 +312,139 @@ section[role="main-content"]{
|
||||
color: $bleuroilight;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
.attested-forms{
|
||||
ul{
|
||||
// >li{
|
||||
// margin: 0 0 1em 0;
|
||||
// li{
|
||||
// margin: 0 0 0.5em 0;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
a{
|
||||
@include title4grey;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs{
|
||||
border-bottom: 1px solid $bleuroilight;
|
||||
margin-bottom: $base-line / 2;
|
||||
.tab{
|
||||
cursor: pointer;
|
||||
border-radius: 5px 5px 0 0;
|
||||
z-index: 10;
|
||||
display: inline-block;
|
||||
margin-bottom: -2px;
|
||||
padding: 0.3em 0.5em;
|
||||
border: 1px solid $bleuroilight;
|
||||
&.active{
|
||||
border-bottom: 2px solid white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.occurences{
|
||||
>ul{
|
||||
>li{
|
||||
padding:0 0 2em 0;
|
||||
padding:0 0 $base-line / 2 0;
|
||||
h3{
|
||||
@include title2black;
|
||||
padding:0 0 0.5em 0;
|
||||
padding:0 0 $base-line / 2 0;
|
||||
color: $bleuroi;
|
||||
}
|
||||
>ul{
|
||||
>li{
|
||||
padding:0 0 0.5em 0;
|
||||
// padding:0 0 0.5em 0;
|
||||
section{
|
||||
h4{
|
||||
@include title3black;
|
||||
display: inline-block;
|
||||
}
|
||||
span.open-close{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
svg{
|
||||
transform: rotate(-90deg) scale(0.8);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
path{
|
||||
fill:$bleuroi;
|
||||
a{
|
||||
span.form{
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
div.text{
|
||||
max-height: 0;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
box-sizing: content-box;
|
||||
p, h1, h2, h3, h4, h5, h6{
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
}
|
||||
a.lire-plus{
|
||||
color: $bleuroi;
|
||||
opacity: 0;
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
transition: height, opacity 0.3s ease-in-out;
|
||||
}
|
||||
&.opened{
|
||||
span.open-close{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
svg{
|
||||
transform: scale(0.8) rotate(0);
|
||||
}
|
||||
}
|
||||
div.text{
|
||||
max-height:100px;
|
||||
}
|
||||
a.lire-plus{
|
||||
opacity: 1;
|
||||
height:1em;
|
||||
}
|
||||
// ? c'est quoi ça ?
|
||||
// span.open-close{
|
||||
// cursor: pointer;
|
||||
// display: inline-block;
|
||||
// svg{
|
||||
// transform: rotate(-90deg) scale(0.8);
|
||||
// transition: transform 0.3s ease-in-out;
|
||||
// path{
|
||||
// fill:$bleuroi;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// div.text{
|
||||
// max-height: 0;
|
||||
// transition: max-height 0.3s ease-in-out;
|
||||
// overflow: hidden;
|
||||
// box-sizing: content-box;
|
||||
// p, h1, h2, h3, h4, h5, h6{
|
||||
// margin: 0.5em 0 0 0;
|
||||
// }
|
||||
// }
|
||||
// a.lire-plus{
|
||||
// color: $bleuroi;
|
||||
// opacity: 0;
|
||||
// display: inline-block;
|
||||
// height: 0;
|
||||
// overflow: hidden;
|
||||
// transition: height, opacity 0.3s ease-in-out;
|
||||
// }
|
||||
// &.opened{
|
||||
// span.open-close{
|
||||
// cursor: pointer;
|
||||
// display: inline-block;
|
||||
// svg{
|
||||
// transform: scale(0.8) rotate(0);
|
||||
// }
|
||||
// }
|
||||
// div.text{
|
||||
// max-height:100px;
|
||||
// }
|
||||
// a.lire-plus{
|
||||
// opacity: 1;
|
||||
// height:1em;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.attested-forms-occurences{
|
||||
ul{
|
||||
>li{
|
||||
margin: 0 0 1em 0;
|
||||
h3{
|
||||
@include title2black;
|
||||
padding:0 0 $base-line / 2 0;
|
||||
}
|
||||
li{
|
||||
margin: 0 0 0.5em 0;
|
||||
h4{
|
||||
@include title3black;
|
||||
display: inline-block;
|
||||
a{
|
||||
span.edition{
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
@include title4grey;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
nav{
|
||||
h3{
|
||||
@@ -390,21 +456,6 @@ section[role="main-content"]{
|
||||
margin:0 0 0.5em;
|
||||
color: $bleuroi;
|
||||
}
|
||||
.attested-forms{
|
||||
ul{
|
||||
>li{
|
||||
margin: 0 0 1em 0;
|
||||
li{
|
||||
margin: 0 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
a{
|
||||
@include title4grey;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -51,6 +51,7 @@ footer[role="tools"] .row>nav{
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
line-height: $base-line / 2;
|
||||
}
|
||||
|
||||
@mixin title3black {
|
||||
@@ -59,6 +60,7 @@ footer[role="tools"] .row>nav{
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
line-height: $base-line / 2;
|
||||
}
|
||||
|
||||
@mixin title4black {
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<section :class="{opened: isopened}">
|
||||
<h4>
|
||||
<a
|
||||
v-if="oc.title"
|
||||
:href="'/edition/'+oc.ed.uuid+'/'+oc.uuid+'/'+form"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="oc.ed.uuid"
|
||||
:form="form"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
{{ oc.title }} <span v-if="oc.ed.uuid" class="edition">( {{ editionTitle }} )</span>
|
||||
<!-- <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span> -->
|
||||
</a>
|
||||
</h4>
|
||||
<!-- <span
|
||||
class="open-close"
|
||||
@click.prevent="onOpenPreview"
|
||||
@keyup.enter="onOpenPreview"
|
||||
>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
|
||||
<path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" />
|
||||
</svg>
|
||||
</span> -->
|
||||
<!-- <div v-if="content" class="text" v-html="tei" /> -->
|
||||
<!-- <a
|
||||
v-if="content"
|
||||
class="lire-plus"
|
||||
:href="'/edition/'+ed.item+'/'+oc.uuid"
|
||||
:uuid="oc.uuid"
|
||||
:eduuid="ed.item"
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
lire plus
|
||||
</a> -->
|
||||
</section>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
// import { REST } from 'api/rest-axios'
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Occurence',
|
||||
props: {
|
||||
form: String,
|
||||
oc: Object
|
||||
},
|
||||
data: () => ({
|
||||
content: null,
|
||||
isopened: false,
|
||||
tei: ''
|
||||
}),
|
||||
computed: {
|
||||
...mapState({
|
||||
editionsbyuuid: state => state.Corpus.editionsbyuuid
|
||||
}),
|
||||
editionTitle () {
|
||||
return this.editionsbyuuid[this.oc.ed.uuid].title
|
||||
}
|
||||
},
|
||||
created () {
|
||||
console.log('occurence beforeCreate')
|
||||
// REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
|
||||
// .then(({ data }) => {
|
||||
// console.log('occurence text REST: data', data)
|
||||
// if (data.content) {
|
||||
// this.content = data.content
|
||||
// const subString = this.content.tei.substr(0, 500)
|
||||
// this.tei = subString.substr(0, subString.lastIndexOf(' ')) + ' …'
|
||||
// }
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.warn('Issue with nominum', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addHistoryItem: 'History/addItem'
|
||||
}),
|
||||
onGoToText (e) {
|
||||
console.log('clicked on text occurence', e, this.oc.title, this.oc.ed)
|
||||
|
||||
if (e.target.getAttribute('eduuid')) {
|
||||
this.addHistoryItem({
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid'),
|
||||
title: this.oc.title,
|
||||
editionTitle: this.editionTitle
|
||||
})
|
||||
// if (e.target.getAttribute('form')) {
|
||||
// this.$router.push({
|
||||
// name: `editiontext`,
|
||||
// params: {
|
||||
// id: e.target.getAttribute('eduuid'),
|
||||
// textid: e.target.getAttribute('uuid')
|
||||
// }
|
||||
// })
|
||||
// } else {
|
||||
this.$router.push({
|
||||
name: `editiontextextract`,
|
||||
params: {
|
||||
id: e.target.getAttribute('eduuid'),
|
||||
textid: e.target.getAttribute('uuid'),
|
||||
extract: e.target.getAttribute('form')
|
||||
}
|
||||
})
|
||||
// }
|
||||
} else {
|
||||
this.$router.push({
|
||||
name: `edition`,
|
||||
params: {
|
||||
id: e.target.getAttribute('uuid')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
onOpenPreview (e) {
|
||||
this.isopened = !this.isopened
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,55 +1,90 @@
|
||||
<template>
|
||||
<section class="occurences">
|
||||
<ul>
|
||||
<li
|
||||
v-for="ed in content.occurences"
|
||||
:key="ed.item"
|
||||
>
|
||||
<h3>
|
||||
<a
|
||||
:href="'/edition/'+ed.item"
|
||||
:uuid="ed.item"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="ed.biblio"
|
||||
/>
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="oc in ocAsArray(ed.occurences)"
|
||||
:key="oc.id"
|
||||
>
|
||||
<!-- <li
|
||||
v-for="oc in ed.occurences"
|
||||
:key="oc.uuid"
|
||||
> -->
|
||||
<occurence :ed="ed" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<div>
|
||||
<div class="tabs">
|
||||
<span
|
||||
v-if="content.occurences"
|
||||
class="tab"
|
||||
:class="{ active: tab === 'occurences' }"
|
||||
@click.prevent="onclickTab('occurences')"
|
||||
@keyup.enter="onclickTab('occurences')"
|
||||
>Occurences</span>
|
||||
<span
|
||||
v-if="content.attestedForms"
|
||||
class="tab"
|
||||
:class="{ active: tab === 'formes' }"
|
||||
@click.prevent="onclickTab('formes')"
|
||||
@keyup.enter="onclickTab('formes')"
|
||||
>Formes attestées</span>
|
||||
</div>
|
||||
<section v-if="content.occurences" v-show="tab === 'occurences'" class="occurences">
|
||||
<ul>
|
||||
<li
|
||||
v-for="ed in content.occurences"
|
||||
:key="ed.item"
|
||||
>
|
||||
<h3>
|
||||
<a
|
||||
:href="'/edition/'+ed.item"
|
||||
:uuid="ed.item"
|
||||
v-html="ed.biblio"
|
||||
/>
|
||||
</h3>
|
||||
<ul>
|
||||
<li
|
||||
v-for="oc in ocAsArray(ed.occurences)"
|
||||
:key="oc.id"
|
||||
>
|
||||
<!-- <li
|
||||
v-for="oc in ed.occurences"
|
||||
:key="oc.uuid"
|
||||
> -->
|
||||
<occurence v-if="oc.title" :ed="ed" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<section v-if="content.attestedForms" v-show="tab === 'formes'" class="attested-forms-occurences">
|
||||
<!-- <h3>Attested forms</h3> -->
|
||||
<ul>
|
||||
<li v-for="(af, i) in content.attestedForms" :key="i">
|
||||
<h3 class="form">{{ af.title }}</h3>
|
||||
<ul>
|
||||
<li v-for="(oc, j) in af.occurences" :key="j">
|
||||
<forme :form="af.title" :oc="oc" />
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Occurence from './Occurence'
|
||||
import Forme from './Forme'
|
||||
|
||||
export default {
|
||||
name: 'IndexItemOcurrences',
|
||||
components: {
|
||||
Occurence
|
||||
Occurence,
|
||||
Forme
|
||||
},
|
||||
props: {
|
||||
content: Object
|
||||
},
|
||||
data: () => ({
|
||||
|
||||
tab: 'occurences'
|
||||
}),
|
||||
methods: {
|
||||
ocAsArray (oc) {
|
||||
// not necesseary anymore (KB #758)
|
||||
console.log('Array.isArray(oc)', Array.isArray(oc))
|
||||
return Array.isArray(oc) ? oc : [oc]
|
||||
},
|
||||
onclickTab (tab) {
|
||||
this.tab = tab
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
@click.prevent="onGoToText"
|
||||
@keyup.enter="onGoToText"
|
||||
>
|
||||
{{ oc.title }}
|
||||
{{ oc.title }} <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span>
|
||||
</a>
|
||||
</h4>
|
||||
<!-- <span
|
||||
|
||||
+42
-13
@@ -16,11 +16,16 @@
|
||||
<div v-for="(note, i) in content.note" :key="i" class="note" v-html="note" />
|
||||
</section>
|
||||
|
||||
<section v-if="content.autorities.length" class="autorities">
|
||||
<h3>Autorities</h3>
|
||||
<section v-if="content.attestedForms" class="attested-forms">
|
||||
<h3>formes attestées</h3>
|
||||
<ul>
|
||||
<li v-for="(aut, i) in content.autorities" :key="i">
|
||||
<a :href="aut.identifier" target="_blanck">{{ aut.autority }}</a>
|
||||
<li v-for="(af, i) in content.attestedForms" :key="i">
|
||||
<span class="form">{{ af.title }}</span>
|
||||
<!-- <ul>
|
||||
<li v-for="(uuid, j) in af.uuid" :key="j">
|
||||
<a href="#">{{ uuid }}</a>
|
||||
</li>
|
||||
</ul> -->
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@@ -30,16 +35,11 @@
|
||||
<IndexItemOcurrences v-if="content" :content="content" />
|
||||
|
||||
<template v-if="content" v-slot:nav>
|
||||
<section v-if="content.attestedForms" class="attested-forms">
|
||||
<h3>Attested forms</h3>
|
||||
<section v-if="content.autorities.length" class="autorities">
|
||||
<h3>Autorities</h3>
|
||||
<ul>
|
||||
<li v-for="(af, i) in content.attestedForms" :key="i">
|
||||
<h4>{{ af.title }}</h4>
|
||||
<ul>
|
||||
<li v-for="(uuid, j) in af.uuid" :key="j">
|
||||
<a href="#">{{ uuid }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
<li v-for="(aut, i) in content.autorities" :key="i">
|
||||
<a :href="aut.identifier" target="_blanck">{{ aut.autority }}</a>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@@ -88,6 +88,7 @@ export default {
|
||||
methods: {
|
||||
parseOccurences (content) {
|
||||
console.log('parseOccurences', content)
|
||||
// ! parsing occurences
|
||||
for (let i = 0; i < content.occurences.length; i++) {
|
||||
let ed = content.occurences[i]
|
||||
for (let j = 0; j < ed.occurences.length; j++) {
|
||||
@@ -104,6 +105,34 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
// ! parsing attested-forms
|
||||
for (let f = 0; f < content.attestedForms.length; f++) {
|
||||
let form = content.attestedForms[f]
|
||||
content.attestedForms[f].occurences = []
|
||||
for (let u = 0; u < form.uuid.length; u++) {
|
||||
// ? some UUID are duplicate
|
||||
let oc = {
|
||||
uuid: form.uuid[u]
|
||||
}
|
||||
for (let e = 0; e < content.occurences.length; e++) {
|
||||
let ed = content.occurences[e]
|
||||
for (let o = 0; o < ed.occurences.length; o++) {
|
||||
let occ = ed.occurences[o]
|
||||
if (oc.uuid === occ.uuid && occ.title) {
|
||||
oc.title = occ.title
|
||||
oc.ed = {
|
||||
uuid: ed.item,
|
||||
title: ed.biblio
|
||||
}
|
||||
content.attestedForms[f].occurences.push(oc)
|
||||
// content.attestedForms[f].uuid[u] = oc
|
||||
break
|
||||
}
|
||||
}
|
||||
if (oc.title) break
|
||||
}
|
||||
}
|
||||
}
|
||||
this.content = content
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user