scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Merge pull request #2043 from LiFaytheGoblin/1986/project-page/fit-title-length

Browse source 
Keep title on preview project page from overflowing or otherwise messing up the layout
This commit is contained in:
Linda 2018-09-11 10:08:38 -04:00 committed by GitHub
commit 0898054e41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/views/preview/presentation.jsx
View file

@ -110,7 +110,10 @@ const PreviewPresentation = ({
value={projectInfo.title} value={projectInfo.title}
/> : /> :
<React.Fragment> <React.Fragment>
<div className="project-title">{projectInfo.title}</div> <div
className="project-title no-edit"
title={projectInfo.title}
>{projectInfo.title}</div>
{'by '} {'by '}
<a href={`/users/${projectInfo.author.username}`}> <a href={`/users/${projectInfo.author.username}`}>
{projectInfo.author.username} {projectInfo.author.username}

17
src/views/preview/preview.scss
View file

@ -32,13 +32,23 @@ $stage-width: 480px;
transform: translate(22rem, 0); transform: translate(22rem, 0);
} }
} }
&.no-edit {
/* titles of projects you don't own should not
show the full title if this is too long */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
} }
.project-header { .project-header {
margin-right: 2rem; margin-right: 2rem;
min-width: 0;
flex-grow: 1; flex-grow: 1;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
flex-wrap: nowrap;
.inplace-input { .inplace-input {
height: calc(3rem - 4px); height: calc(3rem - 4px);
@ -63,6 +73,8 @@ $stage-width: 480px;
.title { .title {
margin-left: 1rem; margin-left: 1rem;
/* width: inherit; Inherits the width of whatever this is in. This works well for the preview page and might need to change if used in a different context*/
min-width: 0;
text-align: left; text-align: left;
font-size: .8rem; font-size: .8rem;
flex-grow: 1; flex-grow: 1;
@ -119,6 +131,10 @@ $stage-width: 480px;
} }
} }
.project-buttons {
flex-shrink: 0;
}
.button { .button {
margin-left: 1rem; margin-left: 1rem;
} }
@ -442,6 +458,7 @@ $stage-width: 480px;
content: ""; content: "";
} }
} }
.studio-button { .studio-button {
&:before { &:before {
background-image: url("/svgs/project/studio-add-white.svg"); background-image: url("/svgs/project/studio-add-white.svg");