scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-17 00:21:20 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

prevented overflowing project title in a nice looking way

Browse source
This commit is contained in:
Linda 2018-08-23 14:24:31 -04:00
parent d32be3a843
commit 9db42fe9f4
2 changed files with 16 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -32,6 +32,14 @@ $stage-width: 480px;
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 {
@ -39,6 +47,8 @@ $stage-width: 480px;
flex-grow: 1;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
width: 65%; /* Setting a width to the header will keep it from flowing over the usual content of the page */
.inplace-input {
height: calc(3rem - 4px);
@ -66,9 +76,10 @@ $stage-width: 480px;
text-align: left;
font-size: .8rem;
flex-grow: 1;
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*/
}
.validation-message {
.validation-message {
$arrow-border-width: 1rem;
display: block;
position: absolute;