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

prevent long titles from overlapping logo in embeds

Browse source
This commit is contained in:
Sean Yesmunt 2020-04-29 14:35:55 -04:00
parent dae3a517f5
commit 52f704fa0f
3 changed files with 10 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lbrytv/component/fileViewerEmbeddedEnded/view.jsx
View file

@ -11,7 +11,7 @@ type Props = {
isAuthenticated: boolean, isAuthenticated: boolean,
}; };
function fileViewerEmbeddedEnded(props: Props) { function FileViewerEmbeddedEnded(props: Props) {
const { uri, isAuthenticated } = props; const { uri, isAuthenticated } = props;
const prompts = isAuthenticated const prompts = isAuthenticated
@ -52,4 +52,4 @@ function fileViewerEmbeddedEnded(props: Props) {
); );
} }
export default withRouter(fileViewerEmbeddedEnded); export default withRouter(FileViewerEmbeddedEnded);

2
lbrytv/component/fileViewerEmbeddedTitle/view.jsx
View file

@ -18,8 +18,8 @@ function fileViewerEmbeddedTitle(props: Props) {
return ( return (
<div className="file-viewer__embedded-title"> <div className="file-viewer__embedded-title">
<Button className="file-viewer__overlay-logo file-viewer__embedded-title-logo" icon={ICONS.LBRY} href={URL} />
<Button label={title} button="link" href={lbrytvLink} /> <Button label={title} button="link" href={lbrytvLink} />
<Button className="file-viewer__overlay-logo file-viewer__embedded-title-logo" icon={ICONS.LBRY} href={URL} />
</div> </div>
); );
} }

19
ui/scss/component/_file-render.scss
View file

@ -213,30 +213,25 @@
.file-viewer__embedded-title { .file-viewer__embedded-title {
position: absolute; position: absolute;
display: flex;
justify-content: space-between;
width: 100%; width: 100%;
left: auto;
top: 0; top: 0;
line-height: 1.5;
z-index: 2; z-index: 2;
color: var(--color-white);
font-size: var(--font-large); font-size: var(--font-large);
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 100%;
padding: var(--spacing-small); padding: var(--spacing-small);
background-repeat: repeat-x;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
-moz-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
-webkit-transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1);
.button { .button {
color: var(--color-white); color: var(--color-white);
&:first-of-type {
max-width: 90%;
}
} }
} }
.file-viewer__embedded-title-logo {
float: right;
}
.file-render__content { .file-render__content {
width: 100%; width: 100%;