From 9db42fe9f422014b7953d462ebc27d2643164b4a Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 23 Aug 2018 14:24:31 -0400 Subject: [PATCH 1/4] prevented overflowing project title in a nice looking way --- src/views/preview/presentation.jsx | 5 ++++- src/views/preview/preview.scss | 13 ++++++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/src/views/preview/presentation.jsx b/src/views/preview/presentation.jsx index bffa0f829..98400fbea 100644 --- a/src/views/preview/presentation.jsx +++ b/src/views/preview/presentation.jsx @@ -99,7 +99,10 @@ const PreviewPresentation = ({ value={projectInfo.title} /> : -
{projectInfo.title}
+
{projectInfo.title}
{'by '} {projectInfo.author.username} diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 8aefd8ead..9e6c98d1c 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -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; From befa5485bb523931a754a0ebcde1bf26057b9853 Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 23 Aug 2018 14:31:44 -0400 Subject: [PATCH 2/4] some ordering of css stuff fixed --- src/views/preview/preview.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index 9e6c98d1c..e2dbd84f7 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -44,11 +44,11 @@ $stage-width: 480px; .project-header { margin-right: 2rem; + width: 65%; /* Setting a width to the header will keep it from flowing over the usual content of the page */ 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); @@ -73,13 +73,13 @@ $stage-width: 480px; .title { 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*/ 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; From b0ecae351e2032bb142f522ad4dee5712854daf1 Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 30 Aug 2018 15:37:51 -0400 Subject: [PATCH 3/4] prevented the project title from overflowing in a way more elegant way --- src/views/preview/preview.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index fa15e68f4..eebbffec5 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -44,7 +44,7 @@ $stage-width: 480px; .project-header { margin-right: 2rem; - width: 65%; /* Setting a width to the header will keep it from flowing over the usual content of the page */ + min-width: 0; flex-grow: 1; justify-content: flex-start; align-items: flex-start; @@ -73,7 +73,8 @@ $stage-width: 480px; .title { 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*/ + /* 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; font-size: .8rem; flex-grow: 1; @@ -130,6 +131,10 @@ $stage-width: 480px; } } + .project-buttons { + flex-shrink: 0; + } + .button { margin-left: 1rem; } From d78ee1fe7c82d06110fe887fbb7734ea80198711 Mon Sep 17 00:00:00 2001 From: Linda Date: Thu, 30 Aug 2018 15:44:17 -0400 Subject: [PATCH 4/4] some linting --- src/views/preview/preview.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/views/preview/preview.scss b/src/views/preview/preview.scss index eebbffec5..a090ee077 100644 --- a/src/views/preview/preview.scss +++ b/src/views/preview/preview.scss @@ -132,7 +132,7 @@ $stage-width: 480px; } .project-buttons { - flex-shrink: 0; + flex-shrink: 0; } .button { @@ -458,6 +458,7 @@ $stage-width: 480px; content: ""; } } + .studio-button { &:before { background-image: url("/svgs/project/studio-add-white.svg");