para/puzzle
1
1
Fork 0
Code Issues 8 Pull requests Releases Wiki Activity

show title of image when creating game

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
build/public/assets/index.54a19b52.css → build/public/assets/index.21102c83.css
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.4961cd21.js
View file

File diff suppressed because one or more lines are too long

1
build/public/assets/index.d26a5baf.js Normal file
View file

File diff suppressed because one or more lines are too long

4
build/public/index.html
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.4961cd21.js"></script> <script type="module" crossorigin src="/assets/index.d26a5baf.js"></script>
<link rel="modulepreload" href="/assets/vendor.684f7bc8.js"> <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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

27
src/frontend/components/NewGameDialog.vue
View file

@ -6,6 +6,7 @@
<div class="has-image"> <div class="has-image">
<responsive-image :src="image.url" :title="image.title" /> <responsive-image :src="image.url" :title="image.title" />
</div> </div>
<div class="image-title" v-if="image.title">"{{image.title}}"</div>
</div> </div>
<div class="area-settings"> <div class="area-settings">
@ -132,6 +133,15 @@ export default defineComponent({
height: 90%; height: 90%;
width: 80%; 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) { @media (max-width: 1400px) {
.new-game-dialog .overlay-content { .new-game-dialog .overlay-content {
grid-template-columns: auto; grid-template-columns: auto;
@ -141,10 +151,9 @@ export default defineComponent({
"settings" "settings"
"buttons"; "buttons";
} }
}
.new-game-dialog .area-image { .new-game-dialog .area-image {
grid-area: image; margin-right: 0;
margin: 20px; }
} }
.new-game-dialog .area-settings { .new-game-dialog .area-settings {
grid-area: settings; grid-area: settings;
@ -162,10 +171,22 @@ export default defineComponent({
width: 100%; width: 100%;
} }
.new-game-dialog .has-image { .new-game-dialog .has-image {
box-sizing: border-box;
grid-area: image;
position: relative; position: relative;
width: 100%; width: 100%;
height: 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 { .new-game-dialog .has-image .remove {
position: absolute; position: absolute;
top: .5em; top: .5em;