mirror of
https://github.com/discourse/discourse-rewind.git
synced 2025-07-06 13:52:10 +00:00
DEV: Update linting (#15)
This commit is contained in:
Jarek Radosz
GitHub
parent
ffdd50cc65
commit
5e2acd9c2d
107
Gemfile.lock
107
Gemfile.lock
@ -1,80 +1,93 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (7.1.3.3)
|
||||
activesupport (8.0.2)
|
||||
base64
|
||||
benchmark (>= 0.3)
|
||||
bigdecimal
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
concurrent-ruby (~> 1.0, >= 1.3.1)
|
||||
connection_pool (>= 2.2.5)
|
||||
drb
|
||||
i18n (>= 1.6, < 2)
|
||||
logger (>= 1.4.2)
|
||||
minitest (>= 5.1)
|
||||
mutex_m
|
||||
tzinfo (~> 2.0)
|
||||
securerandom (>= 0.3)
|
||||
tzinfo (~> 2.0, >= 2.0.5)
|
||||
uri (>= 0.13.1)
|
||||
ast (2.4.2)
|
||||
base64 (0.2.0)
|
||||
bigdecimal (3.1.8)
|
||||
concurrent-ruby (1.2.3)
|
||||
connection_pool (2.4.1)
|
||||
benchmark (0.4.0)
|
||||
bigdecimal (3.1.9)
|
||||
concurrent-ruby (1.3.5)
|
||||
connection_pool (2.5.0)
|
||||
drb (2.2.1)
|
||||
i18n (1.14.5)
|
||||
i18n (1.14.7)
|
||||
concurrent-ruby (~> 1.0)
|
||||
json (2.7.2)
|
||||
language_server-protocol (3.17.0.3)
|
||||
minitest (5.23.1)
|
||||
mutex_m (0.2.0)
|
||||
parallel (1.24.0)
|
||||
parser (3.3.1.0)
|
||||
json (2.10.2)
|
||||
language_server-protocol (3.17.0.4)
|
||||
lint_roller (1.1.0)
|
||||
logger (1.6.6)
|
||||
minitest (5.25.5)
|
||||
parallel (1.26.3)
|
||||
parser (3.3.7.1)
|
||||
ast (~> 2.4.1)
|
||||
racc
|
||||
prettier_print (1.2.1)
|
||||
racc (1.8.0)
|
||||
rack (3.0.12)
|
||||
racc (1.8.1)
|
||||
rack (3.1.12)
|
||||
rainbow (3.1.1)
|
||||
regexp_parser (2.9.2)
|
||||
rexml (3.3.9)
|
||||
rubocop (1.64.0)
|
||||
regexp_parser (2.10.0)
|
||||
rubocop (1.74.0)
|
||||
json (~> 2.3)
|
||||
language_server-protocol (>= 3.17.0)
|
||||
language_server-protocol (~> 3.17.0.2)
|
||||
lint_roller (~> 1.1.0)
|
||||
parallel (~> 1.10)
|
||||
parser (>= 3.3.0.2)
|
||||
rainbow (>= 2.2.2, < 4.0)
|
||||
regexp_parser (>= 1.8, < 3.0)
|
||||
rexml (>= 3.2.5, < 4.0)
|
||||
rubocop-ast (>= 1.31.1, < 2.0)
|
||||
regexp_parser (>= 2.9.3, < 3.0)
|
||||
rubocop-ast (>= 1.38.0, < 2.0)
|
||||
ruby-progressbar (~> 1.7)
|
||||
unicode-display_width (>= 2.4.0, < 3.0)
|
||||
rubocop-ast (1.31.3)
|
||||
unicode-display_width (>= 2.4.0, < 4.0)
|
||||
rubocop-ast (1.38.1)
|
||||
parser (>= 3.3.1.0)
|
||||
rubocop-capybara (2.20.0)
|
||||
rubocop (~> 1.41)
|
||||
rubocop-discourse (3.8.0)
|
||||
rubocop-capybara (2.22.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-discourse (3.12.1)
|
||||
activesupport (>= 6.1)
|
||||
rubocop (>= 1.59.0)
|
||||
rubocop-capybara (>= 2.0.0)
|
||||
rubocop-factory_bot (>= 2.0.0)
|
||||
rubocop-rails (>= 2.25.0)
|
||||
rubocop-rspec (>= 2.25.0)
|
||||
rubocop-factory_bot (2.25.1)
|
||||
rubocop (~> 1.41)
|
||||
rubocop-rails (2.25.0)
|
||||
lint_roller (>= 1.1.0)
|
||||
rubocop (>= 1.73.2)
|
||||
rubocop-capybara (>= 2.22.0)
|
||||
rubocop-factory_bot (>= 2.27.0)
|
||||
rubocop-rails (>= 2.30.3)
|
||||
rubocop-rspec (>= 3.0.1)
|
||||
rubocop-rspec_rails (>= 2.31.0)
|
||||
rubocop-factory_bot (2.27.1)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rails (2.30.3)
|
||||
activesupport (>= 4.2.0)
|
||||
lint_roller (~> 1.1)
|
||||
rack (>= 1.1)
|
||||
rubocop (>= 1.33.0, < 2.0)
|
||||
rubocop-ast (>= 1.31.1, < 2.0)
|
||||
rubocop-rspec (2.29.2)
|
||||
rubocop (~> 1.40)
|
||||
rubocop-capybara (~> 2.17)
|
||||
rubocop-factory_bot (~> 2.22)
|
||||
rubocop-rspec_rails (~> 2.28)
|
||||
rubocop-rspec_rails (2.28.3)
|
||||
rubocop (~> 1.40)
|
||||
rubocop (>= 1.72.1, < 2.0)
|
||||
rubocop-ast (>= 1.38.0, < 2.0)
|
||||
rubocop-rspec (3.5.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec_rails (2.31.0)
|
||||
lint_roller (~> 1.1)
|
||||
rubocop (~> 1.72, >= 1.72.1)
|
||||
rubocop-rspec (~> 3.5)
|
||||
ruby-progressbar (1.13.0)
|
||||
securerandom (0.4.1)
|
||||
syntax_tree (6.2.0)
|
||||
prettier_print (>= 1.2.0)
|
||||
tzinfo (2.0.6)
|
||||
concurrent-ruby (~> 1.0)
|
||||
unicode-display_width (2.5.0)
|
||||
unicode-display_width (3.1.4)
|
||||
unicode-emoji (~> 4.0, >= 4.0.4)
|
||||
unicode-emoji (4.0.4)
|
||||
uri (1.0.3)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
@ -84,4 +97,4 @@ DEPENDENCIES
|
||||
syntax_tree
|
||||
|
||||
BUNDLED WITH
|
||||
2.5.10
|
||||
2.6.6
|
||||
|
||||
@ -5,9 +5,9 @@
|
||||
module DiscourseRewind
|
||||
module Action
|
||||
class Fbff < BaseReport
|
||||
MAX_SUMMARY_RESULTS ||= 50
|
||||
LIKE_SCORE ||= 1
|
||||
REPLY_SCORE ||= 10
|
||||
MAX_SUMMARY_RESULTS = 50
|
||||
LIKE_SCORE = 1
|
||||
REPLY_SCORE = 10
|
||||
|
||||
def call
|
||||
most_liked_users =
|
||||
|
||||
@ -1,17 +1,22 @@
|
||||
.-activity-calendar {
|
||||
margin-bottom: 5em;
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-calendar {
|
||||
border-collapse: unset;
|
||||
border-spacing: 3px;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
border-spacing: 1px;
|
||||
}
|
||||
|
||||
tr {
|
||||
border: none;
|
||||
}
|
||||
@ -26,21 +31,26 @@
|
||||
.rewind-calendar-cell {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
@media screen and (width <= 475px) {
|
||||
border-radius: calc(var(--rewind-border-radius) / 2);
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
height: 5px;
|
||||
width: 5px;
|
||||
}
|
||||
border-radius: calc(var(--rewind-border-radius) / 2);
|
||||
border: 1px solid rgba(var(--primary-rgb), 0.2);
|
||||
|
||||
&.-empty {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
|
||||
&.-low {
|
||||
background: var(--tertiary-low);
|
||||
}
|
||||
|
||||
&.-medium {
|
||||
background: var(--tertiary-medium);
|
||||
}
|
||||
|
||||
&.-high {
|
||||
background: var(--tertiary-high);
|
||||
}
|
||||
|
||||
@ -3,45 +3,52 @@
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
max-width: 700px;
|
||||
text-align: left;
|
||||
align-items: unset;
|
||||
position: relative;
|
||||
|
||||
@include rewind-border;
|
||||
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
}
|
||||
|
||||
&.rank-2 {
|
||||
--background: #d6d6d6;
|
||||
--border-color: #c4c4c4;
|
||||
}
|
||||
|
||||
&.rank-3 {
|
||||
--background: #dca570;
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
}
|
||||
|
||||
.best-posts.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
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: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -50,12 +57,14 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.best-posts__post {
|
||||
@media screen and (max-width: 475px) {
|
||||
max-height: 300px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
p {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
@ -63,6 +72,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.best-posts__post p {
|
||||
font-family: var(--pixel-text) !important;
|
||||
font-weight: normal;
|
||||
@ -70,39 +80,47 @@
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
color: var(--primary-800);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
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__post img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.best-posts__post code,
|
||||
.best-posts__post pre {
|
||||
font-family: var(--pixel-text);
|
||||
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;
|
||||
font-size: 12px;
|
||||
@ -111,6 +129,7 @@
|
||||
color: var(--primary-700);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.best-posts__likes,
|
||||
.best-posts__replies {
|
||||
font-family: var(--pixel-text);
|
||||
@ -120,6 +139,7 @@
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
color: var(--primary-700);
|
||||
}
|
||||
|
||||
@ -3,9 +3,11 @@
|
||||
flex-direction: column;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
.best-topics__title {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
gap: 1em;
|
||||
align-items: flex-start;
|
||||
@ -14,12 +16,14 @@
|
||||
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: 0.5em;
|
||||
position: relative;
|
||||
@ -28,41 +32,47 @@
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
max-width: 700px;
|
||||
|
||||
@include rewind-border;
|
||||
|
||||
&.rank-1 {
|
||||
--background: #ffe46a;
|
||||
--border-color: #ffd82a;
|
||||
}
|
||||
|
||||
&.rank-2 {
|
||||
--background: #d6d6d6;
|
||||
--border-color: #c4c4c4;
|
||||
}
|
||||
|
||||
&.rank-3 {
|
||||
--background: #dca570;
|
||||
--border-color: #cd7f32;
|
||||
}
|
||||
background: var(--secondary);
|
||||
}
|
||||
|
||||
.best-topics.-rank {
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: -20px;
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
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: 0px;
|
||||
height: 0px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -71,17 +81,20 @@
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.best-topics__excerpt {
|
||||
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: 475px) {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
.rewind-report-container {
|
||||
perspective: 1000px;
|
||||
|
||||
--ambientAmount: 0.1;
|
||||
--easeAmount: 0;
|
||||
animation: ambientMovement;
|
||||
@ -22,18 +23,22 @@
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
|
||||
&__title {
|
||||
font-family: var(--jersey-heading) !important;
|
||||
font-weight: 600;
|
||||
font-size: var(--font-up-3);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
@media screen and (max-width: 525px) {
|
||||
font-size: var(--font-up-2);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
font-size: var(--font-up-0);
|
||||
}
|
||||
}
|
||||
|
||||
&__data {
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
width: max-content;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-very-high);
|
||||
}
|
||||
|
||||
@ -4,10 +4,12 @@
|
||||
gap: 0.5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
width: max-content;
|
||||
flex-grow: 1;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--secondary-very-high);
|
||||
}
|
||||
|
||||
@ -1,23 +1,27 @@
|
||||
.-fbff {
|
||||
--border-size: 6px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
--border-size: 4px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
--border-size: 3px;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 400px 1fr;
|
||||
@media screen and (width <= 625px) {
|
||||
|
||||
@include rewind-border;
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: min-content min-content;
|
||||
grid-template-areas: "gif gif gif" "friend nothing you";
|
||||
}
|
||||
}
|
||||
|
||||
--border-size: 6px;
|
||||
@media screen and (width <= 768px) {
|
||||
--border-size: 4px;
|
||||
}
|
||||
@media screen and (width <= 475px) {
|
||||
--border-size: 3px;
|
||||
}
|
||||
|
||||
.fbff-gif-container {
|
||||
position: relative;
|
||||
width: 90%;
|
||||
@ -25,7 +29,8 @@
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
z-index: 10;
|
||||
@media screen and (width <= 625px) {
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
grid-area: gif;
|
||||
}
|
||||
}
|
||||
@ -37,7 +42,11 @@
|
||||
|
||||
.fbff-avatar-container {
|
||||
z-index: 10;
|
||||
@media screen and (width <= 625px) {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min-content;
|
||||
flex-direction: column;
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
&:first-of-type {
|
||||
grid-area: friend;
|
||||
}
|
||||
@ -46,27 +55,23 @@
|
||||
grid-area: you;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fbff-avatar-container img.avatar {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
@media screen and (width <= 768px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
@media screen and (width <= 475px) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
img.avatar {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
|
||||
.fbff-avatar-container {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr min-content;
|
||||
flex-direction: column;
|
||||
@media screen and (max-width: 768px) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fbff-avatar-name {
|
||||
@ -76,8 +81,9 @@
|
||||
margin-top: auto;
|
||||
height: min-content;
|
||||
font-size: var(--font-down-1);
|
||||
font-family: "Pixelify Sans";
|
||||
@media screen and (width <= 475px) {
|
||||
font-family: "Pixelify Sans", sans-serif;
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
font-size: var(--font-down-3);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,20 +3,17 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5em;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
gap: 0.125em;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
background: var(--secondary);
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
height: min-content;
|
||||
@include rewind-border;
|
||||
.emoji {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
perspective: 1000px;
|
||||
will-change: transform;
|
||||
transform-style: preserve-3d;
|
||||
@ -28,87 +25,115 @@
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: ease-in-out;
|
||||
z-index: 1;
|
||||
|
||||
@include rewind-border;
|
||||
|
||||
.emoji {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card__emoji {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.scale:nth-child(1) {
|
||||
padding: 0.25em;
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 12deg));
|
||||
|
||||
.emoji {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.scale:nth-child(2) {
|
||||
padding: 0.35em;
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 11.2deg));
|
||||
|
||||
.emoji {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.scale:nth-child(3) {
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 10deg));
|
||||
padding: 0.5em;
|
||||
|
||||
.emoji {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.scale:nth-child(4) {
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 8deg));
|
||||
padding: 0.75em;
|
||||
|
||||
.emoji {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
.scale:nth-child(5) {
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 13deg));
|
||||
}
|
||||
@media screen and (width <= 625px) {
|
||||
|
||||
@media screen and (max-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 <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
.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,6 +2,7 @@
|
||||
.rewind-card {
|
||||
@include rewind-border;
|
||||
}
|
||||
|
||||
.rewind-reactions-chart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -8,14 +8,15 @@
|
||||
.book {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
@media screen and (width <= 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(-20deg);
|
||||
z-index: 2;
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
}
|
||||
|
||||
p.reading-time__text {
|
||||
@ -32,29 +33,24 @@ p.reading-time__text {
|
||||
left: 0;
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
@media screen and (width <= 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
transform: translateZ(17.5px);
|
||||
background-color: #01060f;
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 5px 5px 20px rgba(var(--primary-rgb), 0.05);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
}
|
||||
|
||||
.book::before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
background-color: blue;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
width: 33px;
|
||||
height: 192px;
|
||||
@media screen and (width <= 475px) {
|
||||
left: -43px;
|
||||
width: 22px;
|
||||
height: 125px;
|
||||
}
|
||||
transform: translateX(128.5px) rotateY(90deg);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
@ -80,6 +76,12 @@ p.reading-time__text {
|
||||
#b6b6b6 95%,
|
||||
#b6b6b6 100%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
left: -43px;
|
||||
width: 22px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
.book::after {
|
||||
@ -92,8 +94,9 @@ p.reading-time__text {
|
||||
transform: translateZ(-17.5px);
|
||||
background-color: var(--book-color);
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
@media screen and (width <= 475px) {
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
@ -102,7 +105,8 @@ p.reading-time__text {
|
||||
.reading-time__text {
|
||||
font-weight: normal;
|
||||
width: 50%;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
}
|
||||
@ -110,45 +114,43 @@ p.reading-time__text {
|
||||
.reading-time .rewind-card {
|
||||
gap: 1em;
|
||||
padding: 1.5em;
|
||||
@media screen and (width <= 475px) {
|
||||
padding: 0.75em;
|
||||
}
|
||||
flex-direction: row;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
background-color: var(--secondary);
|
||||
|
||||
--book-color: var(--primary-very-high);
|
||||
|
||||
@include rewind-border;
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
padding: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.book-series {
|
||||
width: 150px;
|
||||
height: 200px;
|
||||
@media screen and (width <= 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
position: relative;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(-20deg);
|
||||
position: absolute;
|
||||
background-color: var(--book-color);
|
||||
border-radius: 0 5px 5px 0;
|
||||
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25);
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 100px;
|
||||
height: 133px;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: " ";
|
||||
background-color: blue;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
width: 33px;
|
||||
height: 192px;
|
||||
@media screen and (width <= 475px) {
|
||||
left: -43px;
|
||||
width: 22px;
|
||||
height: 125px;
|
||||
}
|
||||
transform: translateX(128.5px) rotateY(90deg);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
@ -174,29 +176,41 @@ p.reading-time__text {
|
||||
#b6b6b6 95%,
|
||||
#b6b6b6 100%
|
||||
);
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
left: -43px;
|
||||
width: 22px;
|
||||
height: 125px;
|
||||
}
|
||||
}
|
||||
|
||||
&.one {
|
||||
top: 3px;
|
||||
left: 14px;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
top: 3px;
|
||||
left: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
&.two {
|
||||
top: 5px;
|
||||
left: 22px;
|
||||
z-index: -1;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
top: 5px;
|
||||
left: 17px;
|
||||
}
|
||||
}
|
||||
|
||||
&.three {
|
||||
top: 7px;
|
||||
left: 31px;
|
||||
z-index: -2;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,8 @@
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
flex-direction: column;
|
||||
@media (width <= 768px) {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
.rewind-callout {
|
||||
background: var(--primary);
|
||||
padding: 12px;
|
||||
margin-bottom: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@ -13,21 +12,26 @@
|
||||
transition: box-shadow;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-in-out;
|
||||
.rewind-logo {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: var(--primary) !important;
|
||||
box-shadow: 0 0 0 2px rgba(var(--d-blue), 1),
|
||||
0 0 0 4px rgba(var(--d-green), 1), 0 0 0 6px rgba(var(--d-orange), 1),
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(var(--d-blue), 1),
|
||||
0 0 0 4px rgba(var(--d-green), 1),
|
||||
0 0 0 6px rgba(var(--d-orange), 1),
|
||||
0 0 0 8px rgba(var(--d-red), 1);
|
||||
|
||||
@if color-scheme-is-light {
|
||||
box-shadow: 0 0 0 2px rgba(var(--d-blue-dark), 1),
|
||||
box-shadow:
|
||||
0 0 0 2px rgba(var(--d-blue-dark), 1),
|
||||
0 0 0 4px rgba(var(--d-green-dark), 1),
|
||||
0 0 0 6px rgba(var(--d-orange-dark), 1),
|
||||
0 0 0 8px rgba(var(--d-red-dark), 1);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-logo {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,6 +23,7 @@
|
||||
&.-dark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.-light {
|
||||
display: block;
|
||||
}
|
||||
@ -35,6 +36,7 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
|
||||
.rewind-logo {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
@ -23,8 +23,8 @@
|
||||
position: fixed;
|
||||
background: rgba(var(--secondary-rgb), 0.5);
|
||||
backdrop-filter: blur(4.9px);
|
||||
-webkit-backdrop-filter: blur(4.9px);
|
||||
@media (width <= 768px) {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@ -35,16 +35,16 @@
|
||||
height: 100vh;
|
||||
max-height: 100%;
|
||||
max-width: 960px;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
container-type: size;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--secondary);
|
||||
@media (width <= 768px) {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -52,16 +52,18 @@
|
||||
background: absolute-image-url(
|
||||
"/plugins/discourse-rewind/images/blur-bg.png"
|
||||
);
|
||||
@if is-dark-color-scheme() {
|
||||
opacity: 0.15;
|
||||
}
|
||||
background-size: contain;
|
||||
position: absolute;
|
||||
transform: translateY(0px);
|
||||
transform: translateY(0);
|
||||
width: 100%;
|
||||
height: 1000%;
|
||||
opacity: 0.45;
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
|
||||
.rewind__scroll-wrapper {
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
|
||||
.cards-container {
|
||||
display: flex;
|
||||
|
||||
@media (max-width: 525px) {
|
||||
display: grid;
|
||||
grid-template:
|
||||
@ -21,18 +22,23 @@
|
||||
". . . d d c c . . . " auto
|
||||
". . . d d c c . . . " auto
|
||||
/ auto auto auto auto auto auto auto auto;
|
||||
|
||||
.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;
|
||||
}
|
||||
@ -42,17 +48,6 @@
|
||||
.rewind-card__wrapper {
|
||||
width: 150px;
|
||||
height: 175px;
|
||||
@media screen and (width <= 625px) {
|
||||
width: 115px;
|
||||
}
|
||||
@media screen and (width <= 475px) {
|
||||
width: 100px;
|
||||
height: 125px;
|
||||
}
|
||||
@media screen and (width <= 350px) {
|
||||
width: 80px;
|
||||
height: 125px;
|
||||
}
|
||||
perspective: 1000px;
|
||||
will-change: transform;
|
||||
transform-style: preserve-3d;
|
||||
@ -65,14 +60,31 @@
|
||||
animation-timing-function: ease-in-out;
|
||||
transform: rotateZ(calc(var(--ambientAmount) * 10deg));
|
||||
z-index: 1;
|
||||
|
||||
@media screen and (max-width: 625px) {
|
||||
width: 115px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
width: 100px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 350px) {
|
||||
width: 80px;
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.rewind-card {
|
||||
box-shadow: 0 0 0 4px rgba(var(--mystery-color-light), 1);
|
||||
border: none;
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
background-color: var(--primary-200);
|
||||
box-shadow: 0 0 0 4px rgba(var(--mystery-color-dark), 1);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card__inner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -82,42 +94,48 @@
|
||||
transition: transform, box-shadow;
|
||||
transition-duration: 0.35s;
|
||||
transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
|
||||
box-shadow: 0 0 6px 2px rgba(var(--primary-rgb), 0.25);
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
box-shadow: 0 0 6px 2px rgba(var(--secondary-rgb), 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
&.mouseleave {
|
||||
animation: flip-shrink 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s
|
||||
forwards;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&.flipped .rewind-card__inner {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation: flip-zoom 0.35s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
&:hover .rewind-card__inner {
|
||||
box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
|
||||
box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
box-shadow: 0px 3px 8px 2px rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
}
|
||||
.rewind-card__inner {
|
||||
box-shadow: 0px 0px 6px 2px rgba(var(--primary-rgb), 0.25);
|
||||
@if is-dark-color-scheme() {
|
||||
box-shadow: 0px 0px 6px 2px rgba(var(--secondary-rgb), 0.9);
|
||||
box-shadow: 0 3px 8px 2px rgba(var(--primary-rgb), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card.-back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.rewind-card.-front,
|
||||
.rewind-card.-back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-backface-visibility: hidden; /* Safari */
|
||||
height: 100%; /* Safari */
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.rewind-card.-front {
|
||||
padding: 0.5em;
|
||||
display: grid;
|
||||
@ -128,7 +146,8 @@
|
||||
". . . " 1fr
|
||||
". . br" 1fr
|
||||
/ 1fr 3fr 1fr;
|
||||
background: radial-gradient(
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 4px 4px,
|
||||
var(--primary-100) 1px,
|
||||
var(--secondary) 1px,
|
||||
@ -137,48 +156,61 @@
|
||||
0 0 / 6px 6px,
|
||||
var(--secondary-low);
|
||||
}
|
||||
|
||||
&.-long-word .rewind-card__title {
|
||||
font-size: var(--font-0);
|
||||
}
|
||||
|
||||
&.-long-word .rewind-card {
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.rewind-card__title {
|
||||
overflow-wrap: anywhere;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
.rewind-card__image {
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
|
||||
.rewind-card__image.tl {
|
||||
grid-area: tl;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card__image.cr {
|
||||
grid-area: cr;
|
||||
|
||||
img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rewind-card__image.br {
|
||||
grid-area: br;
|
||||
|
||||
img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
transform: rotate(180deg);
|
||||
@media screen and (width <= 475px) {
|
||||
|
||||
@media screen and (max-width: 475px) {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
}
|
||||
@ -190,9 +222,11 @@
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
@ -202,9 +236,11 @@
|
||||
0% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@ -214,9 +250,11 @@
|
||||
0% {
|
||||
--ambientAmount: 0.1;
|
||||
}
|
||||
|
||||
50% {
|
||||
--ambientAmount: -0.1;
|
||||
}
|
||||
|
||||
100% {
|
||||
--ambientAmount: 0.1;
|
||||
}
|
||||
|
||||
@ -9,7 +9,6 @@
|
||||
--d-green-dark: 17, 138, 68;
|
||||
--d-orange-dark: 188, 105, 65;
|
||||
--d-red-dark: 183, 64, 70;
|
||||
|
||||
--rewind-border-radius: 4px;
|
||||
}
|
||||
|
||||
@ -17,6 +16,7 @@
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: var(--rewind-border-radius);
|
||||
box-shadow: 4px 4px 0 0 rgba(var(--primary-rgb), 0.25);
|
||||
|
||||
@if is-dark-color-scheme() {
|
||||
box-shadow: 0 4px 5px -2px rgba(var(--secondary-rgb), 0.5);
|
||||
}
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
{
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@discourse/lint-configs": "2.4.0",
|
||||
"ember-template-lint": "6.1.0",
|
||||
"eslint": "9.19.0",
|
||||
"prettier": "2.8.8"
|
||||
"@discourse/lint-configs": "2.11.1",
|
||||
"ember-template-lint": "7.0.1",
|
||||
"eslint": "9.22.0",
|
||||
"prettier": "3.5.3",
|
||||
"stylelint": "16.16.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 22",
|
||||
|
||||
2364
pnpm-lock.yaml
generated
2364
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
3
stylelint.config.mjs
Normal file
3
stylelint.config.mjs
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
extends: ["@discourse/lint-configs/stylelint"],
|
||||
};
|
||||
Loading…
x
Reference in New Issue
Block a user