Skip to content
Snippets Groups Projects
Commit d7ea7eaa authored by Louis-Olivier Brassard's avatar Louis-Olivier Brassard
Browse files

Merge branch '39-deplacer-les-listes-vers-la-gauche' into 'develop' 

Resolve "Déplacer les listes vers la gauche"

See merge request anthologie-palatine/anthologie-palatine-client!25
parents 9dd606fc 34aa4d9c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/App.vue
+ 5
− 6
View file @ d7ea7eaa
......@@ -223,7 +223,7 @@ span.bg
.dash
background: #2c2c2c
display: inline-block
vertical-align: middle
vertical-align: top
.page-title-container
position: absolute
......@@ -253,15 +253,14 @@ span.bg
position: relative
.page-subtitle-container
display: flex
align-items: center
margin: 0 0 30px
padding: 15px
margin: 0 0 40px
min-width: 500px
.dash
width: 24px
height: 2px
margin-right: 100px
margin-right: 40px
margin-top: 16px
h2
display: inline-block
......
src/components/AuthorsComponent.vue
+ 31
− 29
View file @ d7ea7eaa
......@@ -9,38 +9,40 @@
<scroll-progress-bar></scroll-progress-bar>
<div class="row scroll row--all">
<div class="col-md-5 col-md-offset-1">
<div class="inner-links">
<router-link :to="{ name: 'home' }">Retour à l’accueil</router-link>
</div>
<div class="page-subtitle-container">
<div class="row row--all scroll">
<div class="col-md-11 col-md-offset-1">
<div class="vertical-list-container">
<div class="vertical-list-wrapper">
<div class="inner-links">
<router-link :to="{ name: 'home' }">
<span class="dash"></span>
Retour à l’accueil
</router-link>
</div>
<div class="page-subtitle-container">
<span class="dash"></span>
<h2>Les auteurs de<br> l'Anthologie Palatine</h2>
</div>
</div>
<div class="col-md-6 pull-right">
<div class="vertical-list-container">
<div class="vertical-list-wrapper">
<h3 v-for="author in dataAuthors">
<span class="bg"></span>
<router-link :to="{ name: 'authorSingle', params: { id: author.id_author }}">
{{ author.versions[0].name }} <sup>{{ author.id_author | romanize }}</sup>
</router-link>
</h3>
<!--
Do not show author epigrams in this view
Issue #9
https://framagit.org/anthologie-palatine/anthologie-palatine-client/issues/9
<ul>
<li v-for="epigram in author.entities">
<router-link :to="{ name: 'epigram', params: { id: epigram.id_entity }}">{{ epigram.title }}</router-link>
</li>
</ul>
-->
</div>
</div>
</div>
<h3 v-for="author in dataAuthors">
<span class="bg"></span>
<router-link :to="{ name: 'authorSingle', params: { id: author.id_author }}">
{{ author.versions[0].name }} <sup>{{ author.id_author | romanize }}</sup>
</router-link>
</h3>
<!--
Do not show author epigrams in this view
Issue #9
https://framagit.org/anthologie-palatine/anthologie-palatine-client/issues/9
<ul>
<li v-for="epigram in author.entities">
<router-link :to="{ name: 'epigram', params: { id: epigram.id_entity }}">{{ epigram.title }}</router-link>
</li>
</ul>
-->
</div>
</div>
</div>
</div>
</div>
</template>
......
src/components/CreditsComponent.vue
+ 196
− 178
View file @ d7ea7eaa
<template>
<div id="credits">
<div class="page-title-container">
<h1>Crédits</h1>
</div>
<div class="row content-container">
<div class="col-md-6 col-md-offset-1">
<div class="desc-container">
<h3>Un projet collaboratif</h3>
<q>
La Plateforme Ouverte des Parcours d'imaginaires (la POP) propose une édition numérique collaborative de l'Anthologie Palatine (AP) dirigée par la <a href="https://ecrituresnumeriques.ca/fr/Objets-de-recherche/">Chaire en Recherche du Canada sur les écritures numériques</a> (CRC) et son équipe interdisciplinaire et internationale (dirigée par Marcello Vitali-Rosati) en collaboration avec Elsa Bouchard et l'équipe d'HETIC. L’Anthologie Palatine est un recueil d’épigrammes grecques dont la source remonte à l’époque hellénistique (323-30 av. J.-C) qui a dès lors exercé une influence majeure sur la littérature, de la Renaissance jusqu’à nos jours. La POP propose une visualisation des versions grecques des épigrammes de l'AP et ses traductions, leurs métadonnées (auteur, date, lieu et mots-clefs) sous la forme de parcours de lecture thématiques. L'usager est invité à collaborer à cette édition en proposant directement sur la plateforme <a href="https://anthologia.ecrituresnumeriques.ca/home">Anthologia</a> des liens faibles, soit en associant à l’épigramme une référence (textuelle, iconographique, musicale, cinématographique ou autre) qui témoigne de l’imaginaire collectif suggéré par l’épigramme et vient ainsi ainsi enrichir le matériel anthologique.
Sur la POP sont disponibles les versions grecques des épigrammes de l'AP et ses traductions (en français, anglais et italien), leurs métadonnées (auteur, date, lieu et mots-clefs) sous la forme de parcours de lecture thématiques. L'usager est invité à collaborer à cette édition en proposant des liens faibles, soit en associant à l’épigramme une référence (textuelle, iconographique, musicale, cinématographique ou autre) qui témoigne de l’imaginaire collectif suggéré par l’épigramme et vient ainsi ainsi enrichir le matériel anthologique. Ce projet invite donc à une appropriation d’un objet littéraire insaisissable soit à comprendre et associer l’AP avec nos propres chimères intérieures.
<br><br>Pour plus d’informations, consultez le <a href="http://anthologia-doc.ecrituresnumeriques.ca/fr_FR/">site web</a> du projet.
</q>
</div>
<div class="credits-container-top-gradient"></div>
<div class="credits-scrollable-container">
<div class="page-title-container">
<h1>Crédits</h1>
</div>
<div class="col-md-4 col-md-offset-1">
<div class="team-container">
<h4><span class="bg"></span>Équipe Université de Montréal <sup></sup></h4>
<ul>
<li>Marcello Vitali-Rosati</li>
<li>Elsa Bouchard</li>
<li>Margot Mellet</li>
<li>Arthur Juchereau</li>
<li>Servanne Monjour</li>
<li>Louis-Olivier Brassard</li>
<li>Enrico Agostini-Marchese</li>
</ul>
<h4><span class="bg"></span>Équipe HETIC <sup></sup></h4>
<ul>
<li><a href="https://www.linkedin.com/in/milenatarriere" target="_blank">Miléna Tarrière : Chef de Projet<span class="dash"></span></a></li>
<li><a href="http://nahelmoussi.com/" target="_blank">Nahel Moussi : UX/UI Designer site web<span class="dash"></span></a></li>
<li><a href="http://raphaelaupee.fr/" target="_blank">Raphaël Aupée : Développeur Back<span class="dash"></span></a></li>
<li><a href="http://paulchagnon.fr/" target="_blank">Paul Chagnon : UX/UI Designer documentation et back office<span class="dash"></span></a></li>
<li><a href="http://valentin-crochemore.fr/" target="_blank">Valentin Crochemore : Développeur Front<span class="dash"></span></a></li>
</ul>
<div class="row content-container">
<div class="col-md-6 col-md-offset-1">
<div class="desc-container">
<h3>Un projet collaboratif</h3>
<q>
La Plateforme Ouverte des Parcours d'imaginaires (la POP) propose une édition numérique collaborative de l'Anthologie Palatine (AP) dirigée par la <a href="https://ecrituresnumeriques.ca/fr/Objets-de-recherche/">Chaire en Recherche du Canada sur les écritures numériques</a> (CRC) et son équipe interdisciplinaire et internationale (dirigée par Marcello Vitali-Rosati) en collaboration avec Elsa Bouchard et l'équipe d'HETIC. L’Anthologie Palatine est un recueil d’épigrammes grecques dont la source remonte à l’époque hellénistique (323-30 av. J.-C) qui a dès lors exercé une influence majeure sur la littérature, de la Renaissance jusqu’à nos jours. La POP propose une visualisation des versions grecques des épigrammes de l'AP et ses traductions, leurs métadonnées (auteur, date, lieu et mots-clefs) sous la forme de parcours de lecture thématiques. L'usager est invité à collaborer à cette édition en proposant directement sur la plateforme <a href="https://anthologia.ecrituresnumeriques.ca/home">Anthologia</a> des liens faibles, soit en associant à l’épigramme une référence (textuelle, iconographique, musicale, cinématographique ou autre) qui témoigne de l’imaginaire collectif suggéré par l’épigramme et vient ainsi ainsi enrichir le matériel anthologique.
Sur la POP sont disponibles les versions grecques des épigrammes de l'AP et ses traductions (en français, anglais et italien), leurs métadonnées (auteur, date, lieu et mots-clefs) sous la forme de parcours de lecture thématiques. L'usager est invité à collaborer à cette édition en proposant des liens faibles, soit en associant à l’épigramme une référence (textuelle, iconographique, musicale, cinématographique ou autre) qui témoigne de l’imaginaire collectif suggéré par l’épigramme et vient ainsi ainsi enrichir le matériel anthologique. Ce projet invite donc à une appropriation d’un objet littéraire insaisissable soit à comprendre et associer l’AP avec nos propres chimères intérieures.
<br><br>Pour plus d’informations, consultez le <a href="http://anthologia-doc.ecrituresnumeriques.ca/fr_FR/">site web</a> du projet.
</q>
</div>
</div>
<div class="col-md-4 col-md-offset-1">
<div class="team-container">
<h4><span class="bg"></span>Équipe Université de Montréal <sup></sup></h4>
<ul>
<li>Marcello Vitali-Rosati</li>
<li>Elsa Bouchard</li>
<li>Margot Mellet</li>
<li>Arthur Juchereau</li>
<li>Servanne Monjour</li>
<li>Louis-Olivier Brassard</li>
<li>Enrico Agostini-Marchese</li>
</ul>
<h4><span class="bg"></span>Équipe HETIC <sup></sup></h4>
<ul>
<li><a href="https://www.linkedin.com/in/milenatarriere" target="_blank">Miléna Tarrière : Chef de Projet<span class="dash"></span></a></li>
<li><a href="http://nahelmoussi.com/" target="_blank">Nahel Moussi : UX/UI Designer site web<span class="dash"></span></a></li>
<li><a href="http://raphaelaupee.fr/" target="_blank">Raphaël Aupée : Développeur Back<span class="dash"></span></a></li>
<li><a href="http://paulchagnon.fr/" target="_blank">Paul Chagnon : UX/UI Designer documentation et back office<span class="dash"></span></a></li>
<li><a href="http://valentin-crochemore.fr/" target="_blank">Valentin Crochemore : Développeur Front<span class="dash"></span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="page-subtitle-container">
<span class="dash"></span>
<h2>L’Université de<br> Montréal & HETIC.</h2>
<div class="row">
<div class="col-md-11 col-md-offset-1">
<div class="page-subtitle-container">
<span class="dash"></span>
<h2>L’Université de<br> Montréal & HETIC.</h2>
</div>
</div>
</div>
</div>
<div class="credits-container-bottom-gradient"></div>
</div>
</template>
......@@ -92,144 +97,74 @@ export default {
$hover: .5s all linear
$raleway: 'Raileway', Helvetica, Arial, sans-serif
.row
>div:first-child
position: initial
.content-container
//position: absolute
//top: 50%
//transform: translate3d(0, -50%, 0)
#credits
display: flex
flex-direction: column
justify-content: space-between
position: absolute;
overflow-x: hidden
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: scroll;
.desc-container
color: #2c2c2c
padding: 40px 20px
overflow: scroll
h3
font-style: italic
font-size: 18px
padding-left: 100px
margin-top: 0
letter-spacing: 0.02em
q
font-size: 14px
margin-top: 1.2em
display: inline-block
quotes: "\201C""\201D""\2018""\2019"
line-height: 1.5em
&:before
top: -6px
&:after
content: no-close-quote
a
.dash
height: 1px
display: inline-table
position: relative
background: none
&:before
content: ''
display: block
position: absolute
left: 0
bottom: 0
height: 1px
width: 0
transition: width 0s ease, background .5s ease
&:after
content: ''
display: block
position: absolute
right: 0
bottom: 0
height: 1px
width: 0
background: #337ab7
transition: width .5s ease
&:hover,
&:focus
text-decoration: none
color: #337ab7
.dash
&:before
width: 100%
background: #337ab7
transition: width .5s ease
&:after
width: 100%
background: transparent
transition: all 0s ease
.team-container
margin-top: 64px
h4
padding-left: 10px
font-size: 10px
font-weight: 700
color: rgba(44, 44, 44, 0.5)
font-family: $raleway
position: relative
margin-top: 0
text-transform: uppercase
letter-spacing: 0.1em
sup
font-size: 8px
color: #2c2c2c
font-family: initial
padding-left: 5px
ul
list-style: none
padding: 0 20px
margin-top: 30px
margin-bottom: 30px
display: inline-block
vertical-align: top
li
font-size: 12px
line-height: 2em
height: 24px
height: 100%
.credits-scrollable-container
display: flex
flex-direction: column
justify-content: space-between
height: 100%
overflow-x: hidden
overflow-y: scroll;
.credits-container-top-gradient
display: block
width: 100%
position: absolute
background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 80%)
height: 40px
z-index: 99
.credits-container-bottom-gradient
display: block
width: 100%
position: absolute
background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 80%)
height: 40px
z-index: 99
margin-top: -40px
.row
>div:first-child
position: initial
.content-container
//position: absolute
//top: 50%
//transform: translate3d(0, -50%, 0)
.desc-container
color: #2c2c2c
padding: 40px 20px
overflow: scroll
h3
font-style: italic
font-size: 18px
padding-left: 100px
margin-top: 0
letter-spacing: 0.02em
q
font-size: 14px
margin-top: 1.2em
display: inline-block
quotes: "\201C""\201D""\2018""\2019"
line-height: 1.5em
&:before
top: -6px
&:after
content: no-close-quote
a
color: #2c2c2c
transition: $hover
display: inline-block
.dash
width: 100%
height: 1px
display: inline-table
position: relative
background: none
vertical-align: top
&:before
content: ''
......@@ -249,18 +184,19 @@ $raleway: 'Raileway', Helvetica, Arial, sans-serif
bottom: 0
height: 1px
width: 0
background: #2c2c2c
background: #337ab7
transition: width .5s ease
&:hover,
&:focus
text-decoration: none
color: #000000
color: #337ab7
.dash
&:before
width: 100%
background: #2c2c2c
background: #337ab7
transition: width .5s ease
&:after
......@@ -269,8 +205,90 @@ $raleway: 'Raileway', Helvetica, Arial, sans-serif
transition: all 0s ease
.team-container
margin-top: 64px
h4
padding-left: 10px
font-size: 10px
font-weight: 700
color: rgba(44, 44, 44, 0.5)
font-family: $raleway
position: relative
margin-top: 0
text-transform: uppercase
letter-spacing: 0.1em
sup
font-size: 8px
color: #2c2c2c
font-family: initial
padding-left: 5px
ul
list-style: none
padding: 0 20px
margin-top: 30px
margin-bottom: 30px
display: inline-block
vertical-align: top
li
font-size: 12px
line-height: 2em
height: 24px
a
color: #2c2c2c
transition: $hover
display: inline-block
.dash
width: 100%
height: 1px
display: inline-table
position: relative
background: none
vertical-align: top
&:before
content: ''
display: block
position: absolute
left: 0
bottom: 0
height: 1px
width: 0
transition: width 0s ease, background .5s ease
&:after
content: ''
display: block
position: absolute
right: 0
bottom: 0
height: 1px
width: 0
background: #2c2c2c
transition: width .5s ease
&:hover,
&:focus
text-decoration: none
color: #000000
.dash
&:before
width: 100%
background: #2c2c2c
transition: width .5s ease
&:after
width: 100%
background: transparent
transition: all 0s ease
.page-subtitle-container
margin-top: 0
// .page-subtitle-container
// margin-top: 0
</style>
src/components/ParcoursAllComponent.vue
+ 13
− 15
View file @ d7ea7eaa
......@@ -8,23 +8,21 @@
<scroll-progress-bar></scroll-progress-bar>
<div class="row scroll row--all">
<div class="col-md-5 col-md-offset-1">
<div class="inner-links">
<router-link :to="{ name: 'home' }">
<span class="dash"></span>
Retour à l’accueil
</router-link>
</div>
<div class="page-subtitle-container">
<span class="dash"></span>
<h2>Parcours de lecture</h2>
</div>
</div>
<div class="col-md-6 pull-right">
<div class="col-md-11 pull-right">
<div class="vertical-list-container">
<div class="vertical-list-wrapper">
<div class="inner-links">
<router-link :to="{ name: 'home' }">
<span class="dash"></span>
Retour à l’accueil
</router-link>
</div>
<div class="page-subtitle-container">
<span class="dash"></span>
<h2>Parcours de lecture</h2>
</div>
<h3 v-for="parcours in parcoursAll">
<router-link :to="{ name: 'parcoursIndex', params: { parcoursId: parcours.id_keyword } }">
<span class="bg"></span>{{ parcours.versions[0].title }} <sup>{{ parcours.entities.length | romanize }}</sup>
......
src/components/partials/epigram/Translation.vue
+ 7
− 0
View file @ d7ea7eaa
......@@ -212,6 +212,11 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
color: #2c2c2c
background: transparent
outline: none
&:focus
outline: 1px dotted #fff
option
outline: 1px dotted #fff
option
width: 160px // overflow container, hide native arrow
......@@ -236,6 +241,7 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
.text-container
padding-left: 10%
margin: 0 auto
min-height: 33vh
max-height: 40vh
overflow-y: scroll
position: relative
......@@ -291,6 +297,7 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
width: 10px
height: 1px
margin-right: 10px
margin-top: 8px
p
display: inline-block
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment