{!editing && (
-
+
)}
{editing && (
-
+
)}
{title || '@' + channelName}
diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss
index 649532038..f71883daf 100644
--- a/ui/scss/component/_claim-list.scss
+++ b/ui/scss/component/_claim-list.scss
@@ -90,16 +90,14 @@
}
.media__thumb {
- $width: var(--file-list-thumbnail-width);
- width: $width;
- @include handleClaimListGifThumbnail($width);
-
+ width: var(--file-list-thumbnail-width);
flex-shrink: 0;
margin-right: var(--spacing-medium);
}
.channel-thumbnail {
- @include handleChannelGif(6rem);
+ width: 6rem;
+ height: 6rem;
}
&:hover {
@@ -117,7 +115,8 @@
}
.channel-thumbnail {
- @include handleChannelGif(5rem);
+ width: 5rem;
+ height: 5rem;
}
}
}
@@ -138,7 +137,8 @@
}
.channel-thumbnail {
- @include handleChannelGif(7.5rem);
+ width: 7.5rem;
+ height: 7.5rem;
}
}
@@ -149,7 +149,8 @@
}
.channel-thumbnail {
- @include handleChannelGif(4rem);
+ width: 4rem;
+ height: 4rem;
}
}
@@ -317,10 +318,7 @@
}
.claim-preview--tile {
- $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 3) / 4);
- width: $width;
- @include handleClaimListGifThumbnail($width);
-
+ width: calc((100% - var(--spacing-medium) * 3) / 4);
margin-bottom: var(--spacing-large);
margin-right: 0;
margin-top: 0;
@@ -344,9 +342,7 @@
}
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
- $width: calc((100vw - var(--side-nav-width) - (var(--spacing-large) * 4) - var(--spacing-medium) * 2) / 3);
- width: $width;
- @include handleClaimListGifThumbnail($width);
+ width: calc((100% - var(--spacing-medium) * 2) / 3);
&:first-child,
&:nth-child(3n + 1) {
@@ -359,9 +355,7 @@
}
@media (max-width: $breakpoint-small) {
- $width: calc((100vw / 2) - var(--spacing-medium) * 2);
- width: $width;
- @include handleClaimListGifThumbnail($width);
+ width: calc((100% - var(--spacing-medium) * 1) / 2);
margin-bottom: var(--spacing-large);
&:first-child,
@@ -396,7 +390,8 @@
color: var(--color-subtitle);
.channel-thumbnail {
- @include handleChannelGif(2.1rem);
+ width: 2.1rem;
+ height: 2.1rem;
margin-right: var(--spacing-small);
}
}
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index 64b317c4a..c31f74058 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -15,7 +15,7 @@
margin-left: auto;
margin-right: auto;
margin-top: var(--header-height);
- padding: var(--spacing-large); // Unfortunately this is coupled with .claim-preview--tile width calculation
+ padding: var(--spacing-large);
@media (max-width: $breakpoint-small) {
padding: var(--spacing-small);
diff --git a/ui/scss/init/_mixins.scss b/ui/scss/init/_mixins.scss
index 3911291f8..2b7c6a4ab 100644
--- a/ui/scss/init/_mixins.scss
+++ b/ui/scss/init/_mixins.scss
@@ -17,25 +17,3 @@
}
}
}
-
-@mixin handleClaimListGifThumbnail($width) {
- .ff-container {
- .ff-canvas.ff-canvas-ready,
- img {
- height: calc(#{$width} * (9 / 16));
- }
- }
-}
-
-@mixin handleChannelGif($size) {
- height: $size;
- width: $size;
-
- .ff-container {
- .ff-canvas.ff-canvas-ready,
- img {
- height: $size;
- width: $size;
- }
- }
-}