fbff

assets/javascripts/discourse/components/reports/activity-calendar.gjs

@@ -37,8 +37,9 @@ export default class ActivityCalendar extends Component {
 
   <template>
     <div class="rewind-report-page -activity-calendar">
-      <div class="rewind-card">
       <h2 class="rewind-report-title">Activity Calendar</h2>
+
+      <div class="rewind-card">
         <table class="rewind-calendar">
           <thead>
             <tr>

assets/javascripts/discourse/components/reports/fbff.gjs

@@ -2,22 +2,35 @@ import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import avatar from "discourse/helpers/bound-avatar-template";
 
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class FBFF extends Component {
   <template>
     <div class="rewind-report-page -fbff">
       <h2 class="rewind-report-title">Your FBFF (Forum Best Friend Forever)</h2>
       <div class="rewind-report-container">
         <div class="rewind-card">
+          <div class="fbff-avatar-container">
             {{avatar
               @report.data.fbff.avatar_template
-            "tiny"
+              "huge"
               (hash title=@report.data.fbff.username)
             }}
+            <p class="fbff-avatar-name">@{{@report.data.fbff.username}}</p>
+          </div>
+          <div class="fbff-gif-container">
+            <img
+              class="fbff-gif"
+              src="/plugins/discourse-rewind/images/fbff.gif"
+            />
+          </div>
+          <div class="fbff-avatar-container">
             {{avatar
               @report.data.yourself.avatar_template
-            "tiny"
+              "huge"
               (hash title=@report.data.yourself.username)
             }}
+            <p class="fbff-avatar-name">@{{@report.data.yourself.username}}</p>
+          </div>
         </div>
       </div>
     </div>

assets/javascripts/discourse/components/reports/reactions.gjs

@@ -46,8 +46,8 @@ export default class Reactions extends Component {
     </div>
 
     <div class="rewind-report-page -post-used-reactions">
-      <div class="rewind-card">
       <h2 class="rewind-report-title">Most used reactions in topics</h2>
+      <div class="rewind-card">
         <div class="rewind-reactions-chart">
           {{#each-in @report.data.post_used_reactions as |emojiName count|}}
             <div class="rewind-reactions-row">

assets/stylesheets/common/activity-calendar.scss

@@ -1,4 +1,5 @@
 .rewind-report-page.-activity-calendar {
+  margin-bottom: 1em;
   .rewind-card {
     @include rewind-border;
   }

assets/stylesheets/common/best-topics.scss

@@ -12,6 +12,7 @@
     max-width: 700px;
     background: none;
     border: none;
+    padding: 0;
   }
   .best-topics__topic {
     padding: 1em;

assets/stylesheets/common/bff.scss

@@ -0,0 +1,75 @@
+.-fbff {
+  .rewind-card {
+    @include rewind-border;
+    display: grid;
+    grid-template-columns: 1fr 400px 1fr;
+    @media screen and (width <= 625px) {
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-template-rows: min-content min-content;
+      grid-template-areas: "gif gif gif" "friend nothing you";
+    }
+  }
+  --border-size: 6px;
+  @media screen and (width <= 768px) {
+    --border-size: 4px;
+  }
+  @media screen and (width <= 425px) {
+    --border-size: 3px;
+  }
+  .fbff-gif-container {
+    position: relative;
+    width: 90%;
+    border-radius: var(--rewind-border-radius);
+    align-self: center;
+    justify-self: center;
+    z-index: 10;
+    @media screen and (width <= 625px) {
+      grid-area: gif;
+    }
+  }
+  .fbff-gif {
+    width: 100%;
+    border-radius: var(--rewind-border-radius);
+  }
+  .fbff-avatar-container {
+    z-index: 10;
+    @media screen and (width <= 625px) {
+      &:first-of-type {
+        grid-area: friend;
+      }
+      &:last-of-type {
+        grid-area: you;
+      }
+    }
+  }
+  .fbff-avatar-container img.avatar {
+    align-self: center;
+    justify-self: center;
+    width: 75px;
+    height: 75px;
+    @media screen and (width <= 768px) {
+      width: 50px;
+      height: 50px;
+    }
+    @media screen and (width <= 425px) {
+      width: 25px;
+      height: 25px;
+    }
+  }
+  .fbff-avatar-container {
+    display: grid;
+    grid-template-rows: 1fr min-content;
+    flex-direction: column;
+  }
+  .fbff-avatar-name {
+    margin: 0;
+    align-self: center;
+    justify-self: center;
+    margin-top: auto;
+    height: min-content;
+    font-size: var(--font-down-1);
+    @media screen and (width <= 425px) {
+      font-size: var(--font-down-3);
+    }
+  }
+}

assets/stylesheets/common/index.scss

@@ -12,3 +12,4 @@
 @import "favorite-categories";
 @import "fonts";
 @import "reading-time";
+@import "bff";

assets/stylesheets/common/post-used-reactions.scss

@@ -9,10 +9,9 @@
   }
 
   .rewind-reactions-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: 25px 50px 1fr;
     gap: 1em;
-    justify-content: flex-start;
-    align-items: center;
     border-bottom: 1px solid var(--primary-low);
     padding: 0.5em 0;
   }

assets/stylesheets/common/reading-time.scss

@@ -8,6 +8,10 @@
 .book {
   width: 150px;
   height: 200px;
+  @media screen and (width <= 425px) {
+    width: 100px;
+    height: 133px;
+  }
   position: relative;
   transform-style: preserve-3d;
   transform: rotateY(-20deg);
@@ -17,12 +21,16 @@
   background-color: rgba(var(--primary-rgb), 0.15);
 }
 
-.book > :first-child {
+.book img {
   position: absolute;
   top: 0;
   left: 0;
   width: 150px;
   height: 200px;
+  @media screen and (width <= 425px) {
+    width: 100px;
+    height: 133px;
+  }
   transform: translateZ(17.5px);
   background-color: #01060f;
   border-radius: 0 5px 5px 0;
@@ -37,6 +45,11 @@
   top: 4px;
   width: 33px;
   height: 192px;
+  @media screen and (width <= 425px) {
+    left: -43px;
+    width: 22px;
+    height: 125px;
+  }
   transform: translateX(128.5px) rotateY(90deg);
   background: linear-gradient(
     90deg,
@@ -74,16 +87,26 @@
   transform: translateZ(-17.5px);
   background-color: var(--book-color);
   border-radius: 0 5px 5px 0;
+  @media screen and (width <= 425px) {
+    width: 100px;
+    height: 133px;
+  }
 }
 
 .reading-time__text {
   font-weight: normal;
   width: 50%;
+  @media screen and (width <= 425px) {
+    font-size: var(--font-down-2);
+  }
 }
 
 .reading-time .rewind-card {
   gap: 1em;
   padding: 1.5em;
+  @media screen and (width <= 425px) {
+    padding: 0.75em;
+  }
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

assets/stylesheets/common/report.scss

@@ -8,12 +8,14 @@
   max-width: 700px;
   margin: 0 auto;
   flex-direction: column;
+  @media (width <= 768px) {
+    padding: 0.75em;
+  }
 }
 
 .rewind-report {
   display: flex;
   flex-direction: column;
-  gap: 2em;
 }
 
 .rewind-report-container {

assets/stylesheets/common/rewind.scss

@@ -24,6 +24,9 @@
     background: rgba(var(--secondary-rgb), 0.5);
     backdrop-filter: blur(4.9px);
     -webkit-backdrop-filter: blur(4.9px);
+    @media (width <= 768px) {
+      padding: 0;
+    }
   }
 }
 
@@ -38,8 +41,10 @@
   container-type: size;
   position: relative;
   overflow: hidden;
-  // max-width: 960px;
   background: var(--secondary);
+  @media (width <= 768px) {
+    border: none;
+  }
 }
 
 .background-1 {
@@ -62,7 +67,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 2em;
 }
 
 .rewind__introduction {