Epigram: improve translation and text box

Added gradients to make scrolling more evident

src/components/partials/epigram/Translation.vue

@@ -17,8 +17,12 @@
         {{ epigram.title }}
 
       </h2>
-      <div class="text-lang">
-        <select v-model="selectedLanguage">
+    </div>
+
+    <div class="text-lang">
+      <label class="text-lang__label" for="selectLanguage">Langue : </label>
+      <div class="text-lang__select-wrap">
+        <select v-model="selectedLanguage" id="selectLanguage">
           <option disabled value="">Langue…</option>
           <option
             v-for="language in availableVersions"
@@ -31,6 +35,7 @@
       </div>
     </div>
 
+    <div class="text-container-top-gradient"></div>
     <div class="text-container">
 
       <div class="text-content">
@@ -46,6 +51,8 @@
         </div>
       </div>
     </div>
+
+    <div class="text-container-bottom-gradient"></div>
   </div>
 </template>
 
@@ -84,7 +91,7 @@ export default {
     self.languages = global.languages
 
     // Set the language
-//    self.setCustomLanguage(self.parseVersion(self.epigram.versions).id_language)
+    self.setCustomLanguage(self.parseVersion(self.epigram.versions).id_language)
   },
   methods: {
     versionLanguage (versions, options) {
@@ -167,7 +174,6 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
 
     h2,
     h3,
-    select
       font-family: $raleway
       font-weight: 600
       color: #5e5e5e
@@ -176,29 +182,55 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
     margin-bottom: 10px
 
     h2
-      font-size: 14px
+      font-size: 12px
       position: relative
       display: inline-block
 
-  .text-title
-
-    h2
-      font-size: 12px
+  .text-lang
+    margin-left: 10%
+    display: flex
+    flex-direction: row
+    align-items: flex-start
+    font-size: 10px
+    text-transform: uppercase
+    font-family: $raleway
+    font-weight: 600
+
+  .text-lang__label
+    margin-right: 1em
+
+  .text-lang__select-wrap
+    // note width and background x-position (145px vs 135px)
+    background: url('/static/img/select-arrow.png') no-repeat 135px center
+    width: 145px
+    overflow: hidden
 
-    .text-lang
-      background: url('/static/img/select-arrow.png') no-repeat left
-      width: 155px
-      padding-left: 10px
-      overflow: hidden
-      margin-left: auto
-
-      select
-        font-size: 10px
-        text-transform: uppercase
-        border: none
-        color: #2c2c2c
-        background: transparent
-        outline: none
+    select
+      font-weight: 300
+      color: #5e5e5e
+      border: none
+      color: #2c2c2c
+      background: transparent
+      outline: none
+
+      option
+        width: 160px // overflow container, hide native arrow
+
+  .text-container-top-gradient
+    display: block
+    width: 100%
+    position: absolute
+    background: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,1) 50%)
+    height: 20px
+    z-index: 99
+  .text-container-bottom-gradient
+    display: block
+    width: 100%
+    position: absolute
+    background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,1) 50%)
+    height: 30px
+    z-index: 99
+    margin-top: -30px
 
   // text-container contains text + author
   .text-container
@@ -206,10 +238,12 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
     margin: 0 auto
     max-height: 40vh
     overflow-y: scroll
+    position: relative
 
     .text-content
       // width: 300px
       // height: 300px
+      padding: 25px 0 // compensate for gradients
       scrollbar-face-color: #2c2c2c
       scrollbar-track-color: #fff
       scrollbar-arrow-color: #fff
@@ -245,7 +279,7 @@ $raleway: 'Raleway', Helvetica, Arial, sans-serif
         font-size: 14px
         color: #2c2c2c
         line-height: 1.5em
-        padding: 20px 0
+        margin-bottom: 20px
 
         &::first-letter
           font-size: 36px