misc, text & toc display
This commit is contained in:
+102
-51
@@ -159,44 +159,44 @@ section[role="main-content"]{
|
||||
margin: 0 0 2em 0;
|
||||
header{
|
||||
h2{
|
||||
margin:0.4em 0;
|
||||
font-size: 1.512em;
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0.4em 0 0.2em;
|
||||
@include title1blue;
|
||||
}
|
||||
h3{
|
||||
margin:0.2em 0;
|
||||
@include fontsans;
|
||||
font-size: 0.753em;
|
||||
font-size: 0.756em;
|
||||
font-weight: 500;
|
||||
}
|
||||
h4{
|
||||
margin:0.1em 0;
|
||||
font-weight: 300;
|
||||
@include fontsans;
|
||||
font-size: 0.753em;
|
||||
&.editions-quantity{
|
||||
color: $rouge;
|
||||
&:after{
|
||||
content: ">>";
|
||||
margin:0 0 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
section.editions{
|
||||
div.editions{
|
||||
ol{
|
||||
padding:0;
|
||||
li{
|
||||
margin:0.7em 1em;
|
||||
}
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
section.editions{
|
||||
div.editions{
|
||||
ol{
|
||||
padding:0;
|
||||
li{
|
||||
margin:0.7em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
h4{
|
||||
margin:0.1em 0;
|
||||
font-weight: 300;
|
||||
@include fontsans;
|
||||
font-size: 0.756em;
|
||||
&.texts-quantity{
|
||||
color: $rouge;
|
||||
// &:after{
|
||||
// content: ">>";
|
||||
// margin:0 0 0 0.5em;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
li{
|
||||
margin:0;
|
||||
margin:0 0 0 1em;
|
||||
h3{
|
||||
margin: 0.5em 0;
|
||||
font-weight: 400;
|
||||
@@ -215,36 +215,87 @@ section[role="main-content"]{
|
||||
}
|
||||
|
||||
#edition-toc{
|
||||
ul{
|
||||
li{
|
||||
ul{
|
||||
// padding-left: 1em;
|
||||
border-left: 1px dotted $or;
|
||||
// min-height: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
li{
|
||||
// min-height: 1em;
|
||||
// border-left: 1px solid red;
|
||||
padding:0 0 0.2em 1em;
|
||||
max-height: 100%;
|
||||
>header,
|
||||
>section,
|
||||
>nav{
|
||||
max-height: 100%;
|
||||
padding-top:1em;
|
||||
padding-bottom:1em;
|
||||
}
|
||||
|
||||
>section,
|
||||
>nav{
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
header{
|
||||
h1{
|
||||
@include title2black;
|
||||
}
|
||||
}
|
||||
|
||||
>section{
|
||||
div#text{
|
||||
// >h1{
|
||||
// @include title1blue;
|
||||
// }
|
||||
div.tei{
|
||||
// >h1{display: none;}
|
||||
>h1{@include title1blue;}
|
||||
span.placeName,
|
||||
span.objectName,
|
||||
span.persName{
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc-title{
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
h2.toc-title{font-size: 1.3em;}
|
||||
h3.toc-title{font-size: 1.2em;}
|
||||
h4.toc-title{font-size: 1.1em;}
|
||||
h5.toc-title{font-size: 1.0em;}
|
||||
h6.toc-title{font-size: 0.9em;}
|
||||
|
||||
span.placeName,
|
||||
span.objectName,
|
||||
span.persName{
|
||||
font-weight: 600;
|
||||
>nav{
|
||||
>section{
|
||||
padding:0 0 0 1.5em;
|
||||
>ul{
|
||||
ul{
|
||||
li{
|
||||
ul{
|
||||
overflow: hidden;
|
||||
&:not(.opened){
|
||||
height:0;
|
||||
}
|
||||
// &.opened{
|
||||
// border: 1px solid red;
|
||||
// }
|
||||
// padding-left: 1em;
|
||||
border-left: 0.5px solid $gris;
|
||||
// min-height: 1em;
|
||||
margin-bottom: 0em;
|
||||
li{
|
||||
// min-height: 1em;
|
||||
// border-left: 1px solid red;
|
||||
padding:0 0 0.2em 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.toc-title{
|
||||
color: $gris;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
&.active,
|
||||
&:hover{
|
||||
color:$grisfonce;
|
||||
}
|
||||
}
|
||||
h2.toc-title{font-size: 0.882em;}
|
||||
h3.toc-title{font-size: 0.882em;}
|
||||
h4.toc-title{font-size: 0.882em;}
|
||||
h5.toc-title{font-size: 0.882em;}
|
||||
h6.toc-title{font-size: 0.882em;}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,3 +27,19 @@ footer[role="tools"] .row>header,
|
||||
footer[role="tools"] .row>nav{
|
||||
@include fontsans;
|
||||
}
|
||||
|
||||
@mixin title1blue {
|
||||
@include fontserif;
|
||||
font-size: 2.268em;
|
||||
color: $bleuroi;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@mixin title2black {
|
||||
@include fontserif;
|
||||
font-size: 1.134em;
|
||||
color: $grisfonce;
|
||||
font-weight: 400;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
@@ -34,8 +34,8 @@ body{
|
||||
overflow: hidden;
|
||||
>.wrapper{
|
||||
padding:0 $side-padding 0 $side-padding;
|
||||
height:100%;
|
||||
overflow-y: auto;
|
||||
height:100%; max-height:100%;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="text">
|
||||
<h1>{{ textdata.content.title }}</h1>
|
||||
<!-- <h1>{{ textdata.meta.title }}</h1> -->
|
||||
<div class="tei" v-html="textdata.content.tei" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<section>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in content"
|
||||
:key="item.uuid"
|
||||
>
|
||||
<TocItem :item="item" :level="1" :editionid="$route.params.id" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import TocItem from './TocItem'
|
||||
|
||||
export default {
|
||||
name: 'EdToc',
|
||||
components: {
|
||||
TocItem
|
||||
},
|
||||
props: {
|
||||
content: Object
|
||||
},
|
||||
data: () => ({
|
||||
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -8,6 +8,7 @@
|
||||
v-if="title"
|
||||
class="toc-title"
|
||||
:uuid="item.uuid"
|
||||
v-bind:class="{active: isActive}"
|
||||
>
|
||||
<a
|
||||
:href="'/edition/'+editionid+'/'+item.uuid"
|
||||
@@ -18,7 +19,11 @@
|
||||
{{ title }}
|
||||
</a>
|
||||
</component>
|
||||
<ul v-if="children.length">
|
||||
<ul
|
||||
v-if="children.length"
|
||||
class="toc-list"
|
||||
v-bind:class="{opened: isOpened}"
|
||||
>
|
||||
<li v-for="child in children" :key="child.uuid">
|
||||
<TocItem :item="child" :level="nextLevel" :editionid="editionid" />
|
||||
</li>
|
||||
@@ -62,6 +67,14 @@ export default {
|
||||
},
|
||||
nextLevel () {
|
||||
return this.level + 1
|
||||
},
|
||||
isActive () {
|
||||
// console.log('Active', this.$route.params.textid, this.item.uuid)
|
||||
return this.$route.params.textid === this.item.uuid
|
||||
},
|
||||
isOpened () {
|
||||
// console.log('opened', this.$route.params.textid.indexOf(this.item.uuid) >= 0)
|
||||
return this.$route.params.textid.indexOf(this.item.uuid) >= 0
|
||||
}
|
||||
},
|
||||
// beforeCreate () {
|
||||
|
||||
+10
-17
@@ -1,25 +1,18 @@
|
||||
<template>
|
||||
<MainContentLayout id="edition-toc">
|
||||
<template v-if="!content" v-slot:header>
|
||||
<template v-if="!content" #header>
|
||||
<span>Loading ...</span>
|
||||
</template>
|
||||
<template v-if="meta" v-slot:header>
|
||||
<h1>{{ meta.title }}</h1>
|
||||
<section>
|
||||
<ul>
|
||||
<li
|
||||
v-for="item in content"
|
||||
:key="item.uuid"
|
||||
>
|
||||
<TocItem :item="item" :level="1" :editionid="$route.params.id" />
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<template v-if="meta" #header>
|
||||
<h1>{{ meta.author }}</h1>
|
||||
</template>
|
||||
|
||||
<!-- default slot -->
|
||||
<EdText v-if="textdata" :textdata="textdata" />
|
||||
|
||||
<template v-slot:nav />
|
||||
<template #nav>
|
||||
<EdToc :content="content" />
|
||||
</template>
|
||||
</MainContentLayout>
|
||||
</template>
|
||||
|
||||
@@ -27,15 +20,15 @@
|
||||
|
||||
import { REST } from 'api/rest-axios'
|
||||
import MainContentLayout from '../components/Layouts/MainContentLayout'
|
||||
import TocItem from '../components/Content/TocItem'
|
||||
import EdText from '../components/Content/EdText'
|
||||
import EdToc from '../components/Content/EdToc'
|
||||
|
||||
export default {
|
||||
name: 'EditionToc',
|
||||
components: {
|
||||
MainContentLayout,
|
||||
TocItem,
|
||||
EdText
|
||||
EdText,
|
||||
EdToc
|
||||
},
|
||||
data: () => ({
|
||||
content: null,
|
||||
|
||||
+25
-18
@@ -10,25 +10,32 @@
|
||||
<header>
|
||||
<h2>{{ corpus.author.title }}</h2>
|
||||
<h3>{{ corpus.author.date }}</h3>
|
||||
<section class="editions">
|
||||
<h4 class="editions-quantity">{{ corpus.author.editionsQuantity }}</h4>
|
||||
<div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/>
|
||||
</section>
|
||||
<h4 class="texts-quantity">{{ corpus.author.textsQuantity }}</h4>
|
||||
</header>
|
||||
<ul class="texts-list">
|
||||
<li v-for="text in corpus.editions.content" :key="text.uuid">
|
||||
<h3>
|
||||
<a
|
||||
:href="text.url"
|
||||
:uuid="text.uuid"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="text.title"
|
||||
/>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
<section class="editions">
|
||||
<h4 class="editions-quantity">
|
||||
{{ corpus.author.editionsQuantity.quantity }} {{ corpus.author.editionsQuantity.unit }}
|
||||
</h4>
|
||||
<!-- <div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/> -->
|
||||
</section>
|
||||
<section class="texts">
|
||||
<h4 class="texts-quantity">
|
||||
{{ corpus.author.textsQuantity.quantity }}
|
||||
{{ corpus.author.textsQuantity.unit }}
|
||||
</h4>
|
||||
<ul class="texts-list">
|
||||
<li v-for="text in corpus.editions.content" :key="text.uuid">
|
||||
<h3>
|
||||
<a
|
||||
:href="text.url"
|
||||
:uuid="text.uuid"
|
||||
@click.prevent="onclick"
|
||||
@keyup.enter="onclick"
|
||||
v-html="text.title"
|
||||
/>
|
||||
</h3>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
<!-- <CorpusItem :item="item" /> -->
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
Reference in New Issue
Block a user