More printing stuff

front/src/components/Content/Message.vue

@@ -1,7 +1,7 @@
 <template>
   <span :class="classes" class="message">
     <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
-    <div class="reactions">
+    <div class="reactions ui">
       <template v-for="reaction in reactions" :key="reaction">
         {{ reaction }}
       </template>
@@ -27,15 +27,15 @@ export default {
       c = c.replaceAll('src="', 'src="' + url);
       c = c.replaceAll('href="/', 'href="' + url + "/");
 
-      const referrers = this.$store.state
-      .topics.find(t => t.title == this.message.subject)
-      .messages.filter(
-        (m) =>
-          m.responseTo &&
-          m.responseTo.id == this.message.id &&
-          m.responseTo.sender_id == this.message.sender_id &&
-          this.message.content.includes(m.responseTo.quote)
-      );
+      const referrers = this.$store.state.topics
+        .find((t) => t.title == this.message.subject)
+        .messages.filter(
+          (m) =>
+            m.responseTo &&
+            m.responseTo.id == this.message.id &&
+            m.responseTo.sender_id == this.message.sender_id &&
+            this.message.content.includes(m.responseTo.quote)
+        );
       referrers.forEach((m) => {
         const classes = m.reactions.map((r) => "u" + r.emoji_code).join(" ");
         c = c.replace(
@@ -82,6 +82,7 @@ export default {
   justify-content: center;
   background-color: rgba(255, 255, 255, 0.5);
   font-size: 3rem;
+  pointer-events: none;
 }
 .reactions,
 .reactions::before,

front/src/components/Rules/Styles.vue

@@ -1,29 +1,31 @@
 <script>
-import { mapState } from 'vuex';
+import { mapState } from "vuex";
 import emoji from "../../mixins/emoji";
 
-
 export default {
   name: "Styles",
   mixins: [emoji],
   computed: {
-    ...mapState([
-      'rules'
-    ]),
-    
+    ...mapState(["rules"]),
   },
   data() {
     return {
       el: null,
-    }
+    };
   },
   methods: {
     generateStyleRules() {
       let styles = "";
       this.rules.map((r) => {
-        styles  += `.${r.parentClassName} ${r.className}`
-        if (this.containsEmoji(r.className)) {
-          styles += `, .${r.parentClassName} .u${this.toEmojiCode(r.className)}` 
+        if (r.className.startsWith("@")) {
+          styles += r.className;
+        } else {
+          styles += `.${r.parentClassName} ${r.className}`;
+          if (this.containsEmoji(r.className)) {
+            styles += `, .${r.parentClassName} .u${this.toEmojiCode(
+              r.className
+            )}`;
+          }
         }
         styles += "{";
         r.rules.map((s) => {
@@ -40,15 +42,15 @@ export default {
     },
   },
   mounted() {
-    this.el = this.createStyleElement() 
-    document.head.appendChild(this.el)
+    this.el = this.createStyleElement();
+    document.head.appendChild(this.el);
   },
   watch: {
     rules() {
-      console.log('rules!')
-      const newStyle = this.createStyleElement()
-      document.head.replaceChild(newStyle, this.el)
-      this.el = newStyle
+      console.log("rules!");
+      const newStyle = this.createStyleElement();
+      document.head.replaceChild(newStyle, this.el);
+      this.el = newStyle;
     },
   },
 };

front/src/views/Home.vue

@@ -109,7 +109,7 @@ iframe {
 
 @media print {
   .ui {
-    display: none;
+    display: none !important;
   }
 }
 </style>