show title of image when creating game

This commit is contained in:
Zutatensuppe 2021-06-05 10:27:50 +02:00
parent 82ce1d7b82
commit 47589c0000
5 changed files with 29 additions and 8 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

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.4961cd21.js"></script>
<script type="module" crossorigin src="/assets/index.d26a5baf.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js">
<link rel="stylesheet" href="/assets/index.54a19b52.css">
<link rel="stylesheet" href="/assets/index.21102c83.css">
</head>
<body>
<div id="app"></div>

View file

@ -6,6 +6,7 @@
<div class="has-image">
<responsive-image :src="image.url" :title="image.title" />
</div>
<div class="image-title" v-if="image.title">"{{image.title}}"</div>
</div>
<div class="area-settings">
@ -132,6 +133,15 @@ export default defineComponent({
height: 90%;
width: 80%;
}
.new-game-dialog .area-image {
grid-area: image;
display: grid;
grid-template-rows: 1fr min-content;
grid-template-areas:
"image"
"image-title";
margin-right: 1em;
}
@media (max-width: 1400px) {
.new-game-dialog .overlay-content {
grid-template-columns: auto;
@ -141,10 +151,9 @@ export default defineComponent({
"settings"
"buttons";
}
}
.new-game-dialog .area-image {
grid-area: image;
margin: 20px;
.new-game-dialog .area-image {
margin-right: 0;
}
}
.new-game-dialog .area-settings {
grid-area: settings;
@ -162,10 +171,22 @@ export default defineComponent({
width: 100%;
}
.new-game-dialog .has-image {
box-sizing: border-box;
grid-area: image;
position: relative;
width: 100%;
height: 100%;
border: solid 1px;
}
.new-game-dialog .image-title {
grid-area: image-title;
text-align: center;
padding: .5em 0;
background: var(--main-color);
color: #262523;
}
.new-game-dialog .has-image .remove {
position: absolute;
top: .5em;