mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-12-11 02:05:32 +00:00
UX: restyling for 2025 (#28)
This generally updates the styles for the 2025 version. I also made more features work in development environments (so it's easier to test) and fixed an issue with invites that was causing the report to not show. <img width="400" alt="image" src="https://github.com/user-attachments/assets/69a62b79-12e3-4539-a82c-9bbf9673abe2" /> <img width="1554" height="896" alt="image" src="https://github.com/user-attachments/assets/60fabac5-6f20-4e01-9679-fd228c6850c2" /> <img width="754" height="459" alt="image" src="https://github.com/user-attachments/assets/6725c6e2-1bac-417e-b4ee-190841ab656b" /> <img width="1472" height="490" alt="image" src="https://github.com/user-attachments/assets/87c95e6a-5d78-4fb6-9f2d-dad13bcc9788" /> <img width="1480" height="702" alt="image" src="https://github.com/user-attachments/assets/67bec8f9-dce5-4077-a07d-fe9e13696958" />
This commit is contained in:
Kris
GitHub
parent
a600db4d06
commit
972cc6e5d9
@ -10,10 +10,7 @@ module ::DiscourseRewind
|
||||
DiscourseRewind::FetchReports.call(service_params) do
|
||||
on_model_not_found(:year) { raise Discourse::NotFound }
|
||||
on_model_not_found(:user) { raise Discourse::NotFound }
|
||||
on_success do |reports:|
|
||||
@reports = reports
|
||||
render json: MultiJson.dump(reports), status: :ok
|
||||
end
|
||||
on_success { |reports:| render json: MultiJson.dump(reports), status: :ok }
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -13,7 +13,7 @@ module DiscourseRewind
|
||||
return if total_invites == 0
|
||||
|
||||
# Redeemed invites (users who actually joined)
|
||||
redeemed_count = invites.where.not(redeemed_at: nil).count
|
||||
redeemed_count = invites.where("redemption_count > 0").count
|
||||
|
||||
# Get the users who were invited (via InvitedUser or redeemed invites)
|
||||
invited_user_ids = InvitedUser.where(invite: invites).pluck(:user_id).compact
|
||||
@ -22,11 +22,7 @@ module DiscourseRewind
|
||||
|
||||
# Calculate impact of invitees
|
||||
invitee_post_count =
|
||||
Post
|
||||
.where(user_id: invited_user_ids)
|
||||
.where(created_at: date)
|
||||
.where(deleted_at: nil)
|
||||
.count
|
||||
Post.where(user_id: invited_user_ids).where(created_at: date).where(deleted_at: nil).count
|
||||
|
||||
invitee_topic_count =
|
||||
Topic
|
||||
|
||||
@ -10,7 +10,6 @@ module DiscourseRewind
|
||||
{ category_id: 2, name: "dogs" },
|
||||
{ category_id: 3, name: "countries" },
|
||||
{ category_id: 4, name: "management" },
|
||||
{ category_id: 5, name: "things" },
|
||||
],
|
||||
identifier: "most-viewed-categories",
|
||||
}
|
||||
@ -26,7 +25,7 @@ module DiscourseRewind
|
||||
.where(categories: { id: user.guardian.allowed_category_ids })
|
||||
.group("categories.id, categories.name")
|
||||
.order("COUNT(*) DESC")
|
||||
.limit(5)
|
||||
.limit(4)
|
||||
.pluck("categories.id, categories.name")
|
||||
.map { |category_id, name| { category_id: category_id, name: name } }
|
||||
|
||||
|
||||
@ -10,7 +10,6 @@ module DiscourseRewind
|
||||
{ tag_id: 2, name: "dogs" },
|
||||
{ tag_id: 3, name: "countries" },
|
||||
{ tag_id: 4, name: "management" },
|
||||
{ tag_id: 5, name: "things" },
|
||||
],
|
||||
identifier: "most-viewed-tags",
|
||||
}
|
||||
@ -28,7 +27,7 @@ module DiscourseRewind
|
||||
.where(tags: { id: Tag.visible(user.guardian).pluck(:id) })
|
||||
.group("tags.id, tags.name")
|
||||
.order("COUNT(DISTINCT topic_views.topic_id) DESC")
|
||||
.limit(5)
|
||||
.limit(4)
|
||||
.pluck("tags.id, tags.name")
|
||||
.map { |tag_id, name| { tag_id: tag_id, name: name } }
|
||||
|
||||
|
||||
@ -81,7 +81,7 @@ module DiscourseRewind
|
||||
reports = Discourse.redis.get(key)
|
||||
|
||||
if !reports
|
||||
reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }
|
||||
reports = REPORTS.map { |report| report.call(date:, user:, guardian:) }.compact
|
||||
Discourse.redis.setex(key, CACHE_DURATION, MultiJson.dump(reports))
|
||||
else
|
||||
reports = MultiJson.load(reports, symbolize_keys: true)
|
||||
|
||||
@ -1,13 +1,41 @@
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
const RewindHeader = <template>
|
||||
<div class="rewind__header">
|
||||
<img
|
||||
class="rewind-logo -light"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
|
||||
/>
|
||||
<img
|
||||
class="rewind-logo -dark"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
|
||||
/>
|
||||
<div class="rewind__header-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -1 104 106">
|
||||
<path
|
||||
fill="#231f20"
|
||||
d="M51.87 0C23.71 0 0 22.83 0 51v52.81l51.86-.05c28.16 0 51-23.71 51-51.87S80 0 51.87 0Z"
|
||||
/>
|
||||
<path
|
||||
fill="#fff9ae"
|
||||
d="M52.37 19.74a31.62 31.62 0 0 0-27.79 46.67l-5.72 18.4 20.54-4.64a31.61 31.61 0 1 0 13-60.43Z"
|
||||
/>
|
||||
<path
|
||||
fill="#00aeef"
|
||||
d="M77.45 32.12a31.6 31.6 0 0 1-38.05 48l-20.54 4.7 20.91-2.47a31.6 31.6 0 0 0 37.68-50.23Z"
|
||||
/>
|
||||
<path
|
||||
fill="#00a94f"
|
||||
d="M71.63 26.29A31.6 31.6 0 0 1 38.8 78l-19.94 6.82 20.54-4.65a31.6 31.6 0 0 0 32.23-53.88Z"
|
||||
/>
|
||||
<path
|
||||
fill="#f15d22"
|
||||
d="M26.47 67.11a31.61 31.61 0 0 1 51-35 31.61 31.61 0 0 0-52.89 34.3l-5.72 18.4Z"
|
||||
/>
|
||||
<path
|
||||
fill="#e31b23"
|
||||
d="M24.58 66.41a31.61 31.61 0 0 1 47.05-40.12 31.61 31.61 0 0 0-49 39.63l-3.76 18.9Z"
|
||||
/>
|
||||
</svg>
|
||||
<div class="rewind__header-title">
|
||||
{{i18n "discourse_rewind.title"}}
|
||||
</div>
|
||||
<div class="rewind__header-year">
|
||||
{{i18n "discourse_rewind.year"}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>;
|
||||
|
||||
|
||||
@ -10,11 +10,12 @@ const MostViewedCategories = <template>
|
||||
}}</h2>
|
||||
<div class="rewind-report-container">
|
||||
{{#each @report.data as |data|}}
|
||||
<a href={{concat "/c/-/" data.category_id}} class="rewind-card">
|
||||
<p
|
||||
class="most-viewed-categories__category"
|
||||
href={{concat "/c/-/" data.category_id}}
|
||||
>{{data.name}}</p>
|
||||
<a class="folder-wrapper" href={{concat "/c/-/" data.category_id}}>
|
||||
<span class="folder-tab"></span>
|
||||
<div class="rewind-card">
|
||||
<p class="most-viewed-categories__category">{{data.name}}</p>
|
||||
</div>
|
||||
<span class="folder-bg"></span>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@ -10,11 +10,17 @@ const MostViewedTags = <template>
|
||||
}}</h2>
|
||||
<div class="rewind-report-container">
|
||||
{{#each @report.data as |data|}}
|
||||
<a class="rewind-card" href={{concat "/tag/" data.name}}>
|
||||
<p
|
||||
class="most-viewed-tags__tag"
|
||||
href={{concat "/tag/" data.name}}
|
||||
>#{{data.name}}</p>
|
||||
<a class="folder-wrapper" href={{concat "/tag/" data.name}}>
|
||||
<span class="folder-tab"></span>
|
||||
<div class="rewind-card">
|
||||
<p
|
||||
class="most-viewed-tags__tag"
|
||||
href={{concat "/tag/" data.name}}
|
||||
>
|
||||
#{{data.name}}
|
||||
</p>
|
||||
</div>
|
||||
<span class="folder-bg"></span>
|
||||
</a>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,6 @@ 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 = [
|
||||
@ -81,21 +80,12 @@ export default class WordCard extends Component {
|
||||
"rewind-card__wrapper"
|
||||
(if this.longWord "-long-word")
|
||||
}}
|
||||
style={{this.cardStyle}}
|
||||
{{didInsert this.registerCardContainer}}
|
||||
role="button"
|
||||
>
|
||||
<div class="rewind-card__inner">
|
||||
<div class="rewind-card -front">
|
||||
<span class="rewind-card__image tl">{{emoji
|
||||
this.mysteryData.emoji
|
||||
}}</span>
|
||||
<span class="rewind-card__image cr">{{emoji
|
||||
this.mysteryData.emoji
|
||||
}}</span>
|
||||
<span class="rewind-card__image br">{{emoji
|
||||
this.mysteryData.emoji
|
||||
}}</span>
|
||||
|
||||
</div>
|
||||
<div class="rewind-card -back">
|
||||
<span class="rewind-card__title">{{@word}}</span>
|
||||
|
||||
@ -3,11 +3,12 @@ import { tracked } from "@glimmer/tracking";
|
||||
import { on } from "@ember/modifier";
|
||||
import { action } from "@ember/object";
|
||||
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
|
||||
import { eq } from "truth-helpers";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import concatClass from "discourse/helpers/concat-class";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import { eq } from "discourse/truth-helpers";
|
||||
import { i18n } from "discourse-i18n";
|
||||
import ActivityCalendar from "discourse/plugins/discourse-rewind/discourse/components/reports/activity-calendar";
|
||||
import BestPosts from "discourse/plugins/discourse-rewind/discourse/components/reports/best-posts";
|
||||
import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/reports/best-topics";
|
||||
@ -54,13 +55,9 @@ export default class Rewind extends Component {
|
||||
}
|
||||
|
||||
@action
|
||||
handleScroll({ target }) {
|
||||
let children = this.rewindContainer.getElementsByClassName("parallax-bg");
|
||||
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].style.transform = `translateY(-${
|
||||
(target.scrollTop * (i + 1)) / 5
|
||||
}px)`;
|
||||
handleBackdropClick(event) {
|
||||
if (this.fullScreen && event.target === event.currentTarget) {
|
||||
this.fullScreen = false;
|
||||
}
|
||||
}
|
||||
|
||||
@ -77,27 +74,28 @@ export default class Rewind extends Component {
|
||||
}}
|
||||
{{didInsert this.loadRewind}}
|
||||
{{on "keydown" this.handleEscape}}
|
||||
{{on "click" this.handleBackdropClick}}
|
||||
{{didInsert this.registerRewindContainer}}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="rewind">
|
||||
<RewindHeader />
|
||||
<div class="background-1 parallax-bg"></div>
|
||||
{{#if this.loadingRewind}}
|
||||
<div class="rewind-loader">
|
||||
<div class="spinner small"></div>
|
||||
<div class="rewind-loader__text">Crunching your data...</div>
|
||||
<div class="rewind-loader__text">
|
||||
{{i18n "discourse_rewind.loading"}}
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<DButton
|
||||
class="rewind__exit-fullscreen-btn"
|
||||
class="btn-default rewind__exit-fullscreen-btn --special-kbd"
|
||||
@icon={{if this.fullScreen "discourse-compress" "discourse-expand"}}
|
||||
@action={{this.toggleFullScreen}}
|
||||
/>
|
||||
<div
|
||||
class="rewind__scroll-wrapper"
|
||||
{{didInsert this.registerScrollWrapper}}
|
||||
{{on "scroll" this.handleScroll}}
|
||||
>
|
||||
|
||||
{{#each this.rewind as |report|}}
|
||||
|
||||
@ -28,7 +28,10 @@ export default class AvatarDecorator extends Component {
|
||||
}
|
||||
|
||||
get showDecorator() {
|
||||
return this.currentUser?.is_rewind_active && !this.dismissed;
|
||||
return (
|
||||
this.currentUser?.is_development_env ||
|
||||
(this.currentUser?.is_rewind_active && !this.dismissed)
|
||||
);
|
||||
}
|
||||
|
||||
<template>
|
||||
|
||||
@ -4,6 +4,7 @@ import { service } from "@ember/service";
|
||||
import DButton from "discourse/components/d-button";
|
||||
import icon from "discourse/helpers/d-icon";
|
||||
import KeyValueStore from "discourse/lib/key-value-store";
|
||||
import { i18n } from "discourse-i18n";
|
||||
|
||||
export default class RewindCallout extends Component {
|
||||
@service router;
|
||||
@ -12,7 +13,10 @@ export default class RewindCallout extends Component {
|
||||
store = new KeyValueStore("discourse_rewind_" + this.fetchYear);
|
||||
|
||||
get showCallout() {
|
||||
return this.currentUser?.is_rewind_active && !this.dismissed;
|
||||
return (
|
||||
this.currentUser?.is_rewind_active &&
|
||||
(this.currentUser?.is_development_env || !this.dismissed)
|
||||
);
|
||||
}
|
||||
|
||||
// We want to show the previous year's rewind in January
|
||||
@ -47,16 +51,71 @@ export default class RewindCallout extends Component {
|
||||
@action={{this.openRewind}}
|
||||
class="rewind-callout btn-transparent"
|
||||
>
|
||||
<img
|
||||
class="rewind-logo -light"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
|
||||
/>
|
||||
<img
|
||||
class="rewind-logo -dark"
|
||||
src="/plugins/discourse-rewind/images/discourse-rewind-logo-dark.png"
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.48 76.72">
|
||||
<path d="M0 0h515.48v76.72H0z" style="fill:#faf7e4" />
|
||||
<path
|
||||
d="M42.27 12.67c-12.8 0-23.58 10.38-23.58 23.18v24l23.57-.02c12.8 0 23.18-10.78 23.18-23.58S55.05 12.67 42.26 12.67z"
|
||||
style="fill:#010101"
|
||||
/>
|
||||
<path
|
||||
d="M42.51 21.64c-7.94 0-14.37 6.44-14.36 14.38 0 2.39.6 4.73 1.73 6.83l-2.6 8.36 9.34-2.11a14.36 14.36 0 0 0 15.85-2.73 14.371 14.371 0 0 0-9.94-24.74h-.02Z"
|
||||
style="fill:#fcf6b2"
|
||||
/>
|
||||
<path
|
||||
d="M53.75 44.9a14.356 14.356 0 0 1-17.13 4.18l-9.34 2.14 9.5-1.12c6.3 3.69 14.37 2.07 18.75-3.77s3.68-14.04-1.62-19.06c3.98 5.22 3.92 12.49-.16 17.63"
|
||||
style="fill:#29abe2"
|
||||
/>
|
||||
<path
|
||||
d="M52.94 42.17c-3.52 5.55-10.35 7.99-16.6 5.95l-9.06 3.1 9.34-2.11c6.65 3 14.49.54 18.24-5.72s2.2-14.34-3.59-18.77c4.51 4.78 5.2 12.01 1.68 17.55Z"
|
||||
style="fill:#10a94d"
|
||||
/>
|
||||
<path
|
||||
d="M30.74 43.17c-2.6-6.27-.46-13.51 5.14-17.35S49 22.58 53.92 27.26c-4.55-5.98-12.94-7.44-19.24-3.35s-8.39 12.34-4.8 18.93l-2.6 8.36 3.46-8.04Z"
|
||||
style="fill:#f15f25"
|
||||
/>
|
||||
<path
|
||||
d="M29.88 42.85a14.36 14.36 0 0 1 3.31-17.77 14.35 14.35 0 0 1 18.07-.46c-5.16-5.43-13.63-5.99-19.45-1.28-5.83 4.71-7.05 13.11-2.82 19.29l-1.71 8.59zM181.65 0l71.41 76.72h34.22L215.88 0z"
|
||||
style="fill:#d0222b"
|
||||
/>
|
||||
<path
|
||||
d="m215.88 0 71.4 76.72h34.23L250.11 0z"
|
||||
style="fill:#f15f25"
|
||||
/>
|
||||
<path
|
||||
d="m250.11 0 71.4 76.72h34.23L284.33 0z"
|
||||
style="fill:#fcf6b2"
|
||||
/>
|
||||
<path
|
||||
d="m284.33 0 71.41 76.72h34.22L318.56 0z"
|
||||
style="fill:#10a94d"
|
||||
/>
|
||||
<path
|
||||
d="m318.56 0 71.4 76.72h34.23L352.79 0z"
|
||||
style="fill:#29abe2"
|
||||
/>
|
||||
|
||||
<text
|
||||
x="108"
|
||||
y="22"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
style="font-size: 20px; transform: skewX(15deg); fill: #010101; letter-spacing: .025em;"
|
||||
>{{i18n "discourse_rewind.title"}}</text>
|
||||
|
||||
<text
|
||||
x="115"
|
||||
y="50"
|
||||
text-anchor="middle"
|
||||
dominant-baseline="middle"
|
||||
style="font-size: 32px; font-weight: bold; fill: #010101;"
|
||||
>{{i18n "discourse_rewind.year"}}</text>
|
||||
|
||||
</svg>
|
||||
|
||||
<span class="btn no-text --special-kbd">
|
||||
{{icon "play"}}
|
||||
</span>
|
||||
|
||||
{{icon "arrow-right" class="rewind-callaout__arrow"}}
|
||||
</DButton>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
@ -15,3 +15,4 @@
|
||||
@import "fbff";
|
||||
@import "rewind-header";
|
||||
@import "rewind-callout";
|
||||
@import "folder-styles";
|
||||
|
||||
@ -26,13 +26,12 @@
|
||||
font-size: 10px;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rewind-calendar-cell {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: calc(var(--rewind-border-radius) / 2);
|
||||
border: 1px solid rgb(var(--primary-rgb), 0.2);
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
height: 5px;
|
||||
@ -44,15 +43,15 @@
|
||||
}
|
||||
|
||||
&.-low {
|
||||
background: var(--tertiary-low);
|
||||
background: var(--success);
|
||||
}
|
||||
|
||||
&.-medium {
|
||||
background: var(--tertiary-medium);
|
||||
background: var(--success-medium);
|
||||
}
|
||||
|
||||
&.-high {
|
||||
background: var(--tertiary-high);
|
||||
background: var(--success-low);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,64 +1,80 @@
|
||||
.-best-posts {
|
||||
.rewind-report-container {
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, calc(32% - (1em / 3)));
|
||||
gap: 1em;
|
||||
|
||||
@media screen and (width <= 580px) {
|
||||
padding: 1em;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
max-width: 700px;
|
||||
text-align: left;
|
||||
align-items: unset;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
position: relative;
|
||||
color: var(--rewind-black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
max-width: 700px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
transparent 13px,
|
||||
var(--rewind-white) 13px
|
||||
);
|
||||
|
||||
@include rewind-border;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
border: 10px solid transparent;
|
||||
border-left: 10px solid var(--rewind-white);
|
||||
border-bottom: 10px solid var(--rewind-white);
|
||||
box-shadow:
|
||||
0 2px 4px rgb(0 0 0 / 0.4),
|
||||
-1px 1px 4px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
&::before {
|
||||
border-left: 10px solid #ffd82a;
|
||||
border-bottom: 10px solid #ffd82a;
|
||||
}
|
||||
}
|
||||
|
||||
&.rank-2 {
|
||||
--background: #d6d6d6;
|
||||
--border-color: #c4c4c4;
|
||||
&::before {
|
||||
border-left: 10px solid #d6d6d6;
|
||||
border-bottom: 10px solid #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
&.rank-3 {
|
||||
--background: #dca570;
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
}
|
||||
|
||||
.best-posts.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
border-right: 28px solid var(--border-color);
|
||||
border-top: 28px solid transparent;
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 28px solid var(--border-color);
|
||||
border-right: 0;
|
||||
transform: rotate(180deg);
|
||||
&::before {
|
||||
border-left: 10px solid #cd7f32;
|
||||
border-bottom: 10px solid #cd7f32;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.best-posts__post {
|
||||
width: 100%;
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
max-height: 300px;
|
||||
text-overflow: ellipsis;
|
||||
@ -76,10 +92,10 @@
|
||||
.best-posts__post p {
|
||||
font-family: var(--pixel-text) !important;
|
||||
font-weight: normal;
|
||||
font-size: var(--font-down-);
|
||||
font-size: var(--font-down-2);
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: var(--primary-800);
|
||||
color: var(--rewind-grey);
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
font-size: var(--font-down-2);
|
||||
@ -118,7 +134,8 @@
|
||||
.best-posts__metadata a {
|
||||
font-family: var(--pixel-text);
|
||||
text-transform: uppercase;
|
||||
color: var(--primary);
|
||||
color: var(--rewind-blue);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.best-posts__metadata {
|
||||
@ -128,12 +145,14 @@
|
||||
gap: 10px;
|
||||
color: var(--primary-700);
|
||||
align-items: center;
|
||||
margin-top: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.best-posts__likes,
|
||||
.best-posts__replies {
|
||||
font-family: var(--pixel-text);
|
||||
border: 1px solid var(--primary-200);
|
||||
border: 1px solid var(--rewind-light-grey);
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--rewind-border-radius);
|
||||
display: flex;
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
.-best-topics {
|
||||
padding-bottom: 0;
|
||||
|
||||
.rewind-report-container {
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
@ -8,23 +10,43 @@
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
gap: 1em;
|
||||
align-items: flex-start;
|
||||
max-width: 700px;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 33%);
|
||||
align-items: start;
|
||||
|
||||
@media screen and (width <= 580px) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.best-topics__header {
|
||||
font-family: var(--jersey-heading);
|
||||
margin: 0;
|
||||
font-size: var(--font-up-3);
|
||||
color: var(--rewind-black);
|
||||
font-size: var(--font-up-1);
|
||||
line-height: var(--font-0);
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.best-topics__topic {
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
position: relative;
|
||||
color: var(--primary);
|
||||
@ -32,62 +54,62 @@
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
max-width: 700px;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
225deg,
|
||||
transparent 13px,
|
||||
var(--rewind-white) 13px
|
||||
);
|
||||
|
||||
@include rewind-border;
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
border: 10px solid transparent;
|
||||
border-left: 10px solid var(--rewind-white);
|
||||
border-bottom: 10px solid var(--rewind-white);
|
||||
box-shadow:
|
||||
0 2px 4px rgb(0 0 0 / 0.4),
|
||||
-1px 1px 4px rgb(0 0 0 / 0.4);
|
||||
}
|
||||
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
&::before {
|
||||
border-left: 10px solid #ffd82a;
|
||||
border-bottom: 10px solid #ffd82a;
|
||||
}
|
||||
}
|
||||
|
||||
&.rank-2 {
|
||||
--background: #d6d6d6;
|
||||
--border-color: #c4c4c4;
|
||||
&::before {
|
||||
border-left: 10px solid #d6d6d6;
|
||||
border-bottom: 10px solid #d6d6d6;
|
||||
}
|
||||
}
|
||||
|
||||
&.rank-3 {
|
||||
--background: #dca570;
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.best-topics.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: none;
|
||||
border-right: 28px solid var(--border-color);
|
||||
border-top: 28px solid transparent;
|
||||
|
||||
&:nth-child(2) {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-left: 28px solid var(--border-color);
|
||||
border-right: 0;
|
||||
transform: rotate(180deg);
|
||||
&::before {
|
||||
border-left: 10px solid #cd7f32;
|
||||
border-bottom: 10px solid #cd7f32;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.best-topics__excerpt {
|
||||
font-family: var(--pixel-text);
|
||||
font-size: var(--font-down-1);
|
||||
font-size: var(--font-down-2);
|
||||
font-weight: 400;
|
||||
color: var(--primary-800);
|
||||
color: var(--rewind-grey);
|
||||
text-align: left;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 8;
|
||||
line-clamp: 8;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
max-width: 100%;
|
||||
|
||||
@ -10,10 +10,7 @@
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-300);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
|
||||
@ -9,11 +9,18 @@
|
||||
--border-size: 3px;
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: none;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px 1fr;
|
||||
|
||||
@include rewind-border;
|
||||
grid-template-columns: 100px 1fr 100px;
|
||||
border: none;
|
||||
|
||||
@media screen and (width <= 625px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
@ -78,10 +85,13 @@
|
||||
margin: 0;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
margin-top: auto;
|
||||
height: min-content;
|
||||
font-size: var(--font-down-1);
|
||||
font-family: "Pixelify Sans", sans-serif;
|
||||
color: var(--rewind-magenta);
|
||||
margin-top: 0.5em;
|
||||
line-height: 1;
|
||||
word-wrap: anywhere;
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
font-size: var(--font-down-3);
|
||||
|
||||
73
assets/stylesheets/common/folder-styles.scss
Normal file
73
assets/stylesheets/common/folder-styles.scss
Normal file
@ -0,0 +1,73 @@
|
||||
.-most-viewed-tags,
|
||||
.-most-viewed-categories {
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
background: var(--rewind-black);
|
||||
border-radius: 4px;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
transform: skew(-1deg) scaleY(1);
|
||||
|
||||
p {
|
||||
color: var(--rewind-white);
|
||||
}
|
||||
}
|
||||
|
||||
.folder-tab {
|
||||
display: block;
|
||||
content: "";
|
||||
width: 3em;
|
||||
height: 1em;
|
||||
border: 2px solid var(--rewind-green);
|
||||
border-bottom: none;
|
||||
border-radius: 6px 6px 0 0;
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
transition: background-color 0.3s ease;
|
||||
background: var(--rewind-black);
|
||||
}
|
||||
|
||||
.folder-bg {
|
||||
content: "";
|
||||
border: 2px solid var(--rewind-green);
|
||||
width: calc(100% - 4px);
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
border-radius: 0 4px 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.folder-wrapper {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex: 1;
|
||||
margin-top: 1.5em;
|
||||
|
||||
&:hover {
|
||||
z-index: 4;
|
||||
|
||||
.folder-bg,
|
||||
.folder-tab {
|
||||
background-color: var(--rewind-white);
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
transform: skew(-10deg) scaleY(0.9) translateY(7px) translateX(10px);
|
||||
box-shadow: -12px -30px 30px rgb(255 255 255 / 0.5);
|
||||
|
||||
p {
|
||||
color: var(--rewind-yellow);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -57,4 +57,7 @@
|
||||
|
||||
h2.rewind-report-title {
|
||||
text-transform: uppercase;
|
||||
color: var(--rewind-green);
|
||||
z-index: 2;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@ -5,14 +5,20 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
width: max-content;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-very-high);
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,19 +1,18 @@
|
||||
.-most-viewed-tags {
|
||||
.rewind-report-title {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.rewind-report-container {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
width: max-content;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-very-high);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.most-viewed-tags__tag {
|
||||
|
||||
@ -9,8 +9,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin: 0 0 0 -1em;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
background: var(--secondary);
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
height: min-content;
|
||||
@ -25,12 +31,14 @@
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
z-index: 1;
|
||||
|
||||
@include rewind-border;
|
||||
color: var(--rewind-white);
|
||||
border: none;
|
||||
|
||||
.emoji {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
image-rendering: crisp-edges;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -13,32 +13,87 @@
|
||||
display: grid;
|
||||
grid-template-columns: 25px 50px 1fr;
|
||||
gap: 1em;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
padding: 0.5em 0;
|
||||
padding: 1em 0;
|
||||
|
||||
img.emoji {
|
||||
vertical-align: baseline;
|
||||
image-rendering: crisp-edges;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
.rewind-reactions-bar {
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
.rewind-reactions-bar {
|
||||
animation-delay: -0.25s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
.rewind-reactions-bar {
|
||||
animation-delay: 0.5s;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
.rewind-reactions-bar {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.percentage {
|
||||
font-weight: normal;
|
||||
font-display: var(--pixel-text);
|
||||
font-size: 16px;
|
||||
color: var(--rewind-white);
|
||||
padding-top: 0.35em;
|
||||
}
|
||||
|
||||
.rewind-reactions-bar {
|
||||
background: var(--tertiary-600);
|
||||
border: 1px solid rgb(var(--primary-rgb), 0.2);
|
||||
background: var(--rewind-white);
|
||||
height: 25px;
|
||||
border-radius: calc(var(--rewind-border-radius) * 0.75);
|
||||
background-size: 50px 50px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
var(--rewind-black) 12.5%,
|
||||
var(--rewind-white) 12.5%,
|
||||
var(--rewind-white) 50%,
|
||||
var(--rewind-black) 50%,
|
||||
var(--rewind-black) 62.5%,
|
||||
var(--rewind-white) 62.5%
|
||||
);
|
||||
border: 4px solid var(--rewind-black);
|
||||
box-shadow: 0 0 0 4px var(--rewind-white);
|
||||
animation: anim 5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes anim {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 25px 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-total-reactions {
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
margin-top: 1em;
|
||||
margin-left: auto;
|
||||
color: var(--rewind-green);
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,7 +24,8 @@ p.reading-time__text {
|
||||
}
|
||||
|
||||
.reading-time code {
|
||||
background-color: rgb(var(--primary-rgb), 0.15);
|
||||
background-color: var(--rewind-white);
|
||||
color: var(--rewind-black);
|
||||
}
|
||||
|
||||
.book img {
|
||||
@ -36,7 +37,8 @@ p.reading-time__text {
|
||||
transform: translateZ(17.5px);
|
||||
background-color: #01060f;
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 5px 5px 20px rgb(var(--primary-rgb), 0.05);
|
||||
box-shadow: 5px 5px 20px rgb(0 0 0 / 0.05);
|
||||
image-rendering: crisp-edges;
|
||||
|
||||
@media screen and (width <= 475px) {
|
||||
width: 100px;
|
||||
@ -103,6 +105,7 @@ p.reading-time__text {
|
||||
}
|
||||
|
||||
.reading-time__text {
|
||||
color: var(--rewind-white);
|
||||
font-weight: normal;
|
||||
width: 50%;
|
||||
|
||||
@ -117,7 +120,7 @@ p.reading-time__text {
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: var(--secondary);
|
||||
text-align: left;
|
||||
|
||||
--book-color: var(--primary-very-high);
|
||||
|
||||
|
||||
@ -25,6 +25,16 @@
|
||||
}
|
||||
|
||||
.rewind-report-title {
|
||||
align-self: start;
|
||||
padding: 0.25em 1em 0.25em;
|
||||
margin-bottom: -2px;
|
||||
background: #111;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
font-size: var(--font-down-1);
|
||||
text-align: left;
|
||||
border-radius: 4px 4px 0 0;
|
||||
border-top: 2px solid var(--rewind-green);
|
||||
border-left: 2px solid var(--rewind-green);
|
||||
border-right: 2px solid var(--rewind-green);
|
||||
}
|
||||
|
||||
@ -1,37 +1,83 @@
|
||||
.rewind-callout {
|
||||
background: var(--primary);
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 12px);
|
||||
border-radius: var(--d-border-radius);
|
||||
height: calc(100% - 12px);
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 0 0 6px var(--primary);
|
||||
transition: box-shadow;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-in-out;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--primary) !important;
|
||||
box-shadow:
|
||||
0 0 0 2px rgb(var(--d-blue), 1),
|
||||
0 0 0 4px rgb(var(--d-green), 1),
|
||||
0 0 0 6px rgb(var(--d-orange), 1),
|
||||
0 0 0 8px rgb(var(--d-red), 1);
|
||||
|
||||
@if color-scheme-is-light {
|
||||
box-shadow:
|
||||
0 0 0 2px rgb(var(--d-blue-dark), 1),
|
||||
0 0 0 4px rgb(var(--d-green-dark), 1),
|
||||
0 0 0 6px rgb(var(--d-orange-dark), 1),
|
||||
0 0 0 8px rgb(var(--d-red-dark), 1);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-logo {
|
||||
height: 30px;
|
||||
.quick-access-panel {
|
||||
> ul,
|
||||
.empty-state__container {
|
||||
height: 100%; // flex alignment fix
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-callout__container {
|
||||
height: 47px;
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
}
|
||||
|
||||
#rewind-vhs {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.btn.rewind-callout {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
transform-origin: left top;
|
||||
z-index: 2;
|
||||
|
||||
svg {
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateX(10px) translateY(10px) scale(1.05);
|
||||
|
||||
svg {
|
||||
box-shadow: -10px 10px 15px rgb(0 0 0 / 0.15);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-callout {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
transition: transform 200ms ease;
|
||||
|
||||
.btn.no-text.--special-kbd {
|
||||
top: 0.75em;
|
||||
right: 1em;
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-callout::before {
|
||||
content: "";
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 287.46 22.28"><path d="m0 0 64.78 22.28h44.53L44.54 0z" style="fill:%23d0232b"/><path d="m44.54 0 64.77 22.28h44.54L89.08 0z" style="fill:%23f15e24"/><path d="m89.08 0 64.77 22.28h44.54L133.61 0z" style="fill:%23fdf6b0"/><path d="m133.61 0 64.78 22.28h44.54L178.15 0z" style="fill:%230ea94e"/><path d="m178.15 0 64.78 22.28h44.53L222.69 0z" style="fill:%232bace2"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 47% 100%;
|
||||
background-size: 139px;
|
||||
background-blend-mode: multiply;
|
||||
position: absolute;
|
||||
left: -48px;
|
||||
top: -15px;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: #d4d1bc;
|
||||
transform: skew(72deg, 0deg);
|
||||
transform-origin: 50% 0% 0;
|
||||
transition:
|
||||
transform 200ms ease,
|
||||
width 200ms ease;
|
||||
}
|
||||
|
||||
.rewind-callout::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
top: -5px;
|
||||
z-index: -1;
|
||||
width: 10px;
|
||||
height: calc(100% - 3px);
|
||||
background-color: #e8e5d0;
|
||||
transform: skew(0deg, 41deg) scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
@ -32,10 +32,14 @@
|
||||
|
||||
.rewind__header {
|
||||
padding: 1em 0 1em 1em;
|
||||
background-color: var(--primary);
|
||||
position: sticky;
|
||||
background-color: #fbf8e4;
|
||||
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 168.7 52.42"><path d="m0 0 49.67 52.42h23.8L23.81 0z" style="fill:%23d0222b"/><path d="m23.81 0 49.66 52.42h23.81L47.62 0z" style="fill:%23f15f25"/><path d="m47.62 0 49.66 52.42h23.81L71.42 0z" style="fill:%23fcf6b2"/><path d="m71.42 0 49.67 52.42h23.8L95.23 0z" style="fill:%2310a94d"/><path d="m95.23 0 49.66 52.42h23.81L119.04 0z" style="fill:%2329abe2"/></svg>');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 150px;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
position: sticky;
|
||||
z-index: 3;
|
||||
color: var(--rewind-black);
|
||||
|
||||
.rewind-logo {
|
||||
margin-bottom: 5px;
|
||||
@ -46,6 +50,30 @@
|
||||
text-transform: uppercase;
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
|
||||
&-logo {
|
||||
display: grid;
|
||||
grid-template-areas: "logo rewind" "logo year";
|
||||
width: 7em;
|
||||
|
||||
svg {
|
||||
grid-area: logo;
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
grid-area: rewind;
|
||||
line-height: 1;
|
||||
transform: skewX(15deg);
|
||||
}
|
||||
|
||||
&-year {
|
||||
line-height: 1;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-notification-active #toggle-current-user::after {
|
||||
|
||||
@ -5,7 +5,6 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2em;
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
@ -23,6 +22,11 @@
|
||||
position: fixed;
|
||||
background: rgb(var(--secondary-rgb), 0.5);
|
||||
backdrop-filter: blur(4.9px);
|
||||
padding: 2em;
|
||||
|
||||
.rewind {
|
||||
max-width: 1020px;
|
||||
}
|
||||
|
||||
@media (width <= 768px) {
|
||||
padding: 0;
|
||||
@ -34,52 +38,109 @@
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
max-height: 100%;
|
||||
max-width: 960px;
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
border-radius: 30px;
|
||||
container-type: size;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--secondary);
|
||||
|
||||
@media (width <= 768px) {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&::before {
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
z-index: 3;
|
||||
background: rgb(0 0 0 / 0.3);
|
||||
opacity: 0.75;
|
||||
animation: scanline 6s linear infinite;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 50%,
|
||||
rgb(0 0 0 / 0.1) 51%
|
||||
);
|
||||
background-size: 100% 4px;
|
||||
animation: scanlines 1s steps(60) infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.background-1 {
|
||||
background: absolute-image-url(
|
||||
"/plugins/discourse-rewind/images/blur-bg.png"
|
||||
);
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
transform: translateY(0);
|
||||
width: 100%;
|
||||
height: 1000%;
|
||||
opacity: 0.45;
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translate3d(0, 200000%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
opacity: 0.15;
|
||||
@keyframes scanlines {
|
||||
0% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind__scroll-wrapper {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: var(--rewind-black);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-bottom: var(--safe-area-inset-bottom);
|
||||
padding-top: 2em;
|
||||
}
|
||||
|
||||
.rewind__exit-fullscreen-btn {
|
||||
// specific to override core
|
||||
.btn.no-text.--special-kbd {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 2;
|
||||
top: 15px;
|
||||
right: 24px;
|
||||
background-color: #ede9d4;
|
||||
border-color: #d7d1b0 #c5bfa0 #d7d1b0 #c5bfa0;
|
||||
border-width: 1px 5px 7px 4px;
|
||||
box-shadow: -1px 1px 0 1px #c0b99b;
|
||||
z-index: 3;
|
||||
border-radius: 6px;
|
||||
transition:
|
||||
transform 0.1s ease,
|
||||
box-shadow 0.1s ease;
|
||||
transform: skew(3deg);
|
||||
font-size: var(--font-down-1);
|
||||
|
||||
.d-icon {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.discourse-no-touch & {
|
||||
&:hover {
|
||||
filter: brightness(0.95);
|
||||
|
||||
.d-icon {
|
||||
color: var(--rewind-grey);
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: none;
|
||||
transform: skew(3deg) translateX(-1px) translateY(1px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewind__prev-btn {
|
||||
@ -104,9 +165,16 @@
|
||||
height: 100cqh;
|
||||
gap: 1em;
|
||||
box-sizing: border-box;
|
||||
background: var(--rewind-black);
|
||||
|
||||
&__text {
|
||||
font-weight: 700;
|
||||
font-size: var(--font-up-2);
|
||||
color: var(--rewind-green);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border-color: var(--rewind-white);
|
||||
border-right-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,6 +3,16 @@
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.rewind-report-title {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
margin-left: 0;
|
||||
border: none !important;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.cards-container {
|
||||
@ -75,6 +85,36 @@
|
||||
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;
|
||||
@ -126,6 +166,7 @@
|
||||
|
||||
.rewind-card.-back {
|
||||
transform: rotateY(180deg);
|
||||
background-color: var(--rewind-white);
|
||||
}
|
||||
|
||||
.rewind-card.-front,
|
||||
@ -137,24 +178,8 @@
|
||||
}
|
||||
|
||||
.rewind-card.-front {
|
||||
background-size: cover;
|
||||
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,
|
||||
var(--primary-100) 1px,
|
||||
var(--secondary) 1px,
|
||||
var(--secondary) 6px
|
||||
)
|
||||
0 0 / 6px 6px,
|
||||
var(--secondary-low);
|
||||
}
|
||||
|
||||
&.-long-word .rewind-card__title {
|
||||
|
||||
@ -10,14 +10,18 @@
|
||||
--d-orange-dark: 188, 105, 65;
|
||||
--d-red-dark: 183, 64, 70;
|
||||
--rewind-border-radius: 4px;
|
||||
--rewind-green: #0f0;
|
||||
--rewind-blue: #00f;
|
||||
--rewind-black: #111;
|
||||
--rewind-white: #fff;
|
||||
--rewind-magenta: #f0f;
|
||||
--rewind-grey: #555;
|
||||
--rewind-light-grey: #aaa;
|
||||
--rewind-yellow: rgb(237, 237, 84);
|
||||
--rewind-beige: #fbf8e4;
|
||||
}
|
||||
|
||||
@mixin rewind-border() {
|
||||
border: 2px solid var(--primary);
|
||||
border: 2px solid var(--rewind-green);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
box-shadow: 4px 4px 0 0 rgb(var(--primary-rgb), 0.25);
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
box-shadow: 0 4px 5px -2px rgb(var(--secondary-rgb), 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,6 +8,8 @@ en:
|
||||
discourse_rewind:
|
||||
placeholder: Discourse Rewind
|
||||
title: Rewind
|
||||
year: "2025"
|
||||
loading: "Reticulating splines..."
|
||||
reports:
|
||||
activity_calendar:
|
||||
title: Activity Calendar
|
||||
|
||||
@ -27,6 +27,8 @@ require_relative "lib/discourse_rewind/engine"
|
||||
|
||||
after_initialize do
|
||||
add_to_serializer(:current_user, :is_rewind_active) do
|
||||
Date.today.month == 1 || Date.today.month == 12
|
||||
Rails.env.development? || Date.today.month == 1 || Date.today.month == 12
|
||||
end
|
||||
|
||||
add_to_serializer(:current_user, :is_development_env) { Rails.env.development? }
|
||||
end
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
BIN
public/images/cards/01-robot.gif
Normal file
BIN
public/images/cards/01-robot.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/images/cards/02-castle.gif
Normal file
BIN
public/images/cards/02-castle.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
public/images/cards/04-hand.gif
Normal file
BIN
public/images/cards/04-hand.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/images/cards/06-nature.gif
Normal file
BIN
public/images/cards/06-nature.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
public/images/cards/07-beach.gif
Normal file
BIN
public/images/cards/07-beach.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
@ -35,10 +35,11 @@ RSpec.describe(DiscourseRewind::FetchReports) do
|
||||
before { freeze_time DateTime.parse("2021-12-22") }
|
||||
|
||||
it "returns the cached reports" do
|
||||
expect(result.reports.length).to eq(16)
|
||||
initial_count = result.reports.length
|
||||
expect(initial_count).to be > 0
|
||||
|
||||
allow(DiscourseRewind::Action::TopWords).to receive(:call)
|
||||
expect(result.reports.length).to eq(16)
|
||||
expect(result.reports.length).to eq(initial_count)
|
||||
expect(DiscourseRewind::Action::TopWords).to_not have_received(:call)
|
||||
end
|
||||
end
|
||||
@ -51,7 +52,7 @@ RSpec.describe(DiscourseRewind::FetchReports) do
|
||||
|
||||
it "returns the reports" do
|
||||
allow(DiscourseRewind::Action::TopWords).to receive(:call)
|
||||
expect(result.reports.length).to eq(16)
|
||||
expect(result.reports.length).to be > 0
|
||||
expect(DiscourseRewind::Action::TopWords).to have_received(:call)
|
||||
end
|
||||
end
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user