Skip to content

Commit

Permalink
fix: Lint css and fix failing test
Browse files Browse the repository at this point in the history
  • Loading branch information
@anshg1214 @amCap1712
anshg1214 authored and amCap1712 committed Dec 27, 2023
1 parent 7d8c087 commit 0bf4f44
Show file tree
Hide file tree
Showing 9 changed files with 412 additions and 403 deletions.
406 changes: 206 additions & 200 deletions frontend/css/entity-pages.less
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion frontend/css/fresh-releases.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,7 +206,6 @@
justify-items: center;
gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(190px, max-content));

}
}

Expand Down
344 changes: 172 additions & 172 deletions frontend/css/release-card.less
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,173 @@
.release-card-container {
display: flex;
flex-direction: column;
.release-item {
position: relative;
}
.release-information {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
.tags {
font-size: smaller;
}
.listen-count {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
}
.listen-count-number {
margin-left: 5px;
}
.cover-art-info {
width: 100%;
background-color: rgba(53, 48, 112, 0.9);
padding: 0.5rem;
color: white;
text-align: center;
display: flex;
justify-content: space-between;
margin-top: 1px;
}
.cover-art-info:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.release-coverart-container:hover .hover-backdrop {
background: linear-gradient(
18deg,
rgba(0, 0, 0, 0.8) -15.26%,
rgba(0, 0, 0, 0.16) 119.11%
);
border-radius: 8px;
opacity: 1;
}
.hover-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;
svg {
width: 6rem;
height: 6rem;
color: #d9d9d9;
opacity: 0.6;
}
}
.release-coverart-container:hover .release-coverart-placeholder svg {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.release-coverart-placeholder {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(
18deg,
rgba(0, 0, 0, 0.2) -15.26%,
rgba(0, 0, 0, 0.04) 119.11%
);
svg {
width: 6rem;
height: 6rem;
color: #d9d9d9;
filter: none;
transition: filter 0.3s ease-out;
}
}
.release-coverart-placeholder.hide-placeholder {
display: none;
height: 0;
}
.release-date {
text-transform: uppercase;
text-align: right;
font-weight: 500;
font-size: smaller;
cursor: default;
}
.release-coverart.hide-image {
display: none;
height: 0;
}
.release-coverart {
width: 12em;
height: 12em;
border-radius: 8px;
user-select: none;
aspect-ratio: 1;
object-fit: cover;
box-shadow: 4px 4px 8px -2px fade(@asphalt, 20%);
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1) 0.1s;
&:hover {
box-shadow: 8px 2px 20px -4px fade(@asphalt, 60%);
}
}
.name-type-container {
margin-top: 0.5rem;
width: 12em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.release-name {
flex-grow: 1;
padding-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.release-type-chip {
text-align: left;
text-transform: uppercase;
font-weight: 500;
font-size: smaller;
cursor: default;
}
.release-artist {
width: 12em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
a {
font-weight: 500;
}
}
}
display: flex;
flex-direction: column;

.release-item {
position: relative;
}

.release-information {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}

.tags {
font-size: smaller;
}

.listen-count {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
}

.listen-count-number {
margin-left: 5px;
}

.cover-art-info {
width: 100%;
background-color: rgba(53, 48, 112, 0.9);
padding: 0.5rem;
color: white;
text-align: center;
display: flex;
justify-content: space-between;
margin-top: 1px;
}

.cover-art-info:last-child {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}

.release-coverart-container:hover .hover-backdrop {
background: linear-gradient(
18deg,
rgba(0, 0, 0, 0.8) -15.26%,
rgba(0, 0, 0, 0.16) 119.11%
);
border-radius: 8px;
opacity: 1;
}

.hover-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.2s ease;
z-index: 1;

svg {
width: 6rem;
height: 6rem;
color: #d9d9d9;
opacity: 0.6;
}
}

.release-coverart-container:hover .release-coverart-placeholder svg {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}

.release-coverart-placeholder {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(
18deg,
rgba(0, 0, 0, 0.2) -15.26%,
rgba(0, 0, 0, 0.04) 119.11%
);

svg {
width: 6rem;
height: 6rem;
color: #d9d9d9;
filter: none;
transition: filter 0.3s ease-out;
}
}

.release-coverart-placeholder.hide-placeholder {
display: none;
height: 0;
}

.release-date {
text-transform: uppercase;
text-align: right;
font-weight: 500;
font-size: smaller;
cursor: default;
}

.release-coverart.hide-image {
display: none;
height: 0;
}

.release-coverart {
width: 12em;
height: 12em;
border-radius: 8px;
user-select: none;
aspect-ratio: 1;
object-fit: cover;
box-shadow: 4px 4px 8px -2px fade(@asphalt, 20%);
transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1) 0.1s;

&:hover {
box-shadow: 8px 2px 20px -4px fade(@asphalt, 60%);
}
}

.name-type-container {
margin-top: 0.5rem;
width: 12em;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}

.release-name {
flex-grow: 1;
padding-right: 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

.release-type-chip {
text-align: left;
text-transform: uppercase;
font-weight: 500;
font-size: smaller;
cursor: default;
}

.release-artist {
width: 12em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

a {
font-weight: 500;
}
}
}
14 changes: 9 additions & 5 deletions frontend/js/src/entity-pages/ArtistPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,12 @@ export default function ArtistPage(props: ArtistPageProps): JSX.Element {
releaseGroups,
similarArtists,
listeningStats,
coverArt: coverArtSVG
coverArt: coverArtSVG,
} = props;
const { total_listen_count: listenCount, listeners: topListeners } = listeningStats;
const {
total_listen_count: listenCount,
listeners: topListeners,
} = listeningStats;

const [artist, setArtist] = React.useState(initialArtist);
const [reviews, setReviews] = React.useState<CritiqueBrainzReviewAPI[]>([]);
Expand All @@ -62,8 +65,9 @@ export default function ArtistPage(props: ArtistPageProps): JSX.Element {
);
const [loading, setLoading] = React.useState(false);

const [albumsByThisArtist, alsoAppearsOn] = partition(releaseGroups, (rg) =>
rg.artists[0].artist_mbid === artist.artist_mbid
const [albumsByThisArtist, alsoAppearsOn] = partition(
releaseGroups,
(rg) => rg.artists[0].artist_mbid === artist.artist_mbid
);
/** Navigation from one artist to a similar artist */
// const onClickSimilarArtist: React.MouseEventHandler<HTMLElement> = (
Expand Down Expand Up @@ -495,7 +499,7 @@ document.addEventListener("DOMContentLoaded", () => {
release_groups,
similar_artists,
listening_stats,
cover_art
cover_art,
} = reactProps;

const ArtistPageWithAlertNotifications = withAlertNotifications(ArtistPage);
Expand Down
2 changes: 1 addition & 1 deletion frontend/js/src/stats/Bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ export default function Bar(props: BarProps) {
"artistMBID",
"release",
"releaseMBID",
"artists"
"artists",
])
);
return (
Expand Down
Loading

0 comments on commit 0bf4f44

Please sign in to comment.