fix size / responsiveness of image dialogs

This commit is contained in:
Zutatensuppe 2021-07-04 18:38:55 +02:00
parent 9c0ceb685e
commit ac0116fc52
6 changed files with 18 additions and 6 deletions

File diff suppressed because one or more lines are too long

View file

@ -4,9 +4,9 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>🧩 jigsaw.hyottoko.club</title> <title>🧩 jigsaw.hyottoko.club</title>
<script type="module" crossorigin src="/assets/index.4ee35f15.js"></script> <script type="module" crossorigin src="/assets/index.4ec065c1.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js"> <link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.f00a590d.css"> <link rel="stylesheet" href="/assets/index.d345f13f.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View file

@ -96,7 +96,17 @@ export default defineComponent({
height: 90%; height: 90%;
width: 80%; width: 80%;
} }
@media (max-width: 1400px) and (min-height: 720px),
(max-width: 1000px) {
.edit-image-dialog .overlay-content {
grid-template-columns: auto;
grid-template-rows: 1fr min-content min-content;
grid-template-areas:
"image"
"settings"
"buttons";
}
}
.edit-image-dialog .area-image { .edit-image-dialog .area-image {
grid-area: image; grid-area: image;
margin: 20px; margin: 20px;

View file

@ -152,7 +152,8 @@ export default defineComponent({
"image-title"; "image-title";
margin-right: 1em; margin-right: 1em;
} }
@media (max-width: 1400px) { @media (max-width: 1400px) and (min-height: 720px),
(max-width: 1000px) {
.new-game-dialog .overlay-content { .new-game-dialog .overlay-content {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: 1fr min-content min-content; grid-template-rows: 1fr min-content min-content;

View file

@ -210,7 +210,8 @@ export default defineComponent({
height: 90%; height: 90%;
width: 80%; width: 80%;
} }
@media (max-width: 1400px) { @media (max-width: 1400px) and (min-height: 720px),
(max-width: 1000px) {
.new-image-dialog .overlay-content { .new-image-dialog .overlay-content {
grid-template-columns: auto; grid-template-columns: auto;
grid-template-rows: 1fr min-content min-content; grid-template-rows: 1fr min-content min-content;