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

style selection tiles

Browse source
This commit is contained in:
Eric Rosenbaum 2021-07-27 11:21:14 -04:00
parent 5811332cd7
commit d0d32e81e9
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/views/studio/modals/transfer-ownership-modal.scss
View file

@ -36,7 +36,7 @@
} }
.inner { .inner {
padding: 2rem; padding: 1rem;
} }
.transfer-ownership-alert-wrapper .alert-wrapper { .transfer-ownership-alert-wrapper .alert-wrapper {
@ -88,8 +88,27 @@
@media #{$intermediate-and-smaller} { @media #{$intermediate-and-smaller} {
& { grid-template-columns: repeat(2, minmax(0,1fr)); } & { grid-template-columns: repeat(2, minmax(0,1fr)); }
} }
column-gap: 20px; column-gap: 12px;
row-gap: 20px; row-gap: 12px;
}
.transfer-ownership-tile-info {
display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
margin-left: 8px;
flex-grow: 1; /* Grow to fill available space */
min-width: 0; /* Prevents within from expanding beyond bounds */
}
.transfer-ownership-name-selected {
color: white !important;
}
.transfer-selection-icon {
margin-left: 8px;
margin-right: 8px;
} }
.transfer-ownership-tile-selected { .transfer-ownership-tile-selected {

15
src/views/studio/modals/transfer-ownership-tile.jsx
View file

@ -14,8 +14,19 @@ const TransferOwnershipTile = ({
className="studio-member-image" className="studio-member-image"
src={image} src={image}
/> />
<div className="studio-member-info"> <div className="transfer-ownership-tile-info">
{username} <div
className={classNames('studio-member-name',
{'transfer-ownership-name-selected': selected}
)}
>
{username}
</div>
{selected &&
<div className="transfer-selection-icon">
<img src="/svgs/studio/check-icon-white.svg" />
</div>}
{isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>} {isCreator && <div className="studio-member-role"><FormattedMessage id="studio.creatorRole" /></div>}
</div> </div>
</div> </div>