From 80210f11d25fe196f522de221fa2cf08e8c2129d Mon Sep 17 00:00:00 2001 From: Jordan Vidrine Date: Mon, 6 Jan 2025 15:04:58 -0600 Subject: [PATCH] styles and animation aditions --- .../components/reports/best-posts.gjs | 1 - .../components/reports/best-topics.gjs | 38 +++++++-- .../components/reports/word-card.gjs | 57 +++++++++++++ .../components/reports/word-cards.gjs | 16 ++++ .../components/reports/word-cloud.gjs | 29 ------- .../discourse/components/rewind.gjs | 6 +- assets/stylesheets/common/best-topics.scss | 58 +++++++++++++ assets/stylesheets/common/card.scss | 75 ----------------- assets/stylesheets/common/index.scss | 2 +- .../common/post-used-reactions.scss | 4 - assets/stylesheets/common/rewind.scss | 23 +++--- assets/stylesheets/common/word-card.scss | 81 +++++++++++++++++++ assets/stylesheets/common/word-cloud.scss | 2 - 13 files changed, 260 insertions(+), 132 deletions(-) create mode 100644 assets/javascripts/discourse/components/reports/word-card.gjs create mode 100644 assets/javascripts/discourse/components/reports/word-cards.gjs delete mode 100644 assets/javascripts/discourse/components/reports/word-cloud.gjs create mode 100644 assets/stylesheets/common/word-card.scss delete mode 100644 assets/stylesheets/common/word-cloud.scss diff --git a/assets/javascripts/discourse/components/reports/best-posts.gjs b/assets/javascripts/discourse/components/reports/best-posts.gjs index e8a296d..e53e7cb 100644 --- a/assets/javascripts/discourse/components/reports/best-posts.gjs +++ b/assets/javascripts/discourse/components/reports/best-posts.gjs @@ -9,7 +9,6 @@ export default class BestPosts extends Component {

Your 3 best posts

- {{log @report.data}} {{#each @report.data as |post|}}
{{htmlSafe (get post "5")}}
diff --git a/assets/javascripts/discourse/components/reports/best-topics.gjs b/assets/javascripts/discourse/components/reports/best-topics.gjs index 6115a5d..dc578ed 100644 --- a/assets/javascripts/discourse/components/reports/best-topics.gjs +++ b/assets/javascripts/discourse/components/reports/best-topics.gjs @@ -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"; + } + } + diff --git a/assets/javascripts/discourse/components/reports/word-card.gjs b/assets/javascripts/discourse/components/reports/word-card.gjs new file mode 100644 index 0000000..5eae43a --- /dev/null +++ b/assets/javascripts/discourse/components/reports/word-card.gjs @@ -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"); + } + + +} diff --git a/assets/javascripts/discourse/components/reports/word-cards.gjs b/assets/javascripts/discourse/components/reports/word-cards.gjs new file mode 100644 index 0000000..31f1127 --- /dev/null +++ b/assets/javascripts/discourse/components/reports/word-cards.gjs @@ -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 { + +} diff --git a/assets/javascripts/discourse/components/reports/word-cloud.gjs b/assets/javascripts/discourse/components/reports/word-cloud.gjs deleted file mode 100644 index 113b2ee..0000000 --- a/assets/javascripts/discourse/components/reports/word-cloud.gjs +++ /dev/null @@ -1,29 +0,0 @@ -import Component from "@glimmer/component"; - -export default class WordCloud extends Component { - get randomStyle() { - return `--rand: ${Math.random()}`; - } - - -} diff --git a/assets/javascripts/discourse/components/rewind.gjs b/assets/javascripts/discourse/components/rewind.gjs index 4ef0039..1e9b55a 100644 --- a/assets/javascripts/discourse/components/rewind.gjs +++ b/assets/javascripts/discourse/components/rewind.gjs @@ -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 {
- + {{! }} {{#if this.loadingRewind}}
@@ -115,7 +115,7 @@ export default class Rewind extends Component { {{#if (eq report.identifier "reactions")}} {{else if (eq report.identifier "word-cloud")}} - + {{else if (eq report.identifier "best-posts")}} {{else if (eq report.identifier "best-topics")}} diff --git a/assets/stylesheets/common/best-topics.scss b/assets/stylesheets/common/best-topics.scss index 36a3219..c07bb94 100644 --- a/assets/stylesheets/common/best-topics.scss +++ b/assets/stylesheets/common/best-topics.scss @@ -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; + } + } } diff --git a/assets/stylesheets/common/card.scss b/assets/stylesheets/common/card.scss index 4cc601b..50ee165 100644 --- a/assets/stylesheets/common/card.scss +++ b/assets/stylesheets/common/card.scss @@ -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: ""; - inherits: true; - initial-value: 0.1; -} diff --git a/assets/stylesheets/common/index.scss b/assets/stylesheets/common/index.scss index ea37f06..e371f28 100644 --- a/assets/stylesheets/common/index.scss +++ b/assets/stylesheets/common/index.scss @@ -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"; diff --git a/assets/stylesheets/common/post-used-reactions.scss b/assets/stylesheets/common/post-used-reactions.scss index 1c4c3b2..4a8fbc3 100644 --- a/assets/stylesheets/common/post-used-reactions.scss +++ b/assets/stylesheets/common/post-used-reactions.scss @@ -1,8 +1,4 @@ .-post-used-reactions { - .rewind-card { - width: 50%; - } - .rewind-reactions-chart { display: flex; flex-direction: column; diff --git a/assets/stylesheets/common/rewind.scss b/assets/stylesheets/common/rewind.scss index a06d79c..f34336c 100644 --- a/assets/stylesheets/common/rewind.scss +++ b/assets/stylesheets/common/rewind.scss @@ -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; diff --git a/assets/stylesheets/common/word-card.scss b/assets/stylesheets/common/word-card.scss new file mode 100644 index 0000000..8ec8de6 --- /dev/null +++ b/assets/stylesheets/common/word-card.scss @@ -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: ""; + inherits: true; + initial-value: 0.1; +} diff --git a/assets/stylesheets/common/word-cloud.scss b/assets/stylesheets/common/word-cloud.scss deleted file mode 100644 index 8b86cef..0000000 --- a/assets/stylesheets/common/word-cloud.scss +++ /dev/null @@ -1,2 +0,0 @@ -.rewind-report-page.-word-cloud { -}