external-repos/squoosh
1
0
Fork 1
mirror of https://github.com/GoogleChromeLabs/squoosh.git synced 2025-11-18 11:39:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Responsive grid

Browse Source
This commit is contained in:
Jake Archibald
2020-12-05 12:55:26 +00:00
parent c8d31321d5
commit 0226b87670
2 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/client/lazy-app/Compress/Output/style.css
View File

@@ -41,16 +41,14 @@
} }
.controls { .controls {
position: absolute;
display: flex; display: flex;
justify-content: center; justify-content: center;
top: 0;
left: 0;
right: 0;
padding: 9px 84px;
overflow: hidden; overflow: hidden;
flex-wrap: wrap; flex-wrap: wrap;
contain: content; contain: content;
grid-area: header;
align-self: center;
padding: 9px 66px;
/* Allow clicks to fall through to the pinch zoom area */ /* Allow clicks to fall through to the pinch zoom area */
pointer-events: none; pointer-events: none;
@@ -60,11 +58,9 @@
@media (min-width: 860px) { @media (min-width: 860px) {
padding: 9px; padding: 9px;
top: auto;
left: 320px;
right: 320px;
bottom: 0;
flex-wrap: wrap-reverse; flex-wrap: wrap-reverse;
grid-area: viewportOpts;
align-self: end;
} }
} }

22
src/client/lazy-app/Compress/style.css
View File

@@ -3,9 +3,10 @@
height: 100%; height: 100%;
contain: strict; contain: strict;
display: grid; display: grid;
align-items: end; grid-template-rows: max-content 1fr;
align-content: end; grid-template-areas:
grid-template-rows: 1fr auto; 'header'
'opts';
@media (min-width: 600px) { @media (min-width: 600px) {
grid-template-rows: max-content 1fr; grid-template-rows: max-content 1fr;
@@ -27,6 +28,8 @@
width: calc(100% - 60px); width: calc(100% - 60px);
max-height: 100%; max-height: 100%;
overflow: hidden; overflow: hidden;
align-self: end;
grid-area: opts;
@media (min-width: 600px) { @media (min-width: 600px) {
width: 300px; width: 300px;
@@ -86,11 +89,20 @@
composes: unbutton from global; composes: unbutton from global;
position: relative; position: relative;
grid-area: header; grid-area: header;
margin: 14px; margin: 9px;
justify-self: start; justify-self: start;
align-self: start;
& > svg { & > svg {
width: 58px; width: 47px;
}
@media (min-width: 600px) {
margin: 14px;
& > svg {
width: 58px;
}
} }
} }