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

addtostudio formatting much closer to design spec

Browse source
This commit is contained in:
Ben Wheeler 2018-06-20 00:19:52 -04:00
parent e44b21a712
commit 0f819f6a49
3 changed files with 59 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/modal/addtostudio/modal.jsx
View file

@ -196,7 +196,9 @@ class AddToStudioModal extends React.Component {
key={studio.id} key={studio.id}
onClick={() => this.handleToggleAdded(studio.id)} onClick={() => this.handleToggleAdded(studio.id)}
> >
{truncate(studio.title, {'length': 20, 'separator': /[,:\.;]*\s+/})} <div className="studio-selector-button-text">
{truncate(studio.title, {'length': 20, 'separator': /[,:\.;]*\s+/})}
</div>
<div className={"studio-status-icon" + <div className={"studio-status-icon" +
(isAdded ? " studio-status-icon-selected" : "")} (isAdded ? " studio-status-icon-selected" : "")}
> >
@ -245,7 +247,9 @@ class AddToStudioModal extends React.Component {
name="closeButton" name="closeButton"
type="button" type="button"
> >
<FormattedMessage id="general.close" /> <div className="action-button-text">
<FormattedMessage id="general.close" />
</div>
</Button> </Button>
{this.state.addToStudioWaiting ? [ {this.state.addToStudioWaiting ? [
<Button <Button
@ -254,7 +258,9 @@ class AddToStudioModal extends React.Component {
key="submitButton" key="submitButton"
type="submit" type="submit"
> >
<Spinner /> <div className="action-button-text">
<Spinner />
</div>
</Button> </Button>
] : [ ] : [
<Button <Button
@ -262,7 +268,9 @@ class AddToStudioModal extends React.Component {
key="submitButton" key="submitButton"
type="submit" type="submit"
> >
<FormattedMessage id="general.okay" /> <div className="action-button-text">
<FormattedMessage id="general.okay" />
</div>
</Button> </Button>
]} ]}
</FlexRow> </FlexRow>

59
src/components/modal/addtostudio/modal.scss
View file

@ -9,14 +9,15 @@
margin: 100px auto; margin: 100px auto;
outline: none; outline: none;
padding: 0; padding: 0;
width: 36rem; height: 388px; /* 24.25rem; */
width: 36.25rem; /* 580px; */
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
} }
.addToStudio-modal-header { .addToStudio-modal-header {
box-shadow: inset 0 -1px 0 0 $ui-dark-blue; box-shadow: inset 0 -1px 0 0 $ui-dark-blue;
background-color: $ui-royal-blue; background-color: #3F9AFB;
padding-top: .75rem; padding-top: .75rem;
width: 100%; width: 100%;
height: 3rem; height: 3rem;
@ -44,22 +45,23 @@
} }
.studio-list-inner-scrollbox { .studio-list-inner-scrollbox {
height: 15rem; height: 16.9375rem;
overflow: scroll; overflow: scroll;
overflow-x: hidden; overflow-x: hidden;
margin-right: 8px; margin-right: 8px;
} }
.studio-list-inner-scrollbox::-webkit-scrollbar { .studio-list-inner-scrollbox::-webkit-scrollbar {
width: 7px; width: 8px;
background-color: $ui-blue-10percent-solid; background-color: $ui-blue-10percent-solid;
} }
.studio-list-inner-scrollbox::-webkit-scrollbar-thumb { .studio-list-inner-scrollbox::-webkit-scrollbar-thumb {
background-color: $active-dark-gray; background-color: $active-dark-gray;
border-radius: 5px; height: 92px;
border-radius: 4px;
} }
.studio-list-inner-scrollbox::-webkit-scrollbar-track { .studio-list-inner-scrollbox::-webkit-scrollbar-track {
margin-top: 10px; margin-top: 8px;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -68,7 +70,7 @@
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-flow: row wrap; flex-flow: row wrap;
padding: 1rem 3rem; padding: 0 0.21875rem 0 1.46875rem;
min-height: 30rem; min-height: 30rem;
} }
@ -81,30 +83,42 @@
bottom: 0; bottom: 0;
background: linear-gradient( background: linear-gradient(
$transparent, $transparent,
$ui-blue-10percent #E4F0FF
); );
/* background: linear-gradient(180deg, rgba(228,240,255,0) 0%, #E4F0FF 100%); */
width: 100%; width: 100%;
height: 2rem; height: 32px;
} }
.studio-selector-button { .studio-selector-button {
background-color: $ui-white; background-color: $ui-white;
color: $type-gray;
font-weight: 800;
height: 2.5rem; height: 2.5rem;
margin: 0.5rem 0.5rem; margin: 0.21875rem 0.21875rem;
padding: 0.5rem 0.5rem; padding: 0;
border-radius: 0.5rem; border-radius: 0.5rem;
box-sizing: border-box; box-sizing: border-box;
width: 40%; width: 16.1875rem; /* 259px */
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative;
}
.studio-selector-button-text {
/* color: $type-gray; */
width: 13.3125rem;
color: #575E75;
font-family: "Helvetica Neue";
font-size: 0.875rem;
font-weight: 800;
line-height: 1.25rem;
position: absolute;
margin: 0.575rem 2.18375rem 0.175rem 0.6875rem;
/* per spec, should be
margin: 0.375rem 2.18375rem 0.375rem 0.6875rem;
*/
} }
.studio-selector-button-selected { .studio-selector-button-selected {
background-color: $ui-green; background-color: hsl(165,100%,37%);
color: $ui-white; color: $ui-white;
} }
@ -113,14 +127,19 @@
color: $ui-white; color: $ui-white;
font-weight: 800; font-weight: 800;
height: 1.5rem; height: 1.5rem;
margin: 0rem 0rem; width: 1.5rem;
margin: 0.5rem 0.625rem 0.5rem 14.0625rem;
padding: 0rem 0.5rem; padding: 0rem 0.5rem;
border-radius: 0.75rem; border-radius: 0.75rem;
box-sizing: border-box; box-sizing: border-box;
width: 1.5rem; position: absolute;
} }
.studio-status-icon-selected { .studio-status-icon-selected {
background-color: $ui-green; background-color: hsl(165,100%,37%);
color: $ui-white; color: $ui-white;
} }
.submit-button {
background-color: #3F9AFB;
}

10
src/components/modal/base/modal.scss
View file

@ -4,7 +4,7 @@
.modal-content { .modal-content {
position: relative; position: relative;
margin: 3.75rem auto; margin: 3.75rem auto;
border-radius: 1rem; border-radius: 0.5rem;
box-shadow: 0 0 0 1px $active-gray; box-shadow: 0 0 0 1px $active-gray;
background-color: $ui-white; background-color: $ui-white;
padding: 0; padding: 0;
@ -70,5 +70,11 @@ $modal-close-size: 1rem;
} }
.action-button { .action-button {
margin: 0 0 0 .5rem; margin: 0 0 0 0.54625rem;
padding: 6px 1.25rem 14px 1.25rem;
height: 36px;
} }
.action-button-text {
}