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

hand off to joffrey

Browse Source
This commit is contained in:
Jordan Vidrine 2025-01-10 21:08:47 -06:00
parent 57ebde0836
commit 27b3547bbe
13 changed files with 187 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ export default class BestTopics extends Component {
>
<span class="best-topics -rank"></span>
<span class="best-topics -rank"></span>
<h2>{{topic.title}}</h2>
<h2 class="best-topics__header">{{topic.title}}</h2>
<span class="best-topics__excerpt">{{htmlSafe
topic.excerpt
}}</span>

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

@ -86,7 +86,7 @@ export default class WordCard extends Component {
</div>
<div class="rewind-card -back">
<span class="rewind-card__title">{{@word}}</span>
<span class="rewind-card__data">used {{@count}} times</span>
<span class="rewind-card__data">{{@count}}x</span>
</div>
</div>
</div>

4
assets/stylesheets/common/activity-calendar.scss
View File

@ -1,5 +1,5 @@
.rewind-report-page.-activity-calendar {
margin-bottom: 1em;
margin-bottom: 5em;
.rewind-card {
@include rewind-border;
}
@ -20,7 +20,7 @@
.rewind-calendar-cell {
height: 10px;
width: 10px;
border-radius: var(--rewind-border-radius);
border-radius: calc(var(--rewind-border-radius) / 2);
border: 1px solid rgba(var(--primary-rgb), 0.2);
&.-empty {
background: var(--primary-low);

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

@ -51,10 +51,47 @@
}
}
.best-posts__post {
@media screen and (max-width: 425px) {
max-height: 300px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
p {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
.best-posts__post p {
font-family: var(--pixel-text) !important;
font-weight: normal;
font-size: 16px;
font-size: var(--font-down-);
width: 100%;
text-align: left;
color: var(--primary-800);
@media screen and (max-width: 425px) {
font-size: var(--font-down-2);
}
}
.best-posts__post h1,
.best-posts__post h2 {
font-family: var(--jersey-heading);
font-size: 32px;
line-height: 22px;
}
.best-post__post h5 {
font-family: var(--jersey-heading);
}
.best-posts__post table {
font-family: var(--pixel-text) !important;
font-weight: normal;
font-size: var(--font-down-1);
}
.best-posts__metadata a {
font-family: var(--pixel-text);
text-transform: uppercase;
color: var(--primary);
}
.best-posts__metadata {
font-weight: normal;
@ -66,6 +103,7 @@
}
.best-posts__likes,
.best-posts__replies {
font-family: var(--pixel-text);
border: 1px solid var(--primary-200);
padding: 3px 8px;
border-radius: var(--rewind-border-radius);

19
assets/stylesheets/common/best-topics.scss
View File

@ -14,14 +14,23 @@
border: none;
padding: 0;
}
.best-topics__header {
font-family: var(--jersey-heading);
margin: 0;
font-size: var(--font-up-3);
line-height: var(--font-0);
}
.best-topics__topic {
padding: 1em;
padding: 0.5em;
position: relative;
color: var(--primary);
display: flex;
flex-direction: column;
text-align: left;
max-width: 700px;
@media screen and (max-width: 425px) {
max-width: 90%;
}
@include rewind-border;
&.rank-1 {
--background: #ffe46a;
@ -66,10 +75,16 @@
}
}
.best-topics__excerpt {
font-size: var(--font-down-2);
font-family: var(--pixel-text);
font-size: var(--font-down-1);
font-weight: 400;
color: var(--primary-800);
text-align: left;
@media screen and (max-width: 425px) {
max-width: 100%;
overflow: hidden;
font-size: var(--font-down-2);
}
&:empty {
display: none;
}

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

@ -68,6 +68,7 @@
margin-top: auto;
height: min-content;
font-size: var(--font-down-1);
font-family: Pixelify Sans;
@media screen and (width <= 425px) {
font-size: var(--font-down-3);
}

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

@ -26,13 +26,14 @@ body {
width: 100%;
max-width: 700px;
&__title {
font-family: var(--heading-font) !important;
font-family: var(--jersey-heading) !important;
font-weight: 600;
font-size: var(--font-up-3);
-webkit-font-smoothing: antialiased;
}
&__data {
font-weight: normal;
font-size: 14px;
font-size: 16px;
-webkit-font-smoothing: antialiased;
}
}

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

@ -1,26 +1,33 @@
@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Jersey+20&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap");
@import url("https://use.typekit.net/ony6yef.css");
.rewind {
--heading-font: "Rubik", Helvetica, Arial, sans-serif;
--regular-font: "Open Sans", Helvetica, Arial, sans-serif;
--jersey-heading: "Jersey 20", Helvetica, Arial, sans-serif;
--pixel-text: "receipt-narrow", sans-serif;
h1,
h2,
h3,
h4,
h5 {
font-family: roboto;
font-family: var(--jersey-heading);
-webkit-font-smoothing: antialiased;
}
p,
span {
font-family: var(--regular-font);
span,
table,
td,
tr {
font-family: var(--pixel-text);
-webkit-font-smoothing: antialiased;
}
}
h2.rewind-report-title {
font-size: var(--font-down-2);
text-transform: uppercase;
}

49
assets/stylesheets/common/post-received-reactions.scss
View File

@ -1,7 +1,11 @@
.-post-received-reactions {
.rewind-report-container {
align-items: center;
justify-content: space-between;
gap: 0.5em;
@media screen and (width <= 425px) {
gap: 0.125em;
}
}
.rewind-card {
background: var(--secondary);
@ -45,4 +49,49 @@
height: 26px;
}
}
@media screen and (width <= 625px) {
.scale {
width: min-content;
}
.scale:nth-child(1) {
padding: 0.15em;
}
.scale:nth-child(2) {
padding: 0.25em;
}
.scale:nth-child(3) {
padding: 0.35em;
}
.scale:nth-child(4) {
padding: 0.45em;
}
.scale:nth-child(5) {
padding: 0.65em;
}
}
@media screen and (width <= 425px) {
.scale {
width: min-content;
}
.scale:nth-child(1) {
padding: 0.15em;
display: none;
}
.scale:nth-child(2) {
padding: 0.2em;
margin-top: 10px;
}
.scale:nth-child(3) {
padding: 0.2em;
margin-top: 20px;
}
.scale:nth-child(4) {
padding: 0.2em;
}
.scale:nth-child(5) {
padding: 0.2em;
margin-top: 20px;
}
}
}

2
assets/stylesheets/common/post-used-reactions.scss
View File

@ -23,7 +23,7 @@
.percentage {
font-weight: normal;
font-family: monospace;
font-display: var(--pixel-text);
font-size: 16px;
}

4
assets/stylesheets/common/reading-time.scss
View File

@ -17,6 +17,10 @@
transform: rotateY(-20deg);
}
p.reading-time__text {
font-family: var(--pixel-text);
}
.reading-time code {
background-color: rgba(var(--primary-rgb), 0.15);
}

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

@ -34,7 +34,7 @@
width: 100vw;
height: 100vh;
max-height: 100%;
max-width: 100%;
max-width: 960px;
background-color: var(--secondary);
border: 1px solid var(--primary);
border-radius: var(--rewind-border-radius);

57
assets/stylesheets/common/word-card.scss
View File

@ -7,11 +7,53 @@
.cards-container {
display: flex;
@media (max-width: 525px) {
display: grid;
grid-template:
". . . . w w . . . . " auto
". . . . w w . . . . " auto
". . a a w w z z . . " auto
". . a a w w z z . . " auto
". . a a . . z z . . " auto
". . a a . . z z . . " auto
". . . d d c c . . . " auto
". . . d d c c . . . " auto
". . . d d c c . . . " auto
". . . d d c c . . . " auto
/ auto auto auto auto auto auto auto auto;
// grid-gap: 0.5em;
.rewind-card__wrapper:nth-child(1) {
grid-area: w;
}
.rewind-card__wrapper:nth-child(2) {
grid-area: a;
}
.rewind-card__wrapper:nth-child(3) {
grid-area: z;
}
.rewind-card__wrapper:nth-child(4) {
grid-area: d;
}
.rewind-card__wrapper:nth-child(5) {
grid-area: c;
}
}
}
.rewind-card__wrapper {
width: 150px;
height: 175px;
@media screen and (width <= 625px) {
width: 115px;
}
@media screen and (width <= 425px) {
width: 100px;
height: 125px;
}
@media screen and (width <= 350px) {
width: 80px;
height: 125px;
}
perspective: 1000px;
will-change: transform;
transform-style: preserve-3d;
@ -56,6 +98,9 @@
}
&:hover .rewind-card__inner {
box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
@media (prefers-color-scheme: dark) {
box-shadow: 0px 3px 8px 2px rgba(var(--secondary-rgb), 0.9);
}
}
.rewind-card.-back {
transform: rotateY(180deg);
@ -92,6 +137,10 @@
img {
width: 20px;
height: 20px;
@media screen and (width <= 425px) {
height: 15px;
width: 15px;
}
}
}
.rewind-card__image.cr {
@ -99,6 +148,10 @@
img {
width: 50px;
height: 50px;
@media screen and (width <= 425px) {
height: 30px;
width: 30px;
}
}
}
.rewind-card__image.br {
@ -107,6 +160,10 @@
width: 20px;
height: 20px;
transform: rotate(180deg);
@media screen and (width <= 425px) {
height: 15px;
width: 15px;
}
}
}
}