fragginwagon/memory-infrastructure-palace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Adjust responsive styles and layout for improved header and button design

Browse Source
This commit is contained in:
Greg Jacobs
2026-01-28 20:19:20 +00:00
parent fd4d1d1358
commit 800baeb8f4
1 changed files with 37 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
code/websites/pokedex.online/src/views/GamemasterExplorer.vue
View File

@@ -859,28 +859,30 @@ onMounted(() => {
/* Header */ /* Header */
.explorer-header { .explorer-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
flex-wrap: wrap; padding: 0.5rem 0;
} }
.header-left { .header-left {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 1rem; gap: 0.5rem;
flex-wrap: wrap; flex: 1;
min-width: 0;
} }
.explorer-header h1 { .explorer-header h1 {
margin: 0; margin: 0;
font-size: 2.5rem; font-size: 1.5rem;
color: #333; color: #333;
word-break: break-word;
} }
.back-button { .back-button {
padding: 0.5rem 1rem; padding: 0.4rem 0.8rem;
background: #667eea; background: #667eea;
color: white; color: white;
text-decoration: none; text-decoration: none;
@@ -888,6 +890,8 @@ onMounted(() => {
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;
display: inline-block; display: inline-block;
width: fit-content;
font-size: 0.9rem;
} }
.back-button:hover { .back-button:hover {
@@ -897,21 +901,23 @@ onMounted(() => {
.header-controls { .header-controls {
display: flex; display: flex;
gap: 0.5rem; gap: 0.4rem;
flex-shrink: 0;
} }
.btn-icon { .btn-icon {
width: 44px; width: 40px;
height: 44px; height: 40px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #e9ecef; border: 1px solid #e9ecef;
background: #f8f9fa; background: #f8f9fa;
cursor: pointer; cursor: pointer;
font-size: 1.25rem; font-size: 1.1rem;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.3s ease; transition: all 0.3s ease;
flex-shrink: 0;
} }
.btn-icon:hover { .btn-icon:hover {
@@ -1310,27 +1316,36 @@ onMounted(() => {
} }
/* Responsive */ /* Responsive */
@media (max-width: 768px) { @media (min-width: 769px) {
.explorer-header { .explorer-header {
flex-direction: column; align-items: center;
align-items: flex-start; gap: 1rem;
} }
.header-left { .header-left {
width: 100%; flex-direction: row;
flex-direction: column; align-items: center;
align-items: flex-start; gap: 1rem;
} }
.explorer-header h1 { .explorer-header h1 {
font-size: 1.25rem; font-size: 2.5rem;
} }
.header-controls { .back-button {
align-self: flex-end; padding: 0.5rem 1rem;
margin-top: 0.5rem; font-size: 1rem;
} }
.btn-icon {
width: 44px;
height: 44px;
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
.file-selector, .file-selector,
.property-filter { .property-filter {
flex-direction: column; flex-direction: column;