bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive almost done

Browse Source
This commit is contained in:
bachir
2020-07-27 19:18:07 +02:00
parent 2ce63fa320
commit 682d4686ad
13 changed files with 287 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Content/EdText.vue
+17 -4
View File
@@ -77,6 +77,9 @@ export default {
` @keyup.enter="onClickRef"` +
` @mouseover="onHoverLink"` +
` @mouseleave="onLeaveLink"` +
// prevent click on this one
` v-touch:tap.prevent="onTapLink"` +
` v-touch-class="'tapped'"` +
`>${linkparts[4]}` +
`<sup class="mdi mdi-message-text-outline" />` +
`</a>`
@@ -114,10 +117,12 @@ export default {
// },
onClickRef (e) {
console.log('onClickRef(e)', e)
this.$router.push({
name: e.target.dataset.index,
params: { id: e.target.dataset.uuid }
})
if (e.target.classList.contains('tapped')) {
this.$router.push({
name: e.target.dataset.index,
params: { id: e.target.dataset.uuid }
})
}
},
onHoverLink (e) {
console.log('EdText onHoverLink(e)', e)
@@ -127,6 +132,14 @@ export default {
rect: e.target.getBoundingClientRect()
})
},
onTapLink (e) {
console.log('EdText onTapLink(e)', e)
this.$emit('onHoverLink', {
uuid: e.target.dataset.uuid,
index: e.target.dataset.index,
rect: e.target.getBoundingClientRect()
})
},
onLeaveLink (e) {
// console.log('EdText onLeaveLink(e)', e)
this.$emit('onLeaveLink')
src/components/Layouts/MainContentLayout.vue
+6 -5
View File
@@ -1,17 +1,17 @@
<template>
<div
:id="id"
class="full-width row main-content-layout"
class="full-width med-row large-row main-content-layout"
>
<header class="col-3">
<header class="med-col-3 large-col-3">
<slot name="header" />
</header>
<section ref="scrollablecenter" class="col-6" @scroll.passive="onScrollCenter">
<section ref="scrollablecenter" class="med-col-6 large-col-6" @scroll.passive="onScrollCenter">
<slot />
</section>
<nav class="col-3">
<nav class="med-col-3 large-col-3" :class="{ opened: navopened }">
<slot name="nav" />
</nav>
@@ -26,7 +26,8 @@ export default {
type: String,
required: true
},
reftoscrollto: { type: String }
reftoscrollto: { type: String },
navopened: { type: Boolean }
},
watch: {
reftoscrollto: function (newref, oldref) {
src/components/nav/HeaderMenu.vue
+14 -3
View File
@@ -2,8 +2,13 @@
<nav id="header-menu">
<ul v-if="corpusLoaded">
<li><router-link to="/corpus">Corpus</router-link></li>
<li>
<span>Indexs</span>
<li :class="{ opened: indexOpened }">
<span
@click.prevent="onClickIndex"
@keyup.enter="onClickIndex"
>
Indexs
</span>
<ul>
<li><router-link to="/nominum">Personnes</router-link></li>
<li><router-link to="/locorum">Lieux</router-link></li>
@@ -28,12 +33,18 @@ import { mapState } from 'vuex'
export default {
name: 'HeaderMenu',
data: () => ({
indexOpened: false
}),
computed: {
...mapState({
corpusLoaded: state => state.Corpus.corpusLoaded
})
},
methods: {
onClickIndex (e) {
console.log('onClickIndex')
this.indexOpened = !this.indexOpened
}
}
}
src/components/nav/Results.vue
+3 -3
View File
@@ -6,9 +6,9 @@
class="row"
:class="{ loading: isloading }"
>
<header class="col-1">
<header class="small-col-12 med-col-1 large-col-1">
<h2>Resultats</h2>
<span class="search-keys">{{ searchedKeys }}</span><br>
<span class="search-keys">{{ searchedKeys }}</span>
<span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
<v-select
id="sorting"
@@ -21,7 +21,7 @@
@input="onSortingSelected"
/>
</header>
<section class="col-10 results-list">
<section class="small-col-12 med-col-10 large-col-10 results-list">
<div class="wrapper">
<ul v-if="results.length">
<li v-for="result in results" :key="result.uuid" class="result">
src/components/nav/Search.vue
+4 -4
View File
@@ -1,7 +1,7 @@
<template>
<div id="search" class="col-11" :class="{ loading: isloading }">
<form class="search-form row">
<fieldset class="search">
<fieldset class="search small-col-10 med-col-2 large-col-2">
<div>
<label for="keys">Search</label>
<input
@@ -37,7 +37,7 @@
title="chargement"
/>
</fieldset>
<fieldset v-if="filters.persons.length" class="filters filters-nominum col-2">
<fieldset v-if="filters.persons.length" class="filters filters-nominum small-col-4 med-col-2 large-col-2">
<v-select
id="filters-nominum"
type="select"
@@ -50,7 +50,7 @@
@input="onFiltersNominumSelected"
/>
</fieldset>
<fieldset v-if="filters.places.length" class="filters filters-locorum col-2">
<fieldset v-if="filters.places.length" class="filters filters-locorum small-col-4 med-col-2 large-col-2">
<v-select
id="filters-locorum"
type="select"
@@ -63,7 +63,7 @@
@input="onFiltersLocorumSelected"
/>
</fieldset>
<fieldset v-if="filters.objects.length" class="filters filters-operum col-2">
<fieldset v-if="filters.objects.length" class="filters filters-operum small-col-4 med-col-2 large-col-2">
<v-select
id="filters-operum"
type="select"
src/index.js
+2 -3
View File
@@ -6,6 +6,7 @@ import Meta from 'vue-meta'
import InfiniteLoading from 'vue-infinite-loading'
import VueScrollTo from 'vue-scrollto'
import VueSelect from 'vue-select'
import Vue2TouchEvents from 'vue2-touch-events'
import App from './App'
@@ -15,7 +16,6 @@ import 'vue-select/src/scss/vue-select.scss'
import 'assets/css/app.scss'
Vue.use(Meta)
Vue.use(InfiniteLoading, {
props: {
spinner: 'spiral'
@@ -30,10 +30,9 @@ Vue.use(InfiniteLoading, {
// /* other settings need to configure */
// }
})
Vue.use(VueScrollTo)
Vue.component('v-select', VueSelect)
Vue.use(Vue2TouchEvents)
window.apipath = process.env === 'prod' ? `http://${window.location.hostname}/api` : 'http://localhost:8984'
src/pages/Bibliographie.vue
+1 -1
View File
@@ -29,7 +29,7 @@
<!-- default slot -->
<!-- expressions or manifestations list -->
<template v-if="!this.uuid">
<template v-if="!uuid">
<ul class="item-list">
<li v-for="item in content" :key="item.uuid">
<h2>
src/pages/Edition.vue
+33 -2
View File
@@ -1,5 +1,10 @@
<template>
<MainContentLayout id="edition" :reftoscrollto="reftoscrollto" @onCenterScrolled="onCenterScrolled">
<MainContentLayout
id="edition"
:reftoscrollto="reftoscrollto"
:navopened="navopened"
@onCenterScrolled="onCenterScrolled"
>
<template v-if="!content" #header>
<span>Loading ...</span>
</template>
@@ -13,6 +18,10 @@
v-if="indexitem"
class="index-tooltip"
:style="{ top:tooltip_top + 'px' }"
:data-index="indexitem.index"
:data-uuid="indexitem.uuid"
@click.prevent="onClickTooltip"
@keyup.enter="onClickTooltip"
>
<span v-if="indexitem == 'loading'">Loading ...</span>
<template v-if="indexitem !== 'loading'">
@@ -61,6 +70,14 @@
</div>
<template #nav>
<span
class="nav-title"
@click.prevent="onOpenCloseNav"
@keyup.enter="onOpenCloseNav"
>
<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>
Sommaire
</span>
<EdToc
id="toc"
:toc="toc"
@@ -126,7 +143,9 @@ export default {
toc: null,
flattoc: null,
//
pagination: null
pagination: null,
//
navopened: false
}),
computed: {
...mapState({
@@ -307,6 +326,7 @@ export default {
console.log('index tooltip REST: data', data)
if (this.indexitem === 'loading') {
this.indexitem = data.content
this.indexitem.index = item.index
}
})
.catch((error) => {
@@ -350,6 +370,17 @@ export default {
scrollToPage (p) {
// console.log('scrollToPage', p)
this.reftoscrollto = `span[role="pageBreak"][id="${p.code}"]`
},
onOpenCloseNav (e) {
console.log('onOpenCloseNav', e)
this.navopened = !this.navopened
},
onClickTooltip (e) {
console.log(`onClickTooltip index: ${e.target.dataset.index}, uuid: ${e.target.dataset.uuid}`)
this.$router.push({
name: e.target.dataset.index,
params: { id: e.target.dataset.uuid }
})
}
}
}