nested reactions emoji in message

front/dist/css/app.bc77c00e.css

@@ -0,0 +1 @@
+:root{--back:#fff;--pink:#ff85da}#app,body,html{padding:0;margin:0;background:var(--back)}#app,body,html{height:100%;width:100%}#app{display:flex;flex-direction:column;font-size:11pt}#app,header{position:relative}header{box-sizing:border-box;font-size:9pt}main{height:100%;width:100%}main,section{position:relative;display:flex;flex-direction:column}section{box-sizing:border-box;padding:1em}section p{margin-bottom:0;margin-top:0}.li.selected .index[data-v-cdbb2ba0]{position:fixed;background:#fff;margin:0;padding:0;top:calc(var(--top));left:10%;z-index:1;width:auto;box-shadow:0 0 2em 0 var(--pink);max-height:0;transition:all .1s ease;overflow:scroll}.li.selected .index li[data-v-cdbb2ba0]{list-style:none;margin:0;padding:.5em}.li.selected .index li a[data-v-cdbb2ba0]{max-width:16em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.li.selected .index li[data-v-cdbb2ba0]:hover{background:var(--pink)}.li.selected:hover .index[data-v-cdbb2ba0]{max-height:40em;transition:all .1s ease}@media print{.index li a[data-v-cdbb2ba0]:after{display:block;content:leader(".") target-counter(attr(href url),page,lower-roman)}}@page{@bottom-left{content:counter(page) " of " counter(pages)}}.li[data-v-bb0c01d2]{position:relative;padding:.5em}.li.selected[data-v-bb0c01d2]{background:var(--pink)}.li p[data-v-bb0c01d2]{margin:0}.li p a[data-v-bb0c01d2]{max-width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.streams[data-v-bf028a98]{min-width:10em;padding:0;margin-bottom:1em}.authors[data-v-e34c1616]{page-break-after:always}.message-outer{position:relative;display:block}.reactions,.reactions:after,.reactions:before{all:revert;display:none}.message-outer:hover .reactions{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background-color:hsla(0,0%,100%,.5);font-size:3rem;pointer-events:none}.reactions span{pointer-events:auto}.message-data{display:flex;border-bottom:1px solid #666}.message-data>div{flex-grow:1}.message-data .from:after{content:":"}.message-data .time{text-align:right}.show_message_data .message{padding-bottom:1rem}.message-data-reactions{all:initial;position:absolute;bottom:0;left:0}.header[data-v-05955d29]{cursor:pointer}@media print{.title[data-v-05955d29]{display:none}}.rule[data-v-080e408c]{margin:1em 0;position:relative}.rule p[data-v-080e408c]{margin:0}.rule.type-font[data-v-080e408c],.rule.type-raw[data-v-080e408c]{background-color:#333;color:#fff;padding:10px;border-radius:10px;border:1px solid #000;position:relative}.rule.type-font[data-v-080e408c]:after,.rule.type-raw[data-v-080e408c]:after{all:revert;content:"raw css";background-color:#333;border-radius:10px;position:absolute;bottom:-.5em;left:50%;transform:translateX(-50%);padding:5px 10px;font-family:sans-serif;font-size:.8rem;box-shadow:0 0 5px 5px rgba(255,255,0,.7)}.rule.type-font[data-v-080e408c]:after{content:"generated font rule"}.rule.type-font .instructions[data-v-080e408c]{display:none;position:absolute;top:10px;left:10px;padding:10px;width:calc(100% - 40px);height:calc(100% - 40px);align-content:center;justify-content:center;align-items:center;font-family:initial;background-color:hsla(0,0%,100%,.9);color:#000;border-radius:10px;box-shadow:0 0 5px 5px #fff}.rule.type-font:hover .instructions[data-v-080e408c]{display:flex}.rules[data-v-16b43aee]{max-width:unset}@media print{.rules[data-v-16b43aee]{display:none}}#home{position:relative;box-sizing:border-box;height:100%;width:100%;display:flex}.controls-pane{background-color:#aaa}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.splitpanes.default-theme .splitpanes__pane{background-color:unset}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column;padding:1em}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.body{page-break-after:always}.body img{max-width:100%}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}.docs[data-v-32f02ba2]{padding:1em;max-width:800px;width:100%;margin:1em auto}

front/dist/css/app.c01369df.css

@@ -1 +0,0 @@
-:root{--back:#fff;--pink:#ff85da}#app,body,html{padding:0;margin:0;background:var(--back)}#app,body,html{height:100%;width:100%}#app{display:flex;flex-direction:column;font-size:11pt}#app,header{position:relative}header{box-sizing:border-box;font-size:9pt}main{height:100%;width:100%}main,section{position:relative;display:flex;flex-direction:column}section{box-sizing:border-box;padding:1em}section p{margin-bottom:0;margin-top:0}.li.selected .index[data-v-cdbb2ba0]{position:fixed;background:#fff;margin:0;padding:0;top:calc(var(--top));left:10%;z-index:1;width:auto;box-shadow:0 0 2em 0 var(--pink);max-height:0;transition:all .1s ease;overflow:scroll}.li.selected .index li[data-v-cdbb2ba0]{list-style:none;margin:0;padding:.5em}.li.selected .index li a[data-v-cdbb2ba0]{max-width:16em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.li.selected .index li[data-v-cdbb2ba0]:hover{background:var(--pink)}.li.selected:hover .index[data-v-cdbb2ba0]{max-height:40em;transition:all .1s ease}@media print{.index li a[data-v-cdbb2ba0]:after{display:block;content:leader(".") target-counter(attr(href url),page,lower-roman)}}@page{@bottom-left{content:counter(page) " of " counter(pages)}}.li[data-v-bb0c01d2]{position:relative;padding:.5em}.li.selected[data-v-bb0c01d2]{background:var(--pink)}.li p[data-v-bb0c01d2]{margin:0}.li p a[data-v-bb0c01d2]{max-width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.streams[data-v-bf028a98]{min-width:10em;padding:0;margin-bottom:1em}.authors[data-v-e34c1616]{page-break-after:always}.message-outer{position:relative;display:block}.message-outer:hover .reactions{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background-color:hsla(0,0%,100%,.5);font-size:3rem;pointer-events:none}.reactions,.reactions:after,.reactions:before{all:revert;display:none}.reactions span{pointer-events:auto}.message-data{display:flex;border-bottom:1px solid #666}.message-data>div{flex-grow:1}.message-data .from:after{content:":"}.message-data .time{text-align:right}.message-data-reactions{margin-bottom:1em}.header[data-v-05955d29]{cursor:pointer}@media print{.title[data-v-05955d29]{display:none}}.rule[data-v-080e408c]{margin:1em 0;position:relative}.rule p[data-v-080e408c]{margin:0}.rule.type-font[data-v-080e408c],.rule.type-raw[data-v-080e408c]{background-color:#333;color:#fff;padding:10px;border-radius:10px;border:1px solid #000;position:relative}.rule.type-font[data-v-080e408c]:after,.rule.type-raw[data-v-080e408c]:after{all:revert;content:"raw css";background-color:#333;border-radius:10px;position:absolute;bottom:-.5em;left:50%;transform:translateX(-50%);padding:5px 10px;font-family:sans-serif;font-size:.8rem;box-shadow:0 0 5px 5px rgba(255,255,0,.7)}.rule.type-font[data-v-080e408c]:after{content:"generated font rule"}.rule.type-font .instructions[data-v-080e408c]{display:none;position:absolute;top:10px;left:10px;padding:10px;width:calc(100% - 40px);height:calc(100% - 40px);align-content:center;justify-content:center;align-items:center;font-family:initial;background-color:hsla(0,0%,100%,.9);color:#000;border-radius:10px;box-shadow:0 0 5px 5px #fff}.rule.type-font:hover .instructions[data-v-080e408c]{display:flex}.rules[data-v-16b43aee]{max-width:unset}@media print{.rules[data-v-16b43aee]{display:none}}#home{position:relative;box-sizing:border-box;height:100%;width:100%;display:flex}.controls-pane{background-color:#aaa}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.splitpanes.default-theme .splitpanes__pane{background-color:unset}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column;padding:1em}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.body{page-break-after:always}.body img{max-width:100%}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}.docs[data-v-32f02ba2]{padding:1em;max-width:800px;width:100%;margin:1em auto}

front/dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ChattyPub</title><link rel="stylesheet/css-polyfills" type="text/css" href="extra-styles.css"><script src="css-polyfills.js"></script><link href="/css/app.c01369df.css" rel="preload" as="style"><link href="/css/chunk-vendors.fa36ffc8.css" rel="preload" as="style"><link href="/js/app.244c27d0.js" rel="preload" as="script"><link href="/js/chunk-vendors.e35cf9b3.js" rel="preload" as="script"><link href="/css/chunk-vendors.fa36ffc8.css" rel="stylesheet"><link href="/css/app.c01369df.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Chattypub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.e35cf9b3.js"></script><script src="/js/app.244c27d0.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ChattyPub</title><link rel="stylesheet/css-polyfills" type="text/css" href="extra-styles.css"><script src="css-polyfills.js"></script><link href="/css/app.bc77c00e.css" rel="preload" as="style"><link href="/css/chunk-vendors.fa36ffc8.css" rel="preload" as="style"><link href="/js/app.14c562da.js" rel="preload" as="script"><link href="/js/chunk-vendors.e35cf9b3.js" rel="preload" as="script"><link href="/css/chunk-vendors.fa36ffc8.css" rel="stylesheet"><link href="/css/app.bc77c00e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Chattypub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.e35cf9b3.js"></script><script src="/js/app.14c562da.js"></script></body></html>

front/src/components/Content/Message.vue

@@ -1,21 +1,22 @@
 <template>
-  <div class="message-outer">
+  <div class="message-outer" :class="show_message_data?'show_message_data':''">
     <div class="message-data" v-if="show_message_data">
       <div class="from">{{ message.sender_full_name }}</div>
       <div class="time">{{ time }}</div>
     </div>
     <div :class="classes" class="message">
       <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+      <div class="message-data-reactions" v-if="show_message_data && message.reactions.length > 0">
+        <span
+          class="reaction"
+          v-for="reaction in message.reactions"
+          :key="reaction"
+        >
+          {{ String.fromCodePoint("0x" + reaction.emoji_code) }}
+        </span>
+      </div>
     </div>
-    <div class="message-data-reactions" v-if="show_message_data && message.reactions.length > 0">
+    
-      <span
-        class="reaction"
-        v-for="reaction in message.reactions"
-        :key="reaction"
-      >
-        {{ String.fromCodePoint("0x" + reaction.emoji_code) }}
-      </span>
-    </div>
     <div class="reactions ui">
       <span v-for="reaction in reactions" :key="reaction" :title="reaction">
         {{ shortcodeToEmoji(reaction) }}
@@ -114,6 +115,13 @@ export default {
   display: block;
 }
 
+.reactions,
+.reactions::before,
+.reactions::after {
+  all: revert;
+  display: none;
+}
+
 .message-outer:hover .reactions {
   display: flex;
   position: absolute;
@@ -127,12 +135,7 @@ export default {
   font-size: 3rem;
   pointer-events: none;
 }
-.reactions,
+
-.reactions::before,
-.reactions::after {
-  all: revert;
-  display: none;
-}
 
 .reactions span {
   pointer-events: initial;
@@ -153,7 +156,14 @@ export default {
   text-align: right;
 }
 
+.show_message_data .message {
+  padding-bottom: 1rem;
+}
+
 .message-data-reactions {
-  margin-bottom: 1em;
+  all: initial;
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 </style>