brighten text, better quote table representation with QuoteList, better quote/scene for-loop keys

client/src/components/Episode.vue

@@ -1,15 +1,15 @@
 <template>
     <div>
-        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode}`" class="mb-4">
+        <b-card :title="`Season ${this.$route.params.season} Episode ${this.$route.params.episode} \
+        - ${episode != null ? episode.title : ''}`" class="mb-4">
             <span v-if="episode">
                 {{ episode.description }}
             </span>
         </b-card>
-        <b-card v-for="(scene) in episode.scenes" :key="scene.text" class="mb-1" body-class="pb-0">
+        <b-card v-for="(scene, scene_index) in episode.scenes" :key="`scene-${scene_index}`"
+                class="mb-1" body-class="pb-0">
             <b-card-text>
-                <p v-for="quote in scene.quotes" :key="quote.text">
-                    <strong>{{ quote.speaker }}</strong>: {{ quote.text }}
-                </p>
+                <QuoteList :quotes="scene.quotes"></QuoteList>
             </b-card-text>
         </b-card>
     </div>
@@ -17,9 +17,11 @@
 
 <script>
 import axios from 'axios';
+import QuoteList from './QuoteList.vue';
 
 export default {
   name: 'Episode',
+  components: { QuoteList },
   data() {
     return {
       episode: null,

client/src/components/Home.vue

@@ -11,7 +11,7 @@
 
 <style>
     .card {
-        color: #888888;
+        color: #b3b3b3;
         background-color: #161616;
         border-bottom: 1px solid rgba(0, 0, 0, 0.88);
         border-radius: 0;

client/src/components/QuoteList.vue

@@ -0,0 +1,42 @@
+<template>
+    <table class="quote-list mb-4 px-3 w-100">
+        <tr v-for="(quote, index) in quotes" :key="`quote-${index}`">
+            <td class="quote-speaker pl-3" v-if="quote.speaker">
+                <span class="my-3">
+                    {{ quote.speaker }}
+                </span>
+            </td>
+            <td class="quote-text w-100">{{ quote.text }}</td>
+        </tr>
+    </table>
+</template>
+
+<style lang="scss">
+    tr {
+        &:not(:first-child) {
+            border-top: 1px solid rgba(255, 255, 255, 0.1);
+        }
+    }
+
+    .quote-list > tr {
+        white-space: nowrap;
+    }
+
+    .quote-text {
+        white-space: normal;
+    }
+
+    .quote-speaker {
+        /*min-width: 100px;*/
+        padding-right: 1em;
+        font-weight: 600;
+        vertical-align: text-top;
+        text-align: right;
+    }
+</style>
+
+<script>
+export default {
+  props: ['quotes'],
+};
+</script>

client/src/components/SeasonList.vue

@@ -25,7 +25,7 @@
 </template>
 
 <style lang="scss">
-    .season-title { color: #888888; }
+    .season-title { color: #a2a2a2; }
 
     .accordion.list-group-item {
         border-radius: 0;
@@ -59,7 +59,7 @@
         background-color: inherit;
         /*border: 3px solid #0a0a0a;*/
         /*border-radius: 0;*/
-        padding-bottom: 0px;
+        padding-bottom: 0;
         /*&:not(:first-child) { border-top-width: 0; }*/
         /*&:not(:last-child) { border-bottom-width: 0; }*/
     }
@@ -67,7 +67,7 @@
     .list-group-item {
         border-color: rgba(24, 24, 24, 0.82);
         background-color: #111111;
-        color: grey;
+        color: #a0a0a0;
         border-left-width: 0;
         border-right-width: 0;
     }

server/api.py

@@ -47,7 +47,6 @@ def api_csrf():
 
 @current_app.route('/api/episode/<int:season>/<int:episode>/')
 def api_episode(season: int, episode: int):
-    print(data[season - 1]['episodes'][episode - 1])
     return jsonify(data[season - 1]['episodes'][episode - 1])