From ca7e14bea9f4d14d0c543fbc02178d5741ac4bd5 Mon Sep 17 00:00:00 2001 From: Michael Shamoon <4887959+shamoon@users.noreply.github.com> Date: Mon, 12 Sep 2022 14:51:34 -0700 Subject: [PATCH] slim sidebar with doc list adjusting --- .../app-frame/app-frame.component.html | 88 ++++++++++--------- .../app-frame/app-frame.component.scss | 44 ++++++++++ .../app-frame/app-frame.component.ts | 2 - .../document-list.component.scss | 19 +++- src-ui/src/styles.scss | 5 ++ 5 files changed, 114 insertions(+), 44 deletions(-) diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html index 5a68a3cda..9e96316bd 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.html +++ b/src-ui/src/app/components/app-frame/app-frame.component.html @@ -4,11 +4,11 @@ (click)="isMenuCollapsed = !isMenuCollapsed"> - - + + - Paperless-ngx + Paperless-ngx
@@ -51,48 +51,54 @@
-
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss index 296df26c3..56b35fb2c 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.scss +++ b/src-ui/src/app/components/app-frame/app-frame.component.scss @@ -14,6 +14,18 @@ width: 0.8em; height: 0.8em; } + + + // These come from the col-md-3 col-lg-2 classes for regular sidebar, needed for animation + @media (min-width: 768px) { + max-width: 25%; + } + + @media (min-width: 992px) { + max-width: 16.66666667%; + } + + transition: all .3s ease; } @media (max-width: 767.98px) { .sidebar { @@ -21,6 +33,38 @@ } } +.sidebar-slim-toggler { + display: none; // hide on mobile +} + +@media(min-width: 768px) { + .sidebar.slim { + max-width: 50px; + li.nav-item span { + display: none; + } + } + + .col.slim { + margin-left: 50px !important; + } + + .sidebar-slim-toggler { + display: block; + position: absolute; + right: -12px; + top: 60px; + z-index: 996; + --bs-btn-padding-x: 0.35rem; + --bs-btn-padding-y: 0.125rem; + } +} + +::ng-deep .popover-slim .popover-body { + --bs-popover-body-padding-x: .5rem; + --bs-popover-body-padding-y: .5rem; +} + .sidebar-sticky { position: relative; top: 0; diff --git a/src-ui/src/app/components/app-frame/app-frame.component.ts b/src-ui/src/app/components/app-frame/app-frame.component.ts index 9c415360c..1b1adb706 100644 --- a/src-ui/src/app/components/app-frame/app-frame.component.ts +++ b/src-ui/src/app/components/app-frame/app-frame.component.ts @@ -63,8 +63,6 @@ export class AppFrameComponent implements ComponentCanDeactivate { } set slimSidebarEnabled(enabled: boolean) { - console.log('set slimSidebarEnabled', enabled) - this.settingsService.set(SETTINGS_KEYS.SLIM_SIDEBAR, enabled) this.settingsService .storeSettings() diff --git a/src-ui/src/app/components/document-list/document-list.component.scss b/src-ui/src/app/components/document-list/document-list.component.scss index b2d138d7f..98b6d62d7 100644 --- a/src-ui/src/app/components/document-list/document-list.component.scss +++ b/src-ui/src/app/components/document-list/document-list.component.scss @@ -11,7 +11,7 @@ tr { } $paperless-card-breakpoints: ( - 0: 2, // xs + // 0: 2, // xs is manual for slim-sidebar 768px: 3, //md 992px: 4, //lg 1200px: 5, //xl @@ -22,6 +22,12 @@ $paperless-card-breakpoints: ( ); .row-cols-paperless-cards { + // xs, we dont want in .col.slim block + > * { + flex: 0 0 auto; + width: calc(100% / 2); + } + @each $width, $n_cols in $paperless-card-breakpoints { @media(min-width: $width) { > * { @@ -32,6 +38,17 @@ $paperless-card-breakpoints: ( } } +::ng-deep .col.slim .row-cols-paperless-cards { + @each $width, $n_cols in $paperless-card-breakpoints { + @media(min-width: $width) { + > * { + flex: 0 0 auto; + width: calc(100% / ($n-cols + 1)); + } + } + } +} + .dropdown-menu-right { right: 0 !important; left: auto !important; diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index 18413276a..8dbbafe22 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -405,6 +405,11 @@ textarea, vertical-align: text-bottom; } +.sidebaricon-sm { + width: 12px; + height: 12px; +} + table.table { color: var(--bs-body-color);