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

transversal links to nav history #786, restored scrolls

Browse Source
This commit is contained in:
bachir
2020-07-21 17:38:27 +02:00
parent 44388adaf8
commit f0b6a79bc7
6 changed files with 133 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+71 -66
View File
@@ -6,6 +6,25 @@
@import './base/fonts';
@import './base/transitions';
/* The emerging W3C standard
that is currently Firefox-only */
* {
scrollbar-width: thin;
scrollbar-color: $grisclair rgba(255,255,255,0);
}
/* Works on Chrome/Edge/Safari */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track {
background: rgba(255,255,255,0);
}
*::-webkit-scrollbar-thumb {
background-color: $grisclair;
border-radius: 20px;
border: none;
}
body{
color: #1a1a1a;
@@ -479,8 +498,48 @@ section[role="main-content"]{
}
footer[role="tools"]{
$list-item-h: 5.3em;
$list-item-h: 5em;
@mixin resultItem{
box-sizing: border-box;
// we are only on 10 colls as 2 are occupied by sides
flex-basis: percentage(2/($default_sum - 2));
height: $list-item-h;
overflow: hidden;
padding-bottom: 1em;
padding-right: $default_gap;
article{
max-height: 100%;
overflow: hidden;
}
article.item{
h1{
@include title3black;
font-weight: 600;
max-width: 95%;
}
h2{
@include title3black;
text-transform: none;
}
span{
font-size: 0.882em;
}
// .preview{
// font-size: 0.882em;
// margin:0;
// code{
// @include fontserif;
// background-color: lighten(desaturate($rouge,20%), 20%);
// padding:0 0.2em;
// }
// }
}
}
#history{
z-index: 8;
background-color: $or;
@@ -496,7 +555,7 @@ footer[role="tools"]{
height:100%;
// hidding the scrollbar
overflow-y: auto;
width:calc(100% + 1em);
// width:calc(100% + 1em);
padding-right: 1em;
>ul{
padding:0;
@@ -506,35 +565,7 @@ footer[role="tools"]{
}
}
li.item{
box-sizing: border-box;
// we are only on 10 colls as 2 are occupied by sides
flex-basis: percentage(2/($default_sum - 2));
height: $list-item-h;
overflow: hidden;
padding-bottom: 1em;
padding-right: $default_gap;
article{
max-height: 100%;
overflow: hidden;
}
}
article.history.item{
header{
h1{
font-size: 0.882em;
font-weight: normal;
margin:0 0 0.5em 0;
}
}
.extract{
p{
font-size: 0.882em;
margin:0;
}
code{
background-color: lighten(desaturate($rouge,20%), 20%);
}
}
@include resultItem;
}
}
}
@@ -560,7 +591,7 @@ footer[role="tools"]{
height:100%;
// hidding the scrollbar
overflow-y: auto;
width:calc(100% + 1em);
// width:calc(100% + 1em);
padding-right: 1em;
>ul{
padding:0;
@@ -570,39 +601,7 @@ footer[role="tools"]{
}
}
li.result{
box-sizing: border-box;
// we are only on 10 colls as 2 are occupied by sides
flex-basis: percentage(2/($default_sum - 2));
height: $list-item-h;
overflow: hidden;
padding-bottom: 1em;
padding-right: $default_gap;
article{
max-height: 100%;
overflow: hidden;
}
}
article.result.item{
h1{
@include title3black;
font-weight: 600;
}
h2{
@include title3black;
text-transform: none;
}
span{
font-size: 0.882em;
}
// .preview{
// font-size: 0.882em;
// margin:0;
// code{
// @include fontserif;
// background-color: lighten(desaturate($rouge,20%), 20%);
// padding:0 0.2em;
// }
// }
@include resultItem;
}
.infinite-loading-container{
// TODO: how to center the loading
@@ -652,12 +651,18 @@ footer[role="tools"]{
color: #fff;
background-color: $bleuroi;
form{
// padding: 0.7em;
padding: 0;
// display: flex;
// flex-direction: row;
// flex-wrap: wrap;
fieldset{
padding:0.7em 1em;
border: none;
box-sizing:border-box;
// width correction as row is not the same width as others in the page
// flex-basis: percentage(2/($default_sum - 1));
flex-basis: 17.667%;
// flex-basis: percentage(2 / 11);
&:not(:first-of-type){
border-left: 1px solid $grisclair;
}
src/components/Content/HistoryItem.vue
+21 -12
View File
@@ -1,16 +1,25 @@
<template>
<article class="history item">
<header>
<h1>
<a
:href="item.url"
@click.prevent="onclick"
@keyup.enter="onclick"
v-html="item.textId"
/>
</h1>
</header>
<div class="extract" v-html="item.extract" />
<article class="result item">
<h1>
<a
:href="'/edition/'+item.textId+'/'+item.uuid"
@click.prevent="onclick"
@keyup.enter="onclick"
v-html="item.title"
/>
</h1>
<h2>
<a
:href="'/edition/'+item.textId+'/'+item.uuid"
@click.prevent="onclick"
@keyup.enter="onclick"
v-html="item.editionTitle"
/>
</h2>
<!-- <p v-if="preview" class="preview" v-html="preview" /> -->
<aside>
<span>Pagination</span> | <span>Nbr mots</span>
</aside>
</article>
</template>
src/components/Content/Occurence.vue
+20 -1
View File
@@ -37,6 +37,7 @@
<script>
import { REST } from 'api/rest-axios'
import { mapState, mapActions } from 'vuex'
export default {
name: 'Occurence',
@@ -49,6 +50,14 @@ export default {
isopened: false,
tei: ''
}),
computed: {
...mapState({
editionsbyuuid: state => state.Corpus.editionsbyuuid
}),
editionTitle () {
return this.editionsbyuuid[this.ed.item].title
}
},
created () {
console.log('occurence beforeCreate')
REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
@@ -66,9 +75,19 @@ export default {
})
},
methods: {
...mapActions({
addHistoryItem: 'History/addItem'
}),
onGoToText (e) {
console.log('clicked on text occurence', e)
console.log('clicked on text occurence', e, this.oc.title, this.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
})
this.$router.push({
name: `editiontext`,
params: {
src/components/Content/ResultItem.vue
+13 -1
View File
@@ -60,7 +60,19 @@ export default {
}),
onclick () {
console.log('clicked on result item', this.result)
this.addHistoryItem(this.result)
this.addHistoryItem({
id: this.result.textId,
textid: this.result.uuid,
title: this.result.title[0],
editionTitle: this.editionTitle
})
this.$router.push({
name: `editiontext`,
params: {
id: this.result.textId,
textid: this.result.uuid
}
})
}
}
}
src/components/nav/Search.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div id="search" class="col-11">
<form class="search-form row">
<fieldset class="search col-2">
<fieldset class="search">
<div>
<label for="keys">Search</label>
<input
src/store/modules/history.js
+7 -7
View File
@@ -29,13 +29,13 @@ export default {
console.log('history add item', item, router)
commit('addItem', item)
commit('setOpened', true)
router.push({
name: `editiontext`,
params: {
id: item.textId,
textid: item.uuid
}
})
// router.push({
// name: `editiontext`,
// params: {
// id: item.textId,
// textid: item.uuid
// }
// })
},
navigateToItem ({ dispatch, commit, state }, item) {
console.log('history navigate to item', item, router)