adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor home grid layout to use grid-template-areas
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 14s
Details

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Adam French
2026-03-30 02:46:28 +01:00
parent b48a273916
commit d7178ac60a
1 changed files with 33 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
vue/src/views/home/Home.vue
View File

@@ -80,50 +80,15 @@ import Steam from "./Steam.vue";
border-color: var(--quaternary); border-color: var(--quaternary);
} }
.intro { .intro { grid-area: intro; }
grid-column: 1 / span 6; .listening { grid-area: listening; }
grid-row: 1 / span 4; .stamps { grid-area: stamps; }
} .feed { grid-area: feed; }
.links { grid-area: links; }
.listening { .collage { grid-area: collage; }
grid-column: 7 / span 4; .consumption { grid-area: consumption; }
grid-row: 1 / span 3; .gym { grid-area: gym; }
} .favorites { grid-area: favorites; }
.stamps {
grid-column: 7 / span 4;
grid-row: 4 / span 1;
}
.feed {
grid-column: 1 / span 3;
grid-row: 5 / span 4;
}
.links {
grid-column: 4 / span 2;
grid-row: 5 / span 4;
}
.collage {
grid-column: 6 / span 5;
grid-row: 5 / span 4;
}
.consumption {
grid-column: span 4;
grid-row: span 2;
}
.gym {
grid-column: span 3;
grid-row: span 2;
}
.favorites {
grid-column: span 3;
grid-row: span 2;
}
.sidebar-cell { .sidebar-cell {
background-color: var(--bg_primary); background-color: var(--bg_primary);
@@ -152,6 +117,17 @@ import Steam from "./Steam.vue";
gap: 5px; gap: 5px;
grid-template-columns: repeat(10, 1fr); grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr);
grid-template-areas:
"intro intro intro intro intro intro listening listening listening listening"
"intro intro intro intro intro intro listening listening listening listening"
"intro intro intro intro intro intro listening listening listening listening"
"intro intro intro intro intro intro stamps stamps stamps stamps"
"feed feed feed links links collage collage collage collage collage"
"feed feed feed links links collage collage collage collage collage"
"feed feed feed links links collage collage collage collage collage"
"feed feed feed links links collage collage collage collage collage"
"consumption consumption consumption consumption gym gym gym favorites favorites favorites"
"consumption consumption consumption consumption gym gym gym favorites favorites favorites";
} }
.chat-home { .chat-home {
@@ -211,52 +187,30 @@ import Steam from "./Steam.vue";
.homeGrid { .homeGrid {
border-image: none; border-image: none;
border-width: 0; border-width: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(11, 1fr); grid-template-rows: repeat(11, 1fr);
height: 150vh; height: 150vh;
} grid-template-areas:
"intro intro"
.intro { "intro intro"
grid-column: 1 / -1; "listening stamps"
grid-row: 1 / span 2; "listening feed"
} "listening feed"
"links feed"
.listening { "links feed"
grid-column: 1 / span 1; "links feed"
grid-row: 3 / span 3; "favorites consumption"
} "favorites consumption"
"favorites consumption";
.stamps {
grid-column: 2 / -1;
grid-row: 3 / span 1;
}
.feed {
grid-column: 2 / -1;
grid-row: 4 / span 5;
}
.links {
grid-column: 1 / span 1;
grid-row: 6 / span 3;
} }
.collage { .collage {
display: none; display: none;
} }
.consumption {
grid-column: 2 / -1;
grid-row: 9 / span 3;
}
.gym { .gym {
display: none; display: none;
} }
.favorites {
grid-column: 1 / span 1;
grid-row: 9 / span 3;
}
} }
.bg-random { .bg-random {