From 4603e780f182d1276a0a47c479eaf40f5ea42448 Mon Sep 17 00:00:00 2001
From: Louis-Olivier Brassard <louis@loupbrun.ca>
Date: Tue, 14 May 2019 14:25:37 -0400
Subject: [PATCH] Credits: fix layout (#31) make the thing scrollable
---
src/components/CreditsComponent.vue | 11 +-
.../partials/epigramApi/Characters.vue | 141 ----------
.../partials/epigramApi/GreekText.vue | 171 -----------
src/components/partials/epigramApi/Notes.vue | 93 ------
.../partials/epigramApi/Pagination.vue | 126 ---------
src/components/partials/epigramApi/Player.vue | 231 ---------------
.../partials/epigramApi/Translation.vue | 265 ------------------
7 files changed, 7 insertions(+), 1031 deletions(-)
delete mode 100644 src/components/partials/epigramApi/Characters.vue
delete mode 100644 src/components/partials/epigramApi/GreekText.vue
delete mode 100644 src/components/partials/epigramApi/Notes.vue
delete mode 100644 src/components/partials/epigramApi/Pagination.vue
delete mode 100644 src/components/partials/epigramApi/Player.vue
delete mode 100644 src/components/partials/epigramApi/Translation.vue
diff --git a/src/components/CreditsComponent.vue b/src/components/CreditsComponent.vue
index 32e87a9..29c1b18 100644
--- a/src/components/CreditsComponent.vue
+++ b/src/components/CreditsComponent.vue
@@ -102,17 +102,20 @@ $raleway: 'Raileway', Helvetica, Arial, sans-serif
//transform: translate3d(0, -50%, 0)
#credits
- width: 100%
- height: 100%
display: flex
flex-direction: column
justify-content: flex-end
+ position: absolute;
+ overflow-x: hidden
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: scroll;
.desc-container
color: #2c2c2c
- margin-top: 20vh
padding: 40px 20px
- max-height: 66vh
overflow: scroll
diff --git a/src/components/partials/epigramApi/Characters.vue b/src/components/partials/epigramApi/Characters.vue
deleted file mode 100644
index 2d0c3b0..0000000
--- a/src/components/partials/epigramApi/Characters.vue
+++ /dev/null
@@ -1,141 +0,0 @@
-<template>
- <div class="characters"
- v-if="data.keywords.length > 0"
- >
- <div v-if="data.notes.length == 0" style="margin-top: 230px"></div>
- <p @click="onCharactersDropdownClick">
- Les personnages
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="border-bottom"></span>
- </p>
- <div class="dropdown-drop">
- <ul>
- <li v-for="character in data.keywords">
- <a
- @click="onCharactersListClick"
- v-bind:id="'character-' + character.keywords_translations[0].title + '-list'"
- v-bind:data-click="'character-' + character.keywords_translations[0].title"
- href="#"
- >
- <span class="dash"></span>{{ character.keywords_translations[0].title | cglobal.apitalize }}
- </a>
- </li>
- </ul>
- </div>
- <div class="dropdown-text-container">
- <span class="glyphicon glyphicon-chevron-left"></span>
- <div class="dropdown-text-wrapper">
- <div v-for="character in data.keywords"
- v-bind:id="'character-' + character.keywords_translations[0].title"
- class="dropdown-text"
- >
- <div class="dropdown-title">
- <h4>{{ character.keywords_translations[0].title | cglobal.apitalize }}</h4>
- </div>
- <div class="dropdown-desc">
- <q v-html="character.keywords_translations[0].description"></q>
- </div>
- </div>
- </div>
- <span class="glyphicon glyphicon-chevron-right"></span>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- propsData: {
- data: Object
- },
- methods: {
- onCharactersDropdownClick: function () {
- var charactersContainer = $('.characters')
- var charactersDropdown = charactersContainer.children('.dropdown-drop')
- var charactersTextContainer = charactersContainer.children('.dropdown-text-container')
- var charactersText = charactersTextContainer.find('.dropdown-text')
- var charactersDropdownArrow = charactersContainer.children('p').children('.glyphicon')
- var charactersTextArrows = charactersTextContainer.children('.glyphicon')
- if (!charactersContainer.hasClass('droped')) {
- charactersContainer.addClass('droped')
- charactersDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
- charactersDropdown.addClass('visible')
- charactersTextContainer.addClass('visible')
- } else {
- charactersContainer.removeClass('droped')
- charactersDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
- charactersDropdown.removeClass('visible')
- charactersTextContainer.removeClass('visible').fadeOut('500')
- charactersTextArrows.fadeOut('500')
- charactersText.removeClass('visible').fadeOut('500')
- }
- },
- onCharactersListClick: function (e) {
- e.preventDefault()
- var targetId = e.target.id
- var thisListClicked = $('.dropdown-drop a#' + targetId)
- var thisListClickedData = e.target.dataset.click
- var thisListClickedParent = thisListClicked.parents('.dropdown-drop')
- var thisListClickedTextContainer = thisListClickedParent.siblings('.dropdown-text-container')
- var thisListClickedDropWrapper = thisListClickedTextContainer.children('.dropdown-text-wrapper')
- var thisListClickedDropText = thisListClickedDropWrapper.children('.dropdown-text')
- var thisListClickedDropTextLength = thisListClickedDropText.length
- var thisListClickedArrowLeft = thisListClickedTextContainer.children('.glyphicon-chevron-left')
- var thisListClickedArrowRight = thisListClickedTextContainer.children('.glyphicon-chevron-right')
- thisListClickedTextContainer.css('display', 'flex')
- $('#' + thisListClickedData).addClass('visible').fadeIn('500')
- var thisListClickedDropTextVisibleIndex = $('#' + thisListClickedData).index()
- thisListClickedArrowLeft.show()
- thisListClickedArrowRight.show()
- if (thisListClickedDropTextVisibleIndex === 0) {
- thisListClickedArrowLeft.hide()
- }
- if (thisListClickedDropTextVisibleIndex === thisListClickedDropTextLength - 1) {
- thisListClickedArrowRight.hide()
- }
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-$hover: .7s all ease-out
-
-.characters
- margin-top: 150px
-
- .dropdown-drop
- ul
- list-style: none
- padding: 0
-
- li
- a
- font-size: 14px
- opacity: 0.5
- transition: $hover
- color: #2c2c2c
-
- .dash
- width: 0
- height: 1px
- margin-right: 0
- transition: $hover
-
- &:hover,
- &:focus
- opacity: 1
- text-decoration: none
-
- .dash
- width: 13px
- margin-right: 5px
-
- .dropdown-text-container
- opacity: 0
-
- &.visible
- opacity: 1
-</style>
diff --git a/src/components/partials/epigramApi/GreekText.vue b/src/components/partials/epigramApi/GreekText.vue
deleted file mode 100644
index 759245a..0000000
--- a/src/components/partials/epigramApi/GreekText.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<template>
- <div class="greek-text">
- <div class="greek-translation dropdown">
- <p @click="onGreekDropdownClick">
- Texte source grec
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="border-bottom"></span>
- </p>
- <div class="dropdown-drop">
- <div class="dropdown-content">
-<!--
- <div
- @click="onGreekMuteClick"
- v-if="epigram.texts[0].text_translations[0].sound_url"
- class="mute greek-mute"
- >
- <span class="glyphicon glyphicon-volume-up"></span>
--->
- <p v-html="texteGrec"></p>
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- props: {
- epigram: Object
- },
- created () {
- var self = this
- self.$nextTick(function () {
- console.log('[GreekText.vue] self.epigram:', self.epigram)
-// self.$set(self, 'epigram', this.epigram)
- })
- },
- computed: {
- texteGrec () {
- var self = this
- return self.epigram.versions[0].text_translated
- }
- },
- methods: {
- onGreekDropdownClick: function () {
- var greekContainer = $('.greek-translation')
- var greekDropdown = greekContainer.children('.dropdown-drop')
- var greekDropdownArrow = greekContainer.children('p').children('.glyphicon')
- if (!greekContainer.hasClass('droped')) {
- greekContainer.addClass('droped')
- greekDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
- greekDropdown.addClass('visible')
- } else {
- greekContainer.removeClass('droped')
- greekDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
- greekContainer.children('.dropdown-drop').removeClass('visible')
- }
- },
- onGreekMuteClick: function () {
- var controlBtn, playBtn, frenchSound, greekSound, frenchMute
- var greekMute = $('.greek-mute .glyphicon')
- var audioLength = $('audio').length - 1
- controlBtn = $('.control')
- playBtn = controlBtn.children('.play-button')
- frenchMute = $('.french-mute .glyphicon')
- greekSound = $('audio')[audioLength]
- frenchMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- if (audioLength !== 0) {
- frenchSound = $('audio')[0]
- if (frenchSound.currentTime > 0) {
- frenchSound.pause()
- frenchSound.currentTime = 0
- frenchSound.volume = 1
- }
- }
- if (greekSound.paused) {
- greekSound.play()
- controlBtn
- .removeClass('french-sound-playing')
- .addClass('greek-sound-playing')
- playBtn.removeClass('paused')
- } else {
- if (greekSound.volume === 1) {
- greekSound.volume = 0
- greekMute.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off')
- } else {
- greekSound.volume = 1
- greekMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- }
- }
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-.greek-text
- .greek-translation
- display: inline-block
-
- >p
- cursor: pointer
- display: inline-block
- font-style: italic
- font-size: 18px
- color: #2c2c2c
- margin: 0
- letter-spacing: 0.02em
-
- span.glyphicon
- font-size: 10px
- margin-left: 14px
-
-
- .dropdown-drop
- width: 350px
- margin-left: -35px
-
- .mute
- margin-top: 8px
-
- .dropdown-content
- p
- font-size: 14px
- color: #2c2c2c
- line-height: 1.5em
- padding-top: 20px
- padding-bottom: 10px
- margin: 0
- display: inline-block
- word-wrap: break-word
- width: 89%
- height: 228px
- overflow-y: auto
- scrollbar-face-color: #2c2c2c
- scrollbar-track-color: #fff
- scrollbar-arrow-color: #fff
-
- &::first-letter
- font-size: 36px
-
- &:hover
- &::-webkit-scrollbar-thumb,
- &::-webkit-scrollbar-track
- visibility: visible
-
- &::-webkit-scrollbar
- background: #fff
- width: 3px
-
- &::-webkit-scrollbar-button
- display: none
-
- &::-webkit-scrollbar-thumb
- background: rgba(44, 44, 44, .3)
- visibility: hidden
-
- &:hover
- background: rgba(44, 44, 44, .8)
-
- &:active
- background: rgba(44, 44, 44, 1)
-
- &::-webkit-scrollbar-track
- border-bottom: 1px solid #2c2c2c
- border-top: 1px solid #2c2c2c
- visibility: hidden
-</style>
diff --git a/src/components/partials/epigramApi/Notes.vue b/src/components/partials/epigramApi/Notes.vue
deleted file mode 100644
index 83383a0..0000000
--- a/src/components/partials/epigramApi/Notes.vue
+++ /dev/null
@@ -1,93 +0,0 @@
-<template>
- <div class="notes-partial">
- <div
- v-if="data.notes.length > 0"
- class="notes dropdown"
- >
- <p @click="onNotesDropdownClick">
- Les notes
- <span class="glyphicon glyphicon-chevron-right"></span>
- <span class="border-bottom"></span>
- </p>
- <div class="dropdown-drop">
- <div class="dropdown-text-container">
- <span class="glyphicon glyphicon-chevron-left"></span>
- <div class="dropdown-text-wrapper">
- <div
- v-for="note in data.notes"
- v-bind:id="'note' + note.note_translations[0].id"
- class="dropdown-text"
- >
- <div class="dropdown-desc">
- <q v-html="note.note_translations[0].text"></q>
- </div>
- </div>
- </div>
- <span class="glyphicon glyphicon-chevron-right"></span>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- propsData: {
- data: Object
- },
- methods: {
- onNotesDropdownClick: function () {
- var notesContainer = $('.notes')
- var notesDropdown = notesContainer.children('.dropdown-drop')
- var notesDropdownText = notesDropdown.find('.dropdown-text')
- var notesDropdownArrow = notesContainer.children('p').children('.glyphicon')
- var notesTextArrows = notesDropdown.find('.glyphicon')
- var notesTextArrowLeft = notesDropdown.find('.glyphicon-chevron-left')
- var notesTextArrowRight = notesDropdown.find('.glyphicon-chevron-right')
- if (!notesContainer.hasClass('droped')) {
- notesContainer.addClass('droped')
- notesDropdownArrow.addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right')
- notesDropdown.addClass('visible')
- notesDropdownText.first().addClass('visible').fadeIn('500')
- notesTextArrowRight.show()
- notesTextArrowLeft.hide()
- if (notesDropdownText.length === 1) {
- notesTextArrowRight.hide()
- }
- } else {
- notesContainer.removeClass('droped')
- notesDropdownArrow.addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
- notesDropdown.removeClass('visible')
- notesDropdownText.removeClass('visible').fadeOut('500')
- notesTextArrows.fadeOut('500')
- }
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-.notes-partial
- .notes
- margin-top: 60px
-
- .dropdown-drop
- width: 100%
- padding-left: 20px;
- margin-left: -20px;
-
- .dropdown-text-container
- display: flex
- background: none
-
- .dropdown-text-wrapper
- width: 170px
-
- .dropdown-text
- .dropdown-desc
- q
- &:before
- top: -10px
-</style>
diff --git a/src/components/partials/epigramApi/Pagination.vue b/src/components/partials/epigramApi/Pagination.vue
deleted file mode 100644
index 688857b..0000000
--- a/src/components/partials/epigramApi/Pagination.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
- <div class="col-md-1 col-md-offset-10 pagination-partial">
- <div class="index">
- <p class="total">
- {{ length | numberize }}
- </p>
- <span class="separator"></span>
- <p class="current">
- {{ epigram | numberize }}
- </p>
- </div>
- <div class="arrows">
- <span>
- <router-link :to="{ name: 'epigram', params: { id: epigram - 1 }}"
- @click="onPaginationClick"
- v-show="!(epigram == 1)">
- <span class="glyphicon glyphicon-chevron-left"></span>
- </router-link>
- </span>
- <span class="separator"></span>
- <span>
- <router-link :to="{ name: 'epigram', params: { id: epigram + 1 }}"
- @click="onPaginationClick"
- v-show="!(epigram == length)">
- <span class="glyphicon glyphicon-chevron-right"></span>
- </router-link>
- </span>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- props: {
- data: Object,
- epigram: Number,
- length: Number
- },
- methods: {
- onPaginationClick: function () {
- $('.notes.dropdown > p .glyphicon').addClass('glyphicon-chevron-right').removeClass('glyphicon-chevron-down')
- $('.notes').removeClass('droped')
- $('.notes .dropdown-drop').removeClass('visible')
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-$hover: .5s all ease-out
-
-.index
- position: relative
-
- p
- position: absolute
- color: #2c2c2c
-
- &.total
- font-weight: 700
- font-size: 16px
- right: 0
- top: 0
-
- &.current
- font-size: 48px
- right: 23px
- top: 10px
-
- span.separator
- position: absolute
- right: 5px
- top: 18px
- width: 30px
- height: 1px
- transform: rotate(45deg)
- background: #2c2c2c
-
-.arrows
- width: 55px
- float: right
- margin-top: 90px
- display: flex
- justify-content: space-between
- align-items: center
-
- &:after
- clear: both
-
- .separator
- height: 10px
- width: 1px
- background: #2c2c2c
- display: inline-block
- opacity: 0.15
-
- >span
- a
- font-size: 10px
- color: #2c2c2c
- opacity: 0.3
- transition: $hover
- display: block
-
- &:hover
- text-decoration: none
- opacity: 1
-
- &:first-child,
- &:last-child
- flex-grow: 2
-
- &:first-child
- a
- &:hover
- transform: translateX(-5px)
-
- &:last-child
- text-align: right
-
- a
- &:hover
- transform: translateX(5px)
-</style>
diff --git a/src/components/partials/epigramApi/Player.vue b/src/components/partials/epigramApi/Player.vue
deleted file mode 100644
index 49fdd0c..0000000
--- a/src/components/partials/epigramApi/Player.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
- <div class="player">
- <div
- v-if="data.texts[0].text_translations[0].sound_url"
- class="player-container"
- >
- <div
- @click="onControlClick"
- class="control"
- >
- <span class="no-play-button-border"></span>
- <a
- @click="ePreventDefault"
- class="play-button paused"
- href="#"
- >
- <div class="left"></div>
- <div class="right"></div>
- <div class="triangle-1"></div>
- <div class="triangle-2"></div>
- </a>
- </div>
- <div class="progressbar">
- <span class="progress"></span>
- </div>
- </div>
- <div
- v-if="data.sounds"
- class="sound"
- >
- <audio
- v-if="data.texts[0].text_translations[0].sound_url"
- @timeupdate="onAudioTimeUpdate"
- @ended="onAudioEnded"
- class="greek-sound"
- >
- <source
- :src="data.texts[0].text_translations[0].sound_url"
- type="audio/mpeg"
- >
- </audio>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- propsData: {
- data: Object
- },
- methods: {
- onControlClick: function () {
- var playBtn, frenchSound, greekSound
- var controlBtn = $('.control')
- playBtn = controlBtn.children('.play-button')
- if ($('audio').length !== 1) {
- frenchSound = $('audio')[0]
- }
- greekSound = $('audio')[$('audio').length - 1]
- if (controlBtn.hasClass('french-sound-playing')) {
- if (!frenchSound.paused) {
- frenchSound.pause()
- playBtn.addClass('paused')
- $('.french-mute span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- frenchSound.volume = 1
- } else {
- frenchSound.play()
- playBtn.removeClass('paused')
- }
- } else if (controlBtn.hasClass('greek-sound-playing')) {
- if (!greekSound.paused) {
- greekSound.pause()
- playBtn.addClass('paused')
- $('.greek-mute span').removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- greekSound.volume = 1
- } else {
- greekSound.play()
- playBtn.removeClass('paused')
- }
- } else {
- $('audio')[0].play()
- playBtn.removeClass('paused')
- if ($('audio').length === 1) {
- controlBtn.addClass('greek-sound-playing')
- } else {
- controlBtn.addClass('french-sound-playing')
- }
- }
- },
- onAudioTimeUpdate: function () {
- var currentTime, duration, frenchSound, greekSound, progressBar, controlBtn
- controlBtn = $('.control')
- if ($('audio').length !== 1) {
- frenchSound = $('audio')[0]
- }
- greekSound = $('audio')[$('audio').length - 1]
- progressBar = $('.progress')
- if (controlBtn.hasClass('french-sound-playing')) {
- currentTime = frenchSound.currentTime
- duration = frenchSound.duration
- } else {
- currentTime = greekSound.currentTime
- duration = greekSound.duration
- }
- var percent = currentTime / duration * 100
- progressBar.css('height', percent + '%')
- },
- onAudioEnded: function () {
- var controlBtn, playBtn, frenchSound, greekSound, muteBtn, progressBar
- controlBtn = $('.control')
- playBtn = controlBtn.children('.play-button')
- muteBtn = $('.mute span')
- if ($('audio').length !== 1) {
- frenchSound = $('audio')[0]
- frenchSound.volume = 1
- }
- greekSound = $('audio')[$('audio').length - 1]
- progressBar = $('.progress')
- progressBar.css('height', '0')
- controlBtn.removeClass('french-sound-playing').removeClass('greek-sound-playing')
- playBtn.addClass('paused')
- muteBtn.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- greekSound.volume = 1
- },
- ePreventDefault: function (e) {
- e.preventDefault()
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-$hover: .5s all ease-out
-
-.player-container
- width: 45px
- text-align: center
- margin-right: 50px
-
-.control
- cursor: pointer
- width: 100%
- height: 45px
- border-radius: 50%
- display: flex
- border: 1px solid #2c2c2c
- justify-content: center
- align-items: center
- position: relative
-
- .no-play-button-border
- position: absolute
- background: transparent
- width: 11px
- height: 13px
- top: 50%
- left: 50%
- transform: translate3d(-50%, -50%, 0)
- border-bottom: 2px solid #fff
- border-top: 2px solid #fff
- z-index: 2
-
- .play-button
- height: 10px
- width: 10px
- display: inline-block
- overflow: hidden
- position: relative
-
- .left,
- .right
- height: 10px
- background: #2c2c2c
- transition: all 0.25s ease
- width: 3px
-
- .left
- float: left
- overflow: hidden
-
- .right
- float: right
-
- .triangle-1
- transform: translate(0, -100%)
-
- .triangle-2
- transform: translate(0, 100%)
-
- .triangle-1,
- .triangle-2
- position: absolute
- top: 0
- right: 0
- background: transparent
- width: 0
- height: 0
- border-right: 4px solid #fff
- border-top: 5px solid #2c2c2c
- border-bottom: 5px solid #2c2c2c
- transition: transform 0.25s ease
-
- &.paused
- .left,
- .right
- width: 50%
-
- .triangle-1,
- .triangle-2
- border-right: 10px solid #fff
-
- .triangle-1
- transform: translate(0, -50%)
-
- .triangle-2
- transform: translate(0, 50%)
-
-.progressbar
- height: 300px
- width: 1px
- display: inline-block
- background: rgba(44, 44, 44, 0.2)
-
- .progress
- display: inline-block
- width: 100%
- height: 0
- background: #2c2c2c
-</style>
diff --git a/src/components/partials/epigramApi/Translation.vue b/src/components/partials/epigramApi/Translation.vue
deleted file mode 100644
index d3e4988..0000000
--- a/src/components/partials/epigramApi/Translation.vue
+++ /dev/null
@@ -1,265 +0,0 @@
-<template>
- <div class="translation">
- <div
- @click="onFrenchMuteClick"
- v-if="epigram.sounds"
- class="mute french-mute"
- >
- <span class="glyphicon glyphicon-volume-up"></span>
- </div>
- <div class="text-container">
- <div class="text-theme"
- v-show="theme">
- <h2>
- <span class="bg"></span>
- {{ theme }}
- </h2>
- </div>
- <div class="text-title">
- <h3>{{ epigram.title }}</h3>
- <div
- v-if="epigram.versions"
- class="text-lang"
- >
- <select v-model="selectedEpigram">
- <option v-for="version in epigram.versions.options"
- v-bind:value="version.id_entity - 1"
- >
- {{ version.text_translated }}
- </option>
- </select>
- </div>
- </div>
- <div class="text-content">
- <p v-if="epigram.versions"
- v-html="epigramTranslated"></p>
- </div>
- <div class="text-author" v-if="epigram.authors">
- <span class="dash"></span>
- <p v-for="(author, index) in epigram.authors">
- <span v-show="index !== 0">/</span>
- {{ author.name ? author.name : '(Auteur)' }}
- </p>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import $ from 'jquery'
-
-export default {
- props: {
- epigram: Object,
- authors: Array,
- languages: Array,
- selectedEpigram: Object
- },
- computed: {
- epigramTranslated: function () {
- var self = this
- var prefIndex = 0
-
- // determine which version is our favourite
- prefIndex = self.getPrefVersion()
-
- return self.epigram.versions[prefIndex].text_translated
- }
- },
- created () {
- var self = this
- self.$nextTick(function () {
- console.log('[Translation.vue] this.epigram', this.epigram)
- self.getLanguages()
- })
- },
- methods: {
- getLanguages: function () {
- var self = this
- self.$http.get(global.api + 'languages')
- .then(function (response) {
- var languages = JSON.parse(response.bodyText)
- self.$set(self, 'languages', languages)
- console.log('self.langs -- ', self.languages)
-// self.getPrefVersion()
- })
- },
- getPrefVersion: function (prefFamily, prefName) {
- // Get the closest version based on the lang preference
- // Currently, hard-coded preference is Français Moderne
- // Falls back to other versions of the same family
- // Then falls back to other langs if non available
- var self = this
- var prefIndex = 0 // defauls to first position in array
- var preferredFamily = prefFamily || 'Français'
- var preferredName = prefName || 'moderne'
-
- if (!self.languages) {
- // ugh, we can't do much without the languages loaded...
-
- return prefIndex
- }
-
- self.languages.each(function (language, index) {
- if (language.family === preferredFamily) {
- // language family match (general)
- prefIndex = index
-
- // bonus: language name match (specific in a language family)
- if (language.name === preferredName) {
- prefIndex = index
- }
- }
- })
-
- return prefIndex
- },
- onFrenchMuteClick: function () {
- var controlBtn, playBtn, frenchSound, greekSound, greekMute
- var frenchMute = $('.french-mute .glyphicon')
- controlBtn = $('.control')
- playBtn = controlBtn.children('.play-button')
- frenchSound = $('audio')[0]
- greekSound = $('audio')[1]
- greekMute = $('.greek-mute .glyphicon')
- greekMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- if (greekSound.currentTime > 0) {
- greekSound.pause()
- greekSound.currentTime = 0
- greekSound.volume = 1
- }
- if (frenchSound.paused) {
- frenchSound.play()
- controlBtn
- .removeClass('greek-sound-playing')
- .addClass('french-sound-playing')
- playBtn.removeClass('paused')
- } else {
- if (frenchSound.volume === 1) {
- frenchSound.volume = 0
- frenchMute.removeClass('glyphicon-volume-up').addClass('glyphicon-volume-off')
- } else {
- frenchSound.volume = 1
- frenchMute.removeClass('glyphicon-volume-off').addClass('glyphicon-volume-up')
- }
- }
- }
- }
-}
-</script>
-
-<style lang="sass" scoped>
-$raleway: 'Raleway', Helvetica, Arial, sans-serif
-
-.translation
-
- .text-container
- display: inline-block
- width: 86%
-
- .text-theme,
- .text-title
- text-align: center
-
- h2,
- h3,
- select
- font-family: $raleway
- font-weight: 600
- color: #5e5e5e
-
- .text-theme
- h2
- font-size: 14px
- position: relative
- display: inline-block
-
- span.bg
- left: -10px
-
- .text-title
- position: relative
-
- h3
- font-size: 12px
-
- .text-lang
- background: url('/assets/img/select-arrow.png') no-repeat right
- width: 34px
- overflow: hidden
- position: absolute
- top: 0
- right: 0
- margin-top: -5px
-
- select
- font-size: 10px
- text-transform: uppercase
- border: none
- color: #2c2c2c
- width: 55px
- background: transparent
- outline: none
-
-
- .text-content
- width: 300px
- height: 300px
- overflow-y: auto
- margin: 0 auto
- scrollbar-face-color: #2c2c2c
- scrollbar-track-color: #fff
- scrollbar-arrow-color: #fff
-
- &:hover
- &::-webkit-scrollbar-thumb,
- &::-webkit-scrollbar-track
- visibility: visible
-
- &::-webkit-scrollbar
- background: #fff
- width: 3px
-
- &::-webkit-scrollbar-button
- display: none
-
- &::-webkit-scrollbar-thumb
- background: rgba(44, 44, 44, .3)
- visibility: hidden
-
- &:hover
- background: rgba(44, 44, 44, .8)
-
- &:active
- background: rgba(44, 44, 44, 1)
-
- &::-webkit-scrollbar-track
- border-bottom: 1px solid #2c2c2c
- border-top: 1px solid #2c2c2c
- visibility: hidden
-
- p
- font-size: 14px
- color: #2c2c2c
- line-height: 1.5em
- padding: 20px 0
-
- &::first-letter
- font-size: 36px
-
- .text-author
- margin-top: 20px
-
- .dash
- width: 10px
- height: 1px
- margin-right: 10px
-
- p
- display: inline-block
- margin: 0
- font-style: italic
- font-size: 14px
- color: #2c2c2c
- font-family: "Times New Roman", sans-serif
-</style>
--
GitLab