discourse/discourse-rewind
1
0
Fork 0
mirror of https://github.com/discourse/discourse-rewind.git synced 2025-07-08 06:32:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling:

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-06 11:53:18 -06:00
parent 4d7aad782d
commit 5e7daba027
13 changed files with 58 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/services/discourse_rewind/rewind/action/best_posts.rb
View File

@ -11,7 +11,7 @@ module DiscourseRewind
.where("post_number > 1")
.order("like_count DESC NULLS LAST")
.limit(3)
.pluck(:id, :topic_id, :like_count, :reply_count, :raw, :cooked)
.pluck(:post_number, :topic_id, :like_count, :reply_count, :raw, :cooked)
{ data: best_posts, identifier: "best-posts" }
end

2
assets/javascripts/discourse/components/reports/activity-calendar.gjs
View File

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

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

@ -1,19 +1,25 @@
import Component from "@glimmer/component";
import { get } from "@ember/object";
import { htmlSafe } from "@ember/template";
import dIcon from "discourse-common/helpers/d-icon";
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class BestPosts extends Component {
<template>
<div class="rewind-report-page -best-posts">
<h3 class="rewind-report-title">Your 3 best posts</h3>
<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>
<span class="best-posts__likes">Likes:
{{htmlSafe (get post "2")}}</span>
<span class="best-posts__replies">Replies:
{{htmlSafe (get post "3")}}</span>
<div class="best-posts__metadata">
<span class="best-posts__likes">
{{dIcon "heart"}}{{htmlSafe (get post "2")}}</span>
<span class="best-posts__replies">
{{dIcon "comment"}}{{htmlSafe (get post "3")}}</span>
<a href="/t/{{get post '1'}}/{{get post '0'}}">View post</a>
</div>
</div>
{{/each}}
</div>

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

@ -1,12 +1,13 @@
import Component from "@glimmer/component";
import { concat } from "@ember/helper";
// eslint-disable-next-line ember/no-empty-glimmer-component-classes
export default class BestTopics extends Component {
<template>
<div class="rewind-report-page -best-topics">
<h3 class="rewind-report-title">Your 3 best topics</h3>
<h2 class="rewind-report-title">Your 3 best topics</h2>
<div class="rewind-report-container">
{{log @report.data}}
{{!-- {{log @report.data}} --}}
{{#each @report.data as |topic|}}
<div class="rewind-card">
<a

2
assets/javascripts/discourse/components/reports/favorite-categories.gjs
View File

@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
export default class FavoriteCategories extends Component {
<template>
<div class="rewind-report-page -favorite-categories">
<h3 class="rewind-report-title">Your favorite categories</h3>
<h2 class="rewind-report-title">Your favorite categories</h2>
<div class="rewind-report-container">
{{#each @report.data as |data|}}
<div class="rewind-card">

2
assets/javascripts/discourse/components/reports/favorite-tags.gjs
View File

@ -4,7 +4,7 @@ import { concat } from "@ember/helper";
export default class FavoriteTags extends Component {
<template>
<div class="rewind-report-page -favorite-tags">
<h3 class="rewind-report-title">Your favorite tags</h3>
<h2 class="rewind-report-title">Your favorite tags</h2>
<div class="rewind-report-container">
{{#each @report.data as |data|}}
<div class="rewind-card">

4
assets/javascripts/discourse/components/reports/reactions.gjs
View File

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

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

@ -7,7 +7,7 @@ export default class WordCloud extends Component {
<template>
<div class="rewind-report-page -word-cloud">
<h3 class="rewind-report-title">Most used words</h3>
<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}}>

31
assets/stylesheets/common/best-posts.scss
View File

@ -3,4 +3,35 @@
flex-direction: column;
gap: 1em;
}
.rewind-card {
max-width: 700px;
text-align: left;
align-items: unset;
}
.best-posts__post {
font-weight: normal;
font-size: 16px;
width: 100%;
text-align: left;
}
.best-posts__metadata {
font-weight: normal;
font-size: 12px;
display: flex;
gap: 10px;
color: var(--primary-700);
align-items: center;
}
.best-posts__likes,
.best-posts__replies {
border: 1px solid var(--primary-200);
padding: 3px 8px;
border-radius: 5px;
display: flex;
gap: 5px;
align-items: center;
svg {
color: var(--primary-700);
}
}
}

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

@ -71,8 +71,9 @@ body {
.rewind-card {
background-color: var(--secondary);
box-shadow: 0 0 0 1px var(--primary-300), 0 0 0 3px var(--primary-100);
border: 1px solid var(--primary-300);
border-radius: var(--d-border-radius);
background-size: cover;
display: flex;
flex-direction: column;
text-align: center;

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

@ -10,10 +10,12 @@
h4,
h5 {
font-family: var(--heading-font);
-webkit-font-smoothing: antialiased;
}
p,
span {
font-family: var(--regular-font);
-webkit-font-smoothing: antialiased;
}
}

1
assets/stylesheets/common/report.scss
View File

@ -19,6 +19,7 @@
.rewind-report-container {
display: flex;
max-width: 100%;
}
.rewind-report-title {

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

@ -70,7 +70,7 @@
.rewind__exit-fullscreen-btn {
position: absolute;
top: 5px;
top: 20px;
right: 20px;
z-index: 1;
}