lbry-desktop/ui/scss/component/_claim-list.scss

473 lines
8.4 KiB
SCSS
Raw Normal View History

2019-09-27 20:56:15 +02:00
.claim-list {
2020-01-31 17:43:14 +01:00
.claim-preview__wrapper {
2019-11-22 22:13:00 +01:00
border-bottom: 1px solid var(--color-border);
2019-09-27 20:56:15 +02:00
}
}
.claim-list__header {
2019-06-11 20:10:58 +02:00
display: flex;
2020-01-02 23:30:58 +01:00
flex-wrap: wrap;
align-items: center;
2020-06-01 19:03:19 +02:00
margin: var(--spacing-m) 0;
2020-01-02 21:36:03 +01:00
margin-top: 0;
2019-07-21 23:31:22 +02:00
font-size: var(--font-body);
2019-06-11 20:10:58 +02:00
2020-01-02 23:30:58 +01:00
.spinner {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2019-06-11 20:10:58 +02:00
}
2019-06-17 22:32:38 +02:00
}
.claim-list__dropdown {
2020-06-01 19:03:19 +02:00
padding: 0 var(--spacing-m);
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2020-01-02 23:30:58 +01:00
margin-left: 0;
2019-12-18 06:27:08 +01:00
}
2019-11-22 22:13:00 +01:00
}
2019-06-29 00:21:21 +02:00
2020-01-02 21:36:03 +01:00
.claim-list__header-label {
position: absolute;
transform: translateY(-130%);
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
.icon {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-xs);
2020-01-02 21:36:03 +01:00
}
@media (max-width: $breakpoint-small) {
position: static;
transform: none;
}
2020-01-02 17:30:27 +01:00
}
2019-11-22 22:13:00 +01:00
.claim-list__conjuction {
color: var(--color-text-subtitle);
font-size: var(--font-small);
2019-06-11 20:10:58 +02:00
}
.claim-list__alt-controls {
align-self: flex-start;
2019-06-11 20:10:58 +02:00
display: flex;
align-items: center;
margin-left: auto;
2020-06-01 19:03:19 +02:00
padding-top: var(--spacing-m);
2019-06-11 20:10:58 +02:00
& > * {
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-s);
2019-06-11 20:10:58 +02:00
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
2019-06-11 20:10:58 +02:00
}
2020-01-31 17:43:14 +01:00
.claim-preview__wrapper {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
2020-01-31 17:43:14 +01:00
list-style: none;
}
2020-02-05 19:01:07 +01:00
.claim-preview__wrapper--notice {
background-color: var(--color-notice);
}
2020-01-31 17:43:14 +01:00
.claim-preview__wrapper--inline {
padding: 0;
}
.claim-preview__wrapper--small {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
2020-01-31 17:43:14 +01:00
}
2019-06-27 08:18:45 +02:00
.claim-preview {
2019-09-27 20:56:15 +02:00
flex: 1;
2019-06-11 20:10:58 +02:00
display: flex;
position: relative;
2019-07-09 03:19:46 +02:00
overflow: visible;
2019-06-11 20:10:58 +02:00
2019-11-25 18:42:49 +01:00
&:not(.claim-preview--inline):not(.claim-preview--pending):not(.claim-preview--inactive) {
2019-07-21 23:31:22 +02:00
cursor: pointer;
}
2019-06-11 20:10:58 +02:00
.media__thumb {
2020-05-28 19:07:04 +02:00
$width: var(--file-list-thumbnail-width);
width: $width;
@include handleClaimListGifThumbnail($width);
2020-05-28 19:07:04 +02:00
2019-06-11 20:10:58 +02:00
flex-shrink: 0;
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
2019-06-11 20:10:58 +02:00
}
2019-12-18 06:27:08 +01:00
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(6rem);
}
2020-02-05 03:54:19 +01:00
&:hover {
.claim-preview__hover-actions {
display: block;
}
}
2019-12-18 06:27:08 +01:00
@media (max-width: $breakpoint-small) {
2019-12-20 21:46:59 +01:00
font-size: 14px;
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(5rem);
2019-12-18 06:27:08 +01:00
}
}
2019-07-23 10:05:51 +02:00
}
2019-06-27 08:18:45 +02:00
.claim-preview--large {
2019-07-21 23:31:22 +02:00
border: none;
2019-06-11 20:10:58 +02:00
&:hover {
background-color: transparent;
}
.media__thumb {
2019-07-21 23:31:22 +02:00
width: 14rem;
@include handleClaimListGifThumbnail(14rem);
2020-04-01 22:00:09 +02:00
@media (max-width: $breakpoint-small) {
width: 5rem;
}
2019-07-21 23:31:22 +02:00
}
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(7.5rem);
2019-07-21 23:31:22 +02:00
}
}
.claim-preview--small {
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(4rem);
2019-06-11 20:10:58 +02:00
}
}
2019-07-11 20:06:25 +02:00
.claim-preview--pending {
opacity: 0.6;
}
.claim-preview--padded {
2020-06-01 19:03:19 +02:00
padding: var(--spacing-s);
}
2019-07-21 23:31:22 +02:00
.claim-preview--inline {
.channel-thumbnail {
@include handleChannelGif(var(--channel-thumbnail-width--small));
2019-07-21 23:31:22 +02:00
}
2019-12-18 06:27:08 +01:00
.claim-preview__actions {
align-self: flex-end;
margin-top: 0;
margin-bottom: auto;
justify-content: flex-end;
width: auto;
}
.claim-preview__text {
width: 100%;
flex-direction: row;
justify-content: space-between;
}
2019-12-19 21:43:49 +01:00
@media (max-width: $breakpoint-xsmall) {
.claim-preview__text {
flex-direction: column;
}
.claim-preview__actions {
align-self: flex-start;
}
}
2019-12-18 06:27:08 +01:00
}
.claim-preview__text {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
2019-07-21 23:31:22 +02:00
}
2020-01-30 23:25:15 +01:00
.claim-preview__title {
2019-11-07 20:39:22 +01:00
font-weight: var(--font-weight-bold);
2019-11-22 22:13:00 +01:00
font-size: var(--font-body);
2019-07-21 23:31:22 +02:00
margin-right: auto;
2019-08-13 07:35:13 +02:00
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
2020-02-05 01:05:21 +01:00
color: var(--color-text);
2019-07-21 23:31:22 +02:00
}
2019-06-27 08:18:45 +02:00
.claim-preview-metadata {
2019-06-11 20:10:58 +02:00
display: flex;
flex-direction: column;
2019-07-09 03:19:46 +02:00
flex: 1;
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-s);
}
2019-06-11 20:10:58 +02:00
}
2019-06-27 08:18:45 +02:00
.claim-preview-info {
2019-06-11 20:10:58 +02:00
align-items: flex-start;
}
2019-06-27 08:18:45 +02:00
.claim-preview-info,
.claim-preview-properties {
2019-06-11 20:10:58 +02:00
display: flex;
justify-content: space-between;
}
2019-12-18 06:27:08 +01:00
.claim-preview__actions {
align-self: flex-end;
2019-08-02 03:34:48 +02:00
display: flex;
2019-12-18 06:27:08 +01:00
justify-content: space-between;
margin-top: auto;
width: 100%;
2019-08-02 03:34:48 +02:00
}
2019-12-18 06:27:08 +01:00
2020-02-11 20:04:51 +01:00
.claim-preview__actions--header {
@extend .claim-preview__actions;
2020-05-11 16:50:32 +02:00
flex-wrap: wrap;
2020-02-11 20:04:51 +01:00
}
2019-08-02 03:34:48 +02:00
.claim-preview__button {
margin-left: 2rem;
}
2019-06-27 08:18:45 +02:00
.claim-preview-properties {
2019-06-11 20:10:58 +02:00
align-items: flex-end;
2019-06-27 22:27:38 +02:00
flex: 1;
2019-11-22 22:13:00 +01:00
font-size: var(--font-small);
color: var(--color-text-subtitle);
2019-06-11 20:10:58 +02:00
}
.claim-upload {
flex: 1;
display: flex;
position: relative;
overflow: visible;
2020-06-01 19:03:19 +02:00
padding: var(--spacing-m);
.media__thumb {
width: var(--file-list-thumbnail-width);
flex-shrink: 0;
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-m);
}
}
.claim-upload__progress--outer {
width: 100%;
}
.claim-upload__progress--inner {
2019-11-25 17:54:28 +01:00
background: var(--color-primary-alt);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-xxs);
}
2020-01-20 17:47:03 +01:00
//
// The _other_ way to view claims
// A grid of tiles
// It should probably go into it's own file once we add more to it
//
.claim-grid {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: flex-start;
}
.claim-grid__wrapper {
&:not(:first-of-type) {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2020-01-20 17:47:03 +01:00
}
@media (max-width: $breakpoint-small) {
&:not(:first-of-type) {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-m);
2020-01-20 17:47:03 +01:00
}
}
}
.claim-grid__title {
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-m);
2020-01-20 17:47:03 +01:00
&:not(:first-of-type) {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-xl);
2020-01-20 17:47:03 +01:00
}
}
.claim-grid__help {
margin-bottom: 12px;
svg {
stroke: var(--color-text-subtitle);
}
}
.claim-preview--tile {
2020-06-01 19:03:19 +02:00
$width: calc((100% - var(--spacing-m) * 3) / 4);
2020-05-28 19:07:04 +02:00
width: $width;
@include handleClaimTileGifThumbnail($width);
2020-06-01 19:03:19 +02:00
margin-bottom: var(--spacing-l);
2020-01-20 17:47:03 +01:00
margin-right: 0;
margin-top: 0;
2020-06-01 19:03:19 +02:00
margin-left: var(--spacing-m);
2020-01-20 17:47:03 +01:00
justify-content: flex-start;
2020-01-29 16:26:39 +01:00
@media (min-width: $breakpoint-medium) {
&:first-child,
2020-02-17 20:12:28 +01:00
&:nth-child(4n + 1) {
2020-01-29 16:26:39 +01:00
margin-left: 0;
}
2020-01-20 17:47:03 +01:00
}
&:hover {
cursor: pointer;
}
.media__thumb {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
2020-01-30 18:41:21 +01:00
@media (max-width: $breakpoint-medium) and (min-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
$width: calc((100vw - var(--side-nav-width) - (var(--spacing-l) * 4) - var(--spacing-m) * 2) / 3);
2020-05-28 19:07:04 +02:00
width: $width;
@include handleClaimTileGifThumbnail($width);
2020-01-29 16:26:39 +01:00
&:first-child,
&:nth-child(3n + 1) {
margin-left: 0;
}
.channel-thumbnail {
display: none;
}
}
2020-01-20 17:47:03 +01:00
@media (max-width: $breakpoint-small) {
2020-06-01 19:03:19 +02:00
$width: calc((100vw / 2) - var(--spacing-s) * 2);
2020-05-28 19:07:04 +02:00
width: $width;
@include handleClaimTileGifThumbnail($width);
2020-06-01 19:31:31 +02:00
margin-bottom: var(--spacing-l);
2020-01-20 17:47:03 +01:00
&:first-child,
&:nth-child(2n + 1) {
margin-left: 0;
}
2020-01-29 16:26:39 +01:00
.channel-thumbnail {
display: none;
}
}
}
2020-01-20 17:47:03 +01:00
.claim-tile__title {
margin-bottom: 0;
2020-06-01 19:03:19 +02:00
margin: var(--spacing-s);
2020-01-20 17:47:03 +01:00
font-weight: 600;
font-size: var(--font-small);
color: var(--color-text);
min-height: 2.5rem;
2020-01-20 17:47:03 +01:00
@media (max-width: $breakpoint-small) {
font-size: var(--font-xsmall);
}
}
.claim-tile__info {
display: flex;
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
padding: var(--spacing-s);
2020-01-20 17:47:03 +01:00
border-top: 1px solid var(--color-border);
color: var(--color-subtitle);
.channel-thumbnail {
2020-05-28 19:07:04 +02:00
@include handleChannelGif(2.1rem);
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-s);
2020-01-20 17:47:03 +01:00
}
}
.claim-tile__about {
display: flex;
flex-direction: column;
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
}
2020-01-22 15:33:27 +01:00
.claim-tile__publishes {
2020-01-29 16:26:39 +01:00
font-size: var(--font-xsmall);
2020-01-22 15:33:27 +01:00
}
2020-01-20 17:47:03 +01:00
.claim-tile__about--channel {
@extend .claim-tile__about;
flex: 1;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 2.1rem;
2020-01-20 17:47:03 +01:00
font-size: var(--font-body);
}
2020-01-28 19:36:58 +01:00
.claim-tile__file-properties {
position: absolute;
2020-06-01 19:03:19 +02:00
bottom: var(--spacing-xxs);
right: var(--spacing-xxs);
background-color: var(--color-black);
2020-05-21 17:38:28 +02:00
padding: 0.3rem;
border-radius: var(--border-radius);
.file-properties {
color: var(--color-white);
}
2020-03-26 16:18:05 +01:00
2020-05-21 17:38:28 +02:00
.file-price {
padding: 0.1rem;
}
2020-03-26 16:18:05 +01:00
@media (max-width: $breakpoint-small) {
display: none;
}
2020-01-28 19:36:58 +01:00
}
2020-01-29 19:58:43 +01:00
.claim-preview--tile {
&:hover {
2020-02-05 17:42:46 +01:00
.claim-preview__hover-actions {
2020-01-29 19:58:43 +01:00
display: block;
}
}
}
2020-01-31 17:43:14 +01:00
.claim-preview__repost-author {
2020-06-01 19:03:19 +02:00
transform: translateY(calc(var(--spacing-xs) * -1));
2020-01-31 17:43:14 +01:00
font-size: var(--font-xsmall);
color: var(--color-text-subtitle);
.icon {
2020-06-01 19:03:19 +02:00
margin-right: var(--spacing-xxs);
2020-01-31 17:43:14 +01:00
margin-bottom: -1px; // Offset it slightly because it doesn't look aligned next to all lowercase text + the @ from a channel
}
}
.claim-tile__repost-author {
2020-06-01 19:03:19 +02:00
margin: var(--spacing-s);
2020-01-31 17:43:14 +01:00
margin-bottom: 0;
}
2020-02-05 17:42:46 +01:00
.claim-preview__hover-actions {
display: none;
position: absolute;
2020-06-01 19:03:19 +02:00
top: var(--spacing-xxs);
right: var(--spacing-xxs);
2020-02-05 17:42:46 +01:00
& > * {
color: var(--color-black);
background-color: var(--color-white);
2020-06-01 19:03:19 +02:00
padding: var(--spacing-xs);
2020-02-05 17:42:46 +01:00
border-radius: var(--border-radius);
}
}