scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-30 10:58:23 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

styling studio report tiles

Browse source
This commit is contained in:
Eric Rosenbaum 2021-05-14 17:08:08 -04:00
parent df30f9bac6
commit a76f0b3fac
2 changed files with 31 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/views/studio/studio-report.jsx
View file

@ -73,24 +73,26 @@ const StudioReport = ({
> >
<h3><FormattedMessage id="studio.reportThisStudio" /></h3> <h3><FormattedMessage id="studio.reportThisStudio" /></h3>
<p><FormattedMessage id="studio.reportPleaseExplain" /></p> <p><FormattedMessage id="studio.reportPleaseExplain" /></p>
<StudioReportTile <div className="studio-report-tile-container">
handleChange={handleChange} <StudioReportTile
heading={intl.formatMessage({id: 'studio.title'})} handleChange={handleChange}
text={title} heading={intl.formatMessage({id: 'studio.title'})}
value={Fields.TITLE} text={title}
/> value={Fields.TITLE}
<StudioReportTile />
handleChange={handleChange} <StudioReportTile
heading={intl.formatMessage({id: 'studio.description'})} handleChange={handleChange}
text={description} heading={intl.formatMessage({id: 'studio.description'})}
value={Fields.DESCRIPTION} text={description}
/> value={Fields.DESCRIPTION}
<StudioReportTile />
handleChange={handleChange} <StudioReportTile
heading={intl.formatMessage({id: 'studio.thumbnail'})} handleChange={handleChange}
image={image} heading={intl.formatMessage({id: 'studio.thumbnail'})}
value={Fields.THUMBNAIL} image={image}
/> value={Fields.THUMBNAIL}
/>
</div>
<p><FormattedMessage id="studio.reportAreThereComments" /></p> <p><FormattedMessage id="studio.reportAreThereComments" /></p>
<button <button
className="button" className="button"

14
src/views/studio/studio.scss
View file

@ -89,6 +89,8 @@ $radius: 8px;
} }
.studio-report-modal { .studio-report-modal {
width: 650px;
.studio-report-title { .studio-report-title {
box-shadow: inset 0 -1px 0 0 $ui-aqua-dark; box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
background: $ui-aqua; background: $ui-aqua;
@ -103,19 +105,25 @@ $radius: 8px;
padding: 2rem; padding: 2rem;
} }
.studio-report-tile-container {
display: flex;
flex-wrap: wrap;
}
.button:disabled { .button:disabled {
background-color: $active-dark-gray; background-color: $active-dark-gray;
} }
.studio-report-tile { .studio-report-tile {
background: $ui-light-gray; background: rgba(0, 0, 0, 0.05);
width: 200px; width: 250px;
height: 156px;
margin: 1rem; margin: 1rem;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.studio-report-tile-header { .studio-report-tile-header {
background: $ui-gray; background: rgba(0, 0, 0, 0.05);
border-radius: 0.5rem; border-radius: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }