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

#2092 responsive

Browse Source
This commit is contained in:
bachir
2023-06-19 22:36:36 +02:00
parent 24aaa7b2c3
commit 2dccff4fb8
7 changed files with 202 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+127 -7
View File
@@ -98,12 +98,14 @@ header[role="banner"]{
section[role="main-content"]{
#home{
header{
margin:15vh 0 0;
text-align: center;
padding: 1em 0;
h1{
color: $bleuroi;
font-size: 8em;
font-weight: 300;
margin:15vh 0 0;
margin: 0;
}
h2{
color: $or;
@@ -420,12 +422,6 @@ section[role="main-content"]{
}
}
#corpus{
}
.index{
}
.index-item{
header{
h1{
@@ -631,6 +627,7 @@ section[role="main-content"]{
#edition{
>header{
position: relative;
span.header-title{ display:none; }
h1{
@include title1blue;
}
@@ -674,7 +671,59 @@ section[role="main-content"]{
}
}
}
}
// responsive
@media only screen and (max-width: $small-bp), (orientation: portrait) {
>header{
$top: 45px;
z-index: 110;
position: absolute;
top:$top;
left:0;
background-color: #fff;
width:percentage(5/$default_sum);
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.header-title{
display: block;
position: absolute;
top:4.5em; right:-1em;
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(0);
transition: transform 0.3s ease-in-out;
path{
fill: $bleuroi;
}
}
}
&.opened{
box-shadow: 3px 3px 5px $grisclair;
transform: translateX(0);
span.header-title{
svg{
transform: scale(0.7) rotate(180deg);
}
}
}
}
}
$pagenum_w:1em;
>section{
@@ -724,6 +773,7 @@ section[role="main-content"]{
cursor: pointer;
}
}
// todo what about touch is hover will work ?
&:hover .popup{
display: block;
opacity: 1;
@@ -1337,6 +1387,7 @@ section[role="main-content"]{
margin-bottom: $base-line * 0.4;
}
nav.toc{
span.sommaire-title{ display:none; }
li{
a{
font-size: 1em;
@@ -1344,6 +1395,60 @@ section[role="main-content"]{
font-weight: 300;
}
}
// responsive
@media only screen and (max-width: $small-bp), (orientation: portrait) {
$top: 80px;
z-index: 110;
position: absolute;
top:$top;
left:0;
background-color: #fff;
width:percentage(7/$default_sum);
box-sizing: border-box;
padding-top: 1em;
padding-bottom: 1em;
height:calc(100% - #{$top});
overflow-y: auto;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
>div.wrapper{
padding-right: 2em;
height: 100%;
overflow-y: auto;
}
span.sommaire-title{
display: block;
position: absolute;
top:4.5em; right:-2em;
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(0);
transition: transform 0.3s ease-in-out;
path{
fill: $bleuroi;
}
}
}
&.opened{
box-shadow: 3px 3px 5px $grisclair;
transform: translateX(0);
span.sommaire-title{
svg{
transform: scale(0.7) rotate(180deg);
}
}
}
}
}
}
>section{
@@ -1483,6 +1588,9 @@ footer[role="tools"]{
div.results-details{
line-height: $base-line * 0.5;
>*{
display: block;
}
.search-keys{
font-size: 0.756em;
font-weight: 500;
@@ -1537,6 +1645,14 @@ footer[role="tools"]{
display: inline-block;
margin-right: 1em;
}
div.results-details{
>*{
display: inline-block;
&:not(:last-child){
padding-right: 1em;
}
}
}
#sorting{
width:10em;
}
@@ -1558,6 +1674,7 @@ footer[role="tools"]{
padding:0 $side-padding;
@media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:0 $side-padding/2;
flex-wrap: nowrap;
}
background-color: $bleuroi;
&>*{
@@ -1580,6 +1697,9 @@ footer[role="tools"]{
width: calc(100% + $side-padding);
margin-left:-$side-padding;
padding:0.3em 0.5em 0.3em $side-padding;
@media only screen and (max-width: $small-bp), (orientation: portrait) {
padding: 0.3em 0em 0.3em 2em;
}
}
&.history .wrapper{
background-color: $or;
assets/css/base/_layout.scss
+1
View File
@@ -93,6 +93,7 @@ body{
.main-content-layout{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}
}
src/components/Layouts/MainContentLayout.vue
+2 -1
View File
@@ -3,7 +3,7 @@
:id="id"
class="full-width med-row large-row main-content-layout"
>
<header class="med-col-3 large-col-3">
<header class="med-col-3 large-col-3" :class="{ opened: headeropened }">
<slot name="header" />
</header>
@@ -35,6 +35,7 @@ export default {
required: true
},
reftoscrollto: { type: String },
headeropened: { type: Boolean },
navopened: { type: Boolean }
},
watch: {
src/components/nav/Results.vue
+1 -1
View File
@@ -9,7 +9,7 @@
<header class="small-col-12 med-col-1 large-col-1">
<h2>Resultats</h2>
<div class="results-details">
<span class="search-keys">{{ searchedKeys }}</span><br>
<span class="search-keys">{{ searchedKeys }}</span>
<span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
</div>
<v-select
src/pages/Edition.vue
+21
View File
@@ -3,13 +3,23 @@
id="edition"
:reftoscrollto="reftoscrollto"
:navopened="navopened"
:headeropened="headeropened"
@onCenterScrolled="onCenterScrolled"
>
<!-- <transition name="fade" mode="out-in"> -->
<template v-if="!corpusLoaded" #header>
<span class="loading">Chargement ...</span>
</template>
<template v-else #header>
<span
class="header-title"
@click.prevent="onOpenCloseHeader"
@keyup.enter="onOpenCloseHeader"
>
<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>
Notice
</span>
<h1>
<router-link :to="{ name:'edition', params: { id: editionid }}">{{ title }}</router-link>
</h1>
@@ -207,6 +217,7 @@ export default {
//
pagination: null,
//
headeropened: false,
navopened: false,
//
entities_displayed: false
@@ -524,6 +535,16 @@ export default {
onOpenCloseNav (e) {
console.log('onOpenCloseNav', e)
this.navopened = !this.navopened
if (this.navopened) {
this.headeropened = false
}
},
onOpenCloseHeader (e) {
console.log('onOpenCloseHeader', e)
this.headeropened = !this.headeropened
if (this.headeropened) {
this.navopened = false
}
},
onClickTooltip (e) {
console.log(`onClickTooltip index: ${e.target.dataset.index}, uuid: ${e.target.dataset.uuid}`)
src/pages/Home.vue
+20 -15
View File
@@ -10,22 +10,27 @@
<section class="row">
<div class="col-2" />
<div class="col-8 teasers">
<div v-if="colophonHome.length && colophonHome.length > 0" class="wrapper">
<article
v-for="page in colophonHome"
:key="page.uuid"
>
<!-- <h1>{{ page.title }}</h1> -->
<div v-html="trimedTei(page.tei)" />
<a
:href="page.url"
class="readmore"
@click.prevent="onclick(page.uuid)"
@keyup.enter="onclick(page.uuid)"
<div class="wrapper">
<template v-if="!colophonHome || colophonHome.length <= 0">
<span class="loading">Chargement ...</span>
</template>
<template v-else>
<article
v-for="page in colophonHome"
:key="page.uuid"
>
<span>Lire la suite</span>
</a>
</article>
<!-- <h1>{{ page.title }}</h1> -->
<div v-html="trimedTei(page.tei)" />
<a
:href="page.url"
class="readmore"
@click.prevent="onclick(page.uuid)"
@keyup.enter="onclick(page.uuid)"
>
<span>Lire la suite</span>
</a>
</article>
</template>
</div>
</div>
<div class="col-2" />
src/pages/Static.vue
+30 -15
View File
@@ -7,21 +7,31 @@
<span v-if="!page" class="loading">Chargement ...</span>
<template v-else>
<h1>{{ page.title }}</h1>
<nav v-if="toc" class="toc">
<ul>
<li
v-for="(item,index) in toc"
:key="index"
>
<a
:href="'#' + item.hash"
@click.prevent="onclickTOC"
@keyup.enter="onclickTOC"
<nav v-if="toc" class="toc" :class="{ opened: sommaireopened }">
<span
class="sommaire-title"
@click.prevent="onOpenCloseSommaire"
@keyup.enter="onOpenCloseSommaire"
>
<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>
<div class="wrapper">
<ul>
<li
v-for="(item,index) in toc"
:key="index"
>
{{ item.title }}
</a>
</li>
</ul>
<a
:href="'#' + item.hash"
@click.prevent="onclickTOC"
@keyup.enter="onclickTOC"
>
{{ item.title }}
</a>
</li>
</ul>
</div>
</nav>
</template>
</template>
@@ -45,7 +55,8 @@ export default {
uuid: null,
page: null,
toc: [],
reftoscrollto: null
reftoscrollto: null,
sommaireopened: false
}),
computed: {
...mapState({
@@ -112,6 +123,10 @@ export default {
})
})
},
onOpenCloseSommaire (e) {
console.log('onOpenCloseSommaire', e)
this.sommaireopened = !this.sommaireopened
},
onclickTOC (e) {
console.log('onClickTOC', e, e.target.hash)
this.reftoscrollto = e.target.hash