scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2025-02-25 05:44:13 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

make studio report modal work on short or narrow screens

Browse source
This commit is contained in:
Eric Rosenbaum 2021-05-19 14:27:53 -04:00
parent 61cf2b5bcc
commit 70d22a0f1e
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
src/views/studio/modals/studio-report-modal.scss
View file

@ -1,8 +1,7 @@
@import "../../../colors";
@import "../../../frameless";
.studio-report-modal {
width: 600px;
.studio-report-title {
box-shadow: inset 0 -1px 0 0 $ui-aqua-dark;
background: $ui-aqua;
@ -14,14 +13,25 @@
}
.studio-report-inner {
padding: 2.5rem;
padding: 2rem;
}
.studio-report-tile-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
row-gap: 1rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@media #{$medium} { /* Keep 3 columns to narrower width since it is in a modal */
& { grid-template-columns: 1fr 1fr; }
}
@media #{$small} {
& { grid-template-columns: 1fr; }
}
column-gap: 14px;
row-gap: 14px;
}
.button {
margin: 0px;
}
.button:disabled {
@ -30,7 +40,7 @@
.studio-report-tile {
background: rgba(0, 0, 0, 0.05);
width: 250px;
width: 230px;
height: 156px;
border-radius: 0.5rem 0.5rem 0 0;
}