mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-23 07:38:07 -05:00
addtostudio formatting much closer to design spec
This commit is contained in:
Ben Wheeler
parent
e44b21a712
commit
0f819f6a49
3 changed files with 59 additions and 26 deletions
|
|
@ -196,7 +196,9 @@ class AddToStudioModal extends React.Component {
|
|||
key={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" +
|
||||
(isAdded ? " studio-status-icon-selected" : "")}
|
||||
>
|
||||
|
|
@ -245,7 +247,9 @@ class AddToStudioModal extends React.Component {
|
|||
name="closeButton"
|
||||
type="button"
|
||||
>
|
||||
<FormattedMessage id="general.close" />
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.close" />
|
||||
</div>
|
||||
</Button>
|
||||
{this.state.addToStudioWaiting ? [
|
||||
<Button
|
||||
|
|
@ -254,7 +258,9 @@ class AddToStudioModal extends React.Component {
|
|||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<Spinner />
|
||||
<div className="action-button-text">
|
||||
<Spinner />
|
||||
</div>
|
||||
</Button>
|
||||
] : [
|
||||
<Button
|
||||
|
|
@ -262,7 +268,9 @@ class AddToStudioModal extends React.Component {
|
|||
key="submitButton"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage id="general.okay" />
|
||||
<div className="action-button-text">
|
||||
<FormattedMessage id="general.okay" />
|
||||
</div>
|
||||
</Button>
|
||||
]}
|
||||
</FlexRow>
|
||||
|
|
|
|||
|
|
@ -9,14 +9,15 @@
|
|||
margin: 100px auto;
|
||||
outline: none;
|
||||
padding: 0;
|
||||
width: 36rem;
|
||||
height: 388px; /* 24.25rem; */
|
||||
width: 36.25rem; /* 580px; */
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.addToStudio-modal-header {
|
||||
box-shadow: inset 0 -1px 0 0 $ui-dark-blue;
|
||||
background-color: $ui-royal-blue;
|
||||
background-color: #3F9AFB;
|
||||
padding-top: .75rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
|
|
@ -44,22 +45,23 @@
|
|||
}
|
||||
|
||||
.studio-list-inner-scrollbox {
|
||||
height: 15rem;
|
||||
height: 16.9375rem;
|
||||
overflow: scroll;
|
||||
overflow-x: hidden;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.studio-list-inner-scrollbox::-webkit-scrollbar {
|
||||
width: 7px;
|
||||
width: 8px;
|
||||
background-color: $ui-blue-10percent-solid;
|
||||
}
|
||||
.studio-list-inner-scrollbox::-webkit-scrollbar-thumb {
|
||||
background-color: $active-dark-gray;
|
||||
border-radius: 5px;
|
||||
height: 92px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.studio-list-inner-scrollbox::-webkit-scrollbar-track {
|
||||
margin-top: 10px;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +70,7 @@
|
|||
display: flex;
|
||||
justify-content: flex-start;
|
||||
flex-flow: row wrap;
|
||||
padding: 1rem 3rem;
|
||||
padding: 0 0.21875rem 0 1.46875rem;
|
||||
|
||||
min-height: 30rem;
|
||||
}
|
||||
|
|
@ -81,30 +83,42 @@
|
|||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
$transparent,
|
||||
$ui-blue-10percent
|
||||
#E4F0FF
|
||||
);
|
||||
/* background: linear-gradient(180deg, rgba(228,240,255,0) 0%, #E4F0FF 100%); */
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
|
||||
.studio-selector-button {
|
||||
background-color: $ui-white;
|
||||
color: $type-gray;
|
||||
font-weight: 800;
|
||||
height: 2.5rem;
|
||||
margin: 0.5rem 0.5rem;
|
||||
padding: 0.5rem 0.5rem;
|
||||
margin: 0.21875rem 0.21875rem;
|
||||
padding: 0;
|
||||
border-radius: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
width: 40%;
|
||||
width: 16.1875rem; /* 259px */
|
||||
display: flex;
|
||||
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 {
|
||||
background-color: $ui-green;
|
||||
background-color: hsl(165,100%,37%);
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
|
|
@ -113,14 +127,19 @@
|
|||
color: $ui-white;
|
||||
font-weight: 800;
|
||||
height: 1.5rem;
|
||||
margin: 0rem 0rem;
|
||||
width: 1.5rem;
|
||||
margin: 0.5rem 0.625rem 0.5rem 14.0625rem;
|
||||
padding: 0rem 0.5rem;
|
||||
border-radius: 0.75rem;
|
||||
box-sizing: border-box;
|
||||
width: 1.5rem;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.studio-status-icon-selected {
|
||||
background-color: $ui-green;
|
||||
background-color: hsl(165,100%,37%);
|
||||
color: $ui-white;
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
background-color: #3F9AFB;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
.modal-content {
|
||||
position: relative;
|
||||
margin: 3.75rem auto;
|
||||
border-radius: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 0 0 1px $active-gray;
|
||||
background-color: $ui-white;
|
||||
padding: 0;
|
||||
|
|
@ -70,5 +70,11 @@ $modal-close-size: 1rem;
|
|||
}
|
||||
|
||||
.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 {
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue