diff --git a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs index 65b8213..2872646 100644 --- a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs +++ b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs @@ -4,14 +4,15 @@ import { action } from "@ember/object"; import didInsert from "@ember/render-modifiers/modifiers/did-insert"; import { htmlSafe } from "@ember/template"; import concatClass from "discourse/helpers/concat-class"; +import emoji from "discourse/helpers/emoji"; import discourseLater from "discourse/lib/later"; const MYSTERY_EMOJIS = [ - "mag", // 🔍 - "question", // ❓ - "8ball", // 🎱 - "crystal_ball", // 🔮 - "crescent_moon", // 🌙 + "floppy_disk", + "videocassette", + "computer_disk", + "pager", + "fax", ]; const BACKGROUND_COLORS = [ @@ -80,12 +81,21 @@ export default class WordCard extends Component { "rewind-card__wrapper" (if this.longWord "-long-word") }} + style={{this.cardStyle}} {{didInsert this.registerCardContainer}} role="button" >
- + {{emoji + this.mysteryData.emoji + }} + {{emoji + this.mysteryData.emoji + }} + {{emoji + this.mysteryData.emoji + }}
{{@word}} diff --git a/assets/stylesheets/common/top-words.scss b/assets/stylesheets/common/top-words.scss index 4f63233..ffefb62 100644 --- a/assets/stylesheets/common/top-words.scss +++ b/assets/stylesheets/common/top-words.scss @@ -85,44 +85,9 @@ height: 125px; } - &:nth-child(1) { - .-front { - background-image: url("/plugins/discourse-rewind/images/cards/01-robot.gif"); - } - } - - &:nth-child(2) { - .-front { - background-image: url("/plugins/discourse-rewind/images/cards/07-beach.gif"); - } - } - - &:nth-child(3) { - .-front { - background-image: url("/plugins/discourse-rewind/images/cards/02-castle.gif"); - } - } - - &:nth-child(4) { - .-front { - background-image: url("/plugins/discourse-rewind/images/cards/06-nature.gif"); - } - } - - &:nth-child(5) { - .-front { - background-image: url("/plugins/discourse-rewind/images/cards/04-hand.gif"); - } - } - .rewind-card { box-shadow: 0 0 0 4px rgb(var(--mystery-color-light), 1); border: none; - - @if is-dark-color-scheme() { - background-color: var(--primary-200); - box-shadow: 0 0 0 4px rgb(var(--mystery-color-dark), 1); - } } .rewind-card__inner { @@ -164,9 +129,31 @@ } } + .rewind-card.-front { + padding: 0.5em; + display: grid; + grid-template: + "tl . . " 1fr + ". . . " 1fr + ". cr . " 3fr + ". . . " 1fr + ". . br" 1fr + / 1fr 3fr 1fr; + background: + radial-gradient( + circle at 4px 4px, + rgb(0 0 0 / 0.05) 1px, + var(--rewind-white) 1px, + var(--rewind-white) 6px + ) + 0 0 / 6px 6px, + var(--rewind-white); + } + .rewind-card.-back { transform: rotateY(180deg); background-color: var(--rewind-white); + color: var(--rewind-black); } .rewind-card.-front, @@ -177,11 +164,6 @@ backface-visibility: hidden; } - .rewind-card.-front { - background-size: cover; - padding: 0.5em; - } - &.-long-word .rewind-card__title { font-size: var(--font-0); } @@ -193,6 +175,11 @@ .rewind-card__title { overflow-wrap: anywhere; hyphens: auto; + line-height: 1; + } + + .rewind-card__data { + margin-top: 0.5em; } .rewind-card__image { diff --git a/public/images/cards/01-robot.gif b/public/images/cards/01-robot.gif deleted file mode 100644 index afff05f..0000000 Binary files a/public/images/cards/01-robot.gif and /dev/null differ diff --git a/public/images/cards/02-castle.gif b/public/images/cards/02-castle.gif deleted file mode 100644 index 9ab26fa..0000000 Binary files a/public/images/cards/02-castle.gif and /dev/null differ diff --git a/public/images/cards/04-hand.gif b/public/images/cards/04-hand.gif deleted file mode 100644 index 81225c9..0000000 Binary files a/public/images/cards/04-hand.gif and /dev/null differ diff --git a/public/images/cards/06-nature.gif b/public/images/cards/06-nature.gif deleted file mode 100644 index fc50ace..0000000 Binary files a/public/images/cards/06-nature.gif and /dev/null differ diff --git a/public/images/cards/07-beach.gif b/public/images/cards/07-beach.gif deleted file mode 100644 index 88c158e..0000000 Binary files a/public/images/cards/07-beach.gif and /dev/null differ