Skip to content

Commit

Permalink
[DURACOM-195] bootstrap fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@davide-negretti
davide-negretti committed Nov 28, 2023
1 parent 9bbf4cb commit 6a96df4
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 248 deletions.
6 changes: 3 additions & 3 deletions src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<li class="nav-item">
<li>
<a class="sidebar-section-wrapper"
[ngClass]="{ disabled: isDisabled }"
[attr.aria-disabled]="isDisabled"
Expand All @@ -9,11 +9,11 @@
(keyup.enter)="navigate($event)"
href="javascript:void(0);"
>
<div class="nav-link sidebar-fixed-element-wrapper">
<div class="sidebar-fixed-element-wrapper">
<i class="fas fa-{{section.icon}} fa-fw"></i>
</div>
<div class="sidebar-collapsible-element-outer-wrapper">
<div class="nav-link sidebar-collapsible-element-inner-wrapper">
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
{{itemModel.text | translate}}
</div>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/app/admin/admin-sidebar/admin-sidebar.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<nav class="navbar navbar-dark p-0 vh-100 align-content-between"
<nav class="navbar navbar-dark p-0 vh-100"
id="admin-sidebar"
[ngClass]="{'expanded': sidebarOpen, 'collapsed': sidebarClosed, 'transitioning': sidebarTransitioning}"
[@slideSidebar]="{
Expand All @@ -18,8 +18,8 @@
<img id="admin-sidebar-logo" src="assets/images/dspace-logo-mini.svg" [alt]="('menu.header.image.logo') | translate">
</div>
<div class="sidebar-collapsible-element-outer-wrapper">
<div class="sidebar-collapsible-element-inner-wrapper">
<h4 class="navbar-text my-1">{{ 'menu.header.admin' | translate }}</h4>
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
<h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
</div>
</div>
</div>
Expand All @@ -28,7 +28,7 @@ <h4 class="navbar-text my-1">{{ 'menu.header.admin' | translate }}</h4>
<!-- ITEMS -->

<div class="sidebar-full-width-container" id="sidebar-top-level-items-container">
<ul class="navbar-nav" id="sidebar-top-level-items">
<ul class="sidebar-full-width-container" id="sidebar-top-level-items">
<ng-container *ngFor="let section of (sections | async)">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
Expand All @@ -39,7 +39,7 @@ <h4 class="navbar-text my-1">{{ 'menu.header.admin' | translate }}</h4>
<!-- TOGGLER -->

<div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container">
<a class="nav-item nav-link sidebar-section-wrapper sidebar-full-width-container"
<a class="sidebar-section-wrapper sidebar-full-width-container"
href="javascript:void(0);"
(click)="toggle($event)"
(keyup.space)="toggle($event)"
Expand All @@ -51,7 +51,7 @@ <h4 class="navbar-text my-1">{{ 'menu.header.admin' | translate }}</h4>
[title]="'menu.section.icon.unpin' | translate"></i>
</div>
<div class="sidebar-collapsible-element-outer-wrapper">
<div class="sidebar-collapsible-element-inner-wrapper nav-link">
<div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
{{ ((menuCollapsed | async) ? 'menu.section.pin' : 'menu.section.unpin' ) | translate }}
</div>
</div>
Expand Down
203 changes: 47 additions & 156 deletions src/app/admin/admin-sidebar/admin-sidebar.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

/* Sidebar hierarchy:
§ nav
§ .sidebar-flex-container
§ .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding)
§ .sidebar-section-wrapper
§ .sidebar-fixed-element-wrapper
§ .sidebar-collapsible-element-outer-wrapper
§ .sidebar-collapsible-element-inner-wrapper
§ .sidebar-full-width-container (any OPTIONAL full width element with no horizontal margin or padding - it can be nested)
§ .sidebar-section-wrapper
§ .sidebar-fixed-element-wrapper
§ .sidebar-collapsible-element-outer-wrapper
§ .sidebar-collapsible-element-inner-wrapper
§ .sidebar-item
*/

// Sidebar position
Expand Down Expand Up @@ -49,37 +49,51 @@
margin-right: 0 !important;
}

// This class must be applied to the innermost block element containing a section or subsection link
// (it can be applied together with `sidebar-collapsible-element-inner-wrapper`)
.sidebar-item {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

// These classes handle the collapsing behavior
.sidebar-section-wrapper {

display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;

// These elements have fixed width and determine the width of the collapsed sidebar
.sidebar-fixed-element-wrapper {
& > .sidebar-fixed-element-wrapper {
min-width: var(--ds-admin-sidebar-fixed-element-width);
flex: 1 1 auto; // Fill available space

// Align the icons
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.sidebar-collapsible-element-outer-wrapper {
& > .sidebar-collapsible-element-outer-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: flex-end; // make inner wrapper slide on the left when collapsing
max-width: calc(100% - var(--ds-admin-sidebar-fixed-element-width)); // fill available space
padding-left: var(--ds-dark-scrollbar-width); // fix issues with scrollbar
padding-left: var(--ds-dark-scrollbar-width); // leave room for scrollbar
overflow-x: hidden; // hide inner wrapper when sidebar is collapsed

// These elements have fixed width and slide on the left when the sidebar is collapsed
// Their content should fill all available space
.sidebar-collapsible-element-inner-wrapper {
& > .sidebar-collapsible-element-inner-wrapper {
min-width: calc(var(--ds-admin-sidebar-collapsible-element-width) - var(--ds-dark-scrollbar-width));
height: 100%;
.nav-item, .nav-link {
min-width: 100%;
}
padding-right: 16px;
padding-right: 16px !important;
}
}
}

}

}
Expand All @@ -90,20 +104,32 @@

background-color: var(--ds-admin-sidebar-bg);


::ng-deep {

color: white;

/* These classes are used in menu item components in order to style the navbar, and their properties should be
overridden when used inside the sidebar */
// TODO: remove these classes from menu item components and apply custom DSpace classes
.nav-item, .nav-link, .navbar-text {
all: unset;
background-color: darkblue;
}

a {
&, &:hover, &:focus {
.nav-item {
border: solid 2px red;
color: var(--ds-admin-sidebar-link-color) !important;
}
color: var(--ds-admin-sidebar-link-color);
text-decoration: none;

&:hover, &:focus {
color: green; // TODO
text-decoration: none;
}
}
}

div#sidebar-header-container {
background-color: var(--ds-admin-sidebar-header-bg);

.sidebar-fixed-element-wrapper {
background-color: var(--ds-admin-sidebar-header-bg);
}
Expand All @@ -115,142 +141,7 @@
}
}

//&.collapsed, &.transitioning {
// // Cover collapsible element
// ::ng-deep .sidebar-fixed-element-wrapper {
// z-index: var(--ds-admin-sidebar-fixed-element-z-index);
// background-color: var(--ds-admin-sidebar-bg);
// }
//}

::ng-deep {
.sidebar-fixed-element-wrapper {
// Align the icons
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

.sidebar-collapsible-element {
&-outer-wrapper {

}

&-inner-wrapper {

}
}


}


&.inactive ::ng-deep .sidebar-collapsible-element { // TODO
margin-left: calc(-1 * var(--ds-sidebar-items-width));
}

.navbar-nav {

//.admin-menu-header {
// background-color: var(--ds-admin-sidebar-header-bg);
//
// .sidebar-section {
// background-color: inherit;
// }
//
// .logo-wrapper {
// img {
// height: 20px;
// }
// }
//
// .section-header-text {
// line-height: 1.5;
// }
//
// .navbar-brand {
// margin-right: 0;
// }
//
//}
}


::ng-deep {
.navbar-nav {
//.sidebar-section {
// display: flex;
// align-content: stretch;
// background-color: var(--ds-admin-sidebar-bg);
// overflow-x: visible;
//
// .nav-item {
// padding-top: var(--bs-spacer);
// padding-bottom: var(--bs-spacer); //
// background-color: inherit;
//
// &:focus-visible {
// // since links fill the whole sidebar, we _inset_ the outline
// outline-offset: -4px;
//
// // replace padding with margins so it doesn't extend over the :focus-visible outline
// // → can't remove the padding altogether; the icon needs to fill out
// // the collapsed width of the sidebar for the slide animation to look decent.
// .shortcut-icon {
// padding-left: 0;
// padding-right: 0;
// margin-left: var(--ds-icon-padding);
// margin-right: var(--ds-icon-padding);
// }
//
// .logo-wrapper {
// margin-right: var(--bs-navbar-padding-x) !important;
// }
//
// .navbar-brand {
// padding-top: 0;
// padding-bottom: 0;
// margin-top: var(--bs-navbar-brand-padding-y);
// margin-bottom: var(--bs-navbar-brand-padding-y);
// }
// }
// }
//
// .shortcut-icon {
// background-color: inherit;
// padding-left: var(--ds-icon-padding);
// padding-right: var(--ds-icon-padding);
// z-index: var(--ds-icon-z-index);
// align-self: baseline;
// }
//
// .sidebar-collapsible {
// padding-left: 0;
// padding-right: var(--bs-spacer);
// width: var(--ds-sidebar-items-width);
// position: relative;
//
// .toggle {
// width: 100%;
// }
//
// ul {
// padding-top: var(--bs-spacer);
//
// li a {
// padding-left: var(--bs-spacer);
// }
// }
// }
//
// &.active > .sidebar-collapsible > .nav-link {
// color: var(--bs-navbar-dark-active-color);
// }
//}
}
}
// &.collapsed, &.transitioning, &.expanded { }

}

}
Loading

0 comments on commit 6a96df4

Please sign in to comment.