Make all content visible when printing

front/src/components/Content/Chapter.vue

@@ -1,20 +1,12 @@
 <template>
-  <div :class="[ 'body', topic.title ]">    
-    <h3
-      @click="desiresContent = !desiresContent"
-      class="header"
-    >
-      <span class="expandToggle">{{ desiresContent ? '▼ ' : '► '}}</span>
+  <div :class="['body', topic.title]">
+    <h3 @click="desiresContent = !desiresContent" class="header">
+      <span class="expandToggle" v-html="toggleSymbol"></span>
       <span>{{ topic.title }}</span>
     </h3>
-    <div v-if="desiresContent">
-      <span
-        v-for="message in topic.messages"
-        :key="message.id"
-      >
-      <Message
-        :message="message"
-      />
+    <div v-if="desiresContent || print">
+      <span v-for="message in topic.messages" :key="message.id">
+        <Message :message="message" />
         <span>&nbsp;</span>
       </span>
     </div>
@@ -22,22 +14,29 @@
 </template>
 
 <script>
-import Message from './Message'
+import Message from "./Message";
 
 export default {
-  name: 'Chapter',
+  name: "Chapter",
   components: {
     Message,
   },
   data() {
     return {
       desiresContent: false,
-    }
+    };
   },
-  props: [
-    'topic',
-  ],
-}
+  props: ["topic", "print"],
+  computed: {
+    toggleSymbol() {
+      let r = "";
+      if (!this.print) {
+        r = this.desiresContent ? "▼ " : "► ";
+      }
+      return r;
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -45,6 +44,8 @@ export default {
   cursor: pointer;
 }
 @media print {
-  .title { display: none; } 
+  .title {
+    display: none;
+  }
 }
 </style>

front/src/components/Content/index.vue

@@ -1,17 +1,18 @@
 <template>
   <section :class="['content', currentStream]">
-    <h1 class="title"> {{ currentStream.replace('pub-', '') }} </h1>
+    <h1 class="title">{{ currentStream.replace("pub-", "") }}</h1>
     <Chapter
       v-for="topic in sortedTopics"
       :key="topic.title"
       :topic="topic"
+      :print="print"
     />
   </section>
 </template>
 
 <script>
 import { mapGetters, mapState } from "vuex";
-import Chapter from './Chapter.vue';
+import Chapter from "./Chapter.vue";
 
 export default {
   name: "Content",
@@ -23,6 +24,7 @@ export default {
     ...mapGetters(["sortedTopics"]),
   },
   methods: {},
+  props: ["print"],
 };
 </script>
 

front/src/views/Home.vue

@@ -10,7 +10,7 @@
         <button @click="print">Print</button>
       </pane>
       <pane size="55">
-        <Content />
+        <Content :print="!show_ui" />
       </pane>
       <pane v-if="show_ui" size="35" min-size="15">
         <Rules />
@@ -54,7 +54,7 @@ export default {
       this.toggle_ui(null, false);
       setTimeout(() => {
         window.print();
-        if (prev) this.toggle_ui(null, true);
+        // if (prev) this.toggle_ui(null, true);
       }, 1000);
       let paged = new Previewer();
       console.log(paged);
@@ -98,7 +98,7 @@ export default {
   overflow: initial;
 }
 
-iframe {
+.print .content iframe {
   width: 100%;
   height: 100%;
 }