Discourse/discourse-rewind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Jordan Vidrine
2025-01-13 10:48:23 -06:00
parent d02e4bd5d2
commit 535aeba9fa
10 changed files with 147 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/javascripts/discourse/components/reports/favorite-tags.gjs
+2 -2
View File
@@ -10,12 +10,12 @@ const FavoriteTags = <template>
}}</h2>
<div class="rewind-report-container">
{{#each @report.data as |data|}}
<div class="rewind-card">
<a class="rewind-card" href={{concat "/tag/" data.name}}>
<a
class="favorite-tags__tag"
href={{concat "/tag/" data.name}}
>#{{data.name}}</a>
</div>
</a>
{{/each}}
</div>
</div>
assets/javascripts/discourse/components/reports/introduction.gjs → assets/javascripts/discourse/components/reports/header.gjs
+3 -3
View File
@@ -1,5 +1,5 @@
const Introduction = <template>
<div class="rewind__introduction">
const RewindHeader = <template>
<div class="rewind__header">
<img
class="rewind-logo -light"
src="/plugins/discourse-rewind/images/discourse-rewind-logo.png"
@@ -11,4 +11,4 @@ const Introduction = <template>
</div>
</template>;
export default Introduction;
export default RewindHeader;
assets/javascripts/discourse/components/rewind.gjs
+2 -2
View File
@@ -15,7 +15,7 @@ import BestTopics from "discourse/plugins/discourse-rewind/discourse/components/
import FavoriteCategories from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-categories";
import FavoriteTags from "discourse/plugins/discourse-rewind/discourse/components/reports/favorite-tags";
import FBFF from "discourse/plugins/discourse-rewind/discourse/components/reports/fbff";
import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
import RewindHeader from "discourse/plugins/discourse-rewind/discourse/components/reports/header";
import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
import TopWords from "discourse/plugins/discourse-rewind/discourse/components/reports/top-words";
@@ -86,7 +86,7 @@ export default class Rewind extends Component {
tabindex="0"
>
<div class="rewind">
<Introduction />
<RewindHeader />
<div class="background-1 parallax-bg"></div>
{{#if this.loadingRewind}}
<div class="rewind-loader">
assets/stylesheets/common/_index.scss
+1 -1
View File
@@ -13,5 +13,5 @@
@import "fonts";
@import "reading-time";
@import "fbff";
@import "rewind-logo";
@import "rewind-header";
@import "rewind-callout";
assets/stylesheets/common/card.scss
+83
View File
@@ -43,3 +43,86 @@ body {
-webkit-font-smoothing: antialiased;
}
}
.pixel-corners,
.pixel-corners--wrapper {
clip-path: polygon(
0px calc(100% - 20px),
4px calc(100% - 20px),
4px calc(100% - 12px),
8px calc(100% - 12px),
8px calc(100% - 8px),
12px calc(100% - 8px),
12px calc(100% - 4px),
20px calc(100% - 4px),
20px 100%,
calc(100% - 20px) 100%,
calc(100% - 20px) calc(100% - 4px),
calc(100% - 12px) calc(100% - 4px),
calc(100% - 12px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 8px),
calc(100% - 8px) calc(100% - 12px),
calc(100% - 4px) calc(100% - 12px),
calc(100% - 4px) calc(100% - 20px),
100% calc(100% - 20px),
100% 20px,
calc(100% - 4px) 20px,
calc(100% - 4px) 12px,
calc(100% - 8px) 12px,
calc(100% - 8px) 8px,
calc(100% - 12px) 8px,
calc(100% - 12px) 4px,
calc(100% - 20px) 4px,
calc(100% - 20px) 0px,
20px 0px,
20px 4px,
12px 4px,
12px 8px,
8px 8px,
8px 12px,
4px 12px,
4px 20px,
0px 20px
);
position: relative;
}
.pixel-corners {
border: 4px solid transparent;
}
.pixel-corners--wrapper {
width: fit-content;
height: fit-content;
}
.pixel-corners--wrapper .pixel-corners {
display: block;
clip-path: polygon(
4px 20px,
8px 20px,
8px 12px,
12px 12px,
12px 8px,
20px 8px,
20px 4px,
calc(100% - 20px) 4px,
calc(100% - 20px) 8px,
calc(100% - 12px) 8px,
calc(100% - 12px) 12px,
calc(100% - 8px) 12px,
calc(100% - 8px) 20px,
calc(100% - 4px) 20px,
calc(100% - 4px) calc(100% - 20px),
calc(100% - 8px) calc(100% - 20px),
calc(100% - 8px) calc(100% - 12px),
calc(100% - 12px) calc(100% - 12px),
calc(100% - 12px) calc(100% - 8px),
calc(100% - 20px) calc(100% - 8px),
calc(100% - 20px) calc(100% - 4px),
20px calc(100% - 4px),
20px calc(100% - 8px),
12px calc(100% - 8px),
12px calc(100% - 12px),
8px calc(100% - 12px),
8px calc(100% - 20px),
4px calc(100% - 20px)
);
}
assets/stylesheets/common/favorite-tags.scss
+8
View File
@@ -4,6 +4,14 @@
gap: 0.5em;
flex-wrap: wrap;
}
.rewind-card {
@include rewind-border;
width: max-content;
flex-grow: 1;
&:hover {
background-color: var(--secondary-very-high);
}
}
}
.favorite-tags__tag {
assets/stylesheets/common/rewind-header.scss
+38
View File
@@ -0,0 +1,38 @@
.rewind-logo {
height: 40px;
&.-light {
display: none;
}
&.-dark {
display: block;
}
@media (prefers-color-scheme: dark) {
&.-dark {
display: none;
}
&.-light {
display: block;
}
}
}
.rewind__header {
padding: 1em 0 1em 1em;
background-color: var(--primary);
position: sticky;
top: 0;
z-index: 1;
box-shadow: 1px 0px 0px 1px var(--primary);
.rewind-logo {
margin-bottom: 5px;
}
p {
margin: 0 0.5em 0 0;
text-transform: uppercase;
font-size: var(--font-up-1);
}
}
assets/stylesheets/common/rewind-logo.scss
-16
View File
@@ -1,16 +0,0 @@
.rewind-logo {
height: 50px;
&.-dark {
display: none;
}
@media (prefers-color-scheme: dark) {
&.-dark {
display: block;
}
&.-light {
display: none;
}
}
}
assets/stylesheets/common/rewind.scss
-19
View File
@@ -69,25 +69,6 @@
flex-direction: column;
}
.rewind__introduction {
padding: 1em 0 1em 1em;
background-color: var(--primary);
position: sticky;
top: 0;
z-index: 1;
box-shadow: 1px 0px 0px 1px var(--primary);
.rewind-logo {
margin-bottom: 5px;
}
p {
margin: 0 0.5em 0 0;
text-transform: uppercase;
font-size: var(--font-up-1);
}
}
.rewind__exit-fullscreen-btn {
position: absolute;
top: 20px;
assets/stylesheets/common/top-words.scss
+10 -1
View File
@@ -101,6 +101,12 @@
box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
}
}
.rewind-card__inner {
box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
@media (prefers-color-scheme: dark) {
box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
}
}
.rewind-card.-back {
transform: rotateY(180deg);
}
@@ -124,13 +130,16 @@
/ 1fr 3fr 1fr;
background: radial-gradient(
circle at 4px 4px,
var(--primary-200) 1px,
var(--primary-100) 1px,
var(--secondary) 1px,
var(--secondary) 6px
)
0 0 / 6px 6px,
var(--secondary-low);
}
.rewind-card__image {
image-rendering: pixelated;
}
.rewind-card__image.tl {
grid-area: tl;
img {