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

Merge pull request #5632 from ericrosenbaum/add-to-studio-fixes

Browse source 
Style fixes for "add to studio" modal
This commit is contained in:
Eric Rosenbaum 2021-06-18 15:43:33 -04:00 committed by GitHub
commit 303d800041
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 37 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/views/studio/modals/user-projects-modal.jsx
View file

@ -20,6 +20,7 @@ import './user-projects-modal.scss';
import {selectIsEducator} from '../../../redux/session';
import AlertProvider from '../../../components/alert/alert-provider.jsx';
import Alert from '../../../components/alert/alert.jsx';
import Spinner from '../../../components/spinner/spinner.jsx';
const UserProjectsModal = ({
items, error, loading, moreToLoad, showStudentsFilter,
@ -77,7 +78,7 @@ const UserProjectsModal = ({
<AlertProvider>
{error && <div>Error loading {filter}: {error}</div>}
<Alert className="studio-alert" />
{items.length > 0 ? (
{items.length > 0 &&
<React.Fragment>
<div className="user-projects-modal-grid">
{items.map(project => (
@ -105,7 +106,8 @@ const UserProjectsModal = ({
</div>
}
</React.Fragment>
) :
}
{!loading && items.length === 0 &&
<div className="studio-projects-empty">
<img
src="/svgs/studio/add-to-studio-empty.svg"
@ -122,6 +124,12 @@ const UserProjectsModal = ({
</div>
</div>
}
{loading &&
<Spinner
className="studio-projects-spinner"
color="blue"
/>
}
</AlertProvider>
</ModalInnerContent>
<div className="studio-projects-done-row">

35
src/views/studio/modals/user-projects-modal.scss
View file

@ -13,21 +13,34 @@
}
.user-projects-modal-nav {
padding: 6px 12px;
border-bottom: 1px solid $active-gray;
width: unset;
button {
cursor: pointer;
background: rgba(0, 0, 0, 0.15);
&.active { background: $ui-blue; }
background: white;
border: 1px solid rgba(0, 0, 0, 0.15);
color: #575e75;
&.active {
background: $ui-blue;
color: white;
}
&:active {
padding: .75em 1.5em;
}
}
button:hover {
background: $ui-blue-25percent;
border: 1px solid $ui-blue-10percent;
}
}
.user-projects-modal-content {
padding: 0 30px 30px;
padding: 0 30px 8px;
background: #E9F1FC;
max-height: calc(100vh - 270px);
min-height: 300px;
height: calc(100vh - 300px);
overflow-y: auto;
overscroll-behavior: contain;
@media #{$intermediate-and-smaller} {
& { max-height: calc(100vh - 175px); }
& { height: calc(100vh - 170px); }
}
}
@ -39,6 +52,7 @@
display: flex;
justify-content: flex-end;
padding: 6px 12px;
border-top: 1px solid $active-gray;
}
.studio-projects-empty {
@ -46,15 +60,20 @@
flex-direction: column;
justify-content: center;
align-items: center;
margin: 4rem;
margin: auto;
}
.studio-projects-empty-text {
color: hsla(215, 100, 65, .75);
width: 325px;
max-width: 325px;
text-align: center;
line-height: 1.5rem;
margin-top: 1rem;
}
.studio-projects-spinner {
margin: auto;
}
}
.studio-tile-added {