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">
<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="stylesheet" href="/assets/index.f00a590d.css">
<link rel="stylesheet" href="/assets/index.d345f13f.css">
</head>
<body>
<div id="app"></div>

View file

@ -96,7 +96,17 @@ export default defineComponent({
height: 90%;
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 {
grid-area: image;
margin: 20px;

View file

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

View file

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