hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Allow column width configuration: allow stretching navbar with columns

Browse source
This commit is contained in:
Alexander Tumin 2022-08-17 02:33:39 +03:00
commit a29835375a
7 changed files with 46 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/App.scss
View file

@ -185,13 +185,14 @@ nav {
--maxiColumn: 45rem;
--columnGap: 1em;
--status-margin: 0.75em;
--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
position: relative;
display: grid;
grid-template-columns:
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)))
var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth);
grid-template-areas: "sidebar content";
grid-template-rows: 1fr;
@ -288,22 +289,22 @@ nav {
&.-reverse:not(.-wide):not(.-mobile) {
grid-template-columns:
var(--effectiveContentColumnWidth)
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
var(--effectiveSidebarColumnWidth);
grid-template-areas: "content sidebar";
}
&.-wide {
grid-template-columns:
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)))
var(--effectiveSidebarColumnWidth)
var(--effectiveContentColumnWidth)
minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
var(--effectiveNotifsColumnWidth);
grid-template-areas: "sidebar content notifs";
&.-reverse {
grid-template-columns:
minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)))
var(--effectiveNotifsColumnWidth)
var(--effectiveContentColumnWidth)
minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
var(--effectiveSidebarColumnWidth);
grid-template-areas: "notifs content sidebar";
}
}