fix size / responsiveness of image dialogs
This commit is contained in:
parent
9c0ceb685e
commit
ac0116fc52
6 changed files with 18 additions and 6 deletions
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue