discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-07 14:22:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles and animation aditions

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-06 15:04:58 -06:00
parent 5e7daba027
commit 80210f11d2
13 changed files with 260 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/javascripts/discourse/components/reports/best-posts.gjs
View File

@ -9,7 +9,6 @@ export default class BestPosts extends Component {
<div class="rewind-report-page -best-posts">
<h2 class="rewind-report-title">Your 3 best posts</h2>
<div class="rewind-report-container">
{{log @report.data}}
{{#each @report.data as |post|}}
<div class="rewind-card">
<div class="best-posts__post">{{htmlSafe (get post "5")}}</div>

38
assets/javascripts/discourse/components/reports/best-topics.gjs
View File

@ -1,23 +1,45 @@
import Component from "@glimmer/component";
import { concat } from "@ember/helper";
import { htmlSafe } from "@ember/template";
import emoji from "discourse/helpers/emoji";
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class BestTopics extends Component {
rank(idx) {
return idx + 1;
}
emojiName(rank) {
if (rank + 1 === 1) {
return "1st_place_medal";
} else if (rank + 1 === 2) {
return "2nd_place_medal";
} else if (rank + 1 === 3) {
return "3rd_place_medal";
} else {
return "medal";
}
}
<template>
<div class="rewind-report-page -best-topics">
<h2 class="rewind-report-title">Your 3 best topics</h2>
<div class="rewind-report-container">
{{!-- {{log @report.data}} --}}
{{#each @report.data as |topic|}}
<div class="rewind-card">
{{log @report.data}}
<div class="rewind-card">
{{#each @report.data as |topic idx|}}
<a
href={{concat "/t/-/" topic.topic_id}}
class="best-topics__title"
class={{concat "best-topics__topic" " rank-" (this.rank idx)}}
>
{{topic.title}}
<span class="best-topics__rank">{{emoji
(this.emojiName idx)
}}</span><h2>{{topic.title}}</h2>
<span class="best-topics__excerpt">{{htmlSafe
topic.excerpt
}}</span>
</a>
</div>
{{/each}}
{{/each}}
</div>
</div>
</div>
</template>

57
assets/javascripts/discourse/components/reports/word-card.gjs Normal file
View File

@ -0,0 +1,57 @@
import Component from "@glimmer/component";
import { fn } from "@ember/helper";
import { on } from "@ember/modifier";
import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import emoji from "discourse/helpers/emoji";
export default class WordCard extends Component {
get randomStyle() {
return `--rand: ${Math.random()}`;
}
get mysteryEmoji() {
const mysteryEmojis = [
"mag", // 🔍
"man_detective", // 🕵️
"question", // ❓
"8ball", // 🎱
"crystal_ball", // 🔮
"key", // 🗝️
"crescent_moon", // 🌙
"milky_way", // 🌌
];
const randomIndex = Math.floor(Math.random() * mysteryEmojis.length);
return mysteryEmojis[randomIndex];
}
@action
registerCardContainer(element) {
this.cardContainer = element;
}
@action
handleClick() {
this.cardContainer.classList.toggle("flipped");
}
<template>
<div
{{on "click" (fn this.handleClick)}}
class="rewind-card__wrapper"
style={{this.randomStyle}}
{{didInsert this.registerCardContainer}}
>
<div class="rewind-card__inner">
<div class="rewind-card -front">
<span class="rewind-card__image">{{emoji this.mysteryEmoji}}</span>
</div>
<div class="rewind-card -back">
<span class="rewind-card__title">{{@word}}</span>
<span class="rewind-card__data">used {{@count}} times</span>
</div>
</div>
</div>
</template>
}

16
assets/javascripts/discourse/components/reports/word-cards.gjs Normal file
View File

@ -0,0 +1,16 @@
import Component from "@glimmer/component";
import WordCard from "discourse/plugins/discourse-rewind/discourse/components/reports/word-card";
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class WordCards extends Component {
<template>
<div class="rewind-report-page -word-cloud">
<h2 class="rewind-report-title">Most used words</h2>
<div class="rewind-report-container">
{{#each-in @report.data as |word count|}}
<WordCard @word={{word}} @count={{count}} />
{{/each-in}}
</div>
</div>
</template>
}

29
assets/javascripts/discourse/components/reports/word-cloud.gjs
View File

@ -1,29 +0,0 @@
import Component from "@glimmer/component";
export default class WordCloud extends Component {
get randomStyle() {
return `--rand: ${Math.random()}`;
}
<template>
<div class="rewind-report-page -word-cloud">
<h2 class="rewind-report-title">Most used words</h2>
<div class="rewind-report-container">
{{#each-in @report.data as |word count|}}
<div class="rewind-card__wrapper" style={{this.randomStyle}}>
<div class="rewind-card__inner">
<div class="rewind-card -front">
<span class="rewind-card__title">?</span>
<span class="rewind-card__data">{{count}}x</span>
</div>
<div class="rewind-card -back">
<span class="rewind-card__title">{{word}}</span>
<span class="rewind-card__data">used {{count}} times</span>
</div>
</div>
</div>
{{/each-in}}
</div>
</div>
</template>
}

6
assets/javascripts/discourse/components/rewind.gjs
View File

@ -19,7 +19,7 @@ import FBFF from "discourse/plugins/discourse-rewind/discourse/components/report
import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
import WordCloud from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cloud";
import WordCards from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cards";
export default class Rewind extends Component {
@service siteSettings;
@ -88,7 +88,7 @@ export default class Rewind extends Component {
<div class="rewind">
<div class="background-1 parallax-bg"></div>
<canvas class="background-2 parallax-bg"></canvas>
{{! <canvas class="background-2 parallax-bg"></canvas> }}
{{#if this.loadingRewind}}
<div class="rewind-loader">
<div class="spinner small"></div>
@ -115,7 +115,7 @@ export default class Rewind extends Component {
{{#if (eq report.identifier "reactions")}}
<Reactions @report={{report}} />
{{else if (eq report.identifier "word-cloud")}}
<WordCloud @report={{report}} />
<WordCards @report={{report}} />
{{else if (eq report.identifier "best-posts")}}
<BestPosts @report={{report}} />
{{else if (eq report.identifier "best-topics")}}

58
assets/stylesheets/common/best-topics.scss
View File

@ -3,4 +3,62 @@
flex-direction: column;
gap: 1em;
}
.best-topics__title {
color: var(--primary);
}
.rewind-card {
gap: 1em;
align-items: flex-start;
max-width: 700px;
background: none;
border: none;
}
.best-topics__topic {
padding: 1em;
position: relative;
color: var(--primary);
display: flex;
flex-direction: column;
text-align: left;
max-width: 700px;
&.rank-1 {
--background: #ffe46a;
--border-color: #ffd82a;
}
&.rank-2 {
--background: #d6d6d6;
--border-color: #c4c4c4;
}
&.rank-3 {
--background: #dca570;
--border-color: #cd7f32;
}
background: var(--secondary);
border: 1px solid var(--primary-300);
}
.best-topics__rank {
position: absolute;
top: -15px;
left: -19px;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--secondary);
border: 1px solid var(--primary-300);
}
.best-topics__rank img.emoji {
display: block;
}
.best-topics__excerpt {
font-size: var(--font-down-2);
font-weight: 400;
color: var(--primary-800);
text-align: left;
&:empty {
display: none;
}
}
}

75
assets/stylesheets/common/card.scss
View File

@ -12,63 +12,6 @@ body {
gap: 0.5em;
}
.rewind-card__wrapper {
width: 150px;
height: 100px;
perspective: 1000px;
will-change: transform;
transform-style: preserve-3d;
border-radius: 0.25vw;
cursor: pointer;
animation-name: ambientMovement;
animation-duration: 4000ms;
animation-delay: calc(-4000ms * var(--rand));
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform: rotateZ(calc(var(--ambientAmount) * 10deg));
z-index: 1;
.rewind-card__inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
}
&:hover .rewind-card__inner {
transform: rotateY(180deg);
}
&:hover {
animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
z-index: 999;
}
.rewind-card.-back {
transform: rotateY(180deg);
}
.rewind-card.-front,
.rewind-card.-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
}
@keyframes flip-zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1.25);
}
}
.rewind-card {
background-color: var(--secondary);
border: 1px solid var(--primary-300);
@ -92,21 +35,3 @@ body {
-webkit-font-smoothing: antialiased;
}
}
@keyframes ambientMovement {
0% {
--ambientAmount: 0.1;
}
50% {
--ambientAmount: -0.1;
}
100% {
--ambientAmount: 0.1;
}
}
@property --ambientAmount {
syntax: "<number>";
inherits: true;
initial-value: 0.1;
}

2
assets/stylesheets/common/index.scss
View File

@ -6,7 +6,7 @@
@import "activity-calendar";
@import "best-posts";
@import "best-topics";
@import "word-cloud";
@import "word-card";
@import "favorite-tags";
@import "favorite-categories";
@import "fonts";

4
assets/stylesheets/common/post-used-reactions.scss
View File

@ -1,8 +1,4 @@
.-post-used-reactions {
.rewind-card {
width: 50%;
}
.rewind-reactions-chart {
display: flex;
flex-direction: column;

23
assets/stylesheets/common/rewind.scss
View File

@ -7,6 +7,11 @@
justify-content: center;
padding: 2em;
h1,
h2 {
font-size: 24px;
}
&.-fullscreen {
top: 0;
left: 0;
@ -47,15 +52,15 @@
opacity: 0.45;
}
.background-2 {
position: absolute;
width: 100%;
height: 1000%;
background: url(/plugins/discourse-rewind/images/bg-2.png);
background-size: contain;
transform: translateY(0px);
opacity: 0.85;
}
// .background-2 {
// position: absolute;
// width: 100%;
// height: 1000%;
// background: url(/plugins/discourse-rewind/images/bg-2.png);
// background-size: contain;
// transform: translateY(0px);
// opacity: 0.85;
// }
.rewind__scroll-wrapper {
overflow-y: auto;

81
assets/stylesheets/common/word-card.scss Normal file
View File

@ -0,0 +1,81 @@
.rewind-report-page.-word-cloud {
.rewind-card__image img {
width: 35px;
height: 35px;
}
}
.rewind-card__wrapper {
width: 150px;
height: 100px;
perspective: 1000px;
will-change: transform;
transform-style: preserve-3d;
border-radius: 0.25vw;
cursor: pointer;
animation-name: ambientMovement;
animation-duration: 4000ms;
animation-delay: calc(-4000ms * var(--rand));
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
transform: rotateZ(calc(var(--ambientAmount) * 10deg));
z-index: 1;
.rewind-card__inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transform-style: preserve-3d;
transition: transform;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
}
&.flipped .rewind-card__inner {
transform: rotateY(180deg);
}
&:hover {
animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
z-index: 999;
}
.rewind-card.-back {
transform: rotateY(180deg);
}
.rewind-card.-front,
.rewind-card.-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
}
@keyframes flip-zoom {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
100% {
transform: scale(1.25);
}
}
@keyframes ambientMovement {
0% {
--ambientAmount: 0.1;
}
50% {
--ambientAmount: -0.1;
}
100% {
--ambientAmount: 0.1;
}
}
@property --ambientAmount {
syntax: "<number>";
inherits: true;
initial-value: 0.1;
}

2
assets/stylesheets/common/word-cloud.scss
View File

@ -1,2 +0,0 @@
.rewind-report-page.-word-cloud {
}