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
assets/css/app.scss
+183 -29
View File
@@ -70,7 +70,7 @@ header[role="banner"]{
overflow: hidden;
}
}
&:hover{
&:hover, &.opened{
>ul>li{
height:1em;
}
@@ -109,10 +109,33 @@ section[role="main-content"]{
}
}
}
$filet_space:8em;
$decallage: 0.5em;
// $filet_space:8em;
// $decallage: 0.5em;
section{
padding-top: $filet_space;
padding-top: 8em;
}
@mixin teasersfilet($filet_space, $decallage){
&:before, &:after{
z-index: 0;
content: "";
position: absolute;
opacity: 0.4;
}
&:before{
border:1px solid $or;
width:calc(100% + #{$filet_space*2 + $decallage*2});
left:- $filet_space - $default_gap/2 -$decallage;
height:calc(100% + #{$filet_space});
top:- $filet_space / 2;
}
&:after{
border:1px solid $rouge;
width:calc(100% + #{$filet_space*2});
left:- $filet_space - $default_gap/2;
height:calc(100% + #{$filet_space + $decallage*2});
top:- $filet_space / 2 - $decallage;
}
}
div.teasers{
display: flex;
@@ -139,25 +162,26 @@ section[role="main-content"]{
}
}
// filets decoratif
&:before, &:after{
z-index: 0;
content: "";
position: absolute;
opacity: 0.4;
@include teasersfilet(8em, 0.5em);
}
&:before{
border:1px solid $or;
width:calc(100% + #{$filet_space*2 + $decallage*2});
left:- $filet_space - $default_gap/2 -$decallage;
height:calc(100% + #{$filet_space});
top:- $filet_space / 2;
// responsive
@media only screen and (max-width: $small-bp) {
header{
h1{
font-size: 5em;
margin:7vh 0 0;
}
h2{
font-size: 1em;
}
}
&:after{
border:1px solid $rouge;
width:calc(100% + #{$filet_space*2});
left:- $filet_space - $default_gap/2;
height:calc(100% + #{$filet_space + $decallage*2});
top:- $filet_space / 2 - $decallage;
section{
padding-top: 4em;
}
div.teasers{
flex-direction: column;
// filets decoratif
@include teasersfilet(4em, 0.5em);
}
}
}
@@ -334,6 +358,14 @@ section[role="main-content"]{
time{
font-weight: 600;
}
@media only screen and (max-width: $small-bp) {
background-color: #fff;
padding: 1em;
box-shadow: 0 0 10px $gris;
*{
pointer-events: none;
}
}
}
}
@@ -344,12 +376,13 @@ section[role="main-content"]{
overflow: hidden;
}
div.tei{
border-left: 1px dotted $grisclair;
padding-left: 1em;
&.active{
border-left: 1px dotted $grisfonce;
@media only screen and (min-width: $small-bp + 1) {
border-left: 1px dotted $grisclair;
padding-left: 1em;
&.active{
border-left: 1px dotted $grisfonce;
}
}
>h1{@include title1blue;}
span.placeName,
span.objectName,
@@ -363,6 +396,9 @@ section[role="main-content"]{
>nav{
padding-bottom: 0;
$pager_h:2em;
span.nav-title{ display:none; }
section#toc{
box-sizing: content-box;
padding:0 0 1em 1.5em;
@@ -421,6 +457,7 @@ section[role="main-content"]{
span.toc-title{font-size: 0.882em;}
}
}
div#page-nav{
height:$pager_h;
overflow: hidden;
@@ -433,6 +470,58 @@ section[role="main-content"]{
}
}
}
// responsive
@media only screen and (max-width: $small-bp) {
position: relative;
>nav{
$top: 45px;
z-index: 2;
position: absolute;
top:$top;
right:0;
background-color: #fff;
width:40%;
box-sizing: border-box;
padding-top: 1em;
padding-bottom: 1em;
height:calc(100% - #{$top});
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
span.nav-title{
display: block;
position: absolute;
top:4.5em; left:-1.8em;
transform: rotateZ(-90deg);
transform-origin: center;
@include fontsans;
font-size: 0.600em;
cursor: pointer;
color: $bleuroi;
svg{
vertical-align: bottom;
transform-origin: center;
transform: scale(0.8) rotate(180deg);
transition: transform 0.3s ease-in-out;
path{
fill: $bleuroi;
}
}
}
&.opened{
box-shadow: -3px -3px 5px $grisclair;
transform: translateX(0);
span.nav-title{
svg{
transform: scale(0.7) rotate(0);
}
}
}
}
}
}
#text{
@@ -621,6 +710,9 @@ footer[role="tools"]{
z-index: 9;
background-color: $gris;
padding:1.2em $side-padding;
@media only screen and (max-width: $small-bp) {
padding:1.2em $side-padding/2;
}
max-height: $list-item-h * 3;
@include accordeon-transition($list-item-h * 3);
>header{
@@ -666,10 +758,38 @@ footer[role="tools"]{
pointer-events: none;
}
}
// responsive
@media only screen and (max-width: $small-bp) {
position: relative;
>header{
padding:0 0 1em 0;
>*{
display: inline-block;
margin-right: 1em;
}
#sorting{
width:10em;
}
}
>section.results-list{
max-height: 15em;
li.result{
flex-basis: 33%;
}
}
>nav{
position: absolute;
top:1.2em; right:1.2em;
}
}
}
#footer-bottom{
z-index: 10;
padding:0 $side-padding;
@media only screen and (max-width: $small-bp) {
padding:0 $side-padding/2;
}
background-color: $bleuroi;
&>*{
// disable grid gap
@@ -720,7 +840,7 @@ footer[role="tools"]{
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: 17.667%;
// flex-basis: percentage(2 / 11);
&:not(:first-of-type){
border-left: 1px solid $grisclair;
@@ -736,13 +856,13 @@ footer[role="tools"]{
display: none;
}
input[type="text"]{
padding:0.3em;
padding:0em 0.3em;
margin:0 0 0.3em 0;
box-sizing: border-box;
font-size: 0.756em;
line-height: 1;
width:100%;
height:1.2em;
height:1.4em;
border:none;
border-radius: 2px;
}
@@ -780,6 +900,40 @@ footer[role="tools"]{
pointer-events: none;
}
}
// responsive
@media only screen and (max-width: $small-bp) {
form{
fieldset{
&.search{
>div{
display: inline-flex;
flex-wrap: nowrap;
width:84%;
>*{
flex-basis: 45%;
margin: 0 0.5em 0 0;
// box-sizing: content-box;
// width:auto!important;
&#keys[type="text"]{
margin-right:1.5em;
}
}
}
span.mdi{
width:1em; height:1em;
margin-top: -0.1em;
margin-left: 0;
}
}
&.filters{
border-left: none;
flex-basis: 32%;
padding: 0.2em 0 1em 1em;
}
}
}
}
}
}
h2{
assets/css/base/_grid-flex.scss
+3 -5
View File
@@ -6,11 +6,9 @@
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
// &:after{
// content:"";
// clear:both;
// display: block;
// }
@media only screen and (max-width: $small-bp) {
flex-wrap:wrap;
}
}
.row{
assets/css/base/_layout.scss
+15 -1
View File
@@ -27,19 +27,27 @@ body{
flex: 0 0 auto;
@extend %layout-element;
padding:1em $side-padding 0 $side-padding;
@media only screen and (max-width: $small-bp) {
padding:1em $side-padding/2 0 $side-padding/2;
}
}
section[role="main-content"]{
flex:1 1 auto;
@extend %layout-element;
overflow: hidden;
>.wrapper{
position: relative;
padding:0 $side-padding 0 $side-padding;
height:100%; max-height:100%;
overflow-y: hidden;
overflow-x: hidden;
@media only screen and (max-width: $small-bp) {
overflow-y: auto;
padding:0 $side-padding/2 0 $side-padding/2;
}
}
.main-content-layout{
max-height: 100%;
height: 100%;
>header,
>section,
>nav{
@@ -54,6 +62,12 @@ body{
overflow-y: auto;
}
}
@media only screen and (max-width: $small-bp) {
.main-content-layout{
display: flex;
flex-direction: column;
}
}
}
footer[role="tools"]{
flex:0 0 auto;
package-lock.json
Generated
+5
View File
@@ -12151,6 +12151,11 @@
"integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
"dev": true
},
"vue2-touch-events": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/vue2-touch-events/-/vue2-touch-events-2.2.1.tgz",
"integrity": "sha512-tdAWuPhFWm2C4nuTRYDb1LtP2288LVDUXgGDAtQgYcMgF9K/Igns0r61NYgPHrRxN548U4wUdYgIDy4+XCxu2w=="
},
"vuex": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.1.tgz",
package.json
+1
View File
@@ -26,6 +26,7 @@
"vue-router": "^3.1.3",
"vue-scrollto": "^2.18.1",
"vue-select": "^3.10.7",
"vue2-touch-events": "^2.2.1",
"vuex": "^3.1.1",
"vuex-router-sync": "^5.0.0"
},
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 }
})
}
}
}