🎨 Improve header layout and responsiveness in Gamemaster Explorer view
This commit is contained in:
@@ -25,8 +25,10 @@
|
||||
<div v-else class="explorer-container">
|
||||
<!-- Header -->
|
||||
<header class="explorer-header">
|
||||
<router-link to="/" class="back-button">← Back Home</router-link>
|
||||
<h1>🔍 Gamemaster Explorer</h1>
|
||||
<div class="header-left">
|
||||
<router-link to="/" class="back-button">← Back Home</router-link>
|
||||
<h1>🔍 Gamemaster Explorer</h1>
|
||||
</div>
|
||||
<div class="header-controls">
|
||||
<button
|
||||
@click="showHelp = !showHelp"
|
||||
@@ -858,11 +860,19 @@ onMounted(() => {
|
||||
.explorer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.explorer-header h1 {
|
||||
margin: 0;
|
||||
font-size: 2.5rem;
|
||||
@@ -1301,10 +1311,26 @@ onMounted(() => {
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.explorer-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.explorer-header h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.header-controls {
|
||||
align-self: flex-end;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.file-selector,
|
||||
.property-filter {
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user