мелкая правка по адаптиву при нажатии на тайл. приложение стабильно
This commit is contained in:
parent
de89a41926
commit
3e35a25601
|
|
@ -10,32 +10,41 @@
|
|||
</div>
|
||||
|
||||
<div v-else-if="villageData" class="village-container">
|
||||
<div class="village-grid">
|
||||
<div
|
||||
v-for="tile in villageData.tiles"
|
||||
:key="tile.id"
|
||||
class="tile"
|
||||
:class="{ selected: selectedTile && selectedTile.id === tile.id }"
|
||||
@click="selectTile(tile)"
|
||||
>
|
||||
<span class="tile-content">{{ getTileEmoji(tile) }}</span>
|
||||
<div class="village-grid-wrapper">
|
||||
<div class="village-grid">
|
||||
<div
|
||||
v-for="tile in villageData.tiles"
|
||||
:key="tile.id"
|
||||
class="tile"
|
||||
:class="{ selected: selectedTile && selectedTile.id === tile.id }"
|
||||
@click="selectTile(tile)"
|
||||
>
|
||||
<span class="tile-content">{{ getTileEmoji(tile) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="selectedTile" class="action-panel">
|
||||
<h2>Tile ({{ selectedTile.x }}, {{ selectedTile.y }})</h2>
|
||||
<div class="actions-list">
|
||||
<div v-for="(action, index) in selectedTile.availableActions" :key="index" class="action-item">
|
||||
<button
|
||||
:disabled="!action.isEnabled"
|
||||
@click="handleActionClick(action)"
|
||||
>
|
||||
{{ getActionLabel(action) }}
|
||||
</button>
|
||||
<span v-if="!action.isEnabled" class="disabled-reason">{{ action.disabledReason }}</span>
|
||||
<!-- Tile Info Overlay -->
|
||||
<div v-if="selectedTile" class="tile-overlay-backdrop" @click="selectedTile = null">
|
||||
<div class="tile-overlay-panel" @click.stop>
|
||||
<h2>Tile ({{ selectedTile.x }}, {{ selectedTile.y }})</h2>
|
||||
<p>Terrain: {{ selectedTile.terrainType }}</p>
|
||||
<p v-if="selectedTile.object">Object: {{ selectedTile.object.type }}</p>
|
||||
|
||||
<h3>Available Actions</h3>
|
||||
<div class="actions-list">
|
||||
<div v-for="(action, index) in selectedTile.availableActions" :key="index" class="action-item">
|
||||
<button
|
||||
:disabled="!action.isEnabled"
|
||||
@click="handleActionClick(action)"
|
||||
>
|
||||
{{ getActionLabel(action) }}
|
||||
</button>
|
||||
<span v-if="!action.isEnabled" class="disabled-reason">{{ action.disabledReason }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="selectedTile = null" class="close-overlay-button">Close</button>
|
||||
</div>
|
||||
<button @click="selectedTile = null" class="close-panel">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -95,6 +104,8 @@ const handleActionClick = (action) => {
|
|||
align-items: center;
|
||||
padding: 20px;
|
||||
font-family: sans-serif;
|
||||
min-height: calc(100vh - 120px); /* Adjust for top/bottom bars */
|
||||
box-sizing: border-box; /* Include padding in element's total width and height */
|
||||
}
|
||||
|
||||
.loading, .error-container {
|
||||
|
|
@ -105,10 +116,14 @@ const handleActionClick = (action) => {
|
|||
|
||||
.village-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
justify-content: center; /* Center grid */
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
max-width: 350px; /* Adjust max-width for mobile view of grid (5*60px + 4*4px gap + 2*4px padding)*/
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.village-grid-wrapper {
|
||||
overflow-x: auto; /* In case grid ever exceeds viewport (though it shouldn't with max-width) */
|
||||
}
|
||||
|
||||
.village-grid {
|
||||
|
|
@ -119,6 +134,8 @@ const handleActionClick = (action) => {
|
|||
border: 2px solid #333;
|
||||
padding: 4px;
|
||||
background-color: #f0f0f0;
|
||||
width: fit-content; /* Ensure grid does not expand unnecessarily */
|
||||
margin: 0 auto; /* Center grid within its wrapper */
|
||||
}
|
||||
|
||||
.tile {
|
||||
|
|
@ -146,52 +163,104 @@ const handleActionClick = (action) => {
|
|||
font-size: 2em;
|
||||
}
|
||||
|
||||
.action-panel {
|
||||
width: 300px;
|
||||
border: 1px solid #ccc;
|
||||
/* Overlay Styles */
|
||||
.tile-overlay-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end; /* Start from bottom for mobile-first feel */
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.tile-overlay-panel {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
max-width: 500px; /* Limit width for larger screens */
|
||||
padding: 20px;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.action-panel h2 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.actions-list {
|
||||
border-top-left-radius: 15px;
|
||||
border-top-right-radius: 15px;
|
||||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(0); /* For potential slide-in animation */
|
||||
transition: transform 0.3s ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.action-item {
|
||||
@media (min-width: 768px) { /* Center for desktop, less "bottom sheet" */
|
||||
.tile-overlay-backdrop {
|
||||
align-items: center;
|
||||
}
|
||||
.tile-overlay-panel {
|
||||
border-radius: 15px;
|
||||
max-height: 80vh; /* Don't cover entire screen */
|
||||
}
|
||||
}
|
||||
|
||||
.tile-overlay-panel h2 {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tile-overlay-panel p {
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.actions-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.action-item button {
|
||||
padding: 10px;
|
||||
font-size: 1em;
|
||||
width: 100%;
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #007bff;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ccc;
|
||||
background-color: #fff;
|
||||
font-size: 1em;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.action-item button:hover:not(:disabled) {
|
||||
background-color: #0056b3;
|
||||
}
|
||||
|
||||
.action-item button:disabled {
|
||||
background-color: #e9ecef;
|
||||
color: #6c757d;
|
||||
cursor: not-allowed;
|
||||
background-color: #eee;
|
||||
color: #999;
|
||||
border-color: #e9ecef;
|
||||
}
|
||||
|
||||
.disabled-reason {
|
||||
font-size: 0.8em;
|
||||
color: #d9534f;
|
||||
color: #dc3545;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.close-panel {
|
||||
margin-top: 20px;
|
||||
.close-overlay-button {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 10px 15px;
|
||||
margin-top: 15px;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-overlay-button:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
DELETE FROM _prisma_migrations
|
||||
WHERE migration_name = '20260103181802_refactor_village_schema';
|
||||
Loading…
Reference in New Issue
Block a user