LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

sorta make channel pages look better with long titles

Browse source
This commit is contained in:
Sean Yesmunt 2020-04-21 09:56:03 -04:00
parent fc9d81eeaa
commit 8cf178ba79
3 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui/scss/component/_channel.scss
View file

@ -38,6 +38,8 @@ $metadata-z-index: 1;
width: 5rem; width: 5rem;
background-size: cover; background-size: cover;
margin-right: var(--spacing-medium); margin-right: var(--spacing-medium);
margin-top: var(--spacing-large);
box-shadow: var(--card-box-shadow);
} }
.channel-thumbnail--small { .channel-thumbnail--small {
@ -103,11 +105,13 @@ $metadata-z-index: 1;
padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large)); padding-left: calc(var(--channel-thumbnail-width) + var(--spacing-large));
padding-right: var(--spacing-medium); padding-right: var(--spacing-medium);
padding-bottom: var(--spacing-medium); padding-bottom: var(--spacing-medium);
margin-top: var(--spacing-xlarge);
min-width: 0; min-width: 0;
width: 100%; width: 100%;
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
padding-left: var(--spacing-medium); padding-left: var(--spacing-medium);
margin-top: 0;
} }
} }

2
ui/scss/init/_vars.scss
View file

@ -53,7 +53,7 @@ $breakpoint-medium: 1150px;
// Image // Image
--thumbnail-preview-height: 100px; --thumbnail-preview-height: 100px;
--thumbnail-preview-width: 177px; --thumbnail-preview-width: 177px;
--cover-photo-height: 180px; --cover-photo-height: 210px;
--channel-thumbnail-width: 10rem; --channel-thumbnail-width: 10rem;
--channel-thumbnail-width--small: 4rem; --channel-thumbnail-width--small: 4rem;
--file-list-thumbnail-width: 10rem; --file-list-thumbnail-width: 10rem;

2
ui/scss/themes/light.scss
View file

@ -42,7 +42,7 @@
--color-card-background-highlighted: #f6faff; --color-card-background-highlighted: #f6faff;
--color-list-header: #fff; --color-list-header: #fff;
--color-file-viewer-background: var(--color-card-background); --color-file-viewer-background: var(--color-card-background);
--color-tabs-background: var(--color-primary-alt); --color-tabs-background: var(--color-card-background);
--color-tab-divider: var(--color-primary); --color-tab-divider: var(--color-primary);
--color-modal-background: var(--color-card-background); --color-modal-background: var(--color-card-background);